Set-seed UI

src/App.css

@@ -163,4 +163,10 @@ a:active {
 .App-about {
   margin-top: -1rem;
   line-height: 1.4;
-}
+}
+
+.Game-seed-info {
+  opacity: 0.5;
+  margin-top: 1em;
+  font-variant-numeric: tabular-nums;
+}

src/App.tsx

@@ -1,6 +1,6 @@
 import "./App.css";
 import common from "./common.json";
-import { dictionarySet, pick } from "./util";
+import { dictionarySet, pick, seed } from "./util";
 import Game from "./Game";
 import { names } from "./names";
 import { useState } from "react";
@@ -18,6 +18,19 @@ function App() {
           {about ? "Close" : "About"}
         </a>
       </div>
+      <div style={{ position: "absolute", left: 5, top: 5 }}>
+        <a
+          href="#"
+          onClick={() =>
+            (document.location = seed
+              ? "/"
+              : "?seed=" +
+                new Date().toISOString().replace(/-/g, "").slice(0, 8))
+          }
+        >
+          {seed ? "Random" : "Today's"}
+        </a>
+      </div>
       {about && (
         <div className="App-about">
           <p>
@@ -49,8 +62,7 @@ function App() {
             <br />
             <b>R</b> is correct! The third letter is <b>R</b>
             .<br />
-            <b>D</b> occurs <em>elsewhere</em> in the target
+            <b>D</b> occurs <em>elsewhere</em> in the target word.
-            word.
           </p>
           <p>
             Let's move the <b>D</b> in our next guess:
@@ -77,7 +89,9 @@ function App() {
             />
             Got it!
           </p>
-          Report issues <a href="https://github.com/lynn/hello-wordl/issues">here</a>, or tweet <a href="https://twitter.com/chordbug">@chordbug</a>.
+          Report issues{" "}
+          <a href="https://github.com/lynn/hello-wordl/issues">here</a>, or
+          tweet <a href="https://twitter.com/chordbug">@chordbug</a>.
         </div>
       )}
       <Game maxGuesses={maxGuesses} hidden={about} />

src/Game.tsx

@@ -4,7 +4,7 @@ import dictionary from "./dictionary.json";
 import { Clue, clue } from "./clue";
 import { Keyboard } from "./Keyboard";
 import common from "./common.json";
-import { dictionarySet, pick, resetRng } from "./util";
+import { dictionarySet, pick, resetRng, seed } from "./util";
 import { names } from "./names";
 
 enum GameState {
@@ -33,20 +33,25 @@ function Game(props: GameProps) {
   const [currentGuess, setCurrentGuess] = useState<string>("");
   const [wordLength, setWordLength] = useState(5);
   const [hint, setHint] = useState<string>(`Make your first guess!`);
-  const [target, setTarget] = useState(() => randomTarget(wordLength));
+  const [target, setTarget] = useState(() => {
+    resetRng();
+    return randomTarget(wordLength);
+  });
+  const [gameNumber, setGameNumber] = useState(1);
 
-  const reset = () => {
+  const startNextGame = () => {
     setTarget(randomTarget(wordLength));
     setGuesses([]);
     setCurrentGuess("");
     setHint("");
     setGameState(GameState.Playing);
+    setGameNumber((x) => x + 1);
   };
 
   const onKey = (key: string) => {
     if (gameState !== GameState.Playing) {
       if (key === "Enter") {
-        reset();
+        startNextGame();
       }
       return;
     }
@@ -137,6 +142,8 @@ function Game(props: GameProps) {
           onChange={(e) => {
             const length = Number(e.target.value);
             resetRng();
+            setGameNumber(1);
+            setGameState(GameState.Playing);
             setGuesses([]);
             setTarget(randomTarget(length));
             setWordLength(length);
@@ -161,6 +168,11 @@ function Game(props: GameProps) {
       {rowDivs}
       <p>{hint || `\u00a0`}</p>
       <Keyboard letterInfo={letterInfo} onKey={onKey} />
+      {seed ? (
+        <div className="Game-seed-info">
+          seed {seed}, length {wordLength}, game {gameNumber}
+        </div>
+      ) : undefined}
     </div>
   );
 }

src/common.json

@@ -13288,7 +13288,6 @@
   "messengers",
   "buckingham",
   "werden",
-  "danny",
   "lyrics",
   "priced",
   "banned",
@@ -13297,7 +13296,6 @@
   "hurricane",
   "ecstasy",
   "bait",
-  "carr",
   "sunrise",
   "infringement",
   "hermann",

src/util.ts

@@ -11,7 +11,9 @@ function mulberry32(a: number) {
   };
 }
 
-const seed = Number(new URLSearchParams(window.location.search).get("seed"));
+export const seed = Number(
+  new URLSearchParams(window.location.search).get("seed")
+);
 const makeRandom = () => (seed ? mulberry32(seed) : () => Math.random());
 let random = makeRandom();