add game logic and winning modal

package.json

@@ -3,6 +3,8 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@headlessui/react": "^1.4.2",
+    "@heroicons/react": "^1.0.5",
     "@testing-library/jest-dom": "^5.16.1",
     "@testing-library/react": "^12.1.2",
     "@testing-library/user-event": "^13.5.0",

src/App.tsx

@@ -1,13 +1,22 @@
-import { useState } from "react";
-import { createModuleResolutionCache } from "typescript";
+import { useState, useEffect } from "react";
 import { Keyboard } from "./components/keyboard/Keyboard";
+import { WinModal } from "./components/win-modal/WinModal";
+import { solution, isWordInWordList, isWinningWord } from "./lib/words";
 
 function App() {
   const [guesses, setGuesses] = useState<string[]>([]);
   const [currentGuess, setCurrentGuess] = useState("");
+  const [isGameWon, setIsGameWon] = useState(false);
+  const [isWinModalOpen, setIsWinModalOpen] = useState(false);
+
+  useEffect(() => {
+    if (isGameWon) {
+      setIsWinModalOpen(true);
+    }
+  }, [isGameWon]);
 
   const onChar = (value: string) => {
-    if (currentGuess.length < 5) {
+    if (currentGuess.length < 5 && guesses.length < 6) {
       setCurrentGuess(`${currentGuess}${value}`);
     }
   };
@@ -17,19 +26,30 @@ function App() {
   };
 
   const onEnter = () => {
-    // TODO: check if the current guess is in the words list
-    if (currentGuess.length === 5 && guesses.length < 6) {
+    if (!isWordInWordList(currentGuess)) {
+      return console.error("not in word list");
+      // TODO add messaging for user
+    }
+    if (currentGuess.length === 5 && guesses.length < 6 && !isGameWon) {
+      if (isWinningWord(currentGuess)) {
+        setIsGameWon(true);
+      }
       setGuesses([...guesses, currentGuess]);
       setCurrentGuess("");
     }
   };
 
   console.log(currentGuess);
   console.log(guesses);
+  console.log(solution);
 
   return (
     <div>
       <Keyboard onChar={onChar} onDelete={onDelete} onEnter={onEnter} />
+      <WinModal
+        isOpen={isWinModalOpen}
+        handleClose={() => setIsWinModalOpen(false)}
+      />
     </div>
   );
 }

src/components/win-modal/WinModal.tsx

@@ -0,0 +1,85 @@
+import { Fragment, useState } from "react";
+import { Dialog, Transition } from "@headlessui/react";
+import { CheckIcon } from "@heroicons/react/outline";
+
+type Props = {
+  isOpen: boolean;
+  handleClose: () => void;
+};
+
+export const WinModal = ({ isOpen, handleClose }: Props) => {
+  return (
+    <Transition.Root show={isOpen} as={Fragment}>
+      <Dialog
+        as="div"
+        className="fixed z-10 inset-0 overflow-y-auto"
+        onClose={handleClose}
+      >
+        <div className="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
+          <Transition.Child
+            as={Fragment}
+            enter="ease-out duration-300"
+            enterFrom="opacity-0"
+            enterTo="opacity-100"
+            leave="ease-in duration-200"
+            leaveFrom="opacity-100"
+            leaveTo="opacity-0"
+          >
+            <Dialog.Overlay className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
+          </Transition.Child>
+
+          {/* This element is to trick the browser into centering the modal contents. */}
+          <span
+            className="hidden sm:inline-block sm:align-middle sm:h-screen"
+            aria-hidden="true"
+          >
+            &#8203;
+          </span>
+          <Transition.Child
+            as={Fragment}
+            enter="ease-out duration-300"
+            enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+            enterTo="opacity-100 translate-y-0 sm:scale-100"
+            leave="ease-in duration-200"
+            leaveFrom="opacity-100 translate-y-0 sm:scale-100"
+            leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+          >
+            <div className="inline-block align-bottom bg-white rounded-lg px-4 pt-5 pb-4 text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-sm sm:w-full sm:p-6">
+              <div>
+                <div className="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-green-100">
+                  <CheckIcon
+                    className="h-6 w-6 text-green-600"
+                    aria-hidden="true"
+                  />
+                </div>
+                <div className="mt-3 text-center sm:mt-5">
+                  <Dialog.Title
+                    as="h3"
+                    className="text-lg leading-6 font-medium text-gray-900"
+                  >
+                    Payment successful
+                  </Dialog.Title>
+                  <div className="mt-2">
+                    <p className="text-sm text-gray-500">
+                      Lorem ipsum dolor sit amet consectetur adipisicing elit.
+                      Consequatur amet labore.
+                    </p>
+                  </div>
+                </div>
+              </div>
+              <div className="mt-5 sm:mt-6">
+                <button
+                  type="button"
+                  className="inline-flex justify-center w-full rounded-md border border-transparent shadow-sm px-4 py-2 bg-indigo-600 text-base font-medium text-white hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:text-sm"
+                  onClick={handleClose}
+                >
+                  Go back to dashboard
+                </button>
+              </div>
+            </div>
+          </Transition.Child>
+        </div>
+      </Dialog>
+    </Transition.Root>
+  );
+};