Merge pull request #23 from Vikeo/develop

Just another small release

src/Components/Counters/ExtraCountersBar.tsx

@@ -30,7 +30,7 @@ const Container = styled.div<{ $rotation: Rotation }>`
   }}
 `;
 
-const ExtraCountersGrid = styled.div<{ $rotation: Rotation }>`
+export const ExtraCountersGrid = styled.div<{ $rotation: Rotation }>`
   display: flex;
   position: absolute;
   width: 100%;

src/Components/PlayerMenu/PlayerMenu.tsx

@@ -1,7 +1,111 @@
-import { Button } from '@mui/material';
+import { Button, Checkbox } from '@mui/material';
 import styled, { css } from 'styled-components';
 import { Player, Rotation } from '../../Types/Player';
-import Settings from './Settings';
+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 { useEffect, useRef } from 'react';
+import { Spacer } from '../Misc/Spacer';
+
+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`
+  position: relative;
+  display: flex;
+  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;
@@ -66,26 +170,303 @@ 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;
+
+  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 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
-          style={{
-            padding: '0 8px',
-            minWidth: '0',
-          }}
-          variant="outlined"
-          onClick={handleOnClick}
+    <>
+      <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}
         >
-          X
-        </Button>
-      </CloseButton>
-      <Settings player={player} setShowPlayerMenu={setShowPlayerMenu} />
-    </PlayerMenuWrapper>
+          <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>
+    </>
   );
 };
 

src/Components/PlayerMenu/Settings.tsx

@@ -1,353 +0,0 @@
-import { Button, Checkbox } from '@mui/material';
-import styled, { css } from 'styled-components';
-import { theme } from '../../Data/theme';
-import { useGlobalSettings } from '../../Hooks/useGlobalSettings';
-import {
-  Energy,
-  Exit,
-  Experience,
-  FullscreenOff,
-  FullscreenOn,
-  PartnerTax,
-  Poison,
-} from '../../Icons/generated';
-import { Player, Rotation } from '../../Types/Player';
-import { usePlayers } from '../../Hooks/usePlayers';
-
-const SettingsContainer = styled.div<{
-  $rotation: Rotation;
-}>`
-  display: flex;
-  position: relative;
-  flex-direction: row;
-  justify-content: space-evenly;
-  align-items: center;
-  height: 100%;
-  width: 80%;
-  ${(props) => {
-    if (
-      props.$rotation === Rotation.SideFlipped ||
-      props.$rotation === Rotation.Side
-    ) {
-      return css`
-        flex-direction: column-reverse;
-        height: 100%;
-        width: 100%;
-      `;
-    }
-  }}
-`;
-
-const TogglesSection = styled.div<{ $rotation: Rotation }>`
-  display: flex;
-  position: absolute;
-  flex-direction: row;
-  justify-content: space-evenly;
-  gap: 0.5rem;
-
-  ${(props) => {
-    if (
-      props.$rotation === Rotation.SideFlipped ||
-      props.$rotation === Rotation.Side
-    ) {
-      return css`
-        flex-direction: column-reverse;
-      `;
-    }
-  }}
-`;
-
-const ButtonsSections = styled.div<{ $rotation: Rotation }>`
-  position: absolute;
-  display: flex;
-  gap: 1rem;
-  bottom: 16px;
-
-  ${(props) => {
-    if (props.$rotation === Rotation.Side) {
-      return css`
-        bottom: auto;
-        right: -6rem;
-        rotate: ${props.$rotation - 180}deg;
-      `;
-    } else if (props.$rotation === Rotation.SideFlipped) {
-      return css`
-        bottom: auto;
-        left: -6rem;
-        rotate: ${props.$rotation - 180}deg;
-      `;
-    }
-  }}
-`;
-
-const ColorPicker = styled.input<{
-  $rotation: Rotation;
-}>`
-  position: absolute;
-  top: 5%;
-  left: 5%;
-  height: 8vmax;
-  width: 8vmax;
-
-  border: none;
-  outline: none;
-  cursor: pointer;
-  background-color: transparent;
-  user-select: none;
-  color: #ffffff;
-
-  ${(props) => {
-    if (props.$rotation === Rotation.Side) {
-      return css`
-        rotate: ${props.$rotation - 180}deg;
-        bottom: 5%;
-        top: auto;
-      `;
-    } else if (props.$rotation === Rotation.SideFlipped) {
-      return css`
-        rotate: ${props.$rotation - 180}deg;
-        top: 5%;
-        left: auto;
-        right: 5%;
-      `;
-    }
-  }}
-`;
-
-const CheckboxContainer = styled.div<{ $rotation: Rotation }>`
-  ${(props) => {
-    if (
-      props.$rotation === Rotation.SideFlipped ||
-      props.$rotation === Rotation.Side
-    ) {
-      return css`
-        rotate: ${props.$rotation - 180}deg;
-      `;
-    }
-  }}
-`;
-
-type SettingsProps = {
-  player: Player;
-  setShowPlayerMenu: (showPlayerMenu: boolean) => void;
-};
-
-const Settings = ({ player, setShowPlayerMenu }: SettingsProps) => {
-  const { fullscreen, wakeLock, goToStart } = useGlobalSettings();
-  const { updatePlayer, resetCurrentGame } = usePlayers();
-  const isSide =
-    player.settings.rotation === Rotation.Side ||
-    player.settings.rotation === Rotation.SideFlipped;
-
-  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';
-
-  return (
-    <SettingsContainer $rotation={player.settings.rotation}>
-      <ColorPicker
-        $rotation={player.settings.rotation}
-        type="color"
-        value={player.color}
-        onChange={handleColorChange}
-        role="button"
-        aria-label="Color picker"
-      />
-      <TogglesSection $rotation={player.settings.rotation}>
-        {player.settings.useCommanderDamage && (
-          <CheckboxContainer $rotation={player.settings.rotation}>
-            <Checkbox
-              name="usePartner"
-              checked={player.settings.usePartner}
-              icon={
-                <PartnerTax
-                  size="6vmax"
-                  color="black"
-                  stroke="white"
-                  strokeWidth="30"
-                />
-              }
-              checkedIcon={
-                <PartnerTax
-                  size="6vmax"
-                  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="6vmax"
-                color="black"
-                stroke="white"
-                strokeWidth="30"
-              />
-            }
-            checkedIcon={
-              <Poison
-                size="6vmax"
-                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="6vmax"
-                color="black"
-                stroke="white"
-                strokeWidth="15"
-              />
-            }
-            checkedIcon={
-              <Energy
-                size="6vmax"
-                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="6vmax"
-                color="black"
-                stroke="white"
-                strokeWidth="15"
-              />
-            }
-            checkedIcon={
-              <Experience
-                size="6vmax"
-                color={player.color}
-                stroke="white"
-                strokeWidth="15"
-              />
-            }
-            onChange={handleSettingsChange}
-            role="checkbox"
-            aria-checked={player.settings.useExperience}
-            aria-label="Experience"
-          />
-        </CheckboxContainer>
-      </TogglesSection>
-      <ButtonsSections $rotation={player.settings.rotation}>
-        <Button
-          variant="text"
-          style={{
-            cursor: 'pointer',
-            userSelect: 'none',
-          }}
-          onClick={goToStart}
-          aria-label="Back to start"
-        >
-          <Exit size="4vmax" style={{ rotate: '180deg' }} />
-        </Button>
-        <CheckboxContainer $rotation={player.settings.rotation}>
-          <Checkbox
-            name="fullscreen"
-            checked={document.fullscreenElement ? true : false}
-            icon={
-              <FullscreenOff size="4vmax" color={theme.palette.primary.main} />
-            }
-            checkedIcon={<FullscreenOn size="4vmax" />}
-            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
-          variant="contained"
-          style={{
-            cursor: 'pointer',
-            userSelect: 'none',
-            fontSize: buttonFontSize,
-            padding: '0 4px 0 4px',
-          }}
-          onClick={handleResetGame}
-          role="checkbox"
-          aria-checked={wakeLock.active}
-          aria-label="Reset Game"
-        >
-          Reset Game
-        </Button>
-      </ButtonsSections>
-    </SettingsContainer>
-  );
-};
-
-export default Settings;

src/Icons/generated/Cross.tsx

@@ -0,0 +1,33 @@
+import PropTypes from 'prop-types';
+import { SVGProps } from 'react';
+interface SVGRProps {
+  title?: string;
+  titleId?: string;
+  size?: string;
+}
+const Cross = ({
+  title,
+  titleId,
+  ...props
+}: SVGProps<SVGSVGElement> & SVGRProps) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={props.size || 16}
+      height={props.size || 16}
+      viewBox="0 0 524 524"
+      aria-labelledby={titleId}
+      {...props}
+    >
+      {title ? <title id={titleId}>{title}</title> : null}
+      <path
+        fill="currentColor"
+        d="M85.8 34.4c-5.3 1.9-9.2 5.3-30 26.3C35.9 80.8 33 84.8 33 93c0 2.5.9 6.4 1.9 8.6 1.2 2.7 27.7 32.1 74.5 82.7 39.9 43.3 72.6 79.1 72.6 79.7 0 .6-32.3 35.2-71.7 77-48.5 51.3-72.7 77.7-74.6 81.1-3.4 6.4-3.5 11.7-.3 18.4 3.3 6.8 42 45.5 48.6 48.4 6.4 2.9 12.7 2.7 18.8-.7 3.3-1.7 31.6-27.6 81.3-74.5 42-39.4 76.7-71.6 77.1-71.5.4.2 35.5 32.5 77.9 71.8 42.4 39.3 79.2 72.7 81.8 74.2 3.2 1.9 6 2.8 9.1 2.8 10.1 0 10.9-.6 34.9-24.3 14.2-14.1 23-23.7 24.2-26.2 2.4-5.1 2.4-12.8 0-18.1-1.2-2.6-27.1-30.8-74.5-81.2-40-42.5-72.6-77.6-72.4-78.1.2-.4 32.5-34.7 71.8-76.1 39.3-41.4 72.5-76.7 73.8-78.4 4.5-6.3 4.4-17.9-.1-24.2-5.1-7.2-43.3-46.7-46.9-48.5-2.1-1.1-5.8-2.2-8.2-2.5-9.6-1.4-5.3-5.2-158.3 138.2L262.2 183l-78.4-73.1c-49.6-46.5-79.8-73.9-82.3-75-4.7-2.2-10.5-2.3-15.7-.5z"
+      />
+    </svg>
+  );
+};
+Cross.propTypes = {
+  title: PropTypes.string,
+};
+export default Cross;

src/Icons/generated/ResetGame.tsx

@@ -0,0 +1,33 @@
+import PropTypes from 'prop-types';
+import { SVGProps } from 'react';
+interface SVGRProps {
+  title?: string;
+  titleId?: string;
+  size?: string;
+}
+const ResetGame = ({
+  title,
+  titleId,
+  ...props
+}: SVGProps<SVGSVGElement> & SVGRProps) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={props.size || 16}
+      height={props.size || 16}
+      viewBox="0 0 524 524"
+      aria-labelledby={titleId}
+      {...props}
+    >
+      {title ? <title id={titleId}>{title}</title> : null}
+      <path
+        fill="currentColor"
+        d="M129.3 50.7C105.7 81.6 95 95.8 82.6 113c-14.3 19.7-16.7 25.2-14.6 33.2 2.5 9.4 9 14.2 21.3 15.8 8.2 1.1 116.4 3.7 117.2 2.8.3-.3-3.3-8.8-8-18.8s-8.8-19.3-9.1-20.5c-.5-2.1-.1-2.3 8.3-3.4 4.9-.6 20.3-1.6 34.2-2.2 65.4-2.7 102.7 6.4 133.2 32.4 31.4 26.8 48.8 75.9 44.9 126.8-6.7 87.6-61.2 133.4-155.3 130.6-45.4-1.3-78.1-13.8-103.7-39.6-23.5-23.8-39-60.5-41.9-99.4-.9-12-2-15.4-6.7-20-5.2-5.2-7.9-5.7-29.3-5.6-24 .1-27.9 1.2-32.1 9.5-1.6 3-2 5.9-2 13.9 0 35.9 12.4 76.8 32.8 108 34.1 52.5 88.1 87.3 152.2 98.2 16.3 2.8 57.2 2.5 73.5-.5 46.1-8.4 84.5-28.3 116.4-60.3 42.5-42.7 65-104 60.3-164.1-4.2-52.8-25-98.7-61.2-134.8-38.8-38.8-87.2-59.7-145-62.6-24.6-1.2-73.1 2.8-99.1 8.2-2.5.5-2.9-.2-10.9-17.1-4.6-9.6-8.7-17.5-9.1-17.5-.3 0-9.1 11.1-19.6 24.7z"
+      />
+    </svg>
+  );
+};
+ResetGame.propTypes = {
+  title: PropTypes.string,
+};
+export default ResetGame;

src/Icons/generated/index.ts

@@ -1,5 +1,6 @@
 export { default as Cog } from './Cog';
 export { default as CommanderTax } from './CommanderTax';
+export { default as Cross } from './Cross';
 export { default as Energy } from './Energy';
 export { default as Exit } from './Exit';
 export { default as Experience } from './Experience';
@@ -10,4 +11,5 @@ export { default as LittleGuy } from './LittleGuy';
 export { default as Logo } from './Logo';
 export { default as PartnerTax } from './PartnerTax';
 export { default as Poison } from './Poison';
+export { default as ResetGame } from './ResetGame';
 export { default as Skull } from './Skull';

src/Icons/svgs/Cross.svg

@@ -0,0 +1,21 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="524.000000pt" height="524.000000pt" viewBox="0 0 524.000000 524.000000"
+ preserveAspectRatio="xMidYMid meet">
+
+<g transform="translate(0.000000,524.000000) scale(0.100000,-0.100000)"
+fill="currentColor" stroke="none">
+<path d="M858 4896 c-53 -19 -92 -53 -300 -263 -199 -201 -228 -241 -228 -323
+0 -25 9 -64 19 -86 12 -27 277 -321 745 -827 399 -433 726 -791 726 -797 0 -6
+-323 -352 -717 -770 -485 -513 -727 -777 -746 -811 -34 -64 -35 -117 -3 -184
+33 -68 420 -455 486 -484 64 -29 127 -27 188 7 33 17 316 276 813 745 420 394
+767 716 771 715 4 -2 355 -325 779 -718 424 -393 792 -727 818 -742 32 -19 60
+-28 91 -28 101 0 109 6 349 243 142 141 230 237 242 262 24 51 24 128 0 181
+-12 26 -271 308 -745 812 -400 425 -726 776 -724 781 2 4 325 347 718 761 393
+414 725 767 738 784 45 63 44 179 -1 242 -51 72 -433 467 -469 485 -21 11 -58
+22 -82 25 -96 14 -53 52 -1583 -1382 l-121 -114 -784 731 c-496 465 -798 739
+-823 750 -47 22 -105 23 -157 5z"/>
+</g>
+</svg>

src/Icons/svgs/ResetGame.svg

@@ -0,0 +1,21 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="524.000000pt" height="524.000000pt" viewBox="0 0 524.000000 524.000000"
+ preserveAspectRatio="xMidYMid meet">
+
+<g transform="translate(0.000000,524.000000) scale(0.100000,-0.100000)"
+fill="currentColor" stroke="none">
+<path d="M1293 4733 c-236 -309 -343 -451 -467 -623 -143 -197 -167 -252 -146
+-332 25 -94 90 -142 213 -158 82 -11 1164 -37 1172 -28 3 3 -33 88 -80 188
+-47 100 -88 193 -91 205 -5 21 -1 23 83 34 49 6 203 16 342 22 654 27 1027
+-64 1332 -324 314 -268 488 -759 449 -1268 -67 -876 -612 -1334 -1553 -1306
+-454 13 -781 138 -1037 396 -235 238 -390 605 -419 994 -9 120 -20 154 -67
+200 -52 52 -79 57 -293 56 -240 -1 -279 -12 -321 -95 -16 -30 -20 -59 -20
+-139 0 -359 124 -768 328 -1080 341 -525 881 -873 1522 -982 163 -28 572 -25
+735 5 461 84 845 283 1164 603 425 427 650 1040 603 1641 -42 528 -250 987
+-612 1348 -388 388 -872 597 -1450 626 -246 12 -731 -28 -991 -82 -25 -5 -29
+2 -109 171 -46 96 -87 175 -91 175 -3 0 -91 -111 -196 -247z"/>
+</g>
+</svg>