From c71dbc276934f562b35d32e5d043f2f23205abbe Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Viktor=20R=C3=A5dberg?= <viktor.raadberg@refapp.com>
Date: Sun, 16 Nov 2025 18:27:28 +0100
Subject: [PATCH] Integrate match score into each player card
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Changed score display approach to show score directly on each player's card:
- Removed separate ScoreDisplay overlay component
- Added matchScore prop to LifeCounter component
- Created MatchScoreBadge: circular badge in corner of each player card
- Score only displays for 2-player games when score > 0
- Badge positioned in safe corner (adapts to rotation)
- Styled as 12vmin circle with 6vmin text, black/70 background

Score is now part of each player's area rather than a separate overlay.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 src/Components/LifeCounter/LifeCounter.tsx | 26 +++++++++++++++++++++-
 src/Components/Players/Players.tsx         |  3 ++-
 src/Components/Views/Play.tsx              |  3 ---
 3 files changed, 27 insertions(+), 5 deletions(-)

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<RotationButtonProps>((props) => [
     : 'top-1/4 right-[1vmax]',
 ]);
 
+const MatchScoreBadge = twc.div<RotationDivProps>((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<NodeJS.Timeout | undefined>(
@@ -209,6 +225,14 @@ const LifeCounter = ({ player, opponents }: LifeCounterProps) => {
         {player.hasLost && (
           <PlayerLostWrapper $rotation={player.settings.rotation} />
         )}
+        {matchScore !== undefined && matchScore > 0 && (
+          <MatchScoreBadge
+            $rotation={player.settings.rotation}
+            style={{ rotate: `${calcRotation}deg` }}
+          >
+            {matchScore}
+          </MatchScoreBadge>
+        )}
         <CommanderDamageBar
           opponents={opponents}
           player={player}
diff --git a/src/Components/Players/Players.tsx b/src/Components/Players/Players.tsx
index 262828e..302c759 100644
--- a/src/Components/Players/Players.tsx
+++ b/src/Components/Players/Players.tsx
@@ -31,7 +31,7 @@ const PlayersWrapper = twc.div`w-full h-full bg-black`;
 export const Players = ({ gridLayout }: { gridLayout: GridLayout }) => {
   const { players } = usePlayers();
 
-  const { playing, settings, preStartCompleted } = useGlobalSettings();
+  const { playing, settings, preStartCompleted, gameScore } = useGlobalSettings();
 
   return (
     <PlayersWrapper>
@@ -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 gridLayout={gridLayout} />
 
-      {players.length === 2 && <ScoreDisplay players={players} gameScore={gameScore} />}
-
       {winner !== null && (
         <GameOver
           winner={players[winner]}