From fbc84febda5507d434cf60aa0fce32350e01ec96 Mon Sep 17 00:00:00 2001
From: Thomas Hallock <thomas@evolutioniq.com>
Date: Sun, 28 Sep 2025 09:25:46 -0500
Subject: [PATCH] fix: resolve runtime error - calculateOptimalGrid not defined
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Move calculateOptimalGrid function outside useGridDimensions hook
- Fix function scoping issue that caused ReferenceError during useState initialization
- Add safety check for window object in helper function
- Grid layout now properly initializes without runtime errors

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

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .claude/settings.local.json                   |  3 +-
 .../games/matching/components/MemoryGrid.tsx  | 87 ++++++++++---------
 2 files changed, 46 insertions(+), 44 deletions(-)

diff --git a/.claude/settings.local.json b/.claude/settings.local.json
index 2ba8fe42..9a1b894d 100644
--- a/.claude/settings.local.json
+++ b/.claude/settings.local.json
@@ -149,7 +149,8 @@
       "Bash(gh release list:*)",
       "Bash(gh release view:*)",
       "Bash(git pull:*)",
-      "WebFetch(domain:antialias.github.io)"
+      "WebFetch(domain:antialias.github.io)",
+      "Bash(open http://localhost:3006/games/matching)"
     ],
     "deny": [],
     "ask": []
diff --git a/apps/web/src/app/games/matching/components/MemoryGrid.tsx b/apps/web/src/app/games/matching/components/MemoryGrid.tsx
index 1c9ed0de..7cc6e2e2 100644
--- a/apps/web/src/app/games/matching/components/MemoryGrid.tsx
+++ b/apps/web/src/app/games/matching/components/MemoryGrid.tsx
@@ -8,6 +8,50 @@ import { EmojiPicker } from './EmojiPicker'
 import { getGridConfiguration } from '../utils/cardGeneration'
 import { css } from '../../../../../styled-system/css'
 
+// Helper function to calculate optimal grid dimensions
+function calculateOptimalGrid(cards: number, aspectRatio: number, config: any) {
+  // For consistent grid layout, we need to ensure r×c = totalCards
+  // Choose columns based on viewport, then calculate exact rows needed
+
+  let targetColumns
+  const width = typeof window !== 'undefined' ? window.innerWidth : 1024
+
+  // Choose column count based on viewport
+  if (aspectRatio >= 1.6 && width >= 1200) {
+    // Ultra-wide: prefer wider grids
+    targetColumns = config.landscapeColumns || config.desktopColumns || 6
+  } else if (aspectRatio >= 1.33 && width >= 768) {
+    // Desktop/landscape: use desktop columns
+    targetColumns = config.desktopColumns || config.landscapeColumns || 6
+  } else if (aspectRatio >= 1.0 && width >= 600) {
+    // Tablet: use tablet columns
+    targetColumns = config.tabletColumns || config.desktopColumns || 4
+  } else {
+    // Mobile: use mobile columns
+    targetColumns = config.mobileColumns || 3
+  }
+
+  // Calculate exact rows needed for this column count
+  const rows = Math.ceil(cards / targetColumns)
+
+  // If we have leftover cards that would create an uneven bottom row,
+  // try to redistribute for a more balanced grid
+  const leftoverCards = cards % targetColumns
+  if (leftoverCards > 0 && leftoverCards < targetColumns / 2 && targetColumns > 3) {
+    // Try one less column for a more balanced grid
+    const altColumns = targetColumns - 1
+    const altRows = Math.ceil(cards / altColumns)
+    const altLeftover = cards % altColumns
+
+    // Use alternative if it creates a more balanced grid
+    if (altLeftover === 0 || altLeftover > leftoverCards) {
+      return { columns: altColumns, rows: altRows }
+    }
+  }
+
+  return { columns: targetColumns, rows }
+}
+
 // Custom hook to calculate proper grid dimensions for consistent r×c layout
 function useGridDimensions(gridConfig: any, totalCards: number) {
   const [gridDimensions, setGridDimensions] = useState(() => {
@@ -20,49 +64,6 @@ function useGridDimensions(gridConfig: any, totalCards: number) {
   })
 
   useEffect(() => {
-    function calculateOptimalGrid(cards: number, aspectRatio: number, config: any) {
-      // For consistent grid layout, we need to ensure r×c = totalCards
-      // Choose columns based on viewport, then calculate exact rows needed
-
-      let targetColumns
-      const width = window.innerWidth
-
-      // Choose column count based on viewport
-      if (aspectRatio >= 1.6 && width >= 1200) {
-        // Ultra-wide: prefer wider grids
-        targetColumns = config.landscapeColumns || config.desktopColumns || 6
-      } else if (aspectRatio >= 1.33 && width >= 768) {
-        // Desktop/landscape: use desktop columns
-        targetColumns = config.desktopColumns || config.landscapeColumns || 6
-      } else if (aspectRatio >= 1.0 && width >= 600) {
-        // Tablet: use tablet columns
-        targetColumns = config.tabletColumns || config.desktopColumns || 4
-      } else {
-        // Mobile: use mobile columns
-        targetColumns = config.mobileColumns || 3
-      }
-
-      // Calculate exact rows needed for this column count
-      const rows = Math.ceil(cards / targetColumns)
-
-      // If we have leftover cards that would create an uneven bottom row,
-      // try to redistribute for a more balanced grid
-      const leftoverCards = cards % targetColumns
-      if (leftoverCards > 0 && leftoverCards < targetColumns / 2 && targetColumns > 3) {
-        // Try one less column for a more balanced grid
-        const altColumns = targetColumns - 1
-        const altRows = Math.ceil(cards / altColumns)
-        const altLeftover = cards % altColumns
-
-        // Use alternative if it creates a more balanced grid
-        if (altLeftover === 0 || altLeftover > leftoverCards) {
-          return { columns: altColumns, rows: altRows }
-        }
-      }
-
-      return { columns: targetColumns, rows }
-    }
-
     const updateGrid = () => {
       if (typeof window === 'undefined') return