/** * This game implements a number chain puzzle where players drag between adjacent squares (including diagonals) with the same number to add up. * When a valid chain is selected, the last square in the chain holds the total value rounded up to the nearest power of two, * and the other squares get new random values. The player scores points based on the chain length and values. * We'll use React for the UI and manage game state on the client side. * The server will just serve the initial HTML and JavaScript. * * We've updated the color scheme to have a dark background with colored tiles. * Each number has its own color on a hue scale, cycling through hues for arbitrary powers of two. * Selected chain tiles now have a white border, and numbers are white for better visibility. * Non-bordered tiles now have a transparent border to maintain consistent size and prevent layout jumps. * New tiles fading in no longer show a white border. * New tiles now have a random power of two between the min and max numbers on the board. * Initial possible numbers are now between 2 and 32. * * Added error handling to prevent "TypeError: cell1 is not iterable" error. */ /** @jsxImportSource https://esm.sh/react */ import React, { useEffect, useRef, useState } from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; // Game board size const BOARD_SIZE = 6; // Hue difference between each power of two const HUE_DIFF = 25; function getColor(value: number): string { const power = Math.log2(value / 2); const hue = (power * HUE_DIFF) % 360; return `hsl(${hue}, 50%, 50%)`; } function App() { const [board, setBoard] = useState([]); const [selectedCells, setSelectedCells] = useState<[number, number][]>([]); const [score, setScore] = useState(0); const [isDragging, setIsDragging] = useState(false); const [animatingCells, setAnimatingCells] = useState<[number, number][]>([]); const [newCells, setNewCells] = useState<[number, number][]>([]); const [noMovesAvailable, setNoMovesAvailable] = useState(false); const boardRef = useRef(null); useEffect(() => { initializeBoard(); }, []); useEffect(() => { checkForAvailableMoves(); }, [board]); const initializeBoard = () => { const newBoard = Array(BOARD_SIZE) .fill(null) .map(() => Array(BOARD_SIZE) .fill(null) .map(() => Math.pow(2, Math.floor(Math.random() * 5) + 1)) ); setBoard(newBoard); setSelectedCells([]); setScore(0); setNewCells( newBoard.flatMap((row, i) => row.map((_, j) => [i, j] as [number, number])), ); setTimeout(() => setNewCells([]), 500); // Clear new cells after animation setNoMovesAvailable(false); }; const handleMouseDown = (row: number, col: number) => { setIsDragging(true); setSelectedCells([[row, col]]); }; const handleMouseEnter = (row: number, col: number) => { if (!isDragging) return; setSelectedCells((prev) => { if (prev.length === 0) return [[row, col]]; const lastSelected = prev[prev.length - 1]; if ( isValidCell(lastSelected) && isValidCell([row, col]) && isAdjacent(lastSelected, [row, col]) && board[row][col] === board[lastSelected[0]][lastSelected[1]] && !prev.some( (cell) => isValidCell(cell) && cell[0] === row && cell[1] === col, ) ) { return [...prev, [row, col]]; } return prev; }); }; const handleMouseUp = () => { setIsDragging(false); if (selectedCells.length > 1) { processChain(); } else { setSelectedCells([]); } }; const isValidCell = (cell: any): cell is [number, number] => { return ( Array.isArray(cell) && cell.length === 2 && typeof cell[0] === "number" && typeof cell[1] === "number" && cell[0] >= 0 && cell[0] < BOARD_SIZE && cell[1] >= 0 && cell[1] < BOARD_SIZE ); }; const isAdjacent = (cell1: [number, number], cell2: [number, number]) => { if (!isValidCell(cell1) || !isValidCell(cell2)) return false; const [row1, col1] = cell1; const [row2, col2] = cell2; return ( Math.abs(row1 - row2) <= 1 && Math.abs(col1 - col2) <= 1 && !(row1 === row2 && col1 === col2) ); }; const getRandomPowerOfTwo = (min: number, max: number) => { const minPower = Math.ceil(Math.log2(min)); const maxPower = Math.floor(Math.log2(max)); return Math.pow( 2, Math.floor(Math.random() * (maxPower - minPower + 1)) + minPower, ); }; const processChain = () => { if (selectedCells.length < 2 || !isValidCell(selectedCells[0])) { setSelectedCells([]); return; } const newBoard = [...board.map((row) => [...row])]; const cellValue = board[selectedCells[0][0]][selectedCells[0][1]]; const chainTotal = cellValue * selectedCells.length; const roundedTotal = Math.pow(2, Math.ceil(Math.log2(chainTotal))); const points = chainTotal; // Set the last cell in the chain to the rounded total const lastCell = selectedCells[selectedCells.length - 1]; if (isValidCell(lastCell)) { const [lastRow, lastCol] = lastCell; newBoard[lastRow][lastCol] = roundedTotal; } // Find min and max values on the board const allValues = newBoard.flat(); const minValue = Math.min(...allValues); const maxValue = Math.max(...allValues); // Set other cells in the chain to new random values const newCellsToAnimate: [number, number][] = []; for (let i = 0; i < selectedCells.length - 1; i++) { const cell = selectedCells[i]; if (isValidCell(cell)) { const [row, col] = cell; newBoard[row][col] = getRandomPowerOfTwo(minValue, maxValue); newCellsToAnimate.push([row, col]); } } setBoard(newBoard); setScore((prevScore) => prevScore + points); setAnimatingCells([...selectedCells]); setNewCells(newCellsToAnimate); // Clear animations after they're done setTimeout(() => { setAnimatingCells([]); setSelectedCells([]); setNewCells([]); }, 500); }; const checkForAvailableMoves = () => { if (board.length === 0) return; for (let i = 0; i < BOARD_SIZE; i++) { for (let j = 0; j < BOARD_SIZE; j++) { const adjacentCells = [ [i - 1, j - 1], [i - 1, j], [i - 1, j + 1], [i, j - 1], [i, j + 1], [i + 1, j - 1], [i + 1, j], [i + 1, j + 1], ]; for (const [adjI, adjJ] of adjacentCells) { if ( adjI >= 0 && adjI < BOARD_SIZE && adjJ >= 0 && adjJ < BOARD_SIZE && board[adjI] && board[adjI][adjJ] !== undefined && board[i][j] === board[adjI][adjJ] ) { setNoMovesAvailable(false); return; } } } } setNoMovesAvailable(true); }; return (

Number Chain Puzzle

{board.map((row, i) => (

{row.map((cell, j) => (

r === i && c === j) ? "selected" : "" } ${ animatingCells.some(([r, c]) => r === i && c === j) ? "animating" : "" } ${ newCells.some(([r, c]) => r === i && c === j) ? "new-cell" : "" } `} style={{ backgroundColor: getColor(cell) }} onMouseDown={() => handleMouseDown(i, j)} onMouseEnter={() => handleMouseEnter(i, j)} > {cell}

))}

Score: {score}

{noMovesAvailable &&

No more moves available! Start a new game.

}

Drag between adjacent cells (including diagonals) with the same number to form a chain and score points!

The last cell in the chain will hold the total value rounded up to the nearest power of two.

View Source

); } function client() { createRoot(document.getElementById("root")).render(); } if (typeof document !== "undefined") { client(); } async function server(request: Request): Promise { return new Response( ` Number Chain Puzzle

`, { headers: { "content-type": "text/html", }, }, ); } const css = ` body { font-family: Arial, sans-serif; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; background-color: #1a1a1a; color: #ffffff; } .game-container { text-align: center; } .board { display: inline-block; background-color: #2a2a2a; border-radius: 6px; padding: 10px; user-select: none; } .row { display: flex; } .cell { width: 60px; height: 60px; margin: 5px; display: flex; justify-content: center; align-items: center; font-size: 20px; font-weight: bold; border-radius: 4px; cursor: pointer; transition: transform 0.3s; color: #ffffff; border: 2px solid transparent; box-sizing: border-box; } .cell:hover { filter: brightness(1.2); } .cell.selected { transform: scale(0.9); border: 2px solid white; } .cell.animating { animation: pulse 0.5s; } .cell.new-cell { animation: appear 0.5s; border: 2px solid transparent; } @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.2); } 100% { transform: scale(1); } } @keyframes appear { 0% { opacity: 0; transform: scale(0); } 100% { opacity: 1; transform: scale(1); } } button { margin: 10px; padding: 10px 20px; font-size: 16px; background-color: #4a4a4a; color: white; border: none; border-radius: 4px; cursor: pointer; } button:hover { background-color: #5a5a5a; } a { color: #4a90e2; } .no-moves { color: #ff6b6b; font-weight: bold; margin-top: 10px; } `; export default server;

tnorthcutt