toasts, replace direction by emoji arrows

Dabendorf · Jan 22, 2022 · a0c1b13 · a0c1b13
1 parent 78d50c7
commit a0c1b13
Show file tree

Hide file tree

Showing 4 changed files with 159 additions and 64 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -16,6 +16,7 @@
     "react-copy-to-clipboard": "^5.0.4",
     "react-dom": "^17.0.2",
     "react-scripts": "5.0.0",
+    "react-toastify": "^8.1.0",
     "seedrandom": "^3.0.5",
     "typescript": "^4.5.4",
     "web-vitals": "^2.1.3"

diff --git a/public/index.html b/public/index.html
@@ -7,7 +7,7 @@
     <meta name="theme-color" content="#000000" />
     <meta
       name="description"
-      content="Web site created using create-react-app"
+      content="Wordle game in the World"
     />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <!--

diff --git a/src/App.tsx b/src/App.tsx
@@ -1,16 +1,54 @@
-import { useCallback, useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import { countries } from "./countries";
 import * as geolib from "geolib";
 import * as seedrandom from "seedrandom";
 import { CopyToClipboard } from "react-copy-to-clipboard";
 import { DateTime, Interval } from "luxon";
-
+import { toast, ToastContainer, Flip } from "react-toastify";
+import "react-toastify/dist/ReactToastify.css";
+
+type Direction =
+  | "S"
+  | "W"
+  | "NNE"
+  | "NE"
+  | "ENE"
+  | "E"
+  | "ESE"
+  | "SE"
+  | "SSE"
+  | "SSW"
+  | "SW"
+  | "WSW"
+  | "WNW"
+  | "NW"
+  | "NNW"
+  | "N";
+
+const DIRECTION_ARROWS: Record<Direction, string> = {
+  N: "⬆️",
+  NNE: "↗️",
+  NE: "↗️",
+  ENE: "↗️",
+  E: "➡️",
+  ESE: "↘️",
+  SE: "↘️",
+  SSE: "↘️",
+  S: "⬇️",
+  SSW: "↙️",
+  SW: "↙️",
+  WSW: "↙️",
+  W: "⬅️",
+  WNW: "↖️",
+  NW: "↖️",
+  NNW: "↖️",
+};
 const MAX_DISTANCE_ON_EARTH = 20_000_000;
 const START_DATE = DateTime.fromISO("2022-01-21");
 interface Guess {
   name: string;
   distance: number;
-  direction: string;
+  direction: Direction;
 }
 
 function getDayString() {
@@ -62,29 +100,33 @@ function App() {
       const guessedCountry = countries.find(
         (country) => country.name.toLowerCase() === currentGuess.toLowerCase()
       );
-      if (guessedCountry != null) {
-        const newGuesses = [
-          ...guesses,
-          {
-            name: currentGuess,
-            distance: geolib.getDistance(guessedCountry, country),
-            direction:
-              geolib.getRoughCompassDirection(
-                geolib.getCompassDirection(guessedCountry, country)
-              ) ?? "!",
-          },
-        ];
-        setGuesses(newGuesses);
-        saveGuesses(newGuesses);
-        setCurrentGuess("");
+
+      if (guessedCountry == null) {
+        toast.error("Unknown country!");
+        return;
+      }
+
+      const newGuess = {
+        name: currentGuess,
+        distance: geolib.getDistance(guessedCountry, country),
+        direction: geolib.getCompassDirection(guessedCountry, country),
+      };
+
+      const newGuesses = [...guesses, newGuess];
+
+      setGuesses(newGuesses);
+      saveGuesses(newGuesses);
+      setCurrentGuess("");
+
+      if (newGuess.distance === 0) {
+        toast.success("Well done!");
       }
     },
     [country, currentGuess, guesses, saveGuesses]
   );
 
   const shareText = useMemo(() => {
     const guessCount = guesses.at(-1)?.distance === 0 ? guesses.length : "X";
-    console.log("aze", new Date(dayString), START_DATE);
     const dayCount = Math.floor(
       Interval.fromDateTimes(START_DATE, DateTime.fromISO(dayString)).length(
         "day"
@@ -97,64 +139,82 @@ function App() {
         const percent = computeProximityPercent(guess.distance);
         const greenSquareCount = Math.floor(percent / 20);
         const yellowSquareCount = percent - greenSquareCount * 20 >= 10 ? 1 : 0;
-        console.log({ greenSquareCount, yellowSquareCount });
         const green = "🟩".repeat(greenSquareCount);
         const yellow = "🟨".repeat(yellowSquareCount);
         const white = "⬜".repeat(5 - greenSquareCount - yellowSquareCount);
         return `${green}${yellow}${white}`;
       })
       .join("\n");
 
-    return [title, guessString, 'https://worldle.teuteuf.fr'].join('\n');
+    return [title, guessString, "https://worldle.teuteuf.fr"].join("\n");
   }, [dayString, guesses]);
 
+  useEffect(() => {
+    if (guesses.length === 6 && guesses.at(-1)!.distance > 0) {
+      toast.info(country.name.toUpperCase(), { autoClose: false });
+    }
+  }, [country.name, guesses]);
+
   return (
-    <div className="flex justify-center">
-      <div className="w-full max-w-lg">
-        <header className="border-b-2 border-gray-200">
-          <h1 className="text-4xl font-bold uppercase tracking-wide text-center my-1">
-            Wor<span className="text-green-600">l</span>dle
-          </h1>
-        </header>
-        <div className="flex flex-col mx-2">
-          <img
-            className="max-h-52 my-1"
-            alt="country to guess"
-            src={`images/countries/${country.code.toLowerCase()}/vector.svg`}
-          />
-          <div>
-            <div className="grid grid-cols-7 gap-1 text-center">
-              {Array.from(Array(6).keys()).map((index) => (
-                <GuessRow key={index} guess={guesses[index]} />
-              ))}
+    <>
+      <ToastContainer
+        hideProgressBar
+        position="top-center"
+        transition={Flip}
+        theme="light"
+        autoClose={2000}
+        bodyClassName="font-bold text-center"
+      />
+      <div className="flex justify-center">
+        <div className="w-full max-w-lg">
+          <header className="border-b-2 border-gray-200">
+            <h1 className="text-4xl font-bold uppercase tracking-wide text-center my-1">
+              Wor<span className="text-green-600">l</span>dle
+            </h1>
+          </header>
+          <div className="flex flex-col mx-2">
+            <img
+              className="max-h-52 my-1"
+              alt="country to guess"
+              src={`images/countries/${country.code.toLowerCase()}/vector.svg`}
+            />
+            <div>
+              <div className="grid grid-cols-7 gap-1 text-center">
+                {Array.from(Array(6).keys()).map((index) => (
+                  <GuessRow key={index} guess={guesses[index]} />
+                ))}
+              </div>
             </div>
-          </div>
-          <div className="my-2">
-            {gameEnded ? (
-              <CopyToClipboard text={shareText}>
-                <button className="border-2 px-4 uppercase bg-green-600 text-white w-full">
-                  Share
-                </button>
-              </CopyToClipboard>
-            ) : (
-              <form onSubmit={handleSubmit}>
-                <div className="flex flex-col">
-                  <input
-                    className="border-2 flex-auto"
-                    placeholder="Country..."
-                    value={currentGuess}
-                    onChange={(e) => setCurrentGuess(e.target.value)}
-                  />
-                  <button className="border-2 uppercase my-0.5" type="submit">
-                    🌍 Guess
+            <div className="my-2">
+              {gameEnded ? (
+                <CopyToClipboard
+                  text={shareText}
+                  onCopy={() => toast("Copied results to clipboard")}
+                >
+                  <button className="border-2 px-4 uppercase bg-green-600 hover:bg-green-500 active:bg-green-700 text-white w-full">
+                    Share
                   </button>
-                </div>
-              </form>
-            )}
+                </CopyToClipboard>
+              ) : (
+                <form onSubmit={handleSubmit}>
+                  <div className="flex flex-col">
+                    <input
+                      className="border-2 flex-auto"
+                      placeholder="Country..."
+                      value={currentGuess}
+                      onChange={(e) => setCurrentGuess(e.target.value)}
+                    />
+                    <button className="border-2 uppercase my-0.5 hover:bg-gray-50 active:bg-gray-100" type="submit">
+                      🌍 Guess
+                    </button>
+                  </div>
+                </form>
+              )}
+            </div>
           </div>
         </div>
       </div>
-    </div>
+    </>
   );
 }
 
@@ -170,7 +230,7 @@ function GuessRow({ guess }: { guess?: Guess }) {
         {guess && `${Math.round(guess.distance / 1000)}km`}
       </div>
       <div className={`border-2 h-8 col-span-1 ${bgColor}`}>
-        {guess?.distance === 0 ? "🎉" : guess?.direction}
+        {guess?.distance === 0 ? "🎉" : guess && DIRECTION_ARROWS[guess.direction]}
       </div>
       <div className={`border-2 h-8 col-span-1 ${bgColor}`}>
         {guess && `${computeProximityPercent(guess.distance)}%`}