fix dialog propegation

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