diff --git a/src/components/App.js b/src/components/App.js index be7f7d0..97828f0 100644 --- a/src/components/App.js +++ b/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() { }} > + + ); + case "customLookup": + return ; + case "moreGames": return ; diff --git a/src/components/CustomLookup.js b/src/components/CustomLookup.js new file mode 100644 index 0000000..22c211b --- /dev/null +++ b/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) =>
{match}
); + } +} + +export default function CustomLookup({setDisplay}) { + const [lookupString, setLookupString] = React.useState(""); + + const letterElements = alphabet.map((letter) => ( + + )); + + return ( +
+
{getMatches(lookupString)}
+
{lookupString}
+
+ + + +
+
{letterElements}
+
+ ); +} diff --git a/src/styles/App.css b/src/styles/App.css index 03c11ba..4051215 100644 --- a/src/styles/App.css +++ b/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); +} diff --git a/src/styles/LargeScreen.css b/src/styles/LargeScreen.css index 9ce7881..c4d1cbf 100644 --- a/src/styles/LargeScreen.css +++ b/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; + } }