From 3b26796cd0e6b7fed07454ed81874b37f62a1f3e Mon Sep 17 00:00:00 2001 From: "gpt-engineer-app[bot]" <159125892+gpt-engineer-app[bot]@users.noreply.github.com> Date: Mon, 8 Dec 2025 09:37:58 +0000 Subject: [PATCH] Changes --- src/components/DominoRetilingPuzzle.tsx | 101 +++++++++++++++--------- 1 file changed, 62 insertions(+), 39 deletions(-) diff --git a/src/components/DominoRetilingPuzzle.tsx b/src/components/DominoRetilingPuzzle.tsx index d12d14f..65898b3 100644 --- a/src/components/DominoRetilingPuzzle.tsx +++ b/src/components/DominoRetilingPuzzle.tsx @@ -17,6 +17,7 @@ interface DominoRetilingPuzzleProps { } const DominoRetilingPuzzle: React.FC = ({ showSocialShare = true }) => { + const [boardSize, setBoardSize] = useState(8); const [dominoes, setDominoes] = useState([]); const [selectedDomino, setSelectedDomino] = useState(null); const [showInstructions, setShowInstructions] = useState(false); @@ -24,24 +25,24 @@ const DominoRetilingPuzzle: React.FC = ({ showSocialS const [showHint, setShowHint] = useState(false); const [hoverPlacement, setHoverPlacement] = useState<{ row: number; col: number; isHorizontal: boolean } | null>(null); - const BOARD_ROWS = 8; - const BOARD_COLS = 9; // 8 + 1 extra square on top row + const BOARD_ROWS = boardSize; + const BOARD_COLS = boardSize + 1; // n + 1 extra square on top row - // Generate a random valid tiling of the 8x8 board + // Generate a random valid tiling of the n×n board const generateRandomTiling = useCallback(() => { const newDominoes: Domino[] = []; const occupied = new Set(); let dominoId = 0; - // Fill the 8x8 board with random dominoes - for (let row = 0; row < 8; row++) { - for (let col = 0; col < 8; col++) { + // Fill the n×n board with random dominoes + for (let row = 0; row < boardSize; row++) { + for (let col = 0; col < boardSize; col++) { const key = `${row},${col}`; if (occupied.has(key)) continue; // Randomly choose horizontal or vertical - const canHorizontal = col + 1 < 8 && !occupied.has(`${row},${col + 1}`); - const canVertical = row + 1 < 8 && !occupied.has(`${row + 1},${col}`); + const canHorizontal = col + 1 < boardSize && !occupied.has(`${row},${col + 1}`); + const canVertical = row + 1 < boardSize && !occupied.has(`${row + 1},${col}`); if (!canHorizontal && !canVertical) continue; @@ -72,7 +73,7 @@ const DominoRetilingPuzzle: React.FC = ({ showSocialS setSelectedDomino(null); setMoveCount(0); setHoverPlacement(null); - }, []); + }, [boardSize]); useEffect(() => { generateRandomTiling(); @@ -94,11 +95,11 @@ const DominoRetilingPuzzle: React.FC = ({ showSocialS }, [dominoes]); // Check if a position is valid for the augmented board - const isValidCell = (row: number, col: number): boolean => { + const isValidCell = useCallback((row: number, col: number): boolean => { if (row < 0 || row >= BOARD_ROWS) return false; if (row === 0) return col >= 0 && col < BOARD_COLS; - return col >= 0 && col < 8; - }; + return col >= 0 && col < boardSize; + }, [BOARD_ROWS, BOARD_COLS, boardSize]); // Check if we can place a domino at a position const canPlaceDomino = useCallback((row: number, col: number, isHorizontal: boolean, excludeDominoId: number): boolean => { @@ -167,32 +168,40 @@ const DominoRetilingPuzzle: React.FC = ({ showSocialS return 'bg-rose-400 border-rose-600'; }; + const cellSize = Math.min(50, 400 / boardSize); + // Render the board const renderBoard = () => { const cells: JSX.Element[] = []; - const occupied = getOccupiedCells(selectedDomino ?? undefined); // Render cells for (let row = 0; row < BOARD_ROWS; row++) { - const maxCol = row === 0 ? BOARD_COLS : 8; + const maxCol = row === 0 ? BOARD_COLS : boardSize; for (let col = 0; col < maxCol; col++) { - const isExtraSquare = row === 0 && col === 8; + const isExtraSquare = row === 0 && col === boardSize; const cellStyle: React.CSSProperties = { position: 'absolute', - left: col * 50, - top: row * 50, - width: 50, - height: 50, + left: col * cellSize, + top: row * cellSize, + width: cellSize, + height: cellSize, }; cells.push(
handleCellHover(row, col)} onMouseLeave={() => setHoverPlacement(null)} onClick={() => { @@ -209,23 +218,23 @@ const DominoRetilingPuzzle: React.FC = ({ showSocialS dominoes.forEach(d => { if (d.id === selectedDomino) return; // Hide selected domino - const width = d.isHorizontal ? 96 : 46; - const height = d.isHorizontal ? 46 : 96; + const width = d.isHorizontal ? cellSize * 2 - 4 : cellSize - 4; + const height = d.isHorizontal ? cellSize - 4 : cellSize * 2 - 4; cells.push(
handleDominoClick(d.id)} >
-
+
); @@ -233,23 +242,23 @@ const DominoRetilingPuzzle: React.FC = ({ showSocialS // Render hover preview domino if (hoverPlacement && selectedDomino !== null) { - const width = hoverPlacement.isHorizontal ? 96 : 46; - const height = hoverPlacement.isHorizontal ? 46 : 96; + const width = hoverPlacement.isHorizontal ? cellSize * 2 - 4 : cellSize - 4; + const height = hoverPlacement.isHorizontal ? cellSize - 4 : cellSize * 2 - 4; cells.push(
-
+
); @@ -261,6 +270,8 @@ const DominoRetilingPuzzle: React.FC = ({ showSocialS const horizontalCount = dominoes.filter(d => d.isHorizontal).length; const verticalCount = dominoes.filter(d => !d.isHorizontal).length; + const numDominoes = (boardSize * boardSize) / 2; + return (
@@ -275,11 +286,23 @@ const DominoRetilingPuzzle: React.FC = ({ showSocialS

- An 8×8 board is tiled with 32 dominoes. An extra square is added to the top-right. + A {boardSize}×{boardSize} board is tiled with {numDominoes} dominoes. An extra square is added to the top-right. Move dominoes one at a time to make all dominoes horizontal.

+
+ + setBoardSize(parseInt(e.target.value))} + className="w-24 h-2 bg-muted rounded-lg appearance-none cursor-pointer" + /> +