From fab1d9dacfecc15833ee797d16d2e0c459c99ab5 Mon Sep 17 00:00:00 2001
From: Tomas Reimers <tomas@tomasreimers.com>
Date: Mon, 21 Feb 2022 10:43:43 -0500
Subject: [PATCH] feat(keyboard-input): Accept keyboard input to let the user
 type words

---
 wordle-tutorial/src/App.tsx | 42 ++++++++++++++++++++++---------------
 1 file changed, 25 insertions(+), 17 deletions(-)

diff --git a/wordle-tutorial/src/App.tsx b/wordle-tutorial/src/App.tsx
index a53698a..c92cfe2 100644
--- a/wordle-tutorial/src/App.tsx
+++ b/wordle-tutorial/src/App.tsx
@@ -1,24 +1,32 @@
-import React from 'react';
-import logo from './logo.svg';
+import { useEffect, useState } from 'react';
 import './App.css';
 
+const LETTERS = "abcdefghijklmnopqrstuvwxyz";
+
 function App() {
+  // The current word
+  const [buffer, setBuffer] = useState("");
+
+  useEffect(() => {
+    // Called every time the user presses a key on the page
+    const handler = (ev: KeyboardEvent) => {
+      if (ev.key === "Backspace" && buffer.length > 0) {
+        setBuffer(buffer.slice(0, -1));
+      } else if (LETTERS.includes(ev.key) && buffer.length < 5) {
+        setBuffer(buffer + ev.key);
+      }
+    };
+
+    // Register the handler defined above (and unregister it if we update it and need to re-register a new version)
+    document.addEventListener("keydown", handler);
+    return () => {
+      document.removeEventListener("keydown", handler)
+    };
+  }, [buffer]);
+
   return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.tsx</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
+    <div>
+      <div>{buffer}</div>
     </div>
   );
 }