LifeTrinket/src/Components/Player/PlayerMenu.tsx

import { Button, Checkbox } from '@mui/material';
import styled, { css } from 'styled-components';
import { Player, Rotation } from '../../Types/Player';
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 { useRef } from 'react';
import { Spacer } from '../Misc/Spacer';
import { useSafeRotate } from '../../Hooks/useSafeRotate';

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`
  display: flex;
  max-width: 100%;
  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;
}>`
  display: flex;
  flex-direction: column;
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(20, 20, 20, 0.9);
  align-items: center;
  justify-content: center;
  z-index: 2;
  ${(props) => {
    if (
      props.$rotation === Rotation.SideFlipped ||
      props.$rotation === Rotation.Side
    ) {
      return;
    }
    return css`
      rotate: ${props.$rotation}deg;
    `;
  }};
`;

const CloseButton = styled.div<{
  $rotation: Rotation;
}>`
  position: absolute;
  top: 15%;
  right: 5%;
  z-index: 9999;
  border: none;
  outline: none;
  cursor: pointer;
  background-color: transparent;

  ${(props) => {
    if (props.$rotation === Rotation.Side) {
      return css`
        rotate: ${props.$rotation - 180}deg;
        top: 5%;
        right: auto;
        left: 5%;
      `;
    } else if (props.$rotation === Rotation.SideFlipped) {
      return css`
        rotate: ${props.$rotation - 180}deg;
        top: auto;
        left: auto;
        bottom: 5%;
        right: 5%;
      `;
    }
  }}
`;

type PlayerMenuProps = {
  player: Player;
  setShowPlayerMenu: (showPlayerMenu: boolean) => void;
};

const PlayerMenu = ({ player, setShowPlayerMenu }: PlayerMenuProps) => {
  const settingsContainerRef = useRef<HTMLDivElement | null>(null);
  const dialogRef = useRef<HTMLDialogElement | null>(null);

  const { isSide } = useSafeRotate({
    rotation: player.settings.rotation,
    containerRef: settingsContainerRef,
  });

  const handleOnClick = () => {
    setShowPlayerMenu(false);
  };
  const { fullscreen, wakeLock, goToStart } = useGlobalSettings();
  const { updatePlayer, resetCurrentGame } = usePlayers();

  const handleColorChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    const updatedPlayer = { ...player, color: event.target.value };
    updatePlayer(updatedPlayer);
  };

  const handleSettingsChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    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 (
    <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}
      >
        <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"
                  />
                }
                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}
              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>
  );
};

export default PlayerMenu;