footer, clear hints, dark mode

src/App.css

@@ -36,12 +36,12 @@ body {
 .Game {
   display: flex;
   flex-direction: column;
+  user-select: none;
 }
 
 .Game-keyboard {
   display: flex;
   flex-direction: column;
-  user-select: none;
 }
 
 .Game-keyboard-row {
@@ -93,3 +93,47 @@ body {
   background-color: rgb(162, 162, 162);
   color: white;
 }
+
+@media(prefers-color-scheme: dark) {
+  body {
+    background-color: #404040;
+    color: #e0e0e0;
+  }
+
+  .Game-keyboard-button {
+    color: #404040;
+  }
+
+  .Row-letter {
+    border: 2px solid rgba(255, 255, 255, 0.4);
+  }
+
+  .letter-correct {
+    border: 2px solid rgba(0, 0, 0, 0.3);
+    color: white;
+  }
+  
+  .letter-elsewhere {
+    border: 2px dotted rgba(0, 0, 0, 0.3);
+    color: white;
+  }
+  
+  .letter-absent {
+    border: 2px solid transparent;
+    background-color: rgb(142, 142, 142);
+    color: white;
+  }  
+}
+
+a, a:visited {
+  color: #8080ff;
+}
+
+a:active {
+  color: #cc77ff;
+}
+
+.App-footer {
+  margin-top: 1rem;
+  font-size: 80%;
+}

src/App.tsx

@@ -45,6 +45,11 @@ function App() {
           }}
         />
       </div>
+      <footer className="App-footer">
+        By <a href="https://twitter.com/chordbug">@chordbug</a>, inspired by{" "}
+        <a href="https://www.powerlanguage.co.uk/wordle/">Wordle</a>,
+        hosted on <a href="https://github.com/lynn/hello-wordl">GitHub</a>.
+      </footer>
     </>
   );
 }

src/Game.tsx

@@ -33,8 +33,10 @@ function Game(props: GameProps) {
     if (guesses.length === props.maxGuesses) return;
     if (/^[a-z]$/.test(key)) {
       setCurrentGuess((guess) => (guess + key).slice(0, props.wordLength));
+      setHint("");
     } else if (key === "Backspace") {
       setCurrentGuess((guess) => guess.slice(0, -1));
+      setHint("");
     } else if (key === "Enter") {
       if (currentGuess.length !== props.wordLength) {
         setHint("Too short");
@@ -62,7 +64,9 @@ function Game(props: GameProps) {
 
   useEffect(() => {
     const onKeyDown = (e: KeyboardEvent) => {
-      onKey(e.key);
+      if (!e.ctrlKey && !e.metaKey) {
+        onKey(e.key);
+      }
     };
     document.addEventListener("keydown", onKeyDown);
     return () => {