Number Chain Puzzle

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

\n ))}\n \n ))}\n \n

Score: {score}

\n {noMovesAvailable &&

No more moves available! Start a new game.

}\n \n

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

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

\n \n View Source\n \n

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

\n \n \n \n `,\n {\n headers: {\n \"content-type\": \"text/html\",\n },\n },\n );\n}\n\nconst css = `\nbody {\n font-family: Arial, sans-serif;\n display: flex;\n justify-content: center;\n align-items: center;\n height: 100vh;\n margin: 0;\n background-color: #1a1a1a;\n color: #ffffff;\n}\n\n.game-container {\n text-align: center;\n}\n\n.board {\n display: inline-block;\n background-color: #2a2a2a;\n border-radius: 6px;\n padding: 10px;\n user-select: none;\n}\n\n.row {\n display: flex;\n}\n\n.cell {\n width: 60px;\n height: 60px;\n margin: 5px;\n display: flex;\n justify-content: center;\n align-items: center;\n font-size: 20px;\n font-weight: bold;\n border-radius: 4px;\n cursor: pointer;\n transition: transform 0.3s;\n color: #ffffff;\n border: 2px solid transparent;\n box-sizing: border-box;\n}\n\n.cell:hover {\n filter: brightness(1.2);\n}\n\n.cell.selected {\n transform: scale(0.9);\n border: 2px solid white;\n}\n\n.cell.animating {\n animation: pulse 0.5s;\n}\n\n.cell.new-cell {\n animation: appear 0.5s;\n border: 2px solid transparent;\n}\n\n@keyframes pulse {\n 0% {\n transform: scale(1);\n }\n 50% {\n transform: scale(1.2);\n }\n 100% {\n transform: scale(1);\n }\n}\n\n@keyframes appear {\n 0% {\n opacity: 0;\n transform: scale(0);\n }\n 100% {\n opacity: 1;\n transform: scale(1);\n }\n}\n\nbutton {\n margin: 10px;\n padding: 10px 20px;\n font-size: 16px;\n background-color: #4a4a4a;\n color: white;\n border: none;\n border-radius: 4px;\n cursor: pointer;\n}\n\nbutton:hover {\n background-color: #5a5a5a;\n}\n\na {\n color: #4a90e2;\n}\n\n.no-moves {\n color: #ff6b6b;\n font-weight: bold;\n margin-top: 10px;\n}\n`;\n\nexport default server;","deleted","label",[98],"permalink","https://www.val.town/x/tnorthcutt/numbergame/code/main.tsx","extension","actionData","errors"]