external-repos/LifeTrinket
1
0
Fork 1
mirror of https://github.com/Vikeo/LifeTrinket.git synced 2025-11-17 16:27:59 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix dialog propegation

Browse Source
This commit is contained in:
Viktor Rådberg
2023-09-26 17:28:50 +02:00
parent a5659f3b22
commit 8d94bbcc11
1 changed files with 211 additions and 218 deletions
Download Patch File Download Diff File Expand all files Collapse all files

429
src/Components/PlayerMenu/PlayerMenu.tsx
View File

@@ -1,4 +1,4 @@
import { Button, Checkbox } from '@mui/material'; import { Button, Checkbox, Modal } 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 { theme } from '../../Data/theme'; import { theme } from '../../Data/theme';
@@ -171,6 +171,8 @@ type PlayerMenuProps = {
const PlayerMenu = ({ player, setShowPlayerMenu }: PlayerMenuProps) => { const PlayerMenu = ({ player, setShowPlayerMenu }: PlayerMenuProps) => {
const settingsContainerRef = useRef<HTMLDivElement | null>(null); const settingsContainerRef = useRef<HTMLDivElement | null>(null);
const dialogRef = useRef<HTMLDialogElement | null>(null);
const isSide = const isSide =
player.settings.rotation === Rotation.Side || player.settings.rotation === Rotation.Side ||
player.settings.rotation === Rotation.SideFlipped; player.settings.rotation === Rotation.SideFlipped;
@@ -229,41 +231,70 @@ const PlayerMenu = ({ player, setShowPlayerMenu }: PlayerMenuProps) => {
const closeButtonSize = isSide ? '6vmin' : '3vmax'; 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}>
variant="text" <Button
onClick={handleOnClick} variant="text"
style={{ onClick={handleOnClick}
margin: 0, style={{
padding: 0, margin: 0,
height: closeButtonSize, padding: 0,
width: closeButtonSize, height: closeButtonSize,
}} width: closeButtonSize,
}}
>
<Cross size={closeButtonSize} />
</Button>
</CloseButton>
<SettingsContainer
$rotation={player.settings.rotation}
ref={settingsContainerRef}
> >
<Cross size={closeButtonSize} /> <ColorPicker
</Button> type="color"
</CloseButton> value={player.color}
<SettingsContainer onChange={handleColorChange}
$rotation={player.settings.rotation} role="button"
ref={settingsContainerRef} aria-label="Color picker"
> />
<ColorPicker <BetterRowContainer>
type="color" <TogglesSection>
value={player.color} {player.settings.useCommanderDamage && (
onChange={handleColorChange} <CheckboxContainer $rotation={player.settings.rotation}>
role="button" <Checkbox
aria-label="Color picker" name="usePartner"
/> checked={player.settings.usePartner}
<BetterRowContainer> icon={
<TogglesSection> <PartnerTax
{player.settings.useCommanderDamage && ( 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}> <CheckboxContainer $rotation={player.settings.rotation}>
<Checkbox <Checkbox
name="usePartner" name="usePoison"
checked={player.settings.usePartner} checked={player.settings.usePoison}
icon={ icon={
<PartnerTax <Poison
size={extraCountersSize} size={extraCountersSize}
color="black" color="black"
stroke="white" stroke="white"
@@ -271,7 +302,7 @@ const PlayerMenu = ({ player, setShowPlayerMenu }: PlayerMenuProps) => {
/> />
} }
checkedIcon={ checkedIcon={
<PartnerTax <Poison
size={extraCountersSize} size={extraCountersSize}
color={player.color} color={player.color}
stroke="white" stroke="white"
@@ -280,200 +311,162 @@ const PlayerMenu = ({ player, setShowPlayerMenu }: PlayerMenuProps) => {
} }
onChange={handleSettingsChange} onChange={handleSettingsChange}
role="checkbox" role="checkbox"
aria-checked={player.settings.usePartner} aria-checked={player.settings.usePoison}
aria-label="Partner" aria-label="Poison"
/> />
</CheckboxContainer> </CheckboxContainer>
)}
<CheckboxContainer $rotation={player.settings.rotation}> <CheckboxContainer $rotation={player.settings.rotation}>
<Checkbox <Checkbox
name="usePoison" name="useEnergy"
checked={player.settings.usePoison} checked={player.settings.useEnergy}
icon={ icon={
<Poison <Energy
size={extraCountersSize} size={extraCountersSize}
color="black" color="black"
stroke="white" stroke="white"
strokeWidth="30" strokeWidth="15"
/> />
} }
checkedIcon={ checkedIcon={
<Poison <Energy
size={extraCountersSize} size={extraCountersSize}
color={player.color} color={player.color}
stroke="white" stroke="white"
strokeWidth="30" strokeWidth="15"
/> />
} }
onChange={handleSettingsChange} 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" role="checkbox"
aria-checked={player.settings.usePoison} aria-checked={wakeLock.active}
aria-label="Poison" aria-label="Keep awake"
/> >
</CheckboxContainer> Keep Awake
</Button>
<CheckboxContainer $rotation={player.settings.rotation}> <Button
<Checkbox style={{
name="useEnergy" cursor: 'pointer',
checked={player.settings.useEnergy} userSelect: 'none',
icon={ fontSize: buttonFontSize,
<Energy padding: '4px',
size={extraCountersSize} }}
color="black" onClick={() => dialogRef.current?.show()}
stroke="white"
strokeWidth="15"
/>
}
checkedIcon={
<Energy
size={extraCountersSize}
color={player.color}
stroke="white"
strokeWidth="15"
/>
}
onChange={handleSettingsChange}
role="checkbox" role="checkbox"
aria-checked={player.settings.useEnergy} aria-checked={wakeLock.active}
aria-label="Energy" aria-label="Reset Game"
/> >
</CheckboxContainer> <ResetGame size={iconSize} />
</Button>
<CheckboxContainer $rotation={player.settings.rotation}> </ButtonsSections>
<Checkbox </BetterRowContainer>
name="useExperience" <dialog
checked={player.settings.useExperience} ref={dialogRef}
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={() => {
settingsContainerRef.current?.querySelector(`dialog`)?.show();
}}
role="checkbox"
aria-checked={wakeLock.active}
aria-label="Reset Game"
>
<ResetGame size={iconSize} />
</Button>
</ButtonsSections>
</BetterRowContainer>
<dialog
id={`reset-game-${player.index}`}
style={{
borderRadius: '1rem',
backgroundColor: theme.palette.background.default,
position: 'absolute',
top: '25%',
color: theme.palette.text.primary,
border: 'none',
}}
>
<h3>Reset Game?</h3>
<div
style={{ style={{
display: 'flex', zIndex: 9999,
flexDirection: 'row', background: theme.palette.background.default,
justifyContent: 'space-evenly', color: theme.palette.text.primary,
borderRadius: '1rem',
border: 'none',
position: 'absolute',
top: '10%',
}} }}
> >
<Button <h1>Reset Game?</h1>
variant="contained" <div style={{ display: 'flex', justifyContent: 'space-evenly' }}>
onClick={() => { <Button
settingsContainerRef.current?.querySelector(`dialog`)?.close(); variant="contained"
}} onClick={() => dialogRef.current?.close()}
> >
No No
</Button> </Button>
<Spacer width="1rem" /> <Button
<Button variant="contained"
variant="contained" onClick={() => {
onClick={() => { handleResetGame();
handleResetGame(); dialogRef.current?.close();
}}
settingsContainerRef.current?.querySelector(`dialog`)?.close(); >
}} Yes
> </Button>
Yes </div>
</Button> </dialog>
</div> </SettingsContainer>
</dialog> </PlayerMenuWrapper>
</SettingsContainer> </>
</PlayerMenuWrapper>
); );
}; };