From a12df6b332956734517bffd76b1471e75adffb08 Mon Sep 17 00:00:00 2001
From: Thomas Hallock <thomas@evolutioniq.com>
Date: Mon, 12 Jan 2026 15:49:04 -0600
Subject: [PATCH] feat(arcade): add shortName field to game manifest

Replace hacky .replace(' Battle', '').replace(' Lightning', '') calls
with a proper shortName field that games can define for compact UI spaces.

- Add optional shortName to GameManifestSchema
- Update matching game with shortName: 'Matching Pairs'
- Use shortName || displayName in GameBreakSettings

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 apps/web/src/arcade-games/matching/index.ts                | 1 +
 .../practice/start-practice-modal/GameBreakSettings.tsx    | 7 +++----
 apps/web/src/lib/arcade/manifest-schema.ts                 | 4 ++++
 3 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/apps/web/src/arcade-games/matching/index.ts b/apps/web/src/arcade-games/matching/index.ts
index d0bfe13f..1d82b44e 100644
--- a/apps/web/src/arcade-games/matching/index.ts
+++ b/apps/web/src/arcade-games/matching/index.ts
@@ -15,6 +15,7 @@ import { matchingGameValidator } from './Validator'
 const manifest: GameManifest = {
   name: 'matching',
   displayName: 'Matching Pairs Battle',
+  shortName: 'Matching Pairs',
   icon: '⚔️',
   description: 'Multiplayer memory battle with friends',
   longDescription:
diff --git a/apps/web/src/components/practice/start-practice-modal/GameBreakSettings.tsx b/apps/web/src/components/practice/start-practice-modal/GameBreakSettings.tsx
index 59741e57..67e3a89b 100644
--- a/apps/web/src/components/practice/start-practice-modal/GameBreakSettings.tsx
+++ b/apps/web/src/components/practice/start-practice-modal/GameBreakSettings.tsx
@@ -147,7 +147,7 @@ export function GameBreakSettings() {
                     },
                   })}
                 >
-                  {singleGame.manifest.displayName.replace(' Battle', '').replace(' Lightning', '')}
+                  {singleGame.manifest.shortName || singleGame.manifest.displayName}
                 </span>
               </div>
 
@@ -510,7 +510,7 @@ export function GameBreakSettings() {
                     (g) => g.manifest.name === gameBreakSelectedGame
                   )
                   return game
-                    ? `${game.manifest.icon} ${game.manifest.displayName.replace(' Battle', '').replace(' Lightning', '')}`
+                    ? `${game.manifest.icon} ${game.manifest.shortName || game.manifest.displayName}`
                     : 'Select game'
                 })()}
               </Select.Value>
@@ -591,8 +591,7 @@ export function GameBreakSettings() {
                       })}
                     >
                       <Select.ItemText>
-                        {game.manifest.icon}{' '}
-                        {game.manifest.displayName.replace(' Battle', '').replace(' Lightning', '')}
+                        {game.manifest.icon} {game.manifest.shortName || game.manifest.displayName}
                       </Select.ItemText>
                     </Select.Item>
                   ))}
diff --git a/apps/web/src/lib/arcade/manifest-schema.ts b/apps/web/src/lib/arcade/manifest-schema.ts
index ebf5b2e1..458894e6 100644
--- a/apps/web/src/lib/arcade/manifest-schema.ts
+++ b/apps/web/src/lib/arcade/manifest-schema.ts
@@ -11,6 +11,10 @@ import { z } from 'zod'
 export const GameManifestSchema = z.object({
   name: z.string().min(1).describe('Internal game identifier (e.g., "matching")'),
   displayName: z.string().min(1).describe('Display name shown to users'),
+  shortName: z
+    .string()
+    .optional()
+    .describe('Short name for compact UI spaces (defaults to displayName)'),
   icon: z.string().min(1).describe('Emoji icon for the game'),
   description: z.string().min(1).describe('Short description'),
   longDescription: z.string().min(1).describe('Detailed description'),