abstract safe rotate

src/Components/PlayerMenu/PlayerMenu.tsx

@@ -15,8 +15,9 @@ import {
   Cross,
   ResetGame,
 } from '../../Icons/generated';
-import { useEffect, useRef } from 'react';
+import { useRef } from 'react';
 import { Spacer } from '../Misc/Spacer';
+import { useSafeRotate } from '../../Hooks/useSafeRotate';
 
 const SettingsContainer = styled.div<{
   $rotation: Rotation;
@@ -71,8 +72,8 @@ const TogglesSection = styled.div`
 `;
 
 const ButtonsSections = styled.div`
-  position: relative;
   display: flex;
+  max-width: 100%;
   gap: 1rem;
   justify-content: space-between;
   padding: 3% 3%;
@@ -85,7 +86,6 @@ const ColorPicker = styled.input`
   left: 5%;
   height: 8vmax;
   width: 8vmax;
-
   border: none;
   outline: none;
   cursor: pointer;
@@ -173,30 +173,14 @@ 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;
-
-  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 { isSide } = useSafeRotate({
+    rotation: player.settings.rotation,
+    containerRef: settingsContainerRef,
+  });
 
   const handleOnClick = () => {
     setShowPlayerMenu(false);
   };
-
   const { fullscreen, wakeLock, goToStart } = useGlobalSettings();
   const { updatePlayer, resetCurrentGame } = usePlayers();
 
@@ -231,242 +215,240 @@ 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,
-            }}
-          >
-            <Cross size={closeButtonSize} />
-          </Button>
-        </CloseButton>
-        <SettingsContainer
-          $rotation={player.settings.rotation}
-          ref={settingsContainerRef}
+    <PlayerMenuWrapper $rotation={player.settings.rotation}>
+      <CloseButton $rotation={player.settings.rotation}>
+        <Button
+          variant="text"
+          onClick={handleOnClick}
+          style={{
+            margin: 0,
+            padding: 0,
+            height: closeButtonSize,
+            width: closeButtonSize,
+          }}
         >
-          <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"
+          <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 && (
+              <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="usePoison"
+                checked={player.settings.usePoison}
+                icon={
+                  <Poison
+                    size={extraCountersSize}
+                    color="black"
+                    stroke="white"
+                    strokeWidth="30"
                   />
-                </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}
-                  role="checkbox"
-                  aria-checked={player.settings.usePoison}
-                  aria-label="Poison"
-                />
-              </CheckboxContainer>
-
-              <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}
+                }
+                checkedIcon={
+                  <Poison
+                    size={extraCountersSize}
+                    color={player.color}
+                    stroke="white"
+                    strokeWidth="30"
+                  />
+                }
+                onChange={handleSettingsChange}
                 role="checkbox"
-                aria-checked={wakeLock.active}
-                aria-label="Keep awake"
-              >
-                Keep Awake
-              </Button>
+                aria-checked={player.settings.usePoison}
+                aria-label="Poison"
+              />
+            </CheckboxContainer>
 
-              <Button
-                style={{
-                  cursor: 'pointer',
-                  userSelect: 'none',
-                  fontSize: buttonFontSize,
-                  padding: '4px',
-                }}
-                onClick={() => dialogRef.current?.show()}
+            <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={wakeLock.active}
-                aria-label="Reset Game"
-              >
-                <ResetGame size={iconSize} />
-              </Button>
-            </ButtonsSections>
-          </BetterRowContainer>
-          <dialog
-            ref={dialogRef}
-            style={{
-              zIndex: 9999,
-              background: theme.palette.background.default,
-              color: theme.palette.text.primary,
-              borderRadius: '1rem',
-              border: 'none',
-              position: 'absolute',
-              top: '10%',
-            }}
-          >
-            <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>
-    </>
+                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={() => dialogRef.current?.show()}
+              role="checkbox"
+              aria-checked={wakeLock.active}
+              aria-label="Reset Game"
+            >
+              <ResetGame size={iconSize} />
+            </Button>
+          </ButtonsSections>
+        </BetterRowContainer>
+        <dialog
+          ref={dialogRef}
+          style={{
+            zIndex: 9999,
+            background: theme.palette.background.default,
+            color: theme.palette.text.primary,
+            borderRadius: '1rem',
+            border: 'none',
+            position: 'absolute',
+            top: '10%',
+          }}
+        >
+          <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>
   );
 };