feat(rithmomachia): add useBoardLayout hook for centralized layout calculations

Add custom hook to provide consistent board layout values (cellSize, gap,
padding, rows, columns) throughout the rithmomachia game components.

This eliminates magic numbers and provides a single source of truth for
board dimensions.

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

Co-Authored-By: Claude <noreply@anthropic.com>

apps/web/src/arcade-games/rithmomachia/hooks/useBoardLayout.ts

@@ -0,0 +1,48 @@
+import { useMemo } from 'react'
+import { BOARD_COLUMNS, BOARD_ROWS } from '../constants/board'
+import { getBoardDimensions, getSquarePosition } from '../utils/boardCoordinates'
+
+/**
+ * Layout configuration for the game board
+ */
+export interface BoardLayout {
+  cellSize: number
+  gap: number
+  padding: number
+  rows: number
+  columns: number
+}
+
+/**
+ * Hook that provides centralized board layout calculations
+ */
+export function useBoardLayout(): BoardLayout {
+  return useMemo(
+    () => ({
+      cellSize: 100, // SVG units per cell
+      gap: 5, // Gap between cells
+      padding: 20, // Padding around board
+      rows: BOARD_ROWS,
+      columns: BOARD_COLUMNS,
+    }),
+    []
+  )
+}
+
+/**
+ * Hook that provides layout with derived values
+ */
+export function useBoardLayoutWithUtils() {
+  const layout = useBoardLayout()
+
+  return useMemo(
+    () => ({
+      ...layout,
+      // Derived values
+      totalCellSize: layout.cellSize + layout.gap,
+      dimensions: getBoardDimensions(layout),
+      getSquarePosition: (square: string) => getSquarePosition(square, layout),
+    }),
+    [layout]
+  )
+}