diff --git a/src/Components/LifeCounter/LifeCounter.tsx b/src/Components/LifeCounter/LifeCounter.tsx index b9247c3..16b71c4 100644 --- a/src/Components/LifeCounter/LifeCounter.tsx +++ b/src/Components/LifeCounter/LifeCounter.tsx @@ -24,6 +24,21 @@ const SettingsButtonTwc = twc.button((props) => [ : 'top-1/4 right-[1vmax]', ]); +const MatchScoreBadge = twc.div((props) => [ + 'absolute flex items-center justify-center', + 'bg-black/70 backdrop-blur-sm', + 'rounded-full', + 'w-[12vmin] h-[12vmin]', + 'text-white font-bold', + 'text-[6vmin]', + 'z-[1]', + 'pointer-events-none', + 'select-none webkit-user-select-none', + props.$rotation === Rotation.Side || props.$rotation === Rotation.SideFlipped + ? `left-[1vmax] top-1/4` + : 'left-1/4 top-[1vmax]', +]); + type SettingsButtonProps = { onClick: () => void; rotation: Rotation; @@ -98,11 +113,12 @@ type LifeCounterProps = { player: Player; opponents: Player[]; isStartingPlayer?: boolean; + matchScore?: number; }; const RECENT_DIFFERENCE_TTL = 3_000; -const LifeCounter = ({ player, opponents }: LifeCounterProps) => { +const LifeCounter = ({ player, opponents, matchScore }: LifeCounterProps) => { const { updatePlayer, updateLifeTotal } = usePlayers(); const { settings, playing } = useGlobalSettings(); const recentDifferenceTimerRef = useRef( @@ -209,6 +225,14 @@ const LifeCounter = ({ player, opponents }: LifeCounterProps) => { {player.hasLost && ( )} + {matchScore !== undefined && matchScore > 0 && ( + + {matchScore} + + )} { const { players } = usePlayers(); - const { playing, settings, preStartCompleted } = useGlobalSettings(); + const { playing, settings, preStartCompleted, gameScore } = useGlobalSettings(); return ( @@ -48,6 +48,7 @@ export const Players = ({ gridLayout }: { gridLayout: GridLayout }) => { opponents={players.filter( (opponent) => opponent.index !== player.index )} + matchScore={players.length === 2 ? gameScore[player.index] : undefined} /> {settings.preStartMode === PreStartMode.RandomKing && diff --git a/src/Components/Views/Play.tsx b/src/Components/Views/Play.tsx index fd603bf..9b3d02f 100644 --- a/src/Components/Views/Play.tsx +++ b/src/Components/Views/Play.tsx @@ -7,7 +7,6 @@ import { Orientation, PreStartMode } from '../../Types/Settings'; import { Players } from '../Players/Players'; import { PreStart } from '../PreStartGame/PreStart'; import { GameOver } from '../GameOver/GameOver'; -import { ScoreDisplay } from '../ScoreDisplay/ScoreDisplay'; const MainWrapper = twc.div`w-[100dvmax] h-[100dvmin] overflow-hidden, setPlayers`; @@ -138,8 +137,6 @@ export const Play = () => { - {players.length === 2 && } - {winner !== null && (