diff --git a/react-screen-wake-lock.d.ts b/react-screen-wake-lock.d.ts deleted file mode 100644 index 9bd0295..0000000 --- a/react-screen-wake-lock.d.ts +++ /dev/null @@ -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; -} \ No newline at end of file diff --git a/src/Components/Buttons/CommanderDamage.tsx b/src/Components/Buttons/CommanderDamage.tsx index 5f9de68..62cca73 100644 --- a/src/Components/Buttons/CommanderDamage.tsx +++ b/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'; diff --git a/src/Components/Buttons/ExtraCounter.tsx b/src/Components/Buttons/ExtraCounter.tsx index 8531974..8c3a928 100644 --- a/src/Components/Buttons/ExtraCounter.tsx +++ b/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` diff --git a/src/Components/Counters/ExtraCountersBar.tsx b/src/Components/Counters/ExtraCountersBar.tsx index cdceb34..c82b79f 100644 --- a/src/Components/Counters/ExtraCountersBar.tsx +++ b/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; diff --git a/src/Components/Misc/SupportMe.tsx b/src/Components/Misc/SupportMe.tsx index c43ed18..533de15 100644 --- a/src/Components/Misc/SupportMe.tsx +++ b/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 ( - - - - Buy me a tea - - - - Buy me a ko-fi - - + <> + + + + + + + + + Buy him a tea + + + + + Buy him a ko-fi + + + + + ); }; diff --git a/src/Components/Views/StartMenu/StartMenu.tsx b/src/Components/Views/StartMenu/StartMenu.tsx index 767b387..ed9c165 100644 --- a/src/Components/Views/StartMenu/StartMenu.tsx +++ b/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 ( -

Game Setup

+ + +

Life Trinket

Number of Players + + + - - + ); }; diff --git a/src/Data/theme.ts b/src/Data/theme.ts index 7dd2f7b..35adf7e 100644 --- a/src/Data/theme.ts +++ b/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', + }, + }, + }, }, }); diff --git a/src/Icons/generated/Cog.tsx b/src/Icons/generated/Cog.tsx index f31a72e..3341cfa 100644 --- a/src/Icons/generated/Cog.tsx +++ b/src/Icons/generated/Cog.tsx @@ -1,5 +1,5 @@ -import PropTypes from "prop-types"; -import { SVGProps } from "react"; +import PropTypes from 'prop-types'; +import { SVGProps } from 'react'; interface SVGRProps { title?: string; titleId?: string; diff --git a/src/Icons/generated/CommanderTax.tsx b/src/Icons/generated/CommanderTax.tsx index 0b94328..70d7afd 100644 --- a/src/Icons/generated/CommanderTax.tsx +++ b/src/Icons/generated/CommanderTax.tsx @@ -1,5 +1,5 @@ -import PropTypes from "prop-types"; -import { SVGProps } from "react"; +import PropTypes from 'prop-types'; +import { SVGProps } from 'react'; interface SVGRProps { title?: string; titleId?: string; diff --git a/src/Icons/generated/Energy.tsx b/src/Icons/generated/Energy.tsx index 1399dc7..d6ef87c 100644 --- a/src/Icons/generated/Energy.tsx +++ b/src/Icons/generated/Energy.tsx @@ -1,5 +1,5 @@ -import PropTypes from "prop-types"; -import { SVGProps } from "react"; +import PropTypes from 'prop-types'; +import { SVGProps } from 'react'; interface SVGRProps { title?: string; titleId?: string; diff --git a/src/Icons/generated/Experience.tsx b/src/Icons/generated/Experience.tsx index 9910ba7..5c99f83 100644 --- a/src/Icons/generated/Experience.tsx +++ b/src/Icons/generated/Experience.tsx @@ -1,5 +1,5 @@ -import PropTypes from "prop-types"; -import { SVGProps } from "react"; +import PropTypes from 'prop-types'; +import { SVGProps } from 'react'; interface SVGRProps { title?: string; titleId?: string; diff --git a/src/Icons/generated/Layouts/FivePlayers.tsx b/src/Icons/generated/Layouts/FivePlayers.tsx index eee331a..7b67e13 100644 --- a/src/Icons/generated/Layouts/FivePlayers.tsx +++ b/src/Icons/generated/Layouts/FivePlayers.tsx @@ -1,5 +1,5 @@ -import PropTypes from "prop-types"; -import { SVGProps } from "react"; +import PropTypes from 'prop-types'; +import { SVGProps } from 'react'; interface SVGRProps { title?: string; titleId?: string; diff --git a/src/Icons/generated/Layouts/FivePlayersSide.tsx b/src/Icons/generated/Layouts/FivePlayersSide.tsx index 341cf8c..73225f3 100644 --- a/src/Icons/generated/Layouts/FivePlayersSide.tsx +++ b/src/Icons/generated/Layouts/FivePlayersSide.tsx @@ -1,5 +1,5 @@ -import PropTypes from "prop-types"; -import { SVGProps } from "react"; +import PropTypes from 'prop-types'; +import { SVGProps } from 'react'; interface SVGRProps { title?: string; titleId?: string; diff --git a/src/Icons/generated/Layouts/FourPlayers.tsx b/src/Icons/generated/Layouts/FourPlayers.tsx index 589f487..71e6b36 100644 --- a/src/Icons/generated/Layouts/FourPlayers.tsx +++ b/src/Icons/generated/Layouts/FourPlayers.tsx @@ -1,5 +1,5 @@ -import PropTypes from "prop-types"; -import { SVGProps } from "react"; +import PropTypes from 'prop-types'; +import { SVGProps } from 'react'; interface SVGRProps { title?: string; titleId?: string; diff --git a/src/Icons/generated/Layouts/FourPlayersSide.tsx b/src/Icons/generated/Layouts/FourPlayersSide.tsx index b45c4c2..5c0bd1f 100644 --- a/src/Icons/generated/Layouts/FourPlayersSide.tsx +++ b/src/Icons/generated/Layouts/FourPlayersSide.tsx @@ -1,5 +1,5 @@ -import PropTypes from "prop-types"; -import { SVGProps } from "react"; +import PropTypes from 'prop-types'; +import { SVGProps } from 'react'; interface SVGRProps { title?: string; titleId?: string; diff --git a/src/Icons/generated/Layouts/OnePlayerLandscape.tsx b/src/Icons/generated/Layouts/OnePlayerLandscape.tsx index 6bbc550..9a70318 100644 --- a/src/Icons/generated/Layouts/OnePlayerLandscape.tsx +++ b/src/Icons/generated/Layouts/OnePlayerLandscape.tsx @@ -1,5 +1,5 @@ -import PropTypes from "prop-types"; -import { SVGProps } from "react"; +import PropTypes from 'prop-types'; +import { SVGProps } from 'react'; interface SVGRProps { title?: string; titleId?: string; diff --git a/src/Icons/generated/Layouts/OnePlayerPortrait.tsx b/src/Icons/generated/Layouts/OnePlayerPortrait.tsx index 5f64b0a..4c68507 100644 --- a/src/Icons/generated/Layouts/OnePlayerPortrait.tsx +++ b/src/Icons/generated/Layouts/OnePlayerPortrait.tsx @@ -1,5 +1,5 @@ -import PropTypes from "prop-types"; -import { SVGProps } from "react"; +import PropTypes from 'prop-types'; +import { SVGProps } from 'react'; interface SVGRProps { title?: string; titleId?: string; diff --git a/src/Icons/generated/Layouts/SixPlayers.tsx b/src/Icons/generated/Layouts/SixPlayers.tsx index 442b5ee..a66028f 100644 --- a/src/Icons/generated/Layouts/SixPlayers.tsx +++ b/src/Icons/generated/Layouts/SixPlayers.tsx @@ -1,5 +1,5 @@ -import PropTypes from "prop-types"; -import { SVGProps } from "react"; +import PropTypes from 'prop-types'; +import { SVGProps } from 'react'; interface SVGRProps { title?: string; titleId?: string; diff --git a/src/Icons/generated/Layouts/SixPlayersSide.tsx b/src/Icons/generated/Layouts/SixPlayersSide.tsx index 56aeb00..8da8b04 100644 --- a/src/Icons/generated/Layouts/SixPlayersSide.tsx +++ b/src/Icons/generated/Layouts/SixPlayersSide.tsx @@ -1,5 +1,5 @@ -import PropTypes from "prop-types"; -import { SVGProps } from "react"; +import PropTypes from 'prop-types'; +import { SVGProps } from 'react'; interface SVGRProps { title?: string; titleId?: string; diff --git a/src/Icons/generated/Layouts/ThreePlayers.tsx b/src/Icons/generated/Layouts/ThreePlayers.tsx index e511e04..aa7cd73 100644 --- a/src/Icons/generated/Layouts/ThreePlayers.tsx +++ b/src/Icons/generated/Layouts/ThreePlayers.tsx @@ -1,5 +1,5 @@ -import PropTypes from "prop-types"; -import { SVGProps } from "react"; +import PropTypes from 'prop-types'; +import { SVGProps } from 'react'; interface SVGRProps { title?: string; titleId?: string; diff --git a/src/Icons/generated/Layouts/ThreePlayersSide.tsx b/src/Icons/generated/Layouts/ThreePlayersSide.tsx index f5605b5..d4ab3fa 100644 --- a/src/Icons/generated/Layouts/ThreePlayersSide.tsx +++ b/src/Icons/generated/Layouts/ThreePlayersSide.tsx @@ -1,5 +1,5 @@ -import PropTypes from "prop-types"; -import { SVGProps } from "react"; +import PropTypes from 'prop-types'; +import { SVGProps } from 'react'; interface SVGRProps { title?: string; titleId?: string; diff --git a/src/Icons/generated/Layouts/TwoPlayersOppositeLandscape.tsx b/src/Icons/generated/Layouts/TwoPlayersOppositeLandscape.tsx index 9d7cc04..cd192cb 100644 --- a/src/Icons/generated/Layouts/TwoPlayersOppositeLandscape.tsx +++ b/src/Icons/generated/Layouts/TwoPlayersOppositeLandscape.tsx @@ -1,5 +1,5 @@ -import PropTypes from "prop-types"; -import { SVGProps } from "react"; +import PropTypes from 'prop-types'; +import { SVGProps } from 'react'; interface SVGRProps { title?: string; titleId?: string; diff --git a/src/Icons/generated/Layouts/TwoPlayersOppositePortrait.tsx b/src/Icons/generated/Layouts/TwoPlayersOppositePortrait.tsx index 3653d0d..1bdc480 100644 --- a/src/Icons/generated/Layouts/TwoPlayersOppositePortrait.tsx +++ b/src/Icons/generated/Layouts/TwoPlayersOppositePortrait.tsx @@ -1,5 +1,5 @@ -import PropTypes from "prop-types"; -import { SVGProps } from "react"; +import PropTypes from 'prop-types'; +import { SVGProps } from 'react'; interface SVGRProps { title?: string; titleId?: string; diff --git a/src/Icons/generated/Layouts/TwoPlayersSameSide.tsx b/src/Icons/generated/Layouts/TwoPlayersSameSide.tsx index f1784a6..64f5d63 100644 --- a/src/Icons/generated/Layouts/TwoPlayersSameSide.tsx +++ b/src/Icons/generated/Layouts/TwoPlayersSameSide.tsx @@ -1,5 +1,5 @@ -import PropTypes from "prop-types"; -import { SVGProps } from "react"; +import PropTypes from 'prop-types'; +import { SVGProps } from 'react'; interface SVGRProps { title?: string; titleId?: string; diff --git a/src/Icons/generated/Layouts/index.ts b/src/Icons/generated/Layouts/index.ts index a38edbe..503e262 100644 --- a/src/Icons/generated/Layouts/index.ts +++ b/src/Icons/generated/Layouts/index.ts @@ -1,13 +1,13 @@ -export { default as FivePlayers } from "./FivePlayers"; -export { default as FivePlayersSide } from "./FivePlayersSide"; -export { default as FourPlayers } from "./FourPlayers"; -export { default as FourPlayersSide } from "./FourPlayersSide"; -export { default as OnePlayerLandscape } from "./OnePlayerLandscape"; -export { default as OnePlayerPortrait } from "./OnePlayerPortrait"; -export { default as SixPlayers } from "./SixPlayers"; -export { default as SixPlayersSide } from "./SixPlayersSide"; -export { default as ThreePlayers } from "./ThreePlayers"; -export { default as ThreePlayersSide } from "./ThreePlayersSide"; -export { default as TwoPlayersOppositeLandscape } from "./TwoPlayersOppositeLandscape"; -export { default as TwoPlayersOppositePortrait } from "./TwoPlayersOppositePortrait"; -export { default as TwoPlayersSameSide } from "./TwoPlayersSameSide"; +export { default as FivePlayers } from './FivePlayers'; +export { default as FivePlayersSide } from './FivePlayersSide'; +export { default as FourPlayers } from './FourPlayers'; +export { default as FourPlayersSide } from './FourPlayersSide'; +export { default as OnePlayerLandscape } from './OnePlayerLandscape'; +export { default as OnePlayerPortrait } from './OnePlayerPortrait'; +export { default as SixPlayers } from './SixPlayers'; +export { default as SixPlayersSide } from './SixPlayersSide'; +export { default as ThreePlayers } from './ThreePlayers'; +export { default as ThreePlayersSide } from './ThreePlayersSide'; +export { default as TwoPlayersOppositeLandscape } from './TwoPlayersOppositeLandscape'; +export { default as TwoPlayersOppositePortrait } from './TwoPlayersOppositePortrait'; +export { default as TwoPlayersSameSide } from './TwoPlayersSameSide'; diff --git a/src/Icons/generated/LittleGuy.tsx b/src/Icons/generated/LittleGuy.tsx new file mode 100644 index 0000000..f33ba2f --- /dev/null +++ b/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 & SVGRProps) => { + return ( + + {title ? {title} : null} + + + + + + ); +}; +LittleGuy.propTypes = { + title: PropTypes.string, +}; +export default LittleGuy; diff --git a/src/Icons/generated/PartnerTax.tsx b/src/Icons/generated/PartnerTax.tsx index 24a7c78..3c5c6bb 100644 --- a/src/Icons/generated/PartnerTax.tsx +++ b/src/Icons/generated/PartnerTax.tsx @@ -1,5 +1,5 @@ -import PropTypes from "prop-types"; -import { SVGProps } from "react"; +import PropTypes from 'prop-types'; +import { SVGProps } from 'react'; interface SVGRProps { title?: string; titleId?: string; diff --git a/src/Icons/generated/Poison.tsx b/src/Icons/generated/Poison.tsx index 1cc39ed..3a043c6 100644 --- a/src/Icons/generated/Poison.tsx +++ b/src/Icons/generated/Poison.tsx @@ -1,5 +1,5 @@ -import PropTypes from "prop-types"; -import { SVGProps } from "react"; +import PropTypes from 'prop-types'; +import { SVGProps } from 'react'; interface SVGRProps { title?: string; titleId?: string; diff --git a/src/Icons/generated/Support/BuyMeCoffee.tsx b/src/Icons/generated/Support/BuyMeCoffee.tsx index b4c1baa..2ba52e1 100644 --- a/src/Icons/generated/Support/BuyMeCoffee.tsx +++ b/src/Icons/generated/Support/BuyMeCoffee.tsx @@ -1,5 +1,5 @@ -import PropTypes from "prop-types"; -import { SVGProps } from "react"; +import PropTypes from 'prop-types'; +import { SVGProps } from 'react'; interface SVGRProps { title?: string; titleId?: string; diff --git a/src/Icons/generated/Support/KoFi.tsx b/src/Icons/generated/Support/KoFi.tsx index 0f7e9c3..88ec195 100644 --- a/src/Icons/generated/Support/KoFi.tsx +++ b/src/Icons/generated/Support/KoFi.tsx @@ -1,5 +1,5 @@ -import PropTypes from "prop-types"; -import { SVGProps } from "react"; +import PropTypes from 'prop-types'; +import { SVGProps } from 'react'; interface SVGRProps { title?: string; titleId?: string; @@ -20,11 +20,28 @@ const KoFi = ({ {...props} > {title ? {title} : null} - - + + + + + + ); diff --git a/src/Icons/generated/Support/index.ts b/src/Icons/generated/Support/index.ts index 064bcba..0cca453 100644 --- a/src/Icons/generated/Support/index.ts +++ b/src/Icons/generated/Support/index.ts @@ -1,2 +1,2 @@ -export { default as BuyMeCoffee } from "./BuyMeCoffee"; -export { default as KoFi } from "./KoFi"; +export { default as BuyMeCoffee } from './BuyMeCoffee'; +export { default as KoFi } from './KoFi'; diff --git a/src/Icons/generated/index.ts b/src/Icons/generated/index.ts index 72148e1..450a849 100644 --- a/src/Icons/generated/index.ts +++ b/src/Icons/generated/index.ts @@ -1,6 +1,7 @@ -export { default as Cog } from "./Cog"; -export { default as CommanderTax } from "./CommanderTax"; -export { default as Energy } from "./Energy"; -export { default as Experience } from "./Experience"; -export { default as PartnerTax } from "./PartnerTax"; -export { default as Poison } from "./Poison"; +export { default as Cog } from './Cog'; +export { default as CommanderTax } from './CommanderTax'; +export { default as Energy } from './Energy'; +export { default as Experience } from './Experience'; +export { default as LittleGuy } from './LittleGuy'; +export { default as PartnerTax } from './PartnerTax'; +export { default as Poison } from './Poison'; diff --git a/src/Icons/svgs/LittleGuy.svg b/src/Icons/svgs/LittleGuy.svg new file mode 100644 index 0000000..0059927 --- /dev/null +++ b/src/Icons/svgs/LittleGuy.svg @@ -0,0 +1,31 @@ + + + + + + + + + + + + + diff --git a/src/Icons/svgs/Support/KoFi.svg b/src/Icons/svgs/Support/KoFi.svg index 51ee306..d22a7ae 100644 --- a/src/Icons/svgs/Support/KoFi.svg +++ b/src/Icons/svgs/Support/KoFi.svg @@ -1,39 +1 @@ - - - - - - - - - - + \ No newline at end of file