antialias
/
soroban-abacus-flashcards
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: resolve runtime error - calculateOptimalGrid not defined 

- 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>
This commit is contained in:
Thomas Hallock 2025-09-28 09:25:46 -05:00
parent f1a0633596
commit fbc84febda
2 changed files with 46 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.claude/settings.local.json
View File

@ -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": []

87
apps/web/src/app/games/matching/components/MemoryGrid.tsx
View File

@ -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