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

39
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,6 +231,7 @@ const PlayerMenu = ({ player, setShowPlayerMenu }: PlayerMenuProps) => {
const closeButtonSize = isSide ? '6vmin' : '3vmax'; const closeButtonSize = isSide ? '6vmin' : '3vmax';
return ( return (
<>
<PlayerMenuWrapper $rotation={player.settings.rotation}> <PlayerMenuWrapper $rotation={player.settings.rotation}>
<CloseButton $rotation={player.settings.rotation}> <CloseButton $rotation={player.settings.rotation}>
<Button <Button
@@ -421,9 +424,7 @@ const PlayerMenu = ({ player, setShowPlayerMenu }: PlayerMenuProps) => {
fontSize: buttonFontSize, fontSize: buttonFontSize,
padding: '4px', padding: '4px',
}} }}
onClick={() => { onClick={() => dialogRef.current?.show()}
settingsContainerRef.current?.querySelector(`dialog`)?.show();
}}
role="checkbox" role="checkbox"
aria-checked={wakeLock.active} aria-checked={wakeLock.active}
aria-label="Reset Game" aria-label="Reset Game"
@@ -433,39 +434,30 @@ const PlayerMenu = ({ player, setShowPlayerMenu }: PlayerMenuProps) => {
</ButtonsSections> </ButtonsSections>
</BetterRowContainer> </BetterRowContainer>
<dialog <dialog
id={`reset-game-${player.index}`} ref={dialogRef}
style={{ style={{
borderRadius: '1rem', zIndex: 9999,
backgroundColor: theme.palette.background.default, background: theme.palette.background.default,
position: 'absolute',
top: '25%',
color: theme.palette.text.primary, color: theme.palette.text.primary,
borderRadius: '1rem',
border: 'none', border: 'none',
position: 'absolute',
top: '10%',
}} }}
> >
<h3>Reset Game?</h3> <h1>Reset Game?</h1>
<div <div style={{ display: 'flex', justifyContent: 'space-evenly' }}>
style={{
display: 'flex',
flexDirection: 'row',
justifyContent: 'space-evenly',
}}
>
<Button <Button
variant="contained" variant="contained"
onClick={() => { onClick={() => dialogRef.current?.close()}
settingsContainerRef.current?.querySelector(`dialog`)?.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 Yes
@@ -474,6 +466,7 @@ const PlayerMenu = ({ player, setShowPlayerMenu }: PlayerMenuProps) => {
</dialog> </dialog>
</SettingsContainer> </SettingsContainer>
</PlayerMenuWrapper> </PlayerMenuWrapper>
</>
); );
}; };