diff --git a/src/Components/Misc/InfoModal.tsx b/src/Components/Misc/InfoModal.tsx new file mode 100644 index 0000000..34ecdab --- /dev/null +++ b/src/Components/Misc/InfoModal.tsx @@ -0,0 +1,95 @@ +import { Modal } from '@mui/material'; +import { theme } from '../../Data/theme'; + +type InfoModalProps = { + isOpen: boolean; + closeModal: () => void; +}; + +export const InfoModal = ({ isOpen, closeModal }: InfoModalProps) => { + return ( + +
+
+

📋 Usage Guide

+

+ There are some controls that you might not know about, so here's a + short list of them. +

+ +

Life counter

+
    +
  • + Tap on a player's + or - button to add or + subtract 1 life. +
    • +
  • + Long press on a player's + or - button to add or + subtract 10 life. +
    • +
+ +

Commander damage and other counters

+
    +
  • + Tap on the counter to add{' '} + 1 counter. +
    • +
  • + Long press on the counter to subtract{' '} + 1 counter. +
    • +
+ +

Other

+

+ When a player is at or below 0 life, has taken{' '} + 21 or more Commander Damage or has{' '} + 10 or more poison counters, a button with a skull + will appear on that player's card. +

+

+ Tap on the button to mark that player as lost, dimming their player + card. +

+
+
+
+ Visit my + + {' '} + GitHub{' '} + + for more info about this web app. +
+
+ + ); +}; diff --git a/src/Components/Views/StartMenu/StartMenu.tsx b/src/Components/Views/StartMenu/StartMenu.tsx index 187d9a7..608c6e7 100644 --- a/src/Components/Views/StartMenu/StartMenu.tsx +++ b/src/Components/Views/StartMenu/StartMenu.tsx @@ -7,11 +7,14 @@ import { InitialSettings, createInitialPlayers, } from '../../../Data/getInitialPlayers'; +import { theme } from '../../../Data/theme'; +import { useAnalytics } from '../../../Hooks/useAnalytics'; +import { Info } from '../../../Icons/generated'; import { Player } from '../../../Types/Player'; +import { InfoModal } from '../../Misc/InfoModal'; import { SupportMe } from '../../Misc/SupportMe'; import { H2, Paragraph } from '../../Misc/TextComponents'; import LayoutOptions from './LayoutOptions'; -import { useAnalytics } from '../../../Hooks/useAnalytics'; const MainWrapper = styled.div` width: 100vw; @@ -93,6 +96,7 @@ const Start = ({ setInitialGameSettings, }: StartProps) => { const analytics = useAnalytics(); + const [openModal, setOpenModal] = useState(false); const [playerOptions, setPlayerOptions] = useState( initialGameSettings || { numberOfPlayers: 4, @@ -157,6 +161,23 @@ const Start = ({ return ( + { + console.log('lmao'); + setOpenModal(!openModal); + }} + /> + + { + setOpenModal(false); + }} + isOpen={openModal} + /> +

Life Trinket

diff --git a/src/Icons/generated/Info.tsx b/src/Icons/generated/Info.tsx new file mode 100644 index 0000000..248c380 --- /dev/null +++ b/src/Icons/generated/Info.tsx @@ -0,0 +1,33 @@ +import PropTypes from 'prop-types'; +import { SVGProps } from 'react'; +interface SVGRProps { + title?: string; + titleId?: string; + size?: string; +} +const Info = ({ + title, + titleId, + ...props +}: SVGProps & SVGRProps) => { + return ( + + {title ? {title} : null} + + + + + + ); +}; +Info.propTypes = { + title: PropTypes.string, +}; +export default Info; diff --git a/src/Icons/generated/index.ts b/src/Icons/generated/index.ts index 93ef3c6..8f3890b 100644 --- a/src/Icons/generated/index.ts +++ b/src/Icons/generated/index.ts @@ -2,6 +2,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 Info } from './Info'; export { default as LittleGuy } from './LittleGuy'; export { default as Logo } from './Logo'; export { default as PartnerTax } from './PartnerTax'; diff --git a/src/Icons/svgs/Info.svg b/src/Icons/svgs/Info.svg new file mode 100644 index 0000000..6838225 --- /dev/null +++ b/src/Icons/svgs/Info.svg @@ -0,0 +1,30 @@ + + + + + + + + + +