feat(overlay): remove "loading"

haxgun · Nov 3, 2023 · 64f733a · 64f733a
1 parent e6bc8cb
commit 64f733a
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 29 deletions.
diff --git a/overlay/index.html b/overlay/index.html
@@ -8,7 +8,6 @@
     <link rel="icon" type="image/png" href="/img/favicon.png" />
   </head>
   <body>
-    <div style="width: 450px;height: 150px;display: flex;color: white;font-size: 24px;font-weight: 700;justify-content: center;align-items: center;" id="loading">Loading</div>
     <div id="overlay"></div>
     <script type="module" src="../src/js/overlay.js"></script>
   </body>

diff --git a/src/js/components/overlay.js b/src/js/components/overlay.js
@@ -0,0 +1,23 @@
+export const overlayHTML = `
+  <div id="elements">
+    <div id="rankBlock">
+      <img alt="rank" src="#" id="imgRank" height="80" width="80" />
+    </div>
+    <div id="playerInfo">
+      <h2 style="text-transform: uppercase" id="mainText">
+        Rating
+      </h2>
+      <h1 style="text-transform: uppercase" id="playerRank"></h1>
+      <div id="wlstat">
+        <h2 id="WLvalue">Win: <span id="winValue"></span> Lose: <span id="loseValue"></span> <span id="wlProccent"></span></h2>
+      </div>
+      <div id="progressrank"></div>
+      <div class="lastmatchpts">
+        <span id="lastmatchpts">Last Match:</span>
+        <span id="lastmatchptsvalue"></span>
+        <img src="#" id="imgPTS" height="16" width="16"/>
+      </div>
+    </div>
+  </div>
+`
+
diff --git a/src/js/overlay.js b/src/js/overlay.js
@@ -1,4 +1,5 @@
 import '../scss/overlay.scss'
+import { overlayHTML } from "./components/overlay.js"
 import { setIntervalAsync } from 'set-interval-async';
 
 // Urls and Alpine Data
@@ -31,33 +32,9 @@ const { NICKNAME, TAG} = {
 let lastMatchId = '';
 let win = 0;
 let lose = 0;
-
-const loading = document.querySelector('#loading');
 const overlay = document.querySelector('#overlay');
 
-overlay.innerHTML = `
-  <div id="elements">
-    <div id="rankBlock">
-      <img alt="rank" src="#" id="imgRank" height="80" width="80" />
-    </div>
-    <div id="playerInfo">
-      <h2 style="text-transform: uppercase" id="mainText">
-        Rating
-      </h2>
-      <h1 style="text-transform: uppercase" id="playerRank"></h1>
-      <div id="wlstat">
-        <h2 id="WLvalue">Win: <span id="winValue"></span> Lose: <span id="loseValue"></span> <span id="wlProccent"></span></h2>
-      </div>
-      <div id="progressrank"></div>
-      <div class="lastmatchpts">
-        <span id="lastmatchpts">Last Match:</span>
-        <span id="lastmatchptsvalue"></span>
-        <img src="#" id="imgPTS" height="16" width="16"/>
-      </div>
-    </div>
-  </div>
-`
-overlay.style.display = "none";
+overlay.innerHTML = overlayHTML
 
 // Elements
 const imgRank = document.getElementById('imgRank');
@@ -82,8 +59,6 @@ async function main(nickname, tag) {
 
   await decorateCard()
   await checkData(region, puuid)
-  loading.remove()
-  overlay.style.display = 'block';
   setIntervalAsync(checkData, 30000, region, puuid);
 }
 
@@ -211,7 +186,7 @@ async function checkData(region, puuid) {
       await updatePlayerCard(region, puuid);
     }
   } catch (error) {
-    // pass
+    console.log(error);
   }
   await winlose(region, puuid)
 }