From 35b96e2eba84fa781e06f4b401492ddc16a7767a Mon Sep 17 00:00:00 2001
From: Lynn <lynn@foldr.moe>
Date: Sun, 2 Jan 2022 01:52:58 +0100
Subject: [PATCH] footer, clear hints, dark mode

---
 src/App.css  | 46 +++++++++++++++++++++++++++++++++++++++++++++-
 src/App.tsx  |  5 +++++
 src/Game.tsx |  6 +++++-
 3 files changed, 55 insertions(+), 2 deletions(-)

diff --git a/src/App.css b/src/App.css
index 8a3663a..0e60f64 100644
--- a/src/App.css
+++ b/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%;
+}
diff --git a/src/App.tsx b/src/App.tsx
index 3229519..448d1f4 100644
--- a/src/App.tsx
+++ b/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>
     </>
   );
 }
diff --git a/src/Game.tsx b/src/Game.tsx
index db2d134..4b95dce 100644
--- a/src/Game.tsx
+++ b/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 () => {