From fe3bb6c78c532b973a8abac8a43fee3901272d4b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Viktor=20R=C3=A5dberg?= Date: Sat, 16 Mar 2024 13:22:03 +0100 Subject: [PATCH] show starting player untill press --- src/Components/LifeCounter/Health.tsx | 14 ---- src/Components/LifeCounter/LifeCounter.tsx | 46 ++++++----- tailwind.config.ts | 88 +++++++++++----------- 3 files changed, 73 insertions(+), 75 deletions(-) diff --git a/src/Components/LifeCounter/Health.tsx b/src/Components/LifeCounter/Health.tsx index 2128776..e403def 100644 --- a/src/Components/LifeCounter/Health.tsx +++ b/src/Components/LifeCounter/Health.tsx @@ -53,23 +53,9 @@ const Health = ({ differenceKey, recentDifference, }: HealthProps) => { - const [showStartingPlayer, setShowStartingPlayer] = useState( - localStorage.getItem('playing') === 'true' - ); const [fontSize, setFontSize] = useState(16); const textContainerRef = useRef(null); - useEffect(() => { - if (!showStartingPlayer) { - const playingTimer = setTimeout(() => { - localStorage.setItem('playing', 'true'); - setShowStartingPlayer(localStorage.getItem('playing') === 'true'); - }, 3_000); - - return () => clearTimeout(playingTimer); - } - }, [showStartingPlayer]); - useEffect(() => { if (!textContainerRef.current) { return; diff --git a/src/Components/LifeCounter/LifeCounter.tsx b/src/Components/LifeCounter/LifeCounter.tsx index 9541ce0..0e5be1b 100644 --- a/src/Components/LifeCounter/LifeCounter.tsx +++ b/src/Components/LifeCounter/LifeCounter.tsx @@ -1,8 +1,9 @@ -import { useEffect, useState } from 'react'; +import { useEffect, useRef, useState } from 'react'; import { useSwipeable } from 'react-swipeable'; import { twc } from 'react-twc'; import { useGlobalSettings } from '../../Hooks/useGlobalSettings'; import { usePlayers } from '../../Hooks/usePlayers'; +import { Cog } from '../../Icons/generated'; import { Player, Rotation } from '../../Types/Player'; import { RotationButtonProps, @@ -11,9 +12,10 @@ import { import { LoseGameButton } from '../Buttons/LoseButton'; import CommanderDamageBar from '../Counters/CommanderDamageBar'; import ExtraCountersBar from '../Counters/ExtraCountersBar'; +import { Paragraph } from '../Misc/TextComponents'; import PlayerMenu from '../Player/PlayerMenu'; import Health from './Health'; -import { Cog } from '../../Icons/generated'; +import { baseColors } from '../../../tailwind.config'; const SettingsButtonTwc = twc.button((props) => [ 'absolute flex-grow border-none outline-none cursor-pointer bg-transparent z-[1] select-none webkit-user-select-none', @@ -49,8 +51,6 @@ const LifeCounterWrapper = twc.div((props) => [ : `flex-col`, ]); -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', props.$rotation === Rotation.SideFlipped || props.$rotation === Rotation.Side @@ -97,6 +97,7 @@ const RECENT_DIFFERENCE_TTL = 3_000; const LifeCounter = ({ player, opponents }: LifeCounterProps) => { const { updatePlayer, updateLifeTotal } = usePlayers(); const { settings } = useGlobalSettings(); + const playingTimerRef = useRef(undefined); const [showPlayerMenu, setShowPlayerMenu] = useState(false); const [recentDifference, setRecentDifference] = useState(0); @@ -150,17 +151,12 @@ const LifeCounter = ({ player, opponents }: LifeCounterProps) => { }, [recentDifference, document.body.clientHeight, document.body.clientWidth]); useEffect(() => { - if (player.showStartingPlayer) { - const playingTimer = setTimeout(() => { - localStorage.setItem('playing', 'true'); - player.showStartingPlayer = false; - updatePlayer(player); - }, 3_000); + playingTimerRef.current = setTimeout(() => { + localStorage.setItem('playing', 'true'); + }, 10_000); - return () => clearTimeout(playingTimer); - } - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [player.showStartingPlayer]); + return () => clearTimeout(playingTimerRef.current); + }, []); player.settings.rotation === Rotation.SideFlipped || player.settings.rotation === Rotation.Side; @@ -198,17 +194,31 @@ const LifeCounter = ({ player, opponents }: LifeCounterProps) => { {settings.showStartingPlayer && player.isStartingPlayer && player.showStartingPlayer && ( - { + clearTimeout(playingTimerRef.current); + localStorage.setItem('playing', 'true'); + player.showStartingPlayer = false; + updatePlayer(player); + }} > - You start! +
+ 👑 + You start! + (Press to hide) +
- + )} {player.hasLost && ( diff --git a/tailwind.config.ts b/tailwind.config.ts index df02515..c422da9 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -2,6 +2,50 @@ import tailwindcssGridAreas from '@savvywombat/tailwindcss-grid-areas'; import type { Config } from 'tailwindcss'; +export const baseColors = { + primary: { + main: '#3E7D78', + dark: '#2D5F5B', + }, + secondary: { + main: '#284F4C', + dark: '#1B3B38', + }, + background: { + default: '#08253B', + backdrop: 'rgba(0, 0, 0, 0.3)', + settings: 'rgba(20, 20, 0, 0.9)', + }, + icons: { + dark: '#00000080', + light: '#ffffff4f', + }, + text: { + primary: '#F5F5F5', + secondary: '#76A6A5', + }, + action: { + disabled: '#234A47', + }, + common: { + white: '#F9FFE3', + black: '#000000', + }, + lifeCounter: { + text: 'rgba(0, 0, 0, 0.4)', + lostWrapper: '#000000', + }, + interface: { + loseButton: { + background: '#43434380', + }, + recentDifference: { + background: 'rgba(255, 255, 255, 0.6);', + text: '#333333', + }, + }, +}; + /** @type {import('tailwindcss').Config} */ export default { content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'], @@ -40,49 +84,7 @@ export default { 'player0 player4 player4 player4 player4 player5 player5 player5 player5 player3', ], }, - colors: { - primary: { - main: '#3E7D78', - dark: '#2D5F5B', - }, - secondary: { - main: '#284F4C', - dark: '#1B3B38', - }, - background: { - default: '#08253B', - backdrop: 'rgba(0, 0, 0, 0.3)', - settings: 'rgba(20, 20, 0, 0.9)', - }, - icons: { - dark: '#00000080', - light: '#ffffff4f', - }, - text: { - primary: '#F5F5F5', - secondary: '#76A6A5', - }, - action: { - disabled: '#234A47', - }, - common: { - white: '#F9FFE3', - black: '#000000', - }, - lifeCounter: { - text: 'rgba(0, 0, 0, 0.4)', - lostWrapper: '#000000', - }, - interface: { - loseButton: { - background: '#43434380', - }, - recentDifference: { - background: 'rgba(255, 255, 255, 0.6);', - text: '#333333', - }, - }, - }, + colors: baseColors, keyframes: { fadeOut: { '0%': {