diff --git a/package.json b/package.json index 8001815..52e55a0 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "life-trinket", "private": true, - "version": "0.6.5", + "version": "0.6.6", "type": "commonjs", "engines": { "node": ">=18", diff --git a/src/Components/LifeCounter/LifeCounter.tsx b/src/Components/LifeCounter/LifeCounter.tsx index 35623e9..9541ce0 100644 --- a/src/Components/LifeCounter/LifeCounter.tsx +++ b/src/Components/LifeCounter/LifeCounter.tsx @@ -4,12 +4,40 @@ import { twc } from 'react-twc'; import { useGlobalSettings } from '../../Hooks/useGlobalSettings'; import { usePlayers } from '../../Hooks/usePlayers'; import { Player, Rotation } from '../../Types/Player'; -import { RotationDivProps } from '../Buttons/CommanderDamage'; +import { + RotationButtonProps, + RotationDivProps, +} from '../Buttons/CommanderDamage'; import { LoseGameButton } from '../Buttons/LoseButton'; import CommanderDamageBar from '../Counters/CommanderDamageBar'; import ExtraCountersBar from '../Counters/ExtraCountersBar'; import PlayerMenu from '../Player/PlayerMenu'; import Health from './Health'; +import { Cog } from '../../Icons/generated'; + +const SettingsButtonTwc = twc.button((props) => [ + 'absolute flex-grow border-none outline-none cursor-pointer bg-transparent z-[1] select-none webkit-user-select-none', + props.$rotation === Rotation.Side || props.$rotation === Rotation.SideFlipped + ? `right-auto top-[1vmax] left-[27%]` + : 'top-1/4 right-[1vmax]', +]); + +type SettingsButtonProps = { + onClick: () => void; + rotation: Rotation; +}; + +const SettingsButton = ({ onClick, rotation }: SettingsButtonProps) => { + return ( + + + + ); +}; const LifeCounterContentWrapper = twc.div` relative flex flex-grow flex-col items-center w-full h-full overflow-hidden`; @@ -21,7 +49,7 @@ const LifeCounterWrapper = twc.div((props) => [ : `flex-col`, ]); -const StartingPlayerNoticeWrapper = twc.div`z-[1] flex absolute w-full h-full justify-center items-center pointer-events-none select-none webkit-user-select-none bg-primary-main`; +const StartingPlayerNoticeWrapper = twc.div`z-10 flex absolute w-full h-full justify-center items-center pointer-events-none select-none webkit-user-select-none bg-primary-main`; const PlayerLostWrapper = twc.div((props) => [ 'z-[1] flex absolute w-full h-full justify-center items-center pointer-events-none select-none webkit-user-select-none bg-lifeCounter-lostWrapper opacity-75', @@ -192,6 +220,14 @@ const LifeCounter = ({ player, opponents }: LifeCounterProps) => { key={player.index} handleLifeChange={handleLifeChange} /> + {settings.showPlayerMenuCog && ( + { + setShowPlayerMenu(!showPlayerMenu); + }} + rotation={player.settings.rotation} + /> + )} {playerCanLose(player) && ( { style={{ display: 'flex', justifyContent: 'center' }} > <> -
+
@@ -60,25 +61,34 @@ export const InfoModal = ({ isOpen, closeModal }: InfoModalProps) => { -

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. Tapping it will dim the - player's card. - +

Other functionality

+
    +
  • + + 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. Tapping it will dim + the player's card. + +
    • +
  • + + Swiping down on a player's card will show + that player's settings menu. + +
    • +
- Visit my + Visit my{' '} - {' '} - GitHub{' '} - + GitHub + {' '} for more info about this web app.
diff --git a/src/Components/Misc/SettingsModal.tsx b/src/Components/Misc/SettingsModal.tsx index 0cc8089..d6ac530 100644 --- a/src/Components/Misc/SettingsModal.tsx +++ b/src/Components/Misc/SettingsModal.tsx @@ -5,10 +5,11 @@ import { ModalWrapper } from './InfoModal'; import { Separator } from './Separator'; import { Paragraph } from './TextComponents'; import { useEffect, useState } from 'react'; +import { Cross } from '../../Icons/generated'; -const SettingContainer = twc.div`w-full flex flex-col`; +const SettingContainer = twc.div`w-full flex flex-col mb-2`; -const ToggleContainer = twc.div`flex flex-row justify-between items-center`; +const ToggleContainer = twc.div`flex flex-row justify-between items-center -mb-1`; const Container = twc.div`flex flex-col items-center w-full`; @@ -66,14 +67,18 @@ export const SettingsModal = ({ isOpen, closeModal }: SettingsModalProps) => { }, [isOpen]); return ( - + <> -
+
@@ -98,6 +103,24 @@ export const SettingsModal = ({ isOpen, closeModal }: SettingsModalProps) => { start first if this is enabled. + + + Show Player Menu Cog + { + setSettings({ + ...settings, + showPlayerMenuCog: !settings.showPlayerMenuCog, + }); + }} + /> + + + A cog on the top right of each player's card will be shown if + this is enabled. + + Keep Awake diff --git a/src/Components/Player/PlayerMenu.tsx b/src/Components/Player/PlayerMenu.tsx index 87d5d49..0fb792c 100644 --- a/src/Components/Player/PlayerMenu.tsx +++ b/src/Components/Player/PlayerMenu.tsx @@ -6,6 +6,7 @@ import { useGlobalSettings } from '../../Hooks/useGlobalSettings'; import { usePlayers } from '../../Hooks/usePlayers'; import { useSafeRotate } from '../../Hooks/useSafeRotate'; import { + Cross, Energy, Exit, Experience, @@ -103,7 +104,7 @@ const PlayerMenu = ({ containerRef: settingsContainerRef, }); - const { fullscreen, wakeLock, goToStart } = useGlobalSettings(); + const { fullscreen, wakeLock, goToStart, settings } = useGlobalSettings(); const { updatePlayer, resetCurrentGame } = usePlayers(); const handleColorChange = (event: React.ChangeEvent) => { @@ -158,6 +159,14 @@ const PlayerMenu = ({ }} ref={settingsContainerRef} > + {settings.showPlayerMenuCog && ( + + )} diff --git a/src/Components/Views/StartMenu/StartMenu.tsx b/src/Components/Views/StartMenu/StartMenu.tsx index d47e216..3079644 100644 --- a/src/Components/Views/StartMenu/StartMenu.tsx +++ b/src/Components/Views/StartMenu/StartMenu.tsx @@ -20,7 +20,7 @@ import { LayoutOptions } from './LayoutOptions'; const MainWrapper = twc.div`w-[100dvw] h-fit pb-14 overflow-hidden items-center flex flex-col`; -const StartButtonFooter = twc.div`w-full max-w-[548px] fixed bottom-4 z-1 items-center flex flex-col px-4`; +const StartButtonFooter = twc.div`w-full max-w-[548px] fixed bottom-4 z-1 items-center flex flex-col px-4 z-10`; const SliderWrapper = twc.div`mx-8`; diff --git a/src/Providers/GlobalSettingsProvider.tsx b/src/Providers/GlobalSettingsProvider.tsx index b7181c9..bd2b794 100644 --- a/src/Providers/GlobalSettingsProvider.tsx +++ b/src/Providers/GlobalSettingsProvider.tsx @@ -34,7 +34,12 @@ export const GlobalSettingsProvider = ({ const [settings, setSettings] = useState( savedSettings ? JSON.parse(savedSettings) - : { goFullscreenOnStart: true, keepAwake: true, showStartingPlayer: true } + : { + goFullscreenOnStart: true, + keepAwake: true, + showStartingPlayer: true, + showPlayerMenuCog: true, + } ); const removeLocalStorage = async () => { diff --git a/src/Types/Settings.ts b/src/Types/Settings.ts index 8e5499b..48e025c 100644 --- a/src/Types/Settings.ts +++ b/src/Types/Settings.ts @@ -15,6 +15,7 @@ export enum GameFormat { export type Settings = { keepAwake: boolean; showStartingPlayer: boolean; + showPlayerMenuCog: boolean; goFullscreenOnStart: boolean; };