Static Wordle

\n \n new game\n {\" \"}\n |{\" \"}\n \n view code on val town\n \n

\n {[0, 1, 2, 3, 4, 5].map(\n (x) => (\n

\n {[\n ...(guesses.length === x\n ? rightPad(currentGuess, 5)\n : guesses[x] ?? \" \"),\n ].map(\n (letter, i) => (\n i\n ? \"1px solid black\"\n : \"1px solid \" + LIGHT_GRAY,\n color: x < guesses.length ? \"white\" : \"black\",\n fontWeight: \"bold\",\n fontSize: \"1.4em\",\n\n margin: 2,\n }}\n >\n {letter.toUpperCase()}\n

\n ),\n )}\n

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

\n {[\n [\"q\", \"w\", \"e\", \"r\", \"t\", \"y\", \"u\", \"i\", \"o\", \"p\"],\n [\"a\", \"s\", \"d\", \"f\", \"g\", \"h\", \"j\", \"k\", \"l\"],\n [\"Enter\", \"z\", \"x\", \"c\", \"v\", \"b\", \"n\", \"m\", \"Delete\"], // \"⌫\"\n ].map((row) => (\n \n {row.map(\n (letter) => (\n \n {letter}\n \n ),\n )}\n

\n ))}\n \n {guesses.length > 0 &&\n (\n

\n \n {guesses.map((guess) => (\n \n {guess}\n \n ))}\n

\n Create a new game for a friend where the answer is 👆\n \n )}\n \n ,\n ));\n}\n\nfunction generateWordleBoardSVG({ guesses, answer, currentGuess }) {\n const GREEN = \"#6aaa64\";\n const YELLOW = \"#c9b458\";\n const GRAY = \"#787c7e\";\n const LIGHT_GRAY = \"#d3d6da\";\n\n const tileSize = 40;\n const gap = 5;\n\n const createTileSVG = (letter, fill, stroke, textColor, x, y) =>\n `` +\n `${letter.toUpperCase()}`;\n\n const rows = Array.from({ length: 6 }, (_, rowIndex) => { // Create array for 6 rows\n const rowGuess = guesses[rowIndex] ||\n (rowIndex === guesses.length ? currentGuess : \"\").padEnd(5, \" \");\n const isCurrentGuessRow = rowIndex === guesses.length;\n let currentX = gap; // Reset x for each new row\n\n const tiles = Array.from(rowGuess).map((letter, colIndex) => {\n const x = currentX;\n const y = rowIndex * (tileSize + gap) + gap; // Calculate y based on rowIndex\n\n currentX += tileSize + gap;\n\n let fill = \"white\";\n let stroke = isCurrentGuessRow && colIndex < currentGuess.length\n ? \"black\"\n : LIGHT_GRAY;\n let textColor = \"black\";\n\n if (!isCurrentGuessRow) {\n if (letter === answer[colIndex]) fill = GREEN;\n else if (answer.includes(letter)) fill = YELLOW;\n else if (letter !== \" \") fill = GRAY;\n\n if (fill !== \"white\") textColor = \"white\";\n }\n\n return createTileSVG(letter, fill, stroke, textColor, x, y);\n }).join(\"\");\n\n return tiles;\n }).join(\"\");\n\n return ``;\n}\n\nexport default handler;","deleted","label",[100],"permalink","https://www.val.town/x/stevekrouse/staticWordle/code/main.tsx","extension","actionData","errors"]