From 309eb47f7a4513816e16da3ddeab69c352ef77b5 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:33:38 +0100
Subject: [PATCH] Add showMatchScore setting and forfeit button
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Added two new features for better game control:

1. Show Match Score Setting:
   - Added showMatchScore boolean to Settings type (default: true)
   - Added toggle in SettingsDialog to control score visibility
   - Players.tsx now respects the setting when passing matchScore
   - Users can hide score badges in 1v1 games if desired

2. Forfeit Button in Player Menu:
   - Added Skull icon import to PlayerMenu
   - Added onForfeit optional prop to PlayerMenu
   - Added red skull button in player menu buttons section
   - LifeCounter passes forfeit handler (toggleGameLost) to menu
   - Only shows when player can lose (life ≤ 0 or poison/commander damage)
   - Allows players to forfeit game from their individual menu

Both features improve user control over the match scoring system.

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

Co-Authored-By: Claude <noreply@anthropic.com>
---
 src/Components/Dialogs/SettingsDialog.tsx  | 17 +++++++++++++++
 src/Components/LifeCounter/LifeCounter.tsx |  1 +
 src/Components/Players/PlayerMenu.tsx      | 25 ++++++++++++++++++++++
 src/Components/Players/Players.tsx         |  6 +++++-
 src/Types/Settings.ts                      |  3 +++
 5 files changed, 51 insertions(+), 1 deletion(-)

diff --git a/src/Components/Dialogs/SettingsDialog.tsx b/src/Components/Dialogs/SettingsDialog.tsx
index 0c369eb..35c1230 100644
--- a/src/Components/Dialogs/SettingsDialog.tsx
+++ b/src/Components/Dialogs/SettingsDialog.tsx
@@ -242,6 +242,23 @@ export const SettingsDialog = ({
           </ul>
         </Description>
       </SettingContainer>
+      <SettingContainer>
+        <ToggleContainer>
+          <label>Show Match Score</label>
+          <ToggleButton
+            checked={settings.showMatchScore}
+            onChange={() => {
+              setSettings({
+                ...settings,
+                showMatchScore: !settings.showMatchScore,
+              });
+            }}
+          />
+        </ToggleContainer>
+        <Description>
+          Shows a score badge on each player's card in 1v1 games to track wins across multiple games.
+        </Description>
+      </SettingContainer>
       <Separator height="1px" />
       <div className="flex w-full justify-center">
         <button
diff --git a/src/Components/LifeCounter/LifeCounter.tsx b/src/Components/LifeCounter/LifeCounter.tsx
index 16b71c4..e5f313a 100644
--- a/src/Components/LifeCounter/LifeCounter.tsx
+++ b/src/Components/LifeCounter/LifeCounter.tsx
@@ -268,6 +268,7 @@ const LifeCounter = ({ player, opponents, matchScore }: LifeCounterProps) => {
           isShown={showPlayerMenu}
           player={player}
           setShowPlayerMenu={setShowPlayerMenu}
+          onForfeit={playerCanLose(player) ? toggleGameLost : undefined}
         />
       </LifeCounterWrapper>
     </LifeCounterContentWrapper>
diff --git a/src/Components/Players/PlayerMenu.tsx b/src/Components/Players/PlayerMenu.tsx
index 6931e42..4e1db57 100644
--- a/src/Components/Players/PlayerMenu.tsx
+++ b/src/Components/Players/PlayerMenu.tsx
@@ -16,6 +16,7 @@ import {
   PartnerTax,
   Poison,
   ResetGame,
+  Skull,
 } from '../../Icons/generated';
 import { Player, Rotation } from '../../Types/Player';
 import { PreStartMode } from '../../Types/Settings';
@@ -90,12 +91,14 @@ type PlayerMenuProps = {
   player: Player;
   setShowPlayerMenu: (showPlayerMenu: boolean) => void;
   isShown: boolean;
+  onForfeit?: () => void;
 };
 
 const PlayerMenu = ({
   player,
   setShowPlayerMenu,
   isShown,
+  onForfeit,
 }: PlayerMenuProps) => {
   const settingsContainerRef = useRef<HTMLDivElement | null>(null);
   const resetGameDialogRef = useRef<HTMLDialogElement | null>(null);
@@ -479,6 +482,28 @@ const PlayerMenu = ({
             >
               <ResetGame size={iconSize} />
             </button>
+
+            {onForfeit && (
+              <button
+                style={{
+                  cursor: 'pointer',
+                  userSelect: 'none',
+                  fontSize: buttonFontSize,
+                  padding: '2px',
+                }}
+                className="text-red-500"
+                onClick={() => {
+                  analytics.trackEvent('forfeit_game', {
+                    player: player.index,
+                  });
+                  onForfeit();
+                  setShowPlayerMenu(false);
+                }}
+                aria-label="Forfeit Game"
+              >
+                <Skull size={iconSize} />
+              </button>
+            )}
           </ButtonsSections>
         </BetterRowContainer>
 
diff --git a/src/Components/Players/Players.tsx b/src/Components/Players/Players.tsx
index 302c759..cf4c0e4 100644
--- a/src/Components/Players/Players.tsx
+++ b/src/Components/Players/Players.tsx
@@ -48,7 +48,11 @@ export const Players = ({ gridLayout }: { gridLayout: GridLayout }) => {
                 opponents={players.filter(
                   (opponent) => opponent.index !== player.index
                 )}
-                matchScore={players.length === 2 ? gameScore[player.index] : undefined}
+                matchScore={
+                  players.length === 2 && settings.showMatchScore
+                    ? gameScore[player.index]
+                    : undefined
+                }
               />
 
               {settings.preStartMode === PreStartMode.RandomKing &&
diff --git a/src/Types/Settings.ts b/src/Types/Settings.ts
index 63ffb93..a5486d2 100644
--- a/src/Types/Settings.ts
+++ b/src/Types/Settings.ts
@@ -27,6 +27,7 @@ export type Settings = {
   preStartMode: PreStartMode;
   showAnimations: boolean;
   useMonarch: boolean;
+  showMatchScore: boolean;
 };
 
 export type InitialGameSettings = {
@@ -61,6 +62,7 @@ export const settingsSchema = z.object({
   preStartMode: z.nativeEnum(PreStartMode),
   showAnimations: z.boolean(),
   useMonarch: z.boolean().default(false),
+  showMatchScore: z.boolean().default(true),
 });
 
 export const defaultSettings: Settings = {
@@ -71,4 +73,5 @@ export const defaultSettings: Settings = {
   preStartMode: PreStartMode.None,
   showAnimations: true,
   useMonarch: false,
+  showMatchScore: true,
 };