diff --git a/src/Components/Counters/ExtraCountersBar.tsx b/src/Components/Counters/ExtraCountersBar.tsx index a73713f..5af2187 100644 --- a/src/Components/Counters/ExtraCountersBar.tsx +++ b/src/Components/Counters/ExtraCountersBar.tsx @@ -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; position: absolute; width: 100%; diff --git a/src/Components/PlayerMenu/PlayerMenu.tsx b/src/Components/PlayerMenu/PlayerMenu.tsx index 3bb5ba1..f5a8765 100644 --- a/src/Components/PlayerMenu/PlayerMenu.tsx +++ b/src/Components/PlayerMenu/PlayerMenu.tsx @@ -1,7 +1,111 @@ -import { Button } from '@mui/material'; +import { Button, Checkbox } from '@mui/material'; import styled, { css } from 'styled-components'; 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<{ $rotation: Rotation; @@ -66,26 +170,303 @@ type PlayerMenuProps = { }; const PlayerMenu = ({ player, setShowPlayerMenu }: PlayerMenuProps) => { + const settingsContainerRef = useRef(null); + const dialogRef = useRef(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 = () => { setShowPlayerMenu(false); }; + const { fullscreen, wakeLock, goToStart } = useGlobalSettings(); + const { updatePlayer, resetCurrentGame } = usePlayers(); + + const handleColorChange = (event: React.ChangeEvent) => { + const updatedPlayer = { ...player, color: event.target.value }; + updatePlayer(updatedPlayer); + }; + + const handleSettingsChange = (event: React.ChangeEvent) => { + 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 ( - - - + + - X - - - - + + + + {player.settings.useCommanderDamage && ( + + + } + checkedIcon={ + + } + onChange={handleSettingsChange} + role="checkbox" + aria-checked={player.settings.usePartner} + aria-label="Partner" + /> + + )} + + + + } + checkedIcon={ + + } + onChange={handleSettingsChange} + role="checkbox" + aria-checked={player.settings.usePoison} + aria-label="Poison" + /> + + + + + } + checkedIcon={ + + } + onChange={handleSettingsChange} + role="checkbox" + aria-checked={player.settings.useEnergy} + aria-label="Energy" + /> + + + + + } + checkedIcon={ + + } + onChange={handleSettingsChange} + role="checkbox" + aria-checked={player.settings.useExperience} + aria-label="Experience" + /> + + + + + + + + } + checkedIcon={} + onChange={toggleFullscreen} + role="checkbox" + aria-checked={document.fullscreenElement ? true : false} + aria-label="Fullscreen" + /> + + + + + + + + +

Reset Game?

+
+ + +
+ + + + ); }; diff --git a/src/Components/PlayerMenu/Settings.tsx b/src/Components/PlayerMenu/Settings.tsx deleted file mode 100644 index d4b5e28..0000000 --- a/src/Components/PlayerMenu/Settings.tsx +++ /dev/null @@ -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) => { - const updatedPlayer = { ...player, color: event.target.value }; - updatePlayer(updatedPlayer); - }; - - const handleSettingsChange = (event: React.ChangeEvent) => { - 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 ( - - - - {player.settings.useCommanderDamage && ( - - - } - checkedIcon={ - - } - onChange={handleSettingsChange} - role="checkbox" - aria-checked={player.settings.usePartner} - aria-label="Partner" - /> - - )} - - - - } - checkedIcon={ - - } - onChange={handleSettingsChange} - role="checkbox" - aria-checked={player.settings.usePoison} - aria-label="Poison" - /> - - - - - } - checkedIcon={ - - } - onChange={handleSettingsChange} - role="checkbox" - aria-checked={player.settings.useEnergy} - aria-label="Energy" - /> - - - - - } - checkedIcon={ - - } - onChange={handleSettingsChange} - role="checkbox" - aria-checked={player.settings.useExperience} - aria-label="Experience" - /> - - - - - - - } - checkedIcon={} - onChange={toggleFullscreen} - role="checkbox" - aria-checked={document.fullscreenElement ? true : false} - aria-label="Fullscreen" - /> - - - - - - - - ); -}; - -export default Settings; diff --git a/src/Icons/generated/Cross.tsx b/src/Icons/generated/Cross.tsx new file mode 100644 index 0000000..6b126bb --- /dev/null +++ b/src/Icons/generated/Cross.tsx @@ -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 & SVGRProps) => { + return ( + + {title ? {title} : null} + + + ); +}; +Cross.propTypes = { + title: PropTypes.string, +}; +export default Cross; diff --git a/src/Icons/generated/ResetGame.tsx b/src/Icons/generated/ResetGame.tsx new file mode 100644 index 0000000..b1fe65d --- /dev/null +++ b/src/Icons/generated/ResetGame.tsx @@ -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 & SVGRProps) => { + return ( + + {title ? {title} : null} + + + ); +}; +ResetGame.propTypes = { + title: PropTypes.string, +}; +export default ResetGame; diff --git a/src/Icons/generated/index.ts b/src/Icons/generated/index.ts index eba4e6b..2e76819 100644 --- a/src/Icons/generated/index.ts +++ b/src/Icons/generated/index.ts @@ -1,5 +1,6 @@ export { default as Cog } from './Cog'; export { default as CommanderTax } from './CommanderTax'; +export { default as Cross } from './Cross'; export { default as Energy } from './Energy'; export { default as Exit } from './Exit'; 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 PartnerTax } from './PartnerTax'; export { default as Poison } from './Poison'; +export { default as ResetGame } from './ResetGame'; export { default as Skull } from './Skull'; diff --git a/src/Icons/svgs/Cross.svg b/src/Icons/svgs/Cross.svg new file mode 100644 index 0000000..4596255 --- /dev/null +++ b/src/Icons/svgs/Cross.svg @@ -0,0 +1,21 @@ + + + + + + + + diff --git a/src/Icons/svgs/ResetGame.svg b/src/Icons/svgs/ResetGame.svg new file mode 100644 index 0000000..a38c2da --- /dev/null +++ b/src/Icons/svgs/ResetGame.svg @@ -0,0 +1,21 @@ + + + + + + + +