Add score to emoji results

Fixing the issue : https://github.com/lynn/hello-wordl/issues/91

src/About.tsx

@@ -1,12 +1,12 @@
 import { Clue } from "./clue";
 import { Row, RowState } from "./Row";
-import { maxGuesses } from "./util";
+import { gameName, maxGuesses } from "./util";
 
 export function About() {
   return (
     <div className="App-about">
       <p>
-        <i>hello wordl</i> is a remake of the word game{" "}
+        <i>{gameName}</i> is a remake of the word game{" "}
         <a href="https://www.powerlanguage.co.uk/wordle/">
           <i>Wordle</i>
         </a>{" "}

src/App.css

@@ -106,6 +106,7 @@ table.Game-rows > tbody {
   flex: 1;
   align-items: center;
   justify-content: center;
+  font-family: inherit;
   font-size: 20px;
   color: inherit;
   text-decoration: inherit;

src/App.tsx

@@ -26,7 +26,11 @@ function useSetting<T>(
   return [current, setSetting];
 }
 
-const todaySeed = new Date().toISOString().replace(/-/g, "").slice(0, 8);
+const now = new Date();
+const todaySeed =
+  now.toLocaleDateString("en-US", { year: "numeric" }) +
+  now.toLocaleDateString("en-US", { month: "2-digit" }) +
+  now.toLocaleDateString("en-US", { day: "2-digit" });
 
 function App() {
   type Page = "game" | "about" | "settings";

src/Game.tsx

@@ -8,6 +8,7 @@ import {
   describeSeed,
   dictionarySet,
   Difficulty,
+  gameName,
   pick,
   resetRng,
   seed,
@@ -32,7 +33,10 @@ interface GameProps {
 
 const targets = targetList.slice(0, targetList.indexOf("murky") + 1); // Words no rarer than this one
 const minLength = 4;
+const defaultLength = 5;
 const maxLength = 11;
+const limitLength = (n: number) =>
+  n >= minLength && n <= maxLength ? n : defaultLength;
 
 function randomTarget(wordLength: number): string {
   const eligible = targets.filter((word) => word.length === wordLength);
@@ -67,9 +71,8 @@ if (initChallenge && !dictionarySet.has(initChallenge)) {
 
 function parseUrlLength(): number {
   const lengthParam = urlParam("length");
-  if (!lengthParam) return 5;
-  const length = Number(lengthParam);
-  return length >= minLength && length <= maxLength ? length : 5;
+  if (!lengthParam) return defaultLength;
+  return limitLength(Number(lengthParam));
 }
 
 function parseUrlGameNumber(): number {
@@ -117,8 +120,7 @@ function Game(props: GameProps) {
       window.history.replaceState({}, document.title, window.location.pathname);
     }
     setChallenge("");
-    const newWordLength =
-      wordLength >= minLength && wordLength <= maxLength ? wordLength : 5;
+    const newWordLength = limitLength(wordLength);
     setWordLength(newWordLength);
     setTarget(randomTarget(newWordLength));
     setHint("");
@@ -339,15 +341,17 @@ function Game(props: GameProps) {
               const emoji = props.colorBlind
                 ? ["⬛", "🟦", "🟧"]
                 : ["⬛", "🟨", "🟩"];
+              const score = gameState === GameState.Lost ? "X" : guesses.length;
               share(
                 "Result copied to clipboard!",
-                guesses
-                  .map((guess) =>
-                    clue(guess, target)
-                      .map((c) => emoji[c.clue ?? 0])
-                      .join("")
-                  )
-                  .join("\n")
+                `${gameName} ${score}/${props.maxGuesses}\n` +
+                  guesses
+                    .map((guess) =>
+                      clue(guess, target)
+                        .map((c) => emoji[c.clue ?? 0])
+                        .join("")
+                    )
+                    .join("\n")
               );
             }}
           >

src/Keyboard.tsx

@@ -29,17 +29,16 @@ export function Keyboard(props: KeyboardProps) {
               className += " Game-keyboard-button-wide";
             }
             return (
-              <div
+              <button
                 tabIndex={-1}
                 key={j}
-                role="button"
                 className={className}
                 onClick={() => {
                   props.onKey(label);
                 }}
               >
                 {label.replace("Backspace", "⌫")}
-              </div>
+              </button>
             );
           })}
         </div>

src/targets.json

@@ -3884,7 +3884,7 @@
   "trap",
   "absurd",
   "drunk",
-  "mike",
+  "****",
   "swimming",
   "anatomy",
   "diabetes",
@@ -5400,7 +5400,7 @@
   "sincerity",
   "hastily",
   "dissolve",
-  "macro",
+  "*****",
   "fulfillment",
   "virtuous",
   "franchise",
@@ -5682,7 +5682,7 @@
   "drought",
   "emigration",
   "signing",
-  "yang",
+  "****",
   "pact",
   "fruitful",
   "documentary",
@@ -8108,11 +8108,11 @@
   "jewel",
   "infamous",
   "betrayal",
-  "mater",
+  "*****",
   "hither",
   "lament",
   "arrogant",
-  "anode",
+  "*****",
   "postage",
   "genetically",
   "dictator",
@@ -8928,7 +8928,7 @@
   "*********",
   "suburb",
   "clearness",
-  "droit",
+  "*****",
   "multiplier",
   "cove",
   "pavilion",
@@ -11480,7 +11480,7 @@
   "gallantry",
   "omnipotent",
   "intractable",
-  "dusky",
+  "*****",
   "carcass",
   "indulgent",
   "monies",
@@ -13288,7 +13288,7 @@
   "milestone",
   "dowager",
   "periodicity",
-  "bushy",
+  "*****",
   "trop",
   "minimization",
   "supersede",
@@ -13764,7 +13764,7 @@
   "lacquer",
   "pigmentation",
   "bereft",
-  "curie",
+  "*****",
   "extortion",
   "homeostasis",
   "juniper",
@@ -22325,7 +22325,7 @@
   "instigator",
   "tummy",
   "webbing",
-  "muon",
+  "****",
   "intifada",
   "poultice",
   "daft",

src/util.ts

@@ -6,6 +6,7 @@ export enum Difficulty {
   UltraHard,
 }
 
+export const gameName = "hello wordl";
 export const maxGuesses = 6;
 
 export const dictionarySet: Set<string> = new Set(dictionary);