Merge branch 'scoreboard'

Co-authored-by: Salvatore Di Maria <s-dimaria@users.noreply.github.com>
DavideBri · Apr 30, 2023 · e2d1c26 · e2d1c26
2 parents 75a60c5 + af9ec3e
commit e2d1c26
Show file tree

Hide file tree

Showing 52 changed files with 2,139 additions and 905 deletions.
diff --git a/.gitignore b/.gitignore
@@ -17,6 +17,7 @@
 .env.development.local
 .env.test.local
 .env.production.local
+.env
 
 npm-debug.log*
 yarn-debug.log*

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -12,6 +12,7 @@
     "@types/react": "^17.0.39",
     "@types/react-dom": "^17.0.13",
     "copy-to-clipboard": "^3.3.1",
+    "cuss": "^2.1.0",
     "firebase": "^9.14.0",
     "postscribe": "^2.0.8",
     "react": "^17.0.2",
@@ -24,6 +25,7 @@
     "react-select": "^5.2.2",
     "redux": "^4.2.0",
     "typescript": "^4.6.2",
+    "uid": "^2.0.2",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

diff --git a/public/android-chrome-192x192.png b/public/android-chrome-192x192.png
diff --git a/public/android-chrome-512x512.png b/public/android-chrome-512x512.png
diff --git a/public/apple-touch-icon.png b/public/apple-touch-icon.png
diff --git a/public/favicon-16x16.png b/public/favicon-16x16.png
diff --git a/public/favicon-32x32.png b/public/favicon-32x32.png
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/index.html b/public/index.html
@@ -2,9 +2,10 @@
 <html lang="it">
 
 <head>
+  <meta name="verified-code" content="239368be-7263-4f33-8342-1fa0cba4e9f6">
    <!-- Start cookieyes banner --> <script id="cookieyes" type="text/javascript" src="https://cdn-cookieyes.com/client_data/78345249e50c127966f20a5e/script.js"></script> <!-- End cookieyes banner --> 
-   <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-2908939486421927"
-   crossorigin="anonymous"></script>
+   <!-- <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-2908939486421927"
+   crossorigin="anonymous"></script> -->
    <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <meta name="monetag" content="69b918486c52d87c58343f5c3fe3229f">

diff --git a/public/manifest.json b/public/manifest.json
@@ -1,7 +1,17 @@
 {
   "short_name": "Heardle Italia",
   "name": "Heardle Italia",
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff",
   "icons": [
+    {
+      "src": "maskable.png",
+      "size": "196x196",
+      "type": "image/png",
+      "purpose": "any maskable"
+    },
     {
       "src": "favicon.ico",
       "sizes": "64x64 32x32 24x24 16x16",
@@ -17,9 +27,5 @@
       "sizes": "512x512",
       "type": "image/png"
     }
-  ],
-  "start_url": ".",
-  "display": "standalone",
-  "theme_color": "#000000",
-  "background_color": "#ffffff"
+  ]
 }
diff --git a/public/maskable.png b/public/maskable.png
diff --git a/public/mstile-150x150.png b/public/mstile-150x150.png
diff --git a/public/safari-pinned-tab.svg b/public/safari-pinned-tab.svg
diff --git a/public/site.webmanifest b/public/site.webmanifest
@@ -1,6 +1,6 @@
 {
-    "name": "Heardle Italia",
-    "short_name": "Heardle Italia",
+    "name": "",
+    "short_name": "",
     "icons": [
         {
             "src": "/android-chrome-192x192.png",

diff --git a/src/App.css b/src/App.css
@@ -37,6 +37,3 @@
   }
 }
 
-.adsbygoogle{
-  display: block;
-}
diff --git a/src/App.tsx b/src/App.tsx
@@ -6,66 +6,78 @@ import { GameContextProvider } from "./components/player/GameContext";
 import { useEffect, useState } from "react";
 import { getDailySong } from "./components/utils/dataService";
 import { getAccessToken } from "./components/utils/spotifyService";
-import { SongConfig } from "./components/game/Models";
-import { getDayStr } from "./components/utils";
+import { SongConfig } from "./components/game/SongConfig";
+import Error from "./components/Error";
+import LoadingSpinner from "./components/LoadingSpinner";
 
-const APP_VERSION = process.env.REACT_APP_VERSION || "0"
+const APP_VERSION = process.env.REACT_APP_VERSION || "0";
 console.debug("v" + APP_VERSION);
 
 const currentVersion = localStorage.getItem("version");
 if (currentVersion !== APP_VERSION) {
-  console.log(`version upgrated from ${currentVersion} to ${APP_VERSION}`)
+  console.log(`version upgrated from ${currentVersion} to ${APP_VERSION}`);
   localStorage.setItem("version", APP_VERSION);
 }
 
 const EMPTY_SONG_CONFIG: SongConfig = {
   trackName: "",
   breaks: [],
-  others: []
-}
-
+  others: [],
+};
 
 function App() {
-
   const [loading, setLoading] = useState(true);
-  const [currentSongConfig, setCurrentSongConfig] = useState<SongConfig>(EMPTY_SONG_CONFIG);
+  const [currentSongConfig, setCurrentSongConfig] =
+    useState<SongConfig>(EMPTY_SONG_CONFIG);
 
   const [accessToken, setAccessToken] = useState("");
 
+  const [serverDate, setServerDate] = useState("");
+
   useEffect(() => {
     getAccessToken().then((value: any) => {
       setAccessToken(value);
-      getDailySong(value).then(songConfig => {
-        setCurrentSongConfig(songConfig);
-        setLoading(false)          
-      })
-    }); 
-
 
-  }, [])
+      console.debug("===== SERVER DATE CONTROL ====");
+
+      fetch("https://worldtimeapi.org/api/timezone/Europe/Rome")
+      .then((response) => response.json())
+        .then((data) => {
+            let day: string = data.datetime.replaceAll("-", "/").substring(0, 10)
+            setServerDate(day);
+
+            console.debug(
+                " - Server: " +
+                day
+            );
+
+      getDailySong(value, day).then((songConfig) => {
+        setCurrentSongConfig(songConfig);
+        setLoading(false);
+      });
+    });
+    });
+  },[serverDate])
 
   return (
     <div className="bg-custom-bg text-custom-fg overflow-auto flex flex-col mobile-h">
       <ModalContextProvider>
         <Header />
         <AllModals />
       </ModalContextProvider>
-      <GameContextProvider>
-        {
-          loading ?
-            <>
-              <div className="max-w-screen-sm w-full mx-auto flex-col" >
-                <div className="text-center m-3 mt-6">
-                  Caricamento...
-                </div>
-              </div>
-              .</>
-            : (
-              <PlayerContainer songConfig={currentSongConfig} 
-              accessToken = {accessToken}/>
-            )
-        }
-      </GameContextProvider>
+      {loading ? (
+        <LoadingSpinner></LoadingSpinner>
+      )  : serverDate == "" ? (
+        <Error></Error> 
+      ) : (
+        <GameContextProvider date={serverDate}>
+          <PlayerContainer
+            songConfig={currentSongConfig}
+            accessToken={accessToken}
+            date={serverDate}
+          />
+        </GameContextProvider>
+      )}
     </div>
   );
 }

diff --git a/src/Error.css b/src/Error.css
@@ -0,0 +1,19 @@
+
+
+.error-container {
+  padding: 28px 28px 30vh;
+  display: flex;
+  flex-direction: column;
+  -webkit-box-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  justify-content: center;
+  -webkit-box-flex: 1;
+  flex-grow: 1;
+  max-width: 370px;
+  width: 100%;
+  margin-left: auto;
+  margin-right: auto;
+  text-align: center;
+}
+
diff --git a/src/Spinner.css b/src/Spinner.css
@@ -0,0 +1,34 @@
+@keyframes spinner {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+
+  .spinner-container {
+    padding: 28px 28px 30vh;
+    display: flex;
+    flex-direction: column;
+    -webkit-box-align: center;
+    align-items: center;
+    -webkit-box-pack: center;
+    justify-content: center;
+    -webkit-box-flex: 1;
+    flex-grow: 1;
+    max-width: 370px;
+    width: 100%;
+    margin-left: auto;
+    margin-right: auto;
+    text-align: center;
+  }
+
+  .loading-spinner {
+    width: 50px;
+    height: 50px;
+    border: 10px solid #f3f3f3; /* Light grey */
+    border-top: 10px solid #383636; /* Black */
+    border-radius: 50%;
+    animation: spinner 1.5s linear infinite;
+  }
diff --git a/src/components/Error.jsx b/src/components/Error.jsx
@@ -0,0 +1,14 @@
+import "../Error.css";
+import { errorString } from "./game/Constants";
+
+function Error() {
+  return (
+    <div className="error-container">
+      <p> {errorString} </p>
+      <button className="m-2 px-2 py-2 uppercase tracking-widest border-none flex items-center font-semibold text-sm rounded bg-custom-positive"
+      onClick={()=>window.location.reload(true)}> RICARICAMI</button>
+    </div>
+  );
+}
+
+export default Error;