From 25302913d5902db59905fdb09cd4b70a18d17e8a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Viktor=20R=C3=A5dberg?= Date: Tue, 26 Sep 2023 13:03:12 +0200 Subject: [PATCH 1/7] simple reset game icon --- src/Icons/generated/ResetGame.tsx | 33 +++++++++++++++++++++++++++++++ src/Icons/generated/index.ts | 1 + src/Icons/svgs/ResetGame.svg | 21 ++++++++++++++++++++ 3 files changed, 55 insertions(+) create mode 100644 src/Icons/generated/ResetGame.tsx create mode 100644 src/Icons/svgs/ResetGame.svg 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..5f1e3ae 100644 --- a/src/Icons/generated/index.ts +++ b/src/Icons/generated/index.ts @@ -10,4 +10,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/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 @@ + + + + + + + + From de7bde1b2b4d5e81d9e3cd0852e51c6a7ae3a81d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Viktor=20R=C3=A5dberg?= Date: Tue, 26 Sep 2023 15:45:43 +0200 Subject: [PATCH 2/7] add cross icon --- src/Icons/generated/Cross.tsx | 33 +++++++++++++++++++++++++++++++++ src/Icons/generated/index.ts | 1 + src/Icons/svgs/Cross.svg | 21 +++++++++++++++++++++ 3 files changed, 55 insertions(+) create mode 100644 src/Icons/generated/Cross.tsx create mode 100644 src/Icons/svgs/Cross.svg 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/index.ts b/src/Icons/generated/index.ts index 5f1e3ae..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'; 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 @@ + + + + + + + + From 7d60a668c61198f271205ae322638b4760884795 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Viktor=20R=C3=A5dberg?= Date: Tue, 26 Sep 2023 16:54:23 +0200 Subject: [PATCH 3/7] safe rotation in settings menu, reset game icon --- src/Components/Counters/ExtraCountersBar.tsx | 2 +- src/Components/PlayerMenu/PlayerMenu.tsx | 401 ++++++++++++++++++- src/Components/PlayerMenu/Settings.tsx | 353 ---------------- 3 files changed, 393 insertions(+), 363 deletions(-) delete mode 100644 src/Components/PlayerMenu/Settings.tsx 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..d0f7e7e 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,25 +170,304 @@ type PlayerMenuProps = { }; const PlayerMenu = ({ player, setShowPlayerMenu }: PlayerMenuProps) => { + const settingsContainerRef = 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 ( - + + + + + {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; From b65134d5e77d28c0cbba35822bf6c1fff37a0705 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Viktor=20R=C3=A5dberg?= Date: Tue, 26 Sep 2023 16:56:52 +0200 Subject: [PATCH 4/7] fix centering --- src/Components/PlayerMenu/PlayerMenu.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Components/PlayerMenu/PlayerMenu.tsx b/src/Components/PlayerMenu/PlayerMenu.tsx index d0f7e7e..3ab6a16 100644 --- a/src/Components/PlayerMenu/PlayerMenu.tsx +++ b/src/Components/PlayerMenu/PlayerMenu.tsx @@ -438,7 +438,7 @@ const PlayerMenu = ({ player, setShowPlayerMenu }: PlayerMenuProps) => { borderRadius: '1rem', backgroundColor: theme.palette.primary.main, position: 'absolute', - bottom: '0', + top: '25%', }} >

Reset Game?

From a5659f3b22d2203fa3c136bdfb8f5aebea6d70c0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Viktor=20R=C3=A5dberg?= Date: Tue, 26 Sep 2023 17:00:22 +0200 Subject: [PATCH 5/7] fix styling --- src/Components/PlayerMenu/PlayerMenu.tsx | 15 ++++++++++----- 1 file changed, 10 insertions(+), 5 deletions(-) diff --git a/src/Components/PlayerMenu/PlayerMenu.tsx b/src/Components/PlayerMenu/PlayerMenu.tsx index 3ab6a16..85fdd64 100644 --- a/src/Components/PlayerMenu/PlayerMenu.tsx +++ b/src/Components/PlayerMenu/PlayerMenu.tsx @@ -436,9 +436,11 @@ const PlayerMenu = ({ player, setShowPlayerMenu }: PlayerMenuProps) => { id={`reset-game-${player.index}`} style={{ borderRadius: '1rem', - backgroundColor: theme.palette.primary.main, + backgroundColor: theme.palette.background.default, position: 'absolute', top: '25%', + color: theme.palette.text.primary, + border: 'none', }} >

Reset Game?

@@ -449,14 +451,17 @@ const PlayerMenu = ({ player, setShowPlayerMenu }: PlayerMenuProps) => { justifyContent: 'space-evenly', }} > - - + From 8d94bbcc110edd3be6dc7a4ebbec2b7f71cf0bc2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Viktor=20R=C3=A5dberg?= Date: Tue, 26 Sep 2023 17:28:50 +0200 Subject: [PATCH 6/7] fix dialog propegation --- src/Components/PlayerMenu/PlayerMenu.tsx | 429 +++++++++++------------ 1 file changed, 211 insertions(+), 218 deletions(-) diff --git a/src/Components/PlayerMenu/PlayerMenu.tsx b/src/Components/PlayerMenu/PlayerMenu.tsx index 85fdd64..0f212c8 100644 --- a/src/Components/PlayerMenu/PlayerMenu.tsx +++ b/src/Components/PlayerMenu/PlayerMenu.tsx @@ -1,4 +1,4 @@ -import { Button, Checkbox } from '@mui/material'; +import { Button, Checkbox, Modal } from '@mui/material'; import styled, { css } from 'styled-components'; import { Player, Rotation } from '../../Types/Player'; import { theme } from '../../Data/theme'; @@ -171,6 +171,8 @@ 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; @@ -229,41 +231,70 @@ const PlayerMenu = ({ player, setShowPlayerMenu }: PlayerMenuProps) => { const closeButtonSize = isSide ? '6vmin' : '3vmax'; return ( - - - + + - - - - - - - - {player.settings.useCommanderDamage && ( + + + + {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.usePartner} - aria-label="Partner" + aria-checked={player.settings.usePoison} + aria-label="Poison" /> - )} - - - } - checkedIcon={ - - } - onChange={handleSettingsChange} + + + } + 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" + /> + + + - - - } - checkedIcon={ - - } - onChange={handleSettingsChange} + - - - } - checkedIcon={} - onChange={toggleFullscreen} - role="checkbox" - aria-checked={document.fullscreenElement ? true : false} - aria-label="Fullscreen" - /> - - - - - - - - -

Reset Game?

-
+ + + + + - - - -
- - - +

Reset Game?

+
+ + +
+ + + + ); }; From 84891bc312ee90abffa6af04d31737b8f4723b56 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Viktor=20R=C3=A5dberg?= Date: Tue, 26 Sep 2023 17:30:35 +0200 Subject: [PATCH 7/7] fix linting --- src/Components/PlayerMenu/PlayerMenu.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Components/PlayerMenu/PlayerMenu.tsx b/src/Components/PlayerMenu/PlayerMenu.tsx index 0f212c8..f5a8765 100644 --- a/src/Components/PlayerMenu/PlayerMenu.tsx +++ b/src/Components/PlayerMenu/PlayerMenu.tsx @@ -1,4 +1,4 @@ -import { Button, Checkbox, Modal } from '@mui/material'; +import { Button, Checkbox } from '@mui/material'; import styled, { css } from 'styled-components'; import { Player, Rotation } from '../../Types/Player'; import { theme } from '../../Data/theme';