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;","createdAt",["D",1725389663571],"version",3,"currentUserHasLiked","likeCount","forkCount","referenceCount","dependencyCount","commentCount","prCount",1,"mergedPr",{"_129":130,"_131":132},"handle","tnorthcutt","profileImageUrl","https://img.clerk.com/eyJ0eXBlIjoiZGVmYXVsdCIsImlpZCI6Imluc18yTm10cGhQUklwU0tqZHNiOHNnNGd2ZjJURFUiLCJyaWQiOiJ1c2VyXzJsWlozYnpDMGx3SHpKYWpQV29Idlp2dWF4cSJ9","forkedVal",{"_112":135,"_129":136,"_98":99,"_117":137,"_138":-5},"c080da54-6192-11ef-90e4-de64eea55b61","moe",37,"prDisabledHint","interval","slug","tnorthcutt/numbergame","description","* This game implements a number chain puzzle where players drag between adjacent squares (including diagonals) with the same number to add up.\n * When a valid chain is selected, the last square in the chain holds the total value rounded up to the nearest power of two,\n * and the other squares get new random values. The player scores points based on the chain length and values.\n * We'll use React for the UI and manage game state on the client side.\n * The server will just serve the initial HTML and JavaScript.\n *\n * We've updated the color scheme to have a dark background with colored tiles.\n * Each number has its own color on a hue scale, cycling through hues for arbitrary powers of two.\n * Selected chain tiles now have a white border, and numbers are white for better visibility.\n * Non-bordered tiles now have a transparent border to maintain consistent size and prevent layout jumps.\n * New tiles fading in no longer show a white border.\n * New tiles now have a random power of two between the min and max numbers on the board.\n * Initial possible numbers are now between 2 and 32.\n *\n * Added error handling to prevent \"TypeError: cell1 is not iterable\" error.","versions",[146,149,152,155],{"_117":118,"_147":-5,"_115":148,"_112":110},"prId",["D",1725389663571],{"_117":90,"_147":-5,"_115":150,"_112":151},["D",1725389505859],"91775d8c-6a25-11ef-a770-de64eea55b61",{"_117":126,"_147":-5,"_115":153,"_112":154},["D",1725389495235],"8b221e4a-6a25-11ef-a219-de64eea55b61",{"_117":31,"_147":-5,"_115":156,"_112":157},["D",1725389375422],"43b8539e-6a25-11ef-9bf6-de64eea55b61","recentThread","breadcrumbs","comments",[],"isOwner","routes/_app.v.$handle.$name.pulls._index",{"_95":96,"_94":165,"_129":130,"_142":143,"_98":99,"_178":31,"_179":126,"_50":51,"_180":181},{"_98":99,"_95":96,"_100":101,"_102":-5,"_103":-5,"_104":105,"_106":66,"_107":108,"_109":110,"_111":26,"_112":110,"_113":114,"_115":166,"_117":118,"_119":26,"_120":31,"_121":31,"_122":31,"_123":31,"_124":31,"_125":126,"_127":-5,"_20":167,"_133":168,"_139":-7,"_140":141,"_142":143,"_144":169},["D",1725389663571],{"_129":130,"_131":132},{"_112":135,"_129":136,"_98":99,"_117":137,"_138":-5},[170,172,174,176],{"_117":118,"_147":-5,"_115":171,"_112":110},["D",1725389663571],{"_117":90,"_147":-5,"_115":173,"_112":151},["D",1725389505859],{"_117":126,"_147":-5,"_115":175,"_112":154},["D",1725389495235],{"_117":31,"_147":-5,"_115":177,"_112":157},["D",1725389375422],"page","count","prs",[182],{"_112":183,"_142":184,"_115":185,"_186":187,"_191":192},"ad05a5ee-6a26-11ef-8443-de64eea55b61","Adds a message when there are no more moves",["D",1725389981589],"targetVal",{"_112":188,"_98":99,"_129":136,"_131":189,"_190":136},"6f2dca10-60d7-11ef-a6d3-de64eea55b61","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18yanFDd29JUGxvVEl1YVVlcHJiV2VYMUxFWjkifQ","username","forkVal",{"_112":101,"_98":99,"_129":130,"_131":132,"_190":130},"routes/_app","actionData","errors"]