From a05c4ca5bf52ad5a0b807a7b8702cd5ce0b3a6ef Mon Sep 17 00:00:00 2001
From: Thomas Hallock <thomas@evolutioniq.com>
Date: Wed, 26 Nov 2025 21:52:18 -0600
Subject: [PATCH] feat(know-your-world): move start button below settings
 controls
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Move the Start Game button from inside DrillDownMapSelector to the
bottom of SetupPhase, placing it under the mode/assistance/study
settings controls.

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

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../components/DrillDownMapSelector.tsx       | 27 ------------
 .../know-your-world/components/SetupPhase.tsx | 43 ++++++++++++++++++-
 2 files changed, 42 insertions(+), 28 deletions(-)

diff --git a/apps/web/src/arcade-games/know-your-world/components/DrillDownMapSelector.tsx b/apps/web/src/arcade-games/know-your-world/components/DrillDownMapSelector.tsx
index 6e867609..3ef3de72 100644
--- a/apps/web/src/arcade-games/know-your-world/components/DrillDownMapSelector.tsx
+++ b/apps/web/src/arcade-games/know-your-world/components/DrillDownMapSelector.tsx
@@ -1106,33 +1106,6 @@ export function DrillDownMapSelector({
         </div>
       )}
 
-      {/* Start Game Button */}
-      <button
-        data-action="start-game"
-        onClick={onStartGame}
-        className={css({
-          width: '100%',
-          padding: '4',
-          marginTop: '5',
-          fontSize: 'xl',
-          fontWeight: 'bold',
-          bg: 'blue.600',
-          color: 'white',
-          rounded: '2xl',
-          cursor: 'pointer',
-          boxShadow: 'lg',
-          transition: 'all 0.2s',
-          _hover: {
-            bg: 'blue.700',
-            transform: 'scale(1.02)',
-          },
-          _active: {
-            transform: 'scale(0.98)',
-          },
-        })}
-      >
-        ▶ Start Game ({contextLabel} - {regionCount} {regionCount === 1 ? 'region' : 'regions'})
-      </button>
     </div>
   )
 }
diff --git a/apps/web/src/arcade-games/know-your-world/components/SetupPhase.tsx b/apps/web/src/arcade-games/know-your-world/components/SetupPhase.tsx
index 0d8dbfca..c6118ebf 100644
--- a/apps/web/src/arcade-games/know-your-world/components/SetupPhase.tsx
+++ b/apps/web/src/arcade-games/know-your-world/components/SetupPhase.tsx
@@ -8,7 +8,7 @@ import { useKnowYourWorld } from '../Provider'
 import { DrillDownMapSelector } from './DrillDownMapSelector'
 import { ALL_REGION_SIZES, ASSISTANCE_LEVELS, getFilteredMapDataBySizesSync } from '../maps'
 import type { AssistanceLevelConfig } from '../maps'
-import type { ContinentId } from '../continents'
+import { CONTINENTS, type ContinentId } from '../continents'
 
 // Generate feature badges for an assistance level
 function getFeatureBadges(level: AssistanceLevelConfig): Array<{ label: string; icon: string }> {
@@ -127,6 +127,20 @@ export function SetupPhase() {
   const selectedStudyTime = STUDY_TIME_OPTIONS.find((opt) => opt.value === state.studyDuration)
   const selectedAssistance = ASSISTANCE_LEVELS.find((level) => level.id === state.assistanceLevel)
 
+  // Calculate total region count for start button
+  const totalRegionCount = useMemo(() => {
+    return state.includeSizes.reduce((sum, size) => sum + (regionCountsBySize[size] || 0), 0)
+  }, [state.includeSizes, regionCountsBySize])
+
+  // Get context label for start button
+  const contextLabel = useMemo(() => {
+    if (state.selectedContinent !== 'all') {
+      const continent = CONTINENTS.find((c) => c.id === state.selectedContinent)
+      return continent?.name ?? 'World'
+    }
+    return state.selectedMap === 'usa' ? 'USA' : 'World'
+  }, [state.selectedContinent, state.selectedMap])
+
   // Styles for Radix Select components
   const triggerStyles = css({
     display: 'flex',
@@ -532,6 +546,33 @@ export function SetupPhase() {
         </div>
       </div>
 
+      {/* Start Game Button */}
+      <button
+        data-action="start-game"
+        onClick={startGame}
+        className={css({
+          width: '100%',
+          padding: '4',
+          fontSize: 'xl',
+          fontWeight: 'bold',
+          bg: 'blue.600',
+          color: 'white',
+          rounded: '2xl',
+          cursor: 'pointer',
+          boxShadow: 'lg',
+          transition: 'all 0.2s',
+          _hover: {
+            bg: 'blue.700',
+            transform: 'scale(1.02)',
+          },
+          _active: {
+            transform: 'scale(0.98)',
+          },
+        })}
+      >
+        ▶ Start Game ({contextLabel} - {totalRegionCount}{' '}
+        {totalRegionCount === 1 ? 'region' : 'regions'})
+      </button>
     </div>
   )
 }