Add little guy

react-screen-wake-lock.d.ts

@@ -1,5 +0,0 @@
-declare module 'react-screen-wake-lock' {
-  // Define the types for the module's exports
-  const content: unknown; // Use 'any' as a placeholder for missing types
-  export default content;
-}

src/Components/Buttons/CommanderDamage.tsx

@@ -188,7 +188,7 @@ export const CommanderDamage = ({
   };
 
   const opponentIndex = opponent.index;
-  const fontSize = '5vmin';
+  const fontSize = '6vmin';
   const fontWeight = 'bold';
   const strokeWidth = '0.5vmin';
 

src/Components/Buttons/ExtraCounter.tsx

@@ -9,6 +9,7 @@ const ExtraCounterContainer = styled.div`
   justify-content: center;
   align-items: center;
   pointer-events: all;
+  flex-grow: 1;
 `;
 
 export const StyledExtraCounterButton = styled.button`
@@ -24,6 +25,7 @@ export const StyledExtraCounterButton = styled.button`
   -moz-user-select: -moz-none;
   -webkit-user-select: none;
   -ms-user-select: none;
+  height: 100%;
 `;
 
 export const CenteredText = styled.div`

src/Components/Counters/ExtraCountersBar.tsx

@@ -13,11 +13,11 @@ import {
 
 const ExtraCountersGrid = styled.div<{ rotation: number }>`
   display: flex;
+  position: absolute;
   flex-direction: row;
   flex-grow: 1;
   width: 100%;
   justify-content: space-evenly;
-  position: absolute;
   bottom: 0;
   width: 100%;
   pointer-events: none;

src/Components/Misc/SupportMe.tsx

@@ -1,14 +1,19 @@
+import { Button, Drawer } from '@mui/material';
+import { useState } from 'react';
 import styled from 'styled-components';
-import { Paragraph } from './TextComponents';
-import { BuyMeCoffee, KoFi } from '../../Icons/generated/Support';
 import { theme } from '../../Data/theme';
+import { BuyMeCoffee, KoFi } from '../../Icons/generated/Support';
+import { Paragraph } from './TextComponents';
+import LittleGuy from '../../Icons/generated/LittleGuy';
+
 // import { ButtonBase } from '@mui/material';
 
 const SupportContainer = styled.div`
   display: flex;
-  flex-direction: row;
+  flex-direction: column;
   align-items: center;
   justify-content: center;
+  gap: 1rem;
   margin: 16px 0;
 `;
 
@@ -34,6 +39,8 @@ const SupportButton = styled.button`
 `;
 
 export const SupportMe = () => {
+  const [isDrawerOpen, setIsDrawerOpen] = useState(false);
+
   const handleOpenBuyMeCoffee = () => {
     window.open('https://www.buymeacoffee.com/vikeo');
   };
@@ -42,24 +49,74 @@ export const SupportMe = () => {
     window.open('https://ko-fi.com/vikeo');
   };
 
+  const toggleDrawer =
+    (open: boolean) => (event: React.KeyboardEvent | React.MouseEvent) => {
+      if (
+        event.type === 'keydown' &&
+        ((event as React.KeyboardEvent).key === 'Tab' ||
+          (event as React.KeyboardEvent).key === 'Shift')
+      ) {
+        return;
+      }
+
+      setIsDrawerOpen(open);
+    };
+
   return (
-    <SupportContainer>
+    <>
-      <SupportButton onClick={handleOpenBuyMeCoffee}>
+      <Button
-        <BuyMeCoffee
+        onClick={toggleDrawer(true)}
-          height={'24px'}
+        size="small"
-          width={'24px'}
+        variant="contained"
-          style={{ marginRight: '0.5rem' }}
+        style={{
-        />
+          position: 'absolute',
-        <Paragraph>Buy me a tea</Paragraph>
+          top: '1rem',
-      </SupportButton>
+          right: '1rem',
-      <SupportButton onClick={handleOpenKoFi}>
+          fontSize: '0.5rem',
-        <KoFi
+        }}
-          height={'24px'}
+      >
-          width={'24px'}
+        Nourish <br /> this guy {'->'}
-          style={{ marginRight: '0.5rem' }}
+      </Button>
-        />
+
-        <Paragraph>Buy me a ko-fi</Paragraph>
+      <LittleGuy
-      </SupportButton>
+        height={'4rem'}
-    </SupportContainer>
+        width={'2.5rem'}
+        style={{
+          pointerEvents: 'none',
+          position: 'absolute',
+          top: '2.5rem',
+          right: '0',
+          color: theme.palette.text.primary,
+        }}
+      />
+
+      <Drawer
+        anchor={'right'}
+        open={isDrawerOpen}
+        onClose={toggleDrawer(false)}
+        variant="temporary"
+      >
+        <SupportContainer>
+          <SupportButton onClick={handleOpenBuyMeCoffee}>
+            <BuyMeCoffee
+              height={'1.5rem'}
+              width={'1.5rem'}
+              style={{ marginRight: '0.5rem' }}
+            />
+            <Paragraph style={{ fontSize: '0.7rem' }}>Buy him a tea</Paragraph>
+          </SupportButton>
+          <SupportButton onClick={handleOpenKoFi}>
+            <KoFi
+              height={'1.5rem'}
+              width={'1.5rem'}
+              style={{ marginRight: '0.5rem' }}
+            />
+            <Paragraph style={{ fontSize: '0.7rem' }}>
+              Buy him a ko-fi
+            </Paragraph>
+          </SupportButton>
+        </SupportContainer>
+      </Drawer>
+    </>
   );
 };

src/Components/Views/StartMenu/StartMenu.tsx

@@ -2,15 +2,15 @@ import { Button, FormControl, FormLabel, Switch } from '@mui/material';
 import Slider from '@mui/material/Slider';
 import { useEffect, useState } from 'react';
 import styled from 'styled-components';
-import  { GridTemplateAreas } from '../../../Data/GridTemplateAreas';
+import { GridTemplateAreas } from '../../../Data/GridTemplateAreas';
 import {
   InitialSettings,
   createInitialPlayers,
 } from '../../../Data/getInitialPlayers';
 import { Player } from '../../../Types/Player';
-import LayoutOptions from './LayoutOptions';
 import { SupportMe } from '../../Misc/SupportMe';
 import { H2 } from '../../Misc/TextComponents';
+import LayoutOptions from './LayoutOptions';
 
 const MainWrapper = styled.div`
   width: 100vw;
@@ -24,6 +24,12 @@ const MainWrapper = styled.div`
   height: fit-content;
 `;
 
+const StartButtonFooter = styled.div`
+  position: fixed;
+  bottom: 1rem;
+  translate: -50%, -50%;
+`;
+
 const playerMarks = [
   {
     value: 1,
@@ -106,7 +112,15 @@ const Start = ({
   }, [playerOptions, setInitialGameSettings]);
 
   const valuetext = (value: number) => {
-    return `${value}°C`;
+    return `${value}`;
+  };
+
+  const toggleFullscreen = () => {
+    if (!document.fullscreenElement) {
+      document.documentElement.requestFullscreen();
+    } else if (document.exitFullscreen) {
+      document.exitFullscreen();
+    }
   };
 
   const getDefaultLayout = (numberOfPlayers: number) => {
@@ -140,7 +154,9 @@ const Start = ({
 
   return (
     <MainWrapper>
-      <H2>Game Setup</H2>
+      <SupportMe />
+
+      <H2>Life Trinket</H2>
       <FormControl focused={false} style={{ width: '80vw' }}>
         <FormLabel>Number of Players</FormLabel>
         <Slider
@@ -198,15 +214,28 @@ const Start = ({
           }
         />
         <Button
-          style={{ marginTop: '24px' }}
+          style={{
+            marginTop: '0.5rem',
+            marginRight: 'auto',
+            marginLeft: 'auto',
+          }}
+          size="small"
+          variant="contained"
+          onClick={toggleFullscreen}
+        >
+          Toggle fullscreen
+        </Button>
+      </FormControl>
+      <StartButtonFooter>
+        <Button
           size="large"
           variant="contained"
           onClick={doStartGame}
+          style={{ width: '90dvw' }}
         >
-          Start Game
+          START GAME
         </Button>
-      </FormControl>
+      </StartButtonFooter>
-      <SupportMe />
     </MainWrapper>
   );
 };

src/Data/theme.ts

@@ -68,5 +68,29 @@ export const theme = createTheme({
         root: {},
       },
     },
+    MuiDrawer: {
+      styleOverrides: {
+        paper: {
+          top: '1rem',
+          background: '#495E35',
+          height: 'auto',
+          borderRadius: '8px',
+        },
+      },
+    },
+    MuiBackdrop: {
+      styleOverrides: {
+        root: {
+          backgroundColor: 'rgba(0, 0, 0, 0.3)',
+        },
+      },
+    },
+    MuiButton: {
+      styleOverrides: {
+        root: {
+          textTransform: 'none',
+        },
+      },
+    },
   },
 });

src/Icons/generated/Cog.tsx

@@ -1,5 +1,5 @@
-import PropTypes from "prop-types";
+import PropTypes from 'prop-types';
-import { SVGProps } from "react";
+import { SVGProps } from 'react';
 interface SVGRProps {
   title?: string;
   titleId?: string;

src/Icons/generated/CommanderTax.tsx

@@ -1,5 +1,5 @@
-import PropTypes from "prop-types";
+import PropTypes from 'prop-types';
-import { SVGProps } from "react";
+import { SVGProps } from 'react';
 interface SVGRProps {
   title?: string;
   titleId?: string;

src/Icons/generated/Energy.tsx

@@ -1,5 +1,5 @@
-import PropTypes from "prop-types";
+import PropTypes from 'prop-types';
-import { SVGProps } from "react";
+import { SVGProps } from 'react';
 interface SVGRProps {
   title?: string;
   titleId?: string;

src/Icons/generated/Experience.tsx

@@ -1,5 +1,5 @@
-import PropTypes from "prop-types";
+import PropTypes from 'prop-types';
-import { SVGProps } from "react";
+import { SVGProps } from 'react';
 interface SVGRProps {
   title?: string;
   titleId?: string;

src/Icons/generated/Layouts/FivePlayers.tsx

@@ -1,5 +1,5 @@
-import PropTypes from "prop-types";
+import PropTypes from 'prop-types';
-import { SVGProps } from "react";
+import { SVGProps } from 'react';
 interface SVGRProps {
   title?: string;
   titleId?: string;

src/Icons/generated/Layouts/FivePlayersSide.tsx

@@ -1,5 +1,5 @@
-import PropTypes from "prop-types";
+import PropTypes from 'prop-types';
-import { SVGProps } from "react";
+import { SVGProps } from 'react';
 interface SVGRProps {
   title?: string;
   titleId?: string;

src/Icons/generated/Layouts/FourPlayers.tsx

@@ -1,5 +1,5 @@
-import PropTypes from "prop-types";
+import PropTypes from 'prop-types';
-import { SVGProps } from "react";
+import { SVGProps } from 'react';
 interface SVGRProps {
   title?: string;
   titleId?: string;

src/Icons/generated/Layouts/FourPlayersSide.tsx

@@ -1,5 +1,5 @@
-import PropTypes from "prop-types";
+import PropTypes from 'prop-types';
-import { SVGProps } from "react";
+import { SVGProps } from 'react';
 interface SVGRProps {
   title?: string;
   titleId?: string;

src/Icons/generated/Layouts/OnePlayerLandscape.tsx

@@ -1,5 +1,5 @@
-import PropTypes from "prop-types";
+import PropTypes from 'prop-types';
-import { SVGProps } from "react";
+import { SVGProps } from 'react';
 interface SVGRProps {
   title?: string;
   titleId?: string;

src/Icons/generated/Layouts/OnePlayerPortrait.tsx

@@ -1,5 +1,5 @@
-import PropTypes from "prop-types";
+import PropTypes from 'prop-types';
-import { SVGProps } from "react";
+import { SVGProps } from 'react';
 interface SVGRProps {
   title?: string;
   titleId?: string;

src/Icons/generated/Layouts/SixPlayers.tsx

@@ -1,5 +1,5 @@
-import PropTypes from "prop-types";
+import PropTypes from 'prop-types';
-import { SVGProps } from "react";
+import { SVGProps } from 'react';
 interface SVGRProps {
   title?: string;
   titleId?: string;

src/Icons/generated/Layouts/SixPlayersSide.tsx

@@ -1,5 +1,5 @@
-import PropTypes from "prop-types";
+import PropTypes from 'prop-types';
-import { SVGProps } from "react";
+import { SVGProps } from 'react';
 interface SVGRProps {
   title?: string;
   titleId?: string;

src/Icons/generated/Layouts/ThreePlayers.tsx

@@ -1,5 +1,5 @@
-import PropTypes from "prop-types";
+import PropTypes from 'prop-types';
-import { SVGProps } from "react";
+import { SVGProps } from 'react';
 interface SVGRProps {
   title?: string;
   titleId?: string;

src/Icons/generated/Layouts/ThreePlayersSide.tsx

@@ -1,5 +1,5 @@
-import PropTypes from "prop-types";
+import PropTypes from 'prop-types';
-import { SVGProps } from "react";
+import { SVGProps } from 'react';
 interface SVGRProps {
   title?: string;
   titleId?: string;

src/Icons/generated/Layouts/TwoPlayersOppositeLandscape.tsx

@@ -1,5 +1,5 @@
-import PropTypes from "prop-types";
+import PropTypes from 'prop-types';
-import { SVGProps } from "react";
+import { SVGProps } from 'react';
 interface SVGRProps {
   title?: string;
   titleId?: string;

src/Icons/generated/Layouts/TwoPlayersOppositePortrait.tsx

@@ -1,5 +1,5 @@
-import PropTypes from "prop-types";
+import PropTypes from 'prop-types';
-import { SVGProps } from "react";
+import { SVGProps } from 'react';
 interface SVGRProps {
   title?: string;
   titleId?: string;

src/Icons/generated/Layouts/TwoPlayersSameSide.tsx

@@ -1,5 +1,5 @@
-import PropTypes from "prop-types";
+import PropTypes from 'prop-types';
-import { SVGProps } from "react";
+import { SVGProps } from 'react';
 interface SVGRProps {
   title?: string;
   titleId?: string;

src/Icons/generated/Layouts/index.ts

@@ -1,13 +1,13 @@
-export { default as FivePlayers } from "./FivePlayers";
+export { default as FivePlayers } from './FivePlayers';
-export { default as FivePlayersSide } from "./FivePlayersSide";
+export { default as FivePlayersSide } from './FivePlayersSide';
-export { default as FourPlayers } from "./FourPlayers";
+export { default as FourPlayers } from './FourPlayers';
-export { default as FourPlayersSide } from "./FourPlayersSide";
+export { default as FourPlayersSide } from './FourPlayersSide';
-export { default as OnePlayerLandscape } from "./OnePlayerLandscape";
+export { default as OnePlayerLandscape } from './OnePlayerLandscape';
-export { default as OnePlayerPortrait } from "./OnePlayerPortrait";
+export { default as OnePlayerPortrait } from './OnePlayerPortrait';
-export { default as SixPlayers } from "./SixPlayers";
+export { default as SixPlayers } from './SixPlayers';
-export { default as SixPlayersSide } from "./SixPlayersSide";
+export { default as SixPlayersSide } from './SixPlayersSide';
-export { default as ThreePlayers } from "./ThreePlayers";
+export { default as ThreePlayers } from './ThreePlayers';
-export { default as ThreePlayersSide } from "./ThreePlayersSide";
+export { default as ThreePlayersSide } from './ThreePlayersSide';
-export { default as TwoPlayersOppositeLandscape } from "./TwoPlayersOppositeLandscape";
+export { default as TwoPlayersOppositeLandscape } from './TwoPlayersOppositeLandscape';
-export { default as TwoPlayersOppositePortrait } from "./TwoPlayersOppositePortrait";
+export { default as TwoPlayersOppositePortrait } from './TwoPlayersOppositePortrait';
-export { default as TwoPlayersSameSide } from "./TwoPlayersSameSide";
+export { default as TwoPlayersSameSide } from './TwoPlayersSameSide';

src/Icons/generated/LittleGuy.tsx

@@ -0,0 +1,33 @@
+import PropTypes from 'prop-types';
+import { SVGProps } from 'react';
+interface SVGRProps {
+  title?: string;
+  titleId?: string;
+  size?: string;
+}
+const LittleGuy = ({
+  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 260 262"
+      aria-labelledby={titleId}
+      {...props}
+    >
+      {title ? <title id={titleId}>{title}</title> : null}
+      <g fill="currentColor">
+        <path d="M233.8 9.7c-18.1 17.5-25.6 32.5-25.8 51.5 0 5.9.7 7.8 3.1 7.8 2.8 0 3.6-2.6 4.1-13.2.4-8.9.7-10.2 4.7-18.3 3.6-7.4 6.2-10.7 15.7-20.5C241.9 10.6 247 4.6 247 3.7c0-1.2-1.9-2.7-3.6-2.7-.3 0-4.6 3.9-9.6 8.7zM36.5 54.7c-8.4.6-31.6 4.3-33.6 5.4-2.3 1.2-2.5 4.5-.3 5.3.9.3 1.9.4 2.3.2.3-.2 7.2-1.4 15.1-2.6 12.9-2 17.1-2.2 37.5-1.6 24.9.6 31.9 1.5 52.6 6.9 16.2 4.3 29 8.8 42.3 15.1 8.7 4 10.2 4.5 11.4 3.2 2.3-2.3.8-4.3-5.5-7.4C141.9 70.9 111 61 90.5 57.5c-7.8-1.4-41.4-3.7-47-3.3-1.1.1-4.2.3-7 .5zM205.8 87.6c-16.9 3-35.3 12.3-44.8 22.7-4.5 4.8-9.9 16.6-11.6 25.4-2.6 12.8-.2 40.8 4.7 56.2 8.1 25.4 34.3 55.1 55.6 63.1 12.4 4.6 17.3 5.5 31.3 5.4 7.9 0 14.6-.5 16.3-1.2 2.5-1.1 2.7-1.5 2.7-7.6v-6.5l-4.2 1.6c-6.1 2.3-24.2 2.2-32.7-.1-13.5-3.7-26.2-12.2-36.9-24.5-16.9-19.7-22.9-34.2-25.1-60.6-1.4-17.8 0-27.4 5.6-37.6 3.6-6.8 9.5-11.8 19.5-16.7 21.8-10.7 42.8-11.5 66.3-2.3l7.5 2.9V94.2l-8-2.7c-16.2-5.4-31.1-6.7-46.2-3.9z" />
+        <path d="M222.5 132.5c-4.8 4.7-1.9 11.5 4.9 11.5 6.4 0 9-7.9 4-11.9-3.5-2.7-5.9-2.6-8.9.4zM184.5 152.5c-3 3-3.1 5.4-.4 8.9 4 5 11.9 2.4 11.9-4 0-6.8-6.8-9.7-11.5-4.9zM255.8 171.8c-4.7 9.7-13.3 20.3-19.5 23.8-5.9 3.3-7.3 5-7.3 8.6 0 3.6 3.2 6.8 6.8 6.8 4.1 0 12-5.1 18.5-11.8l5.7-6.1v-14.5c0-8-.1-14.6-.2-14.5-.2 0-2 3.5-4 7.7z" />
+      </g>
+    </svg>
+  );
+};
+LittleGuy.propTypes = {
+  title: PropTypes.string,
+};
+export default LittleGuy;

src/Icons/generated/PartnerTax.tsx

@@ -1,5 +1,5 @@
-import PropTypes from "prop-types";
+import PropTypes from 'prop-types';
-import { SVGProps } from "react";
+import { SVGProps } from 'react';
 interface SVGRProps {
   title?: string;
   titleId?: string;

src/Icons/generated/Poison.tsx

@@ -1,5 +1,5 @@
-import PropTypes from "prop-types";
+import PropTypes from 'prop-types';
-import { SVGProps } from "react";
+import { SVGProps } from 'react';
 interface SVGRProps {
   title?: string;
   titleId?: string;

src/Icons/generated/Support/BuyMeCoffee.tsx

@@ -1,5 +1,5 @@
-import PropTypes from "prop-types";
+import PropTypes from 'prop-types';
-import { SVGProps } from "react";
+import { SVGProps } from 'react';
 interface SVGRProps {
   title?: string;
   titleId?: string;

src/Icons/generated/Support/index.ts

@@ -1,2 +1,2 @@
-export { default as BuyMeCoffee } from "./BuyMeCoffee";
+export { default as BuyMeCoffee } from './BuyMeCoffee';
-export { default as KoFi } from "./KoFi";
+export { default as KoFi } from './KoFi';

src/Icons/generated/index.ts

@@ -1,6 +1,7 @@
-export { default as Cog } from "./Cog";
+export { default as Cog } from './Cog';
-export { default as CommanderTax } from "./CommanderTax";
+export { default as CommanderTax } from './CommanderTax';
-export { default as Energy } from "./Energy";
+export { default as Energy } from './Energy';
-export { default as Experience } from "./Experience";
+export { default as Experience } from './Experience';
-export { default as PartnerTax } from "./PartnerTax";
+export { default as LittleGuy } from './LittleGuy';
-export { default as Poison } from "./Poison";
+export { default as PartnerTax } from './PartnerTax';
+export { default as Poison } from './Poison';

src/Icons/svgs/LittleGuy.svg

@@ -0,0 +1,31 @@
+<?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="260.000000pt" height="262.000000pt" viewBox="0 0 260.000000 262.000000"
+ preserveAspectRatio="xMidYMid meet">
+
+<g transform="translate(0.000000,262.000000) scale(0.100000,-0.100000)"
+fill="currentColor" stroke="none">
+<path d="M2338 2523 c-181 -175 -256 -325 -258 -515 0 -59 7 -78 31 -78 28 0
+36 26 41 132 4 89 7 102 47 183 36 74 62 107 157 205 63 64 114 124 114 133 0
+12 -19 27 -36 27 -3 0 -46 -39 -96 -87z"/>
+<path d="M365 2073 c-84 -6 -316 -43 -336 -54 -23 -12 -25 -45 -3 -53 9 -3 19
+-4 23 -2 3 2 72 14 151 26 129 20 171 22 375 16 249 -6 319 -15 526 -69 162
+-43 290 -88 423 -151 87 -40 102 -45 114 -32 23 23 8 43 -55 74 -164 83 -473
+182 -678 217 -78 14 -414 37 -470 33 -11 -1 -42 -3 -70 -5z"/>
+<path d="M2058 1744 c-169 -30 -353 -123 -448 -227 -45 -48 -99 -166 -116
+-254 -26 -128 -2 -408 47 -562 81 -254 343 -551 556 -631 124 -46 173 -55 313
+-54 79 0 146 5 163 12 25 11 27 15 27 76 l0 65 -42 -16 c-61 -23 -242 -22
+-327 1 -135 37 -262 122 -369 245 -169 197 -229 342 -251 606 -14 178 0 274
+56 376 36 68 95 118 195 167 218 107 428 115 663 23 l75 -29 0 68 0 68 -80 27
+c-162 54 -311 67 -462 39z"/>
+<path d="M2225 1295 c-48 -47 -19 -115 49 -115 64 0 90 79 40 119 -35 27 -59
+26 -89 -4z"/>
+<path d="M1845 1095 c-30 -30 -31 -54 -4 -89 40 -50 119 -24 119 40 0 68 -68
+97 -115 49z"/>
+<path d="M2558 902 c-47 -97 -133 -203 -195 -238 -59 -33 -73 -50 -73 -86 0
+-36 32 -68 68 -68 41 0 120 51 185 118 l57 61 0 145 c0 80 -1 146 -2 145 -2 0
+-20 -35 -40 -77z"/>
+</g>
+</svg>