From 890a095eb4ff1df71092654fd16e5449ff918226 Mon Sep 17 00:00:00 2001 From: Vikeo Date: Thu, 1 Aug 2024 12:31:35 +0200 Subject: [PATCH] add name tag --- package.json | 2 +- src/Components/Buttons/CommanderDamage.tsx | 4 -- src/Components/Buttons/LifeCounterButton.tsx | 17 +------ src/Components/Counters/ExtraCountersBar.tsx | 23 ++------- src/Components/LifeCounter/Health.tsx | 51 ++++++++++++++------ src/Components/LifeCounter/LifeCounter.tsx | 28 +++-------- src/Components/Players/PlayerMenu.tsx | 41 +++++++++++++++- src/Data/getInitialPlayers.ts | 4 ++ src/Icons/generated/NameTag.tsx | 36 ++++++++++++++ src/Icons/generated/index.ts | 1 + src/Icons/svgs/NameTag.svg | 3 ++ src/Types/Player.ts | 2 + 12 files changed, 138 insertions(+), 74 deletions(-) create mode 100644 src/Icons/generated/NameTag.tsx create mode 100644 src/Icons/svgs/NameTag.svg diff --git a/package.json b/package.json index 41e1cac..7eaec76 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "life-trinket", "private": true, - "version": "0.9.98", + "version": "0.9.99", "type": "commonjs", "engines": { "node": ">=20", diff --git a/src/Components/Buttons/CommanderDamage.tsx b/src/Components/Buttons/CommanderDamage.tsx index 1ea9d9b..64635a7 100644 --- a/src/Components/Buttons/CommanderDamage.tsx +++ b/src/Components/Buttons/CommanderDamage.tsx @@ -9,10 +9,6 @@ export type RotationDivProps = TwcComponentProps<'div'> & { $rotation?: number; }; -export type RotationSpanProps = TwcComponentProps<'span'> & { - $rotation?: number; -}; - export type RotationButtonProps = TwcComponentProps<'button'> & { $rotation?: number; }; diff --git a/src/Components/Buttons/LifeCounterButton.tsx b/src/Components/Buttons/LifeCounterButton.tsx index e4ecf6f..044b8b5 100644 --- a/src/Components/Buttons/LifeCounterButton.tsx +++ b/src/Components/Buttons/LifeCounterButton.tsx @@ -1,9 +1,8 @@ -import { useEffect, useRef, useState } from 'react'; +import { useRef, useState } from 'react'; import { TwcComponentProps, twc } from 'react-twc'; import { lifeLongPressMultiplier } from '../../Data/constants'; import { Player, Rotation } from '../../Types/Player'; import { MAX_TAP_MOVE_DISTANCE } from './CommanderDamage'; -import { checkContrast } from '../../Utils/checkContrast'; type RotationButtonProps = TwcComponentProps<'div'> & { $align?: string; @@ -58,18 +57,6 @@ const LifeCounterButton = ({ const [hasPressedDown, setHasPressedDown] = useState(false); const downPositionRef = useRef({ x: 0, y: 0 }); - const [iconColor, setIconColor] = useState<'dark' | 'light'>('dark'); - - useEffect(() => { - const contrast = checkContrast(player.color, '#00000080'); - - if (contrast === 'Fail') { - setIconColor('light'); - } else { - setIconColor('dark'); - } - }, [player.color]); - const handleLifeChange = (increment: number) => { setLifeTotal(player.lifeTotal + increment); }; @@ -132,7 +119,7 @@ const LifeCounterButton = ({ diff --git a/src/Components/Counters/ExtraCountersBar.tsx b/src/Components/Counters/ExtraCountersBar.tsx index 792cd9d..d0db242 100644 --- a/src/Components/Counters/ExtraCountersBar.tsx +++ b/src/Components/Counters/ExtraCountersBar.tsx @@ -10,8 +10,6 @@ import { import { CounterType, Player, Rotation } from '../../Types/Player'; import { RotationDivProps } from '../Buttons/CommanderDamage'; import ExtraCounter from '../Buttons/ExtraCounter'; -import { useEffect, useState } from 'react'; -import { checkContrast } from '../../Utils/checkContrast'; const Container = twc.div((props) => [ 'flex', @@ -33,17 +31,6 @@ type ExtraCountersBarProps = { const ExtraCountersBar = ({ player }: ExtraCountersBarProps) => { const { updatePlayer } = usePlayers(); - const [iconColor, setIconColor] = useState<'dark' | 'light'>('dark'); - - useEffect(() => { - const contrast = checkContrast(player.color, '#00000080'); - - if (contrast === 'Fail') { - setIconColor('light'); - } else { - setIconColor('dark'); - } - }, [player.color]); const handleCounterChange = ( updatedCounterTotal: number, @@ -109,7 +96,7 @@ const ExtraCountersBar = ({ player }: ExtraCountersBarProps) => { Icon={ { Icon={ } @@ -153,7 +140,7 @@ const ExtraCountersBar = ({ player }: ExtraCountersBarProps) => { Icon={ } @@ -173,7 +160,7 @@ const ExtraCountersBar = ({ player }: ExtraCountersBarProps) => { Icon={ } @@ -193,7 +180,7 @@ const ExtraCountersBar = ({ player }: ExtraCountersBarProps) => { Icon={ } diff --git a/src/Components/LifeCounter/Health.tsx b/src/Components/LifeCounter/Health.tsx index e403def..427dd93 100644 --- a/src/Components/LifeCounter/Health.tsx +++ b/src/Components/LifeCounter/Health.tsx @@ -1,10 +1,7 @@ import { useEffect, useRef, useState } from 'react'; import { twc } from 'react-twc'; import { Player, Rotation } from '../../Types/Player'; -import { - RotationDivProps, - RotationSpanProps, -} from '../Buttons/CommanderDamage'; +import { RotationDivProps } from '../Buttons/CommanderDamage'; import LifeCounterButton from '../Buttons/LifeCounterButton'; import { OutlinedText } from '../Misc/OutlinedText'; @@ -32,12 +29,12 @@ const TextWrapper = twc.div` z-[-1] `; -const RecentDifference = twc.div((props) => [ - 'absolute min-w-[20vmin] drop-shadow-none text-center bg-interface-recentDifference-background tabular-nums rounded-full p-[6px 12px] text-[8vmin] text-interface-recentDifference-text animate-fadeOut', - props.$rotation === Rotation.SideFlipped || props.$rotation === Rotation.Side - ? 'top-1/3 translate-x-1/4 translate-y-1/2 rotate-[270deg]' - : 'top-1/4 left-[50%] -translate-x-1/2', -]); +const RecentDifference = twc.div` + absolute min-w-[20vmin] drop-shadow-none text-center bg-interface-recentDifference-background tabular-nums rounded-full p-[6px 12px] text-[8vmin] text-interface-recentDifference-text animate-fadeOut + + top-1/4 left-[50%] -translate-x-1/2 + data-[isSide=true]:top-1/3 data-[isSide=true]:translate-x-1/4 data-[isSide=true]:translate-y-1/2 data-[isSide=true]:rotate-[270deg] data-[isSide=true]:left-auto + `; type HealthProps = { player: Player; @@ -101,6 +98,10 @@ const Health = ({ return minRatio * scaleFactor * 1; }; + const isSide = + player.settings.rotation === Rotation.SideFlipped || + player.settings.rotation === Rotation.Side; + return ( + + {player.name && isSide ? ( +
+
+
+ {player.name} +
+
+
+ ) : ( +
+
+ {player.name} +
+
+ )} + {recentDifference !== 0 && ( - + {recentDifference > 0 ? '+' : ''} {recentDifference} diff --git a/src/Components/LifeCounter/LifeCounter.tsx b/src/Components/LifeCounter/LifeCounter.tsx index 256571e..5568228 100644 --- a/src/Components/LifeCounter/LifeCounter.tsx +++ b/src/Components/LifeCounter/LifeCounter.tsx @@ -6,7 +6,6 @@ import { useGlobalSettings } from '../../Hooks/useGlobalSettings'; import { usePlayers } from '../../Hooks/usePlayers'; import { Cog } from '../../Icons/generated'; import { Player, Rotation } from '../../Types/Player'; -import { checkContrast } from '../../Utils/checkContrast'; import { RotationButtonProps, RotationDivProps, @@ -28,22 +27,14 @@ const SettingsButtonTwc = twc.button((props) => [ type SettingsButtonProps = { onClick: () => void; rotation: Rotation; - color: string; + iconTheme: 'light' | 'dark'; }; -const SettingsButton = ({ onClick, rotation, color }: SettingsButtonProps) => { - const [iconColor, setIconColor] = useState<'dark' | 'light'>('dark'); - - useEffect(() => { - const contrast = checkContrast(color, '#00000080'); - - if (contrast === 'Fail') { - setIconColor('light'); - } else { - setIconColor('dark'); - } - }, [color]); - +const SettingsButton = ({ + onClick, + rotation, + iconTheme, +}: SettingsButtonProps) => { return ( { > @@ -215,11 +206,9 @@ const LifeCounter = ({ player, opponents }: LifeCounterProps) => { !playing && settings.showStartingPlayer && player.isStartingPlayer && } - {player.hasLost && ( )} - { setShowPlayerMenu(!showPlayerMenu); }} rotation={player.settings.rotation} - color={player.color} + iconTheme={player.iconTheme} /> )} {playerCanLose(player) && ( @@ -250,7 +239,6 @@ const LifeCounter = ({ player, opponents }: LifeCounterProps) => { handleLifeChange={handleLifeChange} /> - ) => { - const updatedPlayer = { ...player, color: event.target.value }; - updatePlayer(updatedPlayer); + const iconTheme = + checkContrast(event.target.value, '#00000080') === 'Fail' + ? 'light' + : 'dark'; + + updatePlayer({ + ...player, + color: event.target.value, + iconTheme, + }); }; const handleSettingsChange = (event: React.ChangeEvent) => { @@ -152,6 +162,18 @@ const PlayerMenu = ({ setRandomizingPlayer(true); }; + const handleUpdatePlayerName = () => { + const newName = prompt('Enter your name', player.name); + + const updatedPlayer: Player = { ...player, name: '' }; + if (!newName) { + updatePlayer(updatedPlayer); + return; + } + updatedPlayer.name = newName; + updatePlayer(updatedPlayer); + }; + const toggleFullscreen = () => { if (fullscreen.isFullscreen) { fullscreen.disableFullscreen(); @@ -396,6 +418,21 @@ const PlayerMenu = ({ Keep Awake + +