Initialize commit

hinaloe · Jan 29, 2022 · 5999e18 · 5999e18 · vercel · Jan 29, 2022
commit 5999e18
Show file tree

Hide file tree

Showing 18 changed files with 14,128 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,5 @@
+node_modules
+.DS_Store
+dist
+dist-ssr
+*.local
diff --git a/LICENSE.md b/LICENSE.md
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 hinaloe
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/README.md b/README.md
@@ -0,0 +1,11 @@
+# Wordle dic
+
+The simple dictionary app for [Wordle](https://www.powerlanguage.co.uk/wordle/)
+
+## demo
+
+WIP
+
+## icon license
+using 77 Essential Icons by [Bryn Taylor
+](https://dribbble.com/shots/1934932-77-Essential-Icons-Free-Download)
diff --git a/index.html b/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <!-- <link rel="icon" type="image/svg+xml" href="/src/favicon.svg" /> -->
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Wordle dictionary</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/package.json b/package.json
@@ -0,0 +1,20 @@
+{
+  "name": "wordle-dic",
+  "version": "0.0.0",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2"
+  },
+  "devDependencies": {
+    "@types/react": "^17.0.33",
+    "@types/react-dom": "^17.0.10",
+    "@vitejs/plugin-react": "^1.0.7",
+    "typescript": "^4.4.4",
+    "vite": "^2.7.2"
+  }
+}
diff --git a/src/App.css b/src/App.css
@@ -0,0 +1,54 @@
+.App {
+  text-align: center;
+}
+
+
+.App-header {
+  background-color: #282c34;
+  /* min-height: 100vh; */
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-size: calc(10px + 2vmin);
+  color: white;
+}
+
+.App-link {
+  color: #61dafb;
+}
+
+@keyframes App-logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+button {
+  font-size: 30px;
+}
+
+input[type='text'] {
+  font-size: 2em;
+  margin-top: 10px;
+
+  border: 0px solid #ccc;
+  border-bottom-width: 3px;
+  border-radius: 0;
+  transition: all 0.5s;
+  max-width: 95vw;
+}
+
+input[type='text']:focus {
+  border-color: #3b90ff;
+  border-bottom-width: 5px;
+}
+
+input[type='text']:invalid, input[type='text']:invalid:focus {
+  border-color: red;
+  outline-color: red;
+  color: red;
+}
diff --git a/src/App.tsx b/src/App.tsx
@@ -0,0 +1,79 @@
+import { useState } from "react";
+import "./App.css";
+import { List } from "./components/List";
+
+function App() {
+  const [search, setSearch] = useState("");
+  const [matchType, setMatchType] = useState<"prefix" | "suffix" | "pattern">(
+    "prefix"
+  );
+
+  return (
+    <div className="App">
+      <header className="App-header">
+        <h1>Wordle dictonary</h1>
+      </header>
+      <div>
+        <form
+          onSubmit={(e) => {
+            e.preventDefault();
+          }}
+          action="#"
+          method="GET"
+        >
+          <input
+            type="text"
+            placeholder="Search"
+            value={search}
+            maxLength={5}
+            pattern="^[a-zA-Z.?]{0,5}$"
+            onInput={(e) => {
+              setSearch(e.currentTarget.value);
+            }}
+          />
+          <div>
+            <label>
+              <input
+                type="radio"
+                value={"prefix"}
+                checked={matchType === "prefix"}
+                onChange={(e) =>
+                  setMatchType(e.currentTarget.value as typeof matchType)
+                }
+              />
+              Prefix
+            </label>
+            <label>
+              <input
+                type="radio"
+                value={"suffix"}
+                checked={matchType === "suffix"}
+                onChange={(e) =>
+                  setMatchType(e.currentTarget.value as typeof matchType)
+                }
+              />
+              Suffix
+            </label>
+            <label>
+              <input
+                type="radio"
+                value={"pattern"}
+                checked={matchType === "pattern"}
+                onChange={(e) =>
+                  setMatchType(e.currentTarget.value as typeof matchType)
+                }
+              />
+              Pattern (<code>.</code>, <code>?</code>, <code>*</code> as wildcard, required 5chars)
+            </label>
+          </div>
+          <input type="submit" value="Search" style={{ display: " none" }} />
+        </form>
+        <div>
+          <List search={search} matchType={matchType} />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default App;
diff --git a/src/components/Item.module.css b/src/components/Item.module.css
@@ -0,0 +1,73 @@
+.item {
+  display: flex;
+  flex-direction: column;
+
+  border: solid 1px #ccc;
+  border-radius: 5px;
+  margin: auto;
+  margin-top: 20px;
+  padding: 30px;
+  width: 400px;
+  max-width: 80vw;
+  text-align: left;
+}
+
+.item.active {
+    border: solid 2px #3b90ff;
+}
+
+.itemName {
+    display: flex;
+}
+
+.item button {
+  background-color: transparent;
+  border: none;
+  cursor: pointer;
+  outline: none;
+  padding: 0;
+  appearance: none;
+}
+
+.word {
+  font-size: 2em;
+  font-weight: bold;
+}
+
+.inList {
+  font-size: 1.5em;
+  color: gold;
+}
+
+.icon {
+  fill: rgb(167, 167, 167);
+}
+
+.icon {
+  width: 1em;
+  height: 1em;
+}
+
+.icon path,
+.icon polygon,
+.icon rect {
+  fill: rgb(167, 167, 167);
+}
+
+.icon circle {
+  stroke: rgb(167, 167, 167);
+  stroke-width: 1;
+}
+
+.toggle {
+    justify-self: flex-end;
+    margin-left: auto;
+}
+
+.detail {
+    margin-top: 10px;
+}
+
+.detail button {
+    margin-right: 10px;
+}
diff --git a/src/components/Item.tsx b/src/components/Item.tsx
@@ -0,0 +1,82 @@
+import { MouseEventHandler, useEffect, useState } from "react";
+import { WordList } from "../dic/wordlist";
+
+import style from "./Item.module.css";
+
+type Props = {
+  word: string;
+};
+
+export const Item: React.FC<Props> = function Item(props) {
+  const [inWordleList, setInWordleList] = useState(false);
+  const [open, setOpen] = useState(false);
+  useEffect(() => {
+    setTimeout(() => {
+      setInWordleList(WordList.includes(props.word));
+    }, 10);
+  }, [props.word]);
+
+  const toggleOpen = () => {
+    setOpen(!open);
+  };
+
+  const copyToClipboard: MouseEventHandler<HTMLButtonElement> = (e) => {
+    e.preventDefault();
+    navigator.clipboard.writeText(props.word);
+  };
+
+  const openWiktionary: MouseEventHandler<HTMLButtonElement> = (e) => {
+    e.preventDefault();
+    window.open(
+      `https://en.wiktionary.org/w/index.php?search=${encodeURIComponent(
+        props.word
+      )}&title=Special%3ASearch&go=Go&wprov=acrw1_-1`,
+      "_blank",
+      "noopener,noreferrer"
+    );
+  };
+
+  return (
+    <div className={`${style.item} ${open ? style.active : ""}`}>
+      <div className={style.itemName}>
+        <span className={style.word}>{props.word}</span>{" "}
+        {inWordleList ? <span className={style.inList}>★</span> : null}
+        <button
+          onClick={toggleOpen}
+          className={style.toggle}
+          title="toggle details"
+        >
+          <svg className={style.icon} viewBox="0 0 20 20">
+            {!open ? (
+              <path d="M14.613,10c0,0.23-0.188,0.419-0.419,0.419H10.42v3.774c0,0.23-0.189,0.42-0.42,0.42s-0.419-0.189-0.419-0.42v-3.774H5.806c-0.23,0-0.419-0.189-0.419-0.419s0.189-0.419,0.419-0.419h3.775V5.806c0-0.23,0.189-0.419,0.419-0.419s0.42,0.189,0.42,0.419v3.775h3.774C14.425,9.581,14.613,9.77,14.613,10 M17.969,10c0,4.401-3.567,7.969-7.969,7.969c-4.402,0-7.969-3.567-7.969-7.969c0-4.402,3.567-7.969,7.969-7.969C14.401,2.031,17.969,5.598,17.969,10 M17.13,10c0-3.932-3.198-7.13-7.13-7.13S2.87,6.068,2.87,10c0,3.933,3.198,7.13,7.13,7.13S17.13,13.933,17.13,10"></path>
+            ) : (
+              <path d="M14.776,10c0,0.239-0.195,0.434-0.435,0.434H5.658c-0.239,0-0.434-0.195-0.434-0.434s0.195-0.434,0.434-0.434h8.684C14.581,9.566,14.776,9.762,14.776,10 M18.25,10c0,4.558-3.693,8.25-8.25,8.25c-4.557,0-8.25-3.691-8.25-8.25c0-4.557,3.693-8.25,8.25-8.25C14.557,1.75,18.25,5.443,18.25,10 M17.382,10c0-4.071-3.312-7.381-7.382-7.381C5.929,2.619,2.619,5.93,2.619,10c0,4.07,3.311,7.382,7.381,7.382C14.07,17.383,17.382,14.07,17.382,10"></path>
+            )}
+          </svg>
+        </button>
+      </div>
+      {open ? (
+        <div className={style.detail}>
+          <button
+            type="button"
+            onClick={copyToClipboard}
+            title="Copy to clipboard"
+          >
+            <svg className={style.icon} viewBox="0 0 20 20">
+              <path d="M4.317,16.411c-1.423-1.423-1.423-3.737,0-5.16l8.075-7.984c0.994-0.996,2.613-0.996,3.611,0.001C17,4.264,17,5.884,16.004,6.88l-8.075,7.984c-0.568,0.568-1.493,0.569-2.063-0.001c-0.569-0.569-0.569-1.495,0-2.064L9.93,8.828c0.145-0.141,0.376-0.139,0.517,0.005c0.141,0.144,0.139,0.375-0.006,0.516l-4.062,3.968c-0.282,0.282-0.282,0.745,0.003,1.03c0.285,0.284,0.747,0.284,1.032,0l8.074-7.985c0.711-0.71,0.711-1.868-0.002-2.579c-0.711-0.712-1.867-0.712-2.58,0l-8.074,7.984c-1.137,1.137-1.137,2.988,0.001,4.127c1.14,1.14,2.989,1.14,4.129,0l6.989-6.896c0.143-0.142,0.375-0.14,0.516,0.003c0.143,0.143,0.141,0.374-0.002,0.516l-6.988,6.895C8.054,17.836,5.743,17.836,4.317,16.411"></path>
+            </svg>
+          </button>
+          <button
+            type="button"
+            onClick={openWiktionary}
+            title="Open Wiktionary"
+          >
+            <svg className={style.icon} viewBox="0 0 20 20">
+              <path d="M8.627,7.885C8.499,8.388,7.873,8.101,8.13,8.177L4.12,7.143c-0.218-0.057-0.351-0.28-0.293-0.498c0.057-0.218,0.279-0.351,0.497-0.294l4.011,1.037C8.552,7.444,8.685,7.667,8.627,7.885 M8.334,10.123L4.323,9.086C4.105,9.031,3.883,9.162,3.826,9.38C3.769,9.598,3.901,9.82,4.12,9.877l4.01,1.037c-0.262-0.062,0.373,0.192,0.497-0.294C8.685,10.401,8.552,10.18,8.334,10.123 M7.131,12.507L4.323,11.78c-0.218-0.057-0.44,0.076-0.497,0.295c-0.057,0.218,0.075,0.439,0.293,0.495l2.809,0.726c-0.265-0.062,0.37,0.193,0.495-0.293C7.48,12.784,7.35,12.562,7.131,12.507M18.159,3.677v10.701c0,0.186-0.126,0.348-0.306,0.393l-7.755,1.948c-0.07,0.016-0.134,0.016-0.204,0l-7.748-1.948c-0.179-0.045-0.306-0.207-0.306-0.393V3.677c0-0.267,0.249-0.461,0.509-0.396l7.646,1.921l7.654-1.921C17.91,3.216,18.159,3.41,18.159,3.677 M9.589,5.939L2.656,4.203v9.857l6.933,1.737V5.939z M17.344,4.203l-6.939,1.736v9.859l6.939-1.737V4.203z M16.168,6.645c-0.058-0.218-0.279-0.351-0.498-0.294l-4.011,1.037c-0.218,0.057-0.351,0.28-0.293,0.498c0.128,0.503,0.755,0.216,0.498,0.292l4.009-1.034C16.092,7.085,16.225,6.863,16.168,6.645 M16.168,9.38c-0.058-0.218-0.279-0.349-0.498-0.294l-4.011,1.036c-0.218,0.057-0.351,0.279-0.293,0.498c0.124,0.486,0.759,0.232,0.498,0.294l4.009-1.037C16.092,9.82,16.225,9.598,16.168,9.38 M14.963,12.385c-0.055-0.219-0.276-0.35-0.495-0.294l-2.809,0.726c-0.218,0.056-0.351,0.279-0.293,0.496c0.127,0.506,0.755,0.218,0.498,0.293l2.807-0.723C14.89,12.825,15.021,12.603,14.963,12.385"></path>
+            </svg>
+          </button>
+        </div>
+      ) : null}
+    </div>
+  );
+};