From f626799a26a08ac268950fd5ee113ef457873602 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Viktor=20R=C3=A5dberg?= <66582202+Vikeo@users.noreply.github.com> Date: Fri, 1 Sep 2023 19:40:21 +0200 Subject: [PATCH] Add info modal (#14) * add border radius * fix settings styling a little * move hook * get default values from localstorage * replace svgs with own svg * update favicon * add logo * update meta * adjust scaling * fix some scaling * add infomodal --- src/Components/Buttons/CommanderDamage.tsx | 2 +- src/Components/Buttons/LifeCounterButton.tsx | 11 ++- src/Components/Buttons/SettingsButton.tsx | 4 +- src/Components/LifeCounter/LifeCounter.tsx | 20 ++--- src/Components/Misc/InfoModal.tsx | 95 ++++++++++++++++++++ src/Components/PlayerMenu/PlayerMenu.tsx | 4 +- src/Components/PlayerMenu/Settings.tsx | 12 ++- src/Components/Views/StartMenu/StartMenu.tsx | 23 ++++- src/Icons/generated/Info.tsx | 33 +++++++ src/Icons/generated/index.ts | 1 + src/Icons/svgs/Info.svg | 30 +++++++ 11 files changed, 216 insertions(+), 19 deletions(-) create mode 100644 src/Components/Misc/InfoModal.tsx create mode 100644 src/Icons/generated/Info.tsx create mode 100644 src/Icons/svgs/Info.svg diff --git a/src/Components/Buttons/CommanderDamage.tsx b/src/Components/Buttons/CommanderDamage.tsx index 21eebf7..78e233c 100644 --- a/src/Components/Buttons/CommanderDamage.tsx +++ b/src/Components/Buttons/CommanderDamage.tsx @@ -51,7 +51,7 @@ const CommanderDamageButton = styled.button<{ props.rotation === Rotation.Side ) { return css` - width: 10vmin; + width: 6vmax; height: auto; `; } diff --git a/src/Components/Buttons/LifeCounterButton.tsx b/src/Components/Buttons/LifeCounterButton.tsx index dd112ab..93e63ed 100644 --- a/src/Components/Buttons/LifeCounterButton.tsx +++ b/src/Components/Buttons/LifeCounterButton.tsx @@ -9,7 +9,6 @@ export const StyledLifeCounterButton = styled.button` width: 100%; height: 100%; color: rgba(0, 0, 0, 0.4); - font-size: 4rem; font-weight: 600; background-color: transparent; border: none; @@ -35,6 +34,7 @@ const TextContainer = styled.div<{ rotation: number; }>` position: relative; + top: -10%; ${(props) => { if ( @@ -45,10 +45,13 @@ const TextContainer = styled.div<{ return css` rotate: -90deg; bottom: 25%; + left: -10%; + top: auto; `; } return css` rotate: -90deg; + left: -10%; top: 25%; `; } @@ -111,6 +114,11 @@ const LifeCounterButton = ({ setHasPressedDown(false); }; + const fontSize = + rotation === Rotation.SideFlipped || rotation === Rotation.Side + ? '10vmax' + : '20vmin'; + return ( ) => { e.preventDefault(); }} + style={{ fontSize }} > ` border: none; outline: none; cursor: pointer; - top: 12vmin; + top: 25%; right: 1vmax; background-color: transparent; user-select: none; @@ -26,7 +26,7 @@ export const StyledSettingsButton = styled.button<{ rotation: number }>` return css` right: auto; top: 1vmax; - left: 12vmin; + left: 27%; `; } }} diff --git a/src/Components/LifeCounter/LifeCounter.tsx b/src/Components/LifeCounter/LifeCounter.tsx index 844b94c..3d3a172 100644 --- a/src/Components/LifeCounter/LifeCounter.tsx +++ b/src/Components/LifeCounter/LifeCounter.tsx @@ -187,8 +187,8 @@ export const LoseGameButton = styled.button<{ rotation: Rotation }>` border: none; outline: none; cursor: pointer; - top: 12vmin; - right: 6vmax; + top: 25%; + right: 15%; background-color: #43434380; border-radius: 8px; -webkit-touch-callout: none; @@ -202,15 +202,15 @@ export const LoseGameButton = styled.button<{ rotation: Rotation }>` if (props.rotation === Rotation.SideFlipped) { return css` right: auto; - top: 6vmax; - left: 12vmin; + top: 15%; + left: 27%; rotate: ${props.rotation}deg; `; } else if (props.rotation === Rotation.Side) { return css` right: auto; - top: 6vmax; - left: 12vmin; + top: 15%; + left: 27%; rotate: ${props.rotation - 180}deg; `; } @@ -311,14 +311,14 @@ const LifeCounter = ({ const fontSize = player.settings.rotation === Rotation.SideFlipped || player.settings.rotation === Rotation.Side - ? `clamp(6rem, ${size}vmax, 10rem)` - : `clamp(6rem, ${size}vmin, 10rem)`; + ? `${size}vmax` + : `${size}vmin`; const strokeWidth = player.settings.rotation === Rotation.SideFlipped || player.settings.rotation === Rotation.Side - ? `clamp(0.4rem, ${size / 20}vmax, 12rem)` - : `clamp(0.4rem, ${size / 20}vmin, 12rem)`; + ? `${size / 20}vmax` + : `${size / 20}vmin`; return ( 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/PlayerMenu/PlayerMenu.tsx b/src/Components/PlayerMenu/PlayerMenu.tsx index 9e193f3..c9aa201 100644 --- a/src/Components/PlayerMenu/PlayerMenu.tsx +++ b/src/Components/PlayerMenu/PlayerMenu.tsx @@ -34,8 +34,9 @@ const CloseButton = styled.div<{ rotation: Rotation; }>` position: absolute; - top: 5%; + top: 15%; right: 5%; + z-index: 9999; border: none; outline: none; cursor: pointer; @@ -77,6 +78,7 @@ const PlayerMenu = ({ resetCurrentGame, }: PlayerMenuProps) => { const handleOnClick = () => { + console.log('hej'); setShowPlayerMenu(false); }; diff --git a/src/Components/PlayerMenu/Settings.tsx b/src/Components/PlayerMenu/Settings.tsx index 3711916..36f7946 100644 --- a/src/Components/PlayerMenu/Settings.tsx +++ b/src/Components/PlayerMenu/Settings.tsx @@ -156,6 +156,12 @@ const Settings = ({ player, onChange, resetCurrentGame }: SettingsProps) => { } }; + const buttonFontSize = + player.settings.rotation === Rotation.SideFlipped || + player.settings.rotation === Rotation.Side + ? '1.3vmax' + : '2.5vmin'; + return ( { style={{ cursor: 'pointer', userSelect: 'none', - fontSize: '0.6rem', + fontSize: buttonFontSize, padding: '0 4px 0 4px', }} onClick={handleNewGame} @@ -281,7 +287,7 @@ const Settings = ({ player, onChange, resetCurrentGame }: SettingsProps) => { style={{ cursor: 'pointer', userSelect: 'none', - fontSize: '0.6rem', + fontSize: buttonFontSize, padding: '0 4px 0 4px', }} onClick={toggleFullscreen} @@ -293,7 +299,7 @@ const Settings = ({ player, onChange, resetCurrentGame }: SettingsProps) => { style={{ cursor: 'pointer', userSelect: 'none', - fontSize: '0.6rem', + fontSize: buttonFontSize, padding: '0 4px 0 4px', }} onClick={handleWakeLock} 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 @@ + + + + + + + + + +