From df2bc79aaaa12ca7188612765eed30216a0f5589 Mon Sep 17 00:00:00 2001
From: Cal Corum <calcorum@users.noreply.github.com>
Date: Wed, 26 Nov 2025 22:24:52 -0600
Subject: [PATCH] CLAUDE: Add Quick Start Demo button for rapid game creation
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Added a "Quick Start Demo" button to the games list page that allows users
to instantly create and jump into a pre-configured demo game without going
through the full game creation flow.

Features:
- Green button prominently placed next to "Create New Game"
- Loading state with disabled button and "Creating..." text
- Calls /api/games/quick-create endpoint
- Auto-redirects to the created game page
- Error handling with user-friendly messages

This improves the user experience for testing and demos by reducing the
game creation flow from multiple steps to a single click.

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

Co-Authored-By: Claude <noreply@anthropic.com>
---
 frontend-sba/pages/games/index.vue | 53 ++++++++++++++++++++++++++----
 1 file changed, 47 insertions(+), 6 deletions(-)

diff --git a/frontend-sba/pages/games/index.vue b/frontend-sba/pages/games/index.vue
index df4760f..c9c2b2b 100755
--- a/frontend-sba/pages/games/index.vue
+++ b/frontend-sba/pages/games/index.vue
@@ -7,12 +7,21 @@
           View and manage your active and completed games
         </p>
       </div>
-      <NuxtLink
-        to="/games/create"
-        class="px-6 py-3 bg-primary hover:bg-blue-700 text-white font-semibold rounded-lg shadow-lg hover:shadow-xl transition"
-      >
-        Create New Game
-      </NuxtLink>
+      <div class="flex gap-3">
+        <button
+          @click="handleQuickCreate"
+          :disabled="isCreatingQuickGame"
+          class="px-6 py-3 bg-green-600 hover:bg-green-700 disabled:bg-gray-400 text-white font-semibold rounded-lg shadow-lg hover:shadow-xl transition disabled:cursor-not-allowed"
+        >
+          {{ isCreatingQuickGame ? 'Creating...' : 'Quick Start Demo' }}
+        </button>
+        <NuxtLink
+          to="/games/create"
+          class="px-6 py-3 bg-primary hover:bg-blue-700 text-white font-semibold rounded-lg shadow-lg hover:shadow-xl transition"
+        >
+          Create New Game
+        </NuxtLink>
+      </div>
     </div>
 
     <!-- Tabs -->
@@ -188,11 +197,13 @@ definePageMeta({
 const activeTab = ref<'active' | 'completed'>('active')
 const config = useRuntimeConfig()
 const authStore = useAuthStore()
+const router = useRouter()
 
 // Games data
 const games = ref<any[]>([])
 const loading = ref(true)
 const error = ref<string | null>(null)
+const isCreatingQuickGame = ref(false)
 
 // Fetch games from API (client-side only)
 async function fetchGames() {
@@ -216,6 +227,36 @@ async function fetchGames() {
   }
 }
 
+// Quick-create a demo game with pre-configured lineups
+async function handleQuickCreate() {
+  try {
+    isCreatingQuickGame.value = true
+    error.value = null
+
+    console.log('[Games Page] Quick-creating demo game...')
+
+    const response = await $fetch<{ game_id: string; message: string; status: string }>(
+      `${config.public.apiUrl}/api/games/quick-create`,
+      {
+        method: 'POST',
+        headers: {
+          Authorization: `Bearer ${authStore.token}`
+        }
+      }
+    )
+
+    console.log('[Games Page] Quick-create response:', response)
+
+    // Redirect to game page
+    router.push(`/games/${response.game_id}`)
+  } catch (err: any) {
+    console.error('[Games Page] Quick-create failed:', err)
+    error.value = err.data?.detail || err.message || 'Failed to create demo game'
+  } finally {
+    isCreatingQuickGame.value = false
+  }
+}
+
 // Filter games by status
 const activeGames = computed(() => {
   return games.value?.filter(g => g.status === 'active' || g.status === 'pending') || []