mirror of
https://github.com/Vikeo/LifeTrinket.git
synced 2025-11-17 00:08:01 +00:00
Viktor Rådberg
GitHub
@@ -30,7 +30,7 @@ const Container = styled.div<{ $rotation: Rotation }>`
|
|||||||
}}
|
}}
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const ExtraCountersGrid = styled.div<{ $rotation: Rotation }>`
|
export const ExtraCountersGrid = styled.div<{ $rotation: Rotation }>`
|
||||||
display: flex;
|
display: flex;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|||||||
@@ -1,7 +1,111 @@
|
|||||||
import { Button } from '@mui/material';
|
import { Button, Checkbox } from '@mui/material';
|
||||||
import styled, { css } from 'styled-components';
|
import styled, { css } from 'styled-components';
|
||||||
import { Player, Rotation } from '../../Types/Player';
|
import { Player, Rotation } from '../../Types/Player';
|
||||||
import Settings from './Settings';
|
import { theme } from '../../Data/theme';
|
||||||
|
import { useGlobalSettings } from '../../Hooks/useGlobalSettings';
|
||||||
|
import { usePlayers } from '../../Hooks/usePlayers';
|
||||||
|
import {
|
||||||
|
PartnerTax,
|
||||||
|
Poison,
|
||||||
|
Energy,
|
||||||
|
Experience,
|
||||||
|
Exit,
|
||||||
|
FullscreenOff,
|
||||||
|
FullscreenOn,
|
||||||
|
Cross,
|
||||||
|
ResetGame,
|
||||||
|
} from '../../Icons/generated';
|
||||||
|
import { useEffect, useRef } from 'react';
|
||||||
|
import { Spacer } from '../Misc/Spacer';
|
||||||
|
|
||||||
|
const SettingsContainer = styled.div<{
|
||||||
|
$rotation: Rotation;
|
||||||
|
}>`
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
${(props) => {
|
||||||
|
if (
|
||||||
|
props.$rotation === Rotation.SideFlipped ||
|
||||||
|
props.$rotation === Rotation.Side
|
||||||
|
) {
|
||||||
|
return css`
|
||||||
|
flex-direction: column-reverse;
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
${(props) => {
|
||||||
|
if (props.$rotation === Rotation.Side) {
|
||||||
|
return css`
|
||||||
|
rotate: ${props.$rotation - 180}deg;
|
||||||
|
`;
|
||||||
|
} else if (props.$rotation === Rotation.SideFlipped) {
|
||||||
|
return css`
|
||||||
|
rotate: ${props.$rotation - 180}deg;
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
`;
|
||||||
|
|
||||||
|
const BetterRowContainer = styled.div`
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
flex-grow: 1;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
justify-content: end;
|
||||||
|
align-items: stretch;
|
||||||
|
`;
|
||||||
|
|
||||||
|
const TogglesSection = styled.div`
|
||||||
|
display: flex;
|
||||||
|
position: relative;
|
||||||
|
flex-direction: row;
|
||||||
|
gap: 0.5rem;
|
||||||
|
justify-content: space-evenly;
|
||||||
|
`;
|
||||||
|
|
||||||
|
const ButtonsSections = styled.div`
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
gap: 1rem;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 3% 3%;
|
||||||
|
align-items: center;
|
||||||
|
`;
|
||||||
|
|
||||||
|
const ColorPicker = styled.input`
|
||||||
|
position: absolute;
|
||||||
|
top: 5%;
|
||||||
|
left: 5%;
|
||||||
|
height: 8vmax;
|
||||||
|
width: 8vmax;
|
||||||
|
|
||||||
|
border: none;
|
||||||
|
outline: none;
|
||||||
|
cursor: pointer;
|
||||||
|
background-color: transparent;
|
||||||
|
user-select: none;
|
||||||
|
color: #ffffff;
|
||||||
|
`;
|
||||||
|
|
||||||
|
const CheckboxContainer = styled.div<{ $rotation: Rotation }>`
|
||||||
|
${(props) => {
|
||||||
|
if (
|
||||||
|
props.$rotation === Rotation.SideFlipped ||
|
||||||
|
props.$rotation === Rotation.Side
|
||||||
|
) {
|
||||||
|
return css`
|
||||||
|
/* rotate: ${props.$rotation - 180}deg; */
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
`;
|
||||||
|
|
||||||
const PlayerMenuWrapper = styled.div<{
|
const PlayerMenuWrapper = styled.div<{
|
||||||
$rotation: Rotation;
|
$rotation: Rotation;
|
||||||
@@ -66,26 +170,303 @@ type PlayerMenuProps = {
|
|||||||
};
|
};
|
||||||
|
|
||||||
const PlayerMenu = ({ player, setShowPlayerMenu }: PlayerMenuProps) => {
|
const PlayerMenu = ({ player, setShowPlayerMenu }: PlayerMenuProps) => {
|
||||||
|
const settingsContainerRef = useRef<HTMLDivElement | null>(null);
|
||||||
|
const dialogRef = useRef<HTMLDialogElement | null>(null);
|
||||||
|
|
||||||
|
const isSide =
|
||||||
|
player.settings.rotation === Rotation.Side ||
|
||||||
|
player.settings.rotation === Rotation.SideFlipped;
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (!settingsContainerRef.current) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (isSide) {
|
||||||
|
//set height to 100% of the width of the parent
|
||||||
|
settingsContainerRef.current.style.height = `${settingsContainerRef.current.parentElement?.clientWidth}px`;
|
||||||
|
|
||||||
|
//set width to 100% of the height of the parent
|
||||||
|
settingsContainerRef.current.style.width = `${settingsContainerRef.current.parentElement?.clientHeight}px`;
|
||||||
|
}
|
||||||
|
|
||||||
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||||
|
}, [settingsContainerRef]);
|
||||||
|
|
||||||
const handleOnClick = () => {
|
const handleOnClick = () => {
|
||||||
setShowPlayerMenu(false);
|
setShowPlayerMenu(false);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const { fullscreen, wakeLock, goToStart } = useGlobalSettings();
|
||||||
|
const { updatePlayer, resetCurrentGame } = usePlayers();
|
||||||
|
|
||||||
|
const handleColorChange = (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||||
|
const updatedPlayer = { ...player, color: event.target.value };
|
||||||
|
updatePlayer(updatedPlayer);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleSettingsChange = (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||||
|
const { name, checked } = event.target;
|
||||||
|
const updatedSettings = { ...player.settings, [name]: checked };
|
||||||
|
const updatedPlayer = { ...player, settings: updatedSettings };
|
||||||
|
updatePlayer(updatedPlayer);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleResetGame = () => {
|
||||||
|
resetCurrentGame();
|
||||||
|
setShowPlayerMenu(false);
|
||||||
|
};
|
||||||
|
|
||||||
|
const toggleFullscreen = () => {
|
||||||
|
if (fullscreen.isFullscreen) {
|
||||||
|
fullscreen.disableFullscreen();
|
||||||
|
} else {
|
||||||
|
fullscreen.enableFullscreen();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const buttonFontSize = isSide ? '1.5vmax' : '3vmin';
|
||||||
|
const iconSize = isSide ? '6vmin' : '3vmax';
|
||||||
|
const extraCountersSize = isSide ? '8vmin' : '4vmax';
|
||||||
|
const closeButtonSize = isSide ? '6vmin' : '3vmax';
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<PlayerMenuWrapper $rotation={player.settings.rotation}>
|
<>
|
||||||
<CloseButton $rotation={player.settings.rotation}>
|
<PlayerMenuWrapper $rotation={player.settings.rotation}>
|
||||||
<Button
|
<CloseButton $rotation={player.settings.rotation}>
|
||||||
style={{
|
<Button
|
||||||
padding: '0 8px',
|
variant="text"
|
||||||
minWidth: '0',
|
onClick={handleOnClick}
|
||||||
}}
|
style={{
|
||||||
variant="outlined"
|
margin: 0,
|
||||||
onClick={handleOnClick}
|
padding: 0,
|
||||||
|
height: closeButtonSize,
|
||||||
|
width: closeButtonSize,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Cross size={closeButtonSize} />
|
||||||
|
</Button>
|
||||||
|
</CloseButton>
|
||||||
|
<SettingsContainer
|
||||||
|
$rotation={player.settings.rotation}
|
||||||
|
ref={settingsContainerRef}
|
||||||
>
|
>
|
||||||
X
|
<ColorPicker
|
||||||
</Button>
|
type="color"
|
||||||
</CloseButton>
|
value={player.color}
|
||||||
<Settings player={player} setShowPlayerMenu={setShowPlayerMenu} />
|
onChange={handleColorChange}
|
||||||
</PlayerMenuWrapper>
|
role="button"
|
||||||
|
aria-label="Color picker"
|
||||||
|
/>
|
||||||
|
<BetterRowContainer>
|
||||||
|
<TogglesSection>
|
||||||
|
{player.settings.useCommanderDamage && (
|
||||||
|
<CheckboxContainer $rotation={player.settings.rotation}>
|
||||||
|
<Checkbox
|
||||||
|
name="usePartner"
|
||||||
|
checked={player.settings.usePartner}
|
||||||
|
icon={
|
||||||
|
<PartnerTax
|
||||||
|
size={extraCountersSize}
|
||||||
|
color="black"
|
||||||
|
stroke="white"
|
||||||
|
strokeWidth="30"
|
||||||
|
/>
|
||||||
|
}
|
||||||
|
checkedIcon={
|
||||||
|
<PartnerTax
|
||||||
|
size={extraCountersSize}
|
||||||
|
color={player.color}
|
||||||
|
stroke="white"
|
||||||
|
strokeWidth="30"
|
||||||
|
/>
|
||||||
|
}
|
||||||
|
onChange={handleSettingsChange}
|
||||||
|
role="checkbox"
|
||||||
|
aria-checked={player.settings.usePartner}
|
||||||
|
aria-label="Partner"
|
||||||
|
/>
|
||||||
|
</CheckboxContainer>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<CheckboxContainer $rotation={player.settings.rotation}>
|
||||||
|
<Checkbox
|
||||||
|
name="usePoison"
|
||||||
|
checked={player.settings.usePoison}
|
||||||
|
icon={
|
||||||
|
<Poison
|
||||||
|
size={extraCountersSize}
|
||||||
|
color="black"
|
||||||
|
stroke="white"
|
||||||
|
strokeWidth="30"
|
||||||
|
/>
|
||||||
|
}
|
||||||
|
checkedIcon={
|
||||||
|
<Poison
|
||||||
|
size={extraCountersSize}
|
||||||
|
color={player.color}
|
||||||
|
stroke="white"
|
||||||
|
strokeWidth="30"
|
||||||
|
/>
|
||||||
|
}
|
||||||
|
onChange={handleSettingsChange}
|
||||||
|
role="checkbox"
|
||||||
|
aria-checked={player.settings.usePoison}
|
||||||
|
aria-label="Poison"
|
||||||
|
/>
|
||||||
|
</CheckboxContainer>
|
||||||
|
|
||||||
|
<CheckboxContainer $rotation={player.settings.rotation}>
|
||||||
|
<Checkbox
|
||||||
|
name="useEnergy"
|
||||||
|
checked={player.settings.useEnergy}
|
||||||
|
icon={
|
||||||
|
<Energy
|
||||||
|
size={extraCountersSize}
|
||||||
|
color="black"
|
||||||
|
stroke="white"
|
||||||
|
strokeWidth="15"
|
||||||
|
/>
|
||||||
|
}
|
||||||
|
checkedIcon={
|
||||||
|
<Energy
|
||||||
|
size={extraCountersSize}
|
||||||
|
color={player.color}
|
||||||
|
stroke="white"
|
||||||
|
strokeWidth="15"
|
||||||
|
/>
|
||||||
|
}
|
||||||
|
onChange={handleSettingsChange}
|
||||||
|
role="checkbox"
|
||||||
|
aria-checked={player.settings.useEnergy}
|
||||||
|
aria-label="Energy"
|
||||||
|
/>
|
||||||
|
</CheckboxContainer>
|
||||||
|
|
||||||
|
<CheckboxContainer $rotation={player.settings.rotation}>
|
||||||
|
<Checkbox
|
||||||
|
name="useExperience"
|
||||||
|
checked={player.settings.useExperience}
|
||||||
|
icon={
|
||||||
|
<Experience
|
||||||
|
size={extraCountersSize}
|
||||||
|
color="black"
|
||||||
|
stroke="white"
|
||||||
|
strokeWidth="15"
|
||||||
|
/>
|
||||||
|
}
|
||||||
|
checkedIcon={
|
||||||
|
<Experience
|
||||||
|
size={extraCountersSize}
|
||||||
|
color={player.color}
|
||||||
|
stroke="white"
|
||||||
|
strokeWidth="15"
|
||||||
|
/>
|
||||||
|
}
|
||||||
|
onChange={handleSettingsChange}
|
||||||
|
role="checkbox"
|
||||||
|
aria-checked={player.settings.useExperience}
|
||||||
|
aria-label="Experience"
|
||||||
|
/>
|
||||||
|
</CheckboxContainer>
|
||||||
|
</TogglesSection>
|
||||||
|
<Spacer height="1rem" />
|
||||||
|
<ButtonsSections>
|
||||||
|
<Button
|
||||||
|
variant="text"
|
||||||
|
style={{
|
||||||
|
cursor: 'pointer',
|
||||||
|
userSelect: 'none',
|
||||||
|
}}
|
||||||
|
onClick={goToStart}
|
||||||
|
aria-label="Back to start"
|
||||||
|
>
|
||||||
|
<Exit size={iconSize} style={{ rotate: '180deg' }} />
|
||||||
|
</Button>
|
||||||
|
<CheckboxContainer $rotation={player.settings.rotation}>
|
||||||
|
<Checkbox
|
||||||
|
name="fullscreen"
|
||||||
|
checked={document.fullscreenElement ? true : false}
|
||||||
|
icon={
|
||||||
|
<FullscreenOff
|
||||||
|
size={iconSize}
|
||||||
|
color={theme.palette.primary.main}
|
||||||
|
/>
|
||||||
|
}
|
||||||
|
checkedIcon={<FullscreenOn size={iconSize} />}
|
||||||
|
onChange={toggleFullscreen}
|
||||||
|
role="checkbox"
|
||||||
|
aria-checked={document.fullscreenElement ? true : false}
|
||||||
|
aria-label="Fullscreen"
|
||||||
|
/>
|
||||||
|
</CheckboxContainer>
|
||||||
|
|
||||||
|
<Button
|
||||||
|
variant={wakeLock.active ? 'contained' : 'outlined'}
|
||||||
|
style={{
|
||||||
|
cursor: 'pointer',
|
||||||
|
userSelect: 'none',
|
||||||
|
fontSize: buttonFontSize,
|
||||||
|
padding: '0 4px 0 4px',
|
||||||
|
}}
|
||||||
|
onClick={wakeLock.toggleWakeLock}
|
||||||
|
role="checkbox"
|
||||||
|
aria-checked={wakeLock.active}
|
||||||
|
aria-label="Keep awake"
|
||||||
|
>
|
||||||
|
Keep Awake
|
||||||
|
</Button>
|
||||||
|
|
||||||
|
<Button
|
||||||
|
style={{
|
||||||
|
cursor: 'pointer',
|
||||||
|
userSelect: 'none',
|
||||||
|
fontSize: buttonFontSize,
|
||||||
|
padding: '4px',
|
||||||
|
}}
|
||||||
|
onClick={() => dialogRef.current?.show()}
|
||||||
|
role="checkbox"
|
||||||
|
aria-checked={wakeLock.active}
|
||||||
|
aria-label="Reset Game"
|
||||||
|
>
|
||||||
|
<ResetGame size={iconSize} />
|
||||||
|
</Button>
|
||||||
|
</ButtonsSections>
|
||||||
|
</BetterRowContainer>
|
||||||
|
<dialog
|
||||||
|
ref={dialogRef}
|
||||||
|
style={{
|
||||||
|
zIndex: 9999,
|
||||||
|
background: theme.palette.background.default,
|
||||||
|
color: theme.palette.text.primary,
|
||||||
|
borderRadius: '1rem',
|
||||||
|
border: 'none',
|
||||||
|
position: 'absolute',
|
||||||
|
top: '10%',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<h1>Reset Game?</h1>
|
||||||
|
<div style={{ display: 'flex', justifyContent: 'space-evenly' }}>
|
||||||
|
<Button
|
||||||
|
variant="contained"
|
||||||
|
onClick={() => dialogRef.current?.close()}
|
||||||
|
>
|
||||||
|
No
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="contained"
|
||||||
|
onClick={() => {
|
||||||
|
handleResetGame();
|
||||||
|
dialogRef.current?.close();
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Yes
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</dialog>
|
||||||
|
</SettingsContainer>
|
||||||
|
</PlayerMenuWrapper>
|
||||||
|
</>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
@@ -1,353 +0,0 @@
|
|||||||
import { Button, Checkbox } from '@mui/material';
|
|
||||||
import styled, { css } from 'styled-components';
|
|
||||||
import { theme } from '../../Data/theme';
|
|
||||||
import { useGlobalSettings } from '../../Hooks/useGlobalSettings';
|
|
||||||
import {
|
|
||||||
Energy,
|
|
||||||
Exit,
|
|
||||||
Experience,
|
|
||||||
FullscreenOff,
|
|
||||||
FullscreenOn,
|
|
||||||
PartnerTax,
|
|
||||||
Poison,
|
|
||||||
} from '../../Icons/generated';
|
|
||||||
import { Player, Rotation } from '../../Types/Player';
|
|
||||||
import { usePlayers } from '../../Hooks/usePlayers';
|
|
||||||
|
|
||||||
const SettingsContainer = styled.div<{
|
|
||||||
$rotation: Rotation;
|
|
||||||
}>`
|
|
||||||
display: flex;
|
|
||||||
position: relative;
|
|
||||||
flex-direction: row;
|
|
||||||
justify-content: space-evenly;
|
|
||||||
align-items: center;
|
|
||||||
height: 100%;
|
|
||||||
width: 80%;
|
|
||||||
${(props) => {
|
|
||||||
if (
|
|
||||||
props.$rotation === Rotation.SideFlipped ||
|
|
||||||
props.$rotation === Rotation.Side
|
|
||||||
) {
|
|
||||||
return css`
|
|
||||||
flex-direction: column-reverse;
|
|
||||||
height: 100%;
|
|
||||||
width: 100%;
|
|
||||||
`;
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
`;
|
|
||||||
|
|
||||||
const TogglesSection = styled.div<{ $rotation: Rotation }>`
|
|
||||||
display: flex;
|
|
||||||
position: absolute;
|
|
||||||
flex-direction: row;
|
|
||||||
justify-content: space-evenly;
|
|
||||||
gap: 0.5rem;
|
|
||||||
|
|
||||||
${(props) => {
|
|
||||||
if (
|
|
||||||
props.$rotation === Rotation.SideFlipped ||
|
|
||||||
props.$rotation === Rotation.Side
|
|
||||||
) {
|
|
||||||
return css`
|
|
||||||
flex-direction: column-reverse;
|
|
||||||
`;
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
`;
|
|
||||||
|
|
||||||
const ButtonsSections = styled.div<{ $rotation: Rotation }>`
|
|
||||||
position: absolute;
|
|
||||||
display: flex;
|
|
||||||
gap: 1rem;
|
|
||||||
bottom: 16px;
|
|
||||||
|
|
||||||
${(props) => {
|
|
||||||
if (props.$rotation === Rotation.Side) {
|
|
||||||
return css`
|
|
||||||
bottom: auto;
|
|
||||||
right: -6rem;
|
|
||||||
rotate: ${props.$rotation - 180}deg;
|
|
||||||
`;
|
|
||||||
} else if (props.$rotation === Rotation.SideFlipped) {
|
|
||||||
return css`
|
|
||||||
bottom: auto;
|
|
||||||
left: -6rem;
|
|
||||||
rotate: ${props.$rotation - 180}deg;
|
|
||||||
`;
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
`;
|
|
||||||
|
|
||||||
const ColorPicker = styled.input<{
|
|
||||||
$rotation: Rotation;
|
|
||||||
}>`
|
|
||||||
position: absolute;
|
|
||||||
top: 5%;
|
|
||||||
left: 5%;
|
|
||||||
height: 8vmax;
|
|
||||||
width: 8vmax;
|
|
||||||
|
|
||||||
border: none;
|
|
||||||
outline: none;
|
|
||||||
cursor: pointer;
|
|
||||||
background-color: transparent;
|
|
||||||
user-select: none;
|
|
||||||
color: #ffffff;
|
|
||||||
|
|
||||||
${(props) => {
|
|
||||||
if (props.$rotation === Rotation.Side) {
|
|
||||||
return css`
|
|
||||||
rotate: ${props.$rotation - 180}deg;
|
|
||||||
bottom: 5%;
|
|
||||||
top: auto;
|
|
||||||
`;
|
|
||||||
} else if (props.$rotation === Rotation.SideFlipped) {
|
|
||||||
return css`
|
|
||||||
rotate: ${props.$rotation - 180}deg;
|
|
||||||
top: 5%;
|
|
||||||
left: auto;
|
|
||||||
right: 5%;
|
|
||||||
`;
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
`;
|
|
||||||
|
|
||||||
const CheckboxContainer = styled.div<{ $rotation: Rotation }>`
|
|
||||||
${(props) => {
|
|
||||||
if (
|
|
||||||
props.$rotation === Rotation.SideFlipped ||
|
|
||||||
props.$rotation === Rotation.Side
|
|
||||||
) {
|
|
||||||
return css`
|
|
||||||
rotate: ${props.$rotation - 180}deg;
|
|
||||||
`;
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
`;
|
|
||||||
|
|
||||||
type SettingsProps = {
|
|
||||||
player: Player;
|
|
||||||
setShowPlayerMenu: (showPlayerMenu: boolean) => void;
|
|
||||||
};
|
|
||||||
|
|
||||||
const Settings = ({ player, setShowPlayerMenu }: SettingsProps) => {
|
|
||||||
const { fullscreen, wakeLock, goToStart } = useGlobalSettings();
|
|
||||||
const { updatePlayer, resetCurrentGame } = usePlayers();
|
|
||||||
const isSide =
|
|
||||||
player.settings.rotation === Rotation.Side ||
|
|
||||||
player.settings.rotation === Rotation.SideFlipped;
|
|
||||||
|
|
||||||
const handleColorChange = (event: React.ChangeEvent<HTMLInputElement>) => {
|
|
||||||
const updatedPlayer = { ...player, color: event.target.value };
|
|
||||||
updatePlayer(updatedPlayer);
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleSettingsChange = (event: React.ChangeEvent<HTMLInputElement>) => {
|
|
||||||
const { name, checked } = event.target;
|
|
||||||
const updatedSettings = { ...player.settings, [name]: checked };
|
|
||||||
const updatedPlayer = { ...player, settings: updatedSettings };
|
|
||||||
updatePlayer(updatedPlayer);
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleResetGame = () => {
|
|
||||||
resetCurrentGame();
|
|
||||||
setShowPlayerMenu(false);
|
|
||||||
};
|
|
||||||
|
|
||||||
const toggleFullscreen = () => {
|
|
||||||
if (fullscreen.isFullscreen) {
|
|
||||||
fullscreen.disableFullscreen();
|
|
||||||
} else {
|
|
||||||
fullscreen.enableFullscreen();
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const buttonFontSize = isSide ? '1.5vmax' : '3vmin';
|
|
||||||
|
|
||||||
return (
|
|
||||||
<SettingsContainer $rotation={player.settings.rotation}>
|
|
||||||
<ColorPicker
|
|
||||||
$rotation={player.settings.rotation}
|
|
||||||
type="color"
|
|
||||||
value={player.color}
|
|
||||||
onChange={handleColorChange}
|
|
||||||
role="button"
|
|
||||||
aria-label="Color picker"
|
|
||||||
/>
|
|
||||||
<TogglesSection $rotation={player.settings.rotation}>
|
|
||||||
{player.settings.useCommanderDamage && (
|
|
||||||
<CheckboxContainer $rotation={player.settings.rotation}>
|
|
||||||
<Checkbox
|
|
||||||
name="usePartner"
|
|
||||||
checked={player.settings.usePartner}
|
|
||||||
icon={
|
|
||||||
<PartnerTax
|
|
||||||
size="6vmax"
|
|
||||||
color="black"
|
|
||||||
stroke="white"
|
|
||||||
strokeWidth="30"
|
|
||||||
/>
|
|
||||||
}
|
|
||||||
checkedIcon={
|
|
||||||
<PartnerTax
|
|
||||||
size="6vmax"
|
|
||||||
color={player.color}
|
|
||||||
stroke="white"
|
|
||||||
strokeWidth="30"
|
|
||||||
/>
|
|
||||||
}
|
|
||||||
onChange={handleSettingsChange}
|
|
||||||
role="checkbox"
|
|
||||||
aria-checked={player.settings.usePartner}
|
|
||||||
aria-label="Partner"
|
|
||||||
/>
|
|
||||||
</CheckboxContainer>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<CheckboxContainer $rotation={player.settings.rotation}>
|
|
||||||
<Checkbox
|
|
||||||
name="usePoison"
|
|
||||||
checked={player.settings.usePoison}
|
|
||||||
icon={
|
|
||||||
<Poison
|
|
||||||
size="6vmax"
|
|
||||||
color="black"
|
|
||||||
stroke="white"
|
|
||||||
strokeWidth="30"
|
|
||||||
/>
|
|
||||||
}
|
|
||||||
checkedIcon={
|
|
||||||
<Poison
|
|
||||||
size="6vmax"
|
|
||||||
color={player.color}
|
|
||||||
stroke="white"
|
|
||||||
strokeWidth="30"
|
|
||||||
/>
|
|
||||||
}
|
|
||||||
onChange={handleSettingsChange}
|
|
||||||
role="checkbox"
|
|
||||||
aria-checked={player.settings.usePoison}
|
|
||||||
aria-label="Poison"
|
|
||||||
/>
|
|
||||||
</CheckboxContainer>
|
|
||||||
|
|
||||||
<CheckboxContainer $rotation={player.settings.rotation}>
|
|
||||||
<Checkbox
|
|
||||||
name="useEnergy"
|
|
||||||
checked={player.settings.useEnergy}
|
|
||||||
icon={
|
|
||||||
<Energy
|
|
||||||
size="6vmax"
|
|
||||||
color="black"
|
|
||||||
stroke="white"
|
|
||||||
strokeWidth="15"
|
|
||||||
/>
|
|
||||||
}
|
|
||||||
checkedIcon={
|
|
||||||
<Energy
|
|
||||||
size="6vmax"
|
|
||||||
color={player.color}
|
|
||||||
stroke="white"
|
|
||||||
strokeWidth="15"
|
|
||||||
/>
|
|
||||||
}
|
|
||||||
onChange={handleSettingsChange}
|
|
||||||
role="checkbox"
|
|
||||||
aria-checked={player.settings.useEnergy}
|
|
||||||
aria-label="Energy"
|
|
||||||
/>
|
|
||||||
</CheckboxContainer>
|
|
||||||
|
|
||||||
<CheckboxContainer $rotation={player.settings.rotation}>
|
|
||||||
<Checkbox
|
|
||||||
name="useExperience"
|
|
||||||
checked={player.settings.useExperience}
|
|
||||||
icon={
|
|
||||||
<Experience
|
|
||||||
size="6vmax"
|
|
||||||
color="black"
|
|
||||||
stroke="white"
|
|
||||||
strokeWidth="15"
|
|
||||||
/>
|
|
||||||
}
|
|
||||||
checkedIcon={
|
|
||||||
<Experience
|
|
||||||
size="6vmax"
|
|
||||||
color={player.color}
|
|
||||||
stroke="white"
|
|
||||||
strokeWidth="15"
|
|
||||||
/>
|
|
||||||
}
|
|
||||||
onChange={handleSettingsChange}
|
|
||||||
role="checkbox"
|
|
||||||
aria-checked={player.settings.useExperience}
|
|
||||||
aria-label="Experience"
|
|
||||||
/>
|
|
||||||
</CheckboxContainer>
|
|
||||||
</TogglesSection>
|
|
||||||
<ButtonsSections $rotation={player.settings.rotation}>
|
|
||||||
<Button
|
|
||||||
variant="text"
|
|
||||||
style={{
|
|
||||||
cursor: 'pointer',
|
|
||||||
userSelect: 'none',
|
|
||||||
}}
|
|
||||||
onClick={goToStart}
|
|
||||||
aria-label="Back to start"
|
|
||||||
>
|
|
||||||
<Exit size="4vmax" style={{ rotate: '180deg' }} />
|
|
||||||
</Button>
|
|
||||||
<CheckboxContainer $rotation={player.settings.rotation}>
|
|
||||||
<Checkbox
|
|
||||||
name="fullscreen"
|
|
||||||
checked={document.fullscreenElement ? true : false}
|
|
||||||
icon={
|
|
||||||
<FullscreenOff size="4vmax" color={theme.palette.primary.main} />
|
|
||||||
}
|
|
||||||
checkedIcon={<FullscreenOn size="4vmax" />}
|
|
||||||
onChange={toggleFullscreen}
|
|
||||||
role="checkbox"
|
|
||||||
aria-checked={document.fullscreenElement ? true : false}
|
|
||||||
aria-label="Fullscreen"
|
|
||||||
/>
|
|
||||||
</CheckboxContainer>
|
|
||||||
|
|
||||||
<Button
|
|
||||||
variant={wakeLock.active ? 'contained' : 'outlined'}
|
|
||||||
style={{
|
|
||||||
cursor: 'pointer',
|
|
||||||
userSelect: 'none',
|
|
||||||
fontSize: buttonFontSize,
|
|
||||||
padding: '0 4px 0 4px',
|
|
||||||
}}
|
|
||||||
onClick={wakeLock.toggleWakeLock}
|
|
||||||
role="checkbox"
|
|
||||||
aria-checked={wakeLock.active}
|
|
||||||
aria-label="Keep awake"
|
|
||||||
>
|
|
||||||
Keep Awake
|
|
||||||
</Button>
|
|
||||||
|
|
||||||
<Button
|
|
||||||
variant="contained"
|
|
||||||
style={{
|
|
||||||
cursor: 'pointer',
|
|
||||||
userSelect: 'none',
|
|
||||||
fontSize: buttonFontSize,
|
|
||||||
padding: '0 4px 0 4px',
|
|
||||||
}}
|
|
||||||
onClick={handleResetGame}
|
|
||||||
role="checkbox"
|
|
||||||
aria-checked={wakeLock.active}
|
|
||||||
aria-label="Reset Game"
|
|
||||||
>
|
|
||||||
Reset Game
|
|
||||||
</Button>
|
|
||||||
</ButtonsSections>
|
|
||||||
</SettingsContainer>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default Settings;
|
|
||||||
33
src/Icons/generated/Cross.tsx
Normal file
33
src/Icons/generated/Cross.tsx
Normal file
@@ -0,0 +1,33 @@
|
|||||||
|
import PropTypes from 'prop-types';
|
||||||
|
import { SVGProps } from 'react';
|
||||||
|
interface SVGRProps {
|
||||||
|
title?: string;
|
||||||
|
titleId?: string;
|
||||||
|
size?: string;
|
||||||
|
}
|
||||||
|
const Cross = ({
|
||||||
|
title,
|
||||||
|
titleId,
|
||||||
|
...props
|
||||||
|
}: SVGProps<SVGSVGElement> & SVGRProps) => {
|
||||||
|
return (
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width={props.size || 16}
|
||||||
|
height={props.size || 16}
|
||||||
|
viewBox="0 0 524 524"
|
||||||
|
aria-labelledby={titleId}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
{title ? <title id={titleId}>{title}</title> : null}
|
||||||
|
<path
|
||||||
|
fill="currentColor"
|
||||||
|
d="M85.8 34.4c-5.3 1.9-9.2 5.3-30 26.3C35.9 80.8 33 84.8 33 93c0 2.5.9 6.4 1.9 8.6 1.2 2.7 27.7 32.1 74.5 82.7 39.9 43.3 72.6 79.1 72.6 79.7 0 .6-32.3 35.2-71.7 77-48.5 51.3-72.7 77.7-74.6 81.1-3.4 6.4-3.5 11.7-.3 18.4 3.3 6.8 42 45.5 48.6 48.4 6.4 2.9 12.7 2.7 18.8-.7 3.3-1.7 31.6-27.6 81.3-74.5 42-39.4 76.7-71.6 77.1-71.5.4.2 35.5 32.5 77.9 71.8 42.4 39.3 79.2 72.7 81.8 74.2 3.2 1.9 6 2.8 9.1 2.8 10.1 0 10.9-.6 34.9-24.3 14.2-14.1 23-23.7 24.2-26.2 2.4-5.1 2.4-12.8 0-18.1-1.2-2.6-27.1-30.8-74.5-81.2-40-42.5-72.6-77.6-72.4-78.1.2-.4 32.5-34.7 71.8-76.1 39.3-41.4 72.5-76.7 73.8-78.4 4.5-6.3 4.4-17.9-.1-24.2-5.1-7.2-43.3-46.7-46.9-48.5-2.1-1.1-5.8-2.2-8.2-2.5-9.6-1.4-5.3-5.2-158.3 138.2L262.2 183l-78.4-73.1c-49.6-46.5-79.8-73.9-82.3-75-4.7-2.2-10.5-2.3-15.7-.5z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
Cross.propTypes = {
|
||||||
|
title: PropTypes.string,
|
||||||
|
};
|
||||||
|
export default Cross;
|
||||||
33
src/Icons/generated/ResetGame.tsx
Normal file
33
src/Icons/generated/ResetGame.tsx
Normal file
@@ -0,0 +1,33 @@
|
|||||||
|
import PropTypes from 'prop-types';
|
||||||
|
import { SVGProps } from 'react';
|
||||||
|
interface SVGRProps {
|
||||||
|
title?: string;
|
||||||
|
titleId?: string;
|
||||||
|
size?: string;
|
||||||
|
}
|
||||||
|
const ResetGame = ({
|
||||||
|
title,
|
||||||
|
titleId,
|
||||||
|
...props
|
||||||
|
}: SVGProps<SVGSVGElement> & SVGRProps) => {
|
||||||
|
return (
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width={props.size || 16}
|
||||||
|
height={props.size || 16}
|
||||||
|
viewBox="0 0 524 524"
|
||||||
|
aria-labelledby={titleId}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
{title ? <title id={titleId}>{title}</title> : null}
|
||||||
|
<path
|
||||||
|
fill="currentColor"
|
||||||
|
d="M129.3 50.7C105.7 81.6 95 95.8 82.6 113c-14.3 19.7-16.7 25.2-14.6 33.2 2.5 9.4 9 14.2 21.3 15.8 8.2 1.1 116.4 3.7 117.2 2.8.3-.3-3.3-8.8-8-18.8s-8.8-19.3-9.1-20.5c-.5-2.1-.1-2.3 8.3-3.4 4.9-.6 20.3-1.6 34.2-2.2 65.4-2.7 102.7 6.4 133.2 32.4 31.4 26.8 48.8 75.9 44.9 126.8-6.7 87.6-61.2 133.4-155.3 130.6-45.4-1.3-78.1-13.8-103.7-39.6-23.5-23.8-39-60.5-41.9-99.4-.9-12-2-15.4-6.7-20-5.2-5.2-7.9-5.7-29.3-5.6-24 .1-27.9 1.2-32.1 9.5-1.6 3-2 5.9-2 13.9 0 35.9 12.4 76.8 32.8 108 34.1 52.5 88.1 87.3 152.2 98.2 16.3 2.8 57.2 2.5 73.5-.5 46.1-8.4 84.5-28.3 116.4-60.3 42.5-42.7 65-104 60.3-164.1-4.2-52.8-25-98.7-61.2-134.8-38.8-38.8-87.2-59.7-145-62.6-24.6-1.2-73.1 2.8-99.1 8.2-2.5.5-2.9-.2-10.9-17.1-4.6-9.6-8.7-17.5-9.1-17.5-.3 0-9.1 11.1-19.6 24.7z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
ResetGame.propTypes = {
|
||||||
|
title: PropTypes.string,
|
||||||
|
};
|
||||||
|
export default ResetGame;
|
||||||
@@ -1,5 +1,6 @@
|
|||||||
export { default as Cog } from './Cog';
|
export { default as Cog } from './Cog';
|
||||||
export { default as CommanderTax } from './CommanderTax';
|
export { default as CommanderTax } from './CommanderTax';
|
||||||
|
export { default as Cross } from './Cross';
|
||||||
export { default as Energy } from './Energy';
|
export { default as Energy } from './Energy';
|
||||||
export { default as Exit } from './Exit';
|
export { default as Exit } from './Exit';
|
||||||
export { default as Experience } from './Experience';
|
export { default as Experience } from './Experience';
|
||||||
@@ -10,4 +11,5 @@ export { default as LittleGuy } from './LittleGuy';
|
|||||||
export { default as Logo } from './Logo';
|
export { default as Logo } from './Logo';
|
||||||
export { default as PartnerTax } from './PartnerTax';
|
export { default as PartnerTax } from './PartnerTax';
|
||||||
export { default as Poison } from './Poison';
|
export { default as Poison } from './Poison';
|
||||||
|
export { default as ResetGame } from './ResetGame';
|
||||||
export { default as Skull } from './Skull';
|
export { default as Skull } from './Skull';
|
||||||
|
|||||||
21
src/Icons/svgs/Cross.svg
Normal file
21
src/Icons/svgs/Cross.svg
Normal file
@@ -0,0 +1,21 @@
|
|||||||
|
<?xml version="1.0" standalone="no"?>
|
||||||
|
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
|
||||||
|
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
|
||||||
|
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width="524.000000pt" height="524.000000pt" viewBox="0 0 524.000000 524.000000"
|
||||||
|
preserveAspectRatio="xMidYMid meet">
|
||||||
|
|
||||||
|
<g transform="translate(0.000000,524.000000) scale(0.100000,-0.100000)"
|
||||||
|
fill="currentColor" stroke="none">
|
||||||
|
<path d="M858 4896 c-53 -19 -92 -53 -300 -263 -199 -201 -228 -241 -228 -323
|
||||||
|
0 -25 9 -64 19 -86 12 -27 277 -321 745 -827 399 -433 726 -791 726 -797 0 -6
|
||||||
|
-323 -352 -717 -770 -485 -513 -727 -777 -746 -811 -34 -64 -35 -117 -3 -184
|
||||||
|
33 -68 420 -455 486 -484 64 -29 127 -27 188 7 33 17 316 276 813 745 420 394
|
||||||
|
767 716 771 715 4 -2 355 -325 779 -718 424 -393 792 -727 818 -742 32 -19 60
|
||||||
|
-28 91 -28 101 0 109 6 349 243 142 141 230 237 242 262 24 51 24 128 0 181
|
||||||
|
-12 26 -271 308 -745 812 -400 425 -726 776 -724 781 2 4 325 347 718 761 393
|
||||||
|
414 725 767 738 784 45 63 44 179 -1 242 -51 72 -433 467 -469 485 -21 11 -58
|
||||||
|
22 -82 25 -96 14 -53 52 -1583 -1382 l-121 -114 -784 731 c-496 465 -798 739
|
||||||
|
-823 750 -47 22 -105 23 -157 5z"/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.1 KiB |
21
src/Icons/svgs/ResetGame.svg
Normal file
21
src/Icons/svgs/ResetGame.svg
Normal file
@@ -0,0 +1,21 @@
|
|||||||
|
<?xml version="1.0" standalone="no"?>
|
||||||
|
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
|
||||||
|
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
|
||||||
|
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width="524.000000pt" height="524.000000pt" viewBox="0 0 524.000000 524.000000"
|
||||||
|
preserveAspectRatio="xMidYMid meet">
|
||||||
|
|
||||||
|
<g transform="translate(0.000000,524.000000) scale(0.100000,-0.100000)"
|
||||||
|
fill="currentColor" stroke="none">
|
||||||
|
<path d="M1293 4733 c-236 -309 -343 -451 -467 -623 -143 -197 -167 -252 -146
|
||||||
|
-332 25 -94 90 -142 213 -158 82 -11 1164 -37 1172 -28 3 3 -33 88 -80 188
|
||||||
|
-47 100 -88 193 -91 205 -5 21 -1 23 83 34 49 6 203 16 342 22 654 27 1027
|
||||||
|
-64 1332 -324 314 -268 488 -759 449 -1268 -67 -876 -612 -1334 -1553 -1306
|
||||||
|
-454 13 -781 138 -1037 396 -235 238 -390 605 -419 994 -9 120 -20 154 -67
|
||||||
|
200 -52 52 -79 57 -293 56 -240 -1 -279 -12 -321 -95 -16 -30 -20 -59 -20
|
||||||
|
-139 0 -359 124 -768 328 -1080 341 -525 881 -873 1522 -982 163 -28 572 -25
|
||||||
|
735 5 461 84 845 283 1164 603 425 427 650 1040 603 1641 -42 528 -250 987
|
||||||
|
-612 1348 -388 388 -872 597 -1450 626 -246 12 -731 -28 -991 -82 -25 -5 -29
|
||||||
|
2 -109 171 -46 96 -87 175 -91 175 -3 0 -91 -111 -196 -247z"/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.1 KiB |
Reference in New Issue
Block a user