Number Chain Puzzle

/** @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 = 5 // 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 [showInfo, setShowInfo] = useState(false) const boardRef = useRef(null) useEffect(() => { initializeBoard() }, []) 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 } const handleTouchStart = (row: number, col: number) => { setIsDragging(true) setSelectedCells([[row, col]]) } const handleTouchMove = (e: React.TouchEvent) => { if (!isDragging || !boardRef.current) return const touch = e.touches[0] const board = boardRef.current const rect = board.getBoundingClientRect() const x = touch.clientX - rect.left const y = touch.clientY - rect.top const cellSize = rect.width / BOARD_SIZE const row = Math.floor(y / cellSize) const col = Math.floor(x / cellSize) if (row >= 0 && row < BOARD_SIZE && col >= 0 && col < BOARD_SIZE) { handleCellEnter(row, col) } } const handleTouchEnd = () => { setIsDragging(false) if (selectedCells.length > 1) { processChain() } else { setSelectedCells([]) } } const handleMouseDown = (row: number, col: number) => { setIsDragging(true) setSelectedCells([[row, col]]) } const handleMouseEnter = (row: number, col: number) => { if (!isDragging) return handleCellEnter(row, col) } const handleMouseUp = () => { handleTouchEnd() } const handleCellEnter = (row: number, col: number) => { 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 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) } return (

e.preventDefault()} onTouchMove={(e) => { e.preventDefault() handleTouchMove(e) }} onTouchEnd={handleTouchEnd} > {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)} onTouchStart={() => handleTouchStart(i, j)} > {cell}

))}

Score: {score}

{showInfo && (

How to Play

Drag or swipe 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.

)}

) } 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; justify-content: center; align-items: center; min-height: 100vh; margin: 0; background-color: #1a1a1a; color: #ffffff; user-select: none; } .game-container { text-align: center; width: 100%; max-width: 600px; box-sizing: border-box; margin: auto; } .board { display: inline-block; background-color: #2a2a2a; border-radius: 6px; padding: 10px; user-select: none; touch-action: none; width: 100%; max-width: 400px; margin: 0 auto; box-sizing: border-box; } .row { display: flex; } .cell { flex: 1; aspect-ratio: 1; margin: 5px; display: flex; justify-content: center; align-items: center; font-size: 16px; 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); } } .controls { margin-top: 20px; } 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; } .info-dialog { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); display: flex; justify-content: center; align-items: center; z-index: 1000; } .info-content { background-color: #2a2a2a; padding: 20px; border-radius: 8px; max-width: 80%; max-height: 80%; overflow-y: auto; } ` export default server

numbergame