add lookup for custom creation

src/components/App.js

@@ -10,6 +10,7 @@ import CustomShare from "./CustomShare";
 import ControlBar from "./ControlBar";
 import FallbackInstall from "./FallbackInstall";
 import CustomError from "./CustomError";
+import CustomLookup from "./CustomLookup";
 import {
   handleAppInstalled,
   handleBeforeInstallPrompt,
@@ -315,8 +316,16 @@ export default function App() {
               }}
             ></button>
 
+            <button
+              id="hintIcon"
+              className="controlButton"
+              onClick={() => {
+                setDisplay("customLookup");
+              }}
+            ></button>
+
             <button id="exitCustomButton" onClick={() => setDisplay("game")}>
-              Exit custom creation
+              Exit creation
             </button>
           </div>
           <CustomCreation
@@ -346,6 +355,9 @@ export default function App() {
         ></CustomShare>
       );
 
+    case "customLookup":
+      return <CustomLookup setDisplay={setDisplay}></CustomLookup>;
+
     case "moreGames":
       return <MoreGames setDisplay={setDisplay}></MoreGames>;
 

src/components/CustomLookup.js

@@ -0,0 +1,87 @@
+import React from "react";
+import {commonWords} from "@skedwards88/word_lists";
+
+const alphabet = [
+  "A",
+  "B",
+  "C",
+  "D",
+  "E",
+  "F",
+  "G",
+  "H",
+  "I",
+  "J",
+  "K",
+  "L",
+  "M",
+  "N",
+  "O",
+  "P",
+  "Q",
+  "R",
+  "S",
+  "T",
+  "U",
+  "V",
+  "W",
+  "X",
+  "Y",
+  "Z",
+];
+
+function getMatches(lookupString) {
+  if (lookupString === "") {
+    return "Enter some letters to find matching words.";
+  }
+
+  // Convert the string to a regex pattern
+  const pattern = new RegExp(`^${lookupString.replaceAll("*", "[A-Z]")}$`);
+
+  const matches = commonWords.filter((word) => pattern.test(word));
+
+  if (!matches.length) {
+    if (lookupString.length < 3) {
+      return `No matches found.\n\nTry clicking "Any letter" to add a wildcard.`;
+    } else {
+      return `No matches found.\n\nTry a different sequence of letters and wildcards.`;
+    }
+  } else {
+    return matches.map((match, index) => <div key={index}>{match}</div>);
+  }
+}
+
+export default function CustomLookup({setDisplay}) {
+  const [lookupString, setLookupString] = React.useState("");
+
+  const letterElements = alphabet.map((letter) => (
+    <button
+      key={letter}
+      id="lookupLetter"
+      onClick={() => setLookupString(lookupString + letter)}
+    >
+      {letter}
+    </button>
+  ));
+
+  return (
+    <div className="App" id="customLookup">
+      <div id="lookupResult">{getMatches(lookupString)}</div>
+      <div id="lookupString">{lookupString}</div>
+      <div id="customLookupControls">
+        <button onClick={() => setLookupString(lookupString + "*")}>
+          Any letter
+        </button>
+        <button
+          onClick={() =>
+            setLookupString(lookupString.slice(0, lookupString.length - 1))
+          }
+        >
+          Backspace
+        </button>
+        <button onClick={() => setDisplay("custom")}>Exit</button>
+      </div>
+      <div id="lookupLetters">{letterElements}</div>
+    </div>
+  );
+}

src/styles/App.css

@@ -355,3 +355,62 @@ body:has(#drag-group) {
 #custom-message-buttons > button {
   margin: 10px;
 }
+
+#customLookup {
+  display: grid;
+  grid-template-areas:
+    "result"
+    "pattern"
+    "controls"
+    "letters";
+  grid-template-rows: 1fr auto auto;
+}
+
+#lookupResult {
+  grid-area: result;
+  white-space: pre-wrap;
+  text-align: center;
+  display: flex;
+  flex-flow: column wrap;
+  overflow: scroll;
+  padding: 10px;
+}
+
+#lookupResult > div {
+  margin: 3px;
+  font-size: calc(var(--default-font-size) / 2);
+}
+
+#lookupString {
+  grid-area: pattern;
+  text-align: center;
+}
+
+#customLookupControls {
+  grid-area: controls;
+  display: flex;
+  justify-content: space-evenly;
+}
+
+#customLookupControls > button {
+  height: fit-content;
+}
+
+#lookupLetters {
+  grid-area: letters;
+  display: flex;
+  overflow-x: hidden;
+  overflow-y: scroll;
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+}
+
+#lookupLetter {
+  padding: 0;
+  height: 1.4em;
+  width: 1.4em;
+  background-color: var(--light-color);
+  color: var(--dark-color);
+}

src/styles/LargeScreen.css

@@ -81,6 +81,11 @@
     width: min(calc((var(--grid-columns) * var(--box-size) * 2)), 80vw);
   }
 
+  #lookupLetters {
+    max-width: 80vw;
+    justify-self: center;
+  }
+
   #rulesText {
     width: 50vw;
   }
@@ -101,4 +106,10 @@
         1cm
       );
   }
+
+  #custom > #pool,
+  #lookupLetters {
+    max-width: 80vw;
+    justify-self: center;
+  }
 }