add loading

Leastrio · Nov 29, 2023 · 5ace77e · 5ace77e
1 parent c9b9e7b
commit 5ace77e
Show file tree

Hide file tree

Showing 3 changed files with 65 additions and 3 deletions.
diff --git a/src-tauri/Cargo.toml b/src-tauri/Cargo.toml
@@ -16,7 +16,7 @@ tauri-build = { version = "1.5.0", features = [] }
 [dependencies]
 serde_json = "1.0"
 serde = { version = "1.0", features = ["derive"] }
-tauri = { version = "1.5.2", features = ["system-tray"] }
+tauri = { version = "1.5.2", features = [ "updater", "system-tray"] }
 tokio = { version = "1.34.0", features = ["full"] }
 hyper = { version = "1", features = ["full"] }
 http-body-util = "0.1"

diff --git a/src-tauri/tauri.conf.json b/src-tauri/tauri.conf.json
@@ -15,7 +15,8 @@
       "all": false
     },
     "systemTray": {
-      "iconPath": "icons/icon.png"
+      "iconPath": "icons/icon.png",
+      "iconAsTemplate": false
     },
     "bundle": {
       "active": true,

diff --git a/ui/index.html b/ui/index.html
@@ -62,6 +62,45 @@
           height: 100%;
           border-radius: 20px;
         }
+
+        .overlay {
+          display: none;
+          position: fixed;
+          top: 0;
+          left: 0;
+          width: 100%;
+          height: 100%;
+          background: rgba(0, 0, 0, 0.5);
+          justify-content: center;
+          align-items: center;
+          z-index: 1000;
+        }
+
+        .loading-container {
+          text-align: center;
+          color: white;
+          font-size: x-large;
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          justify-content: center;
+          height: 100%;
+        }
+
+        .loading-icon {
+          border: 4px solid #f3f3f3;
+          border-top: 4px solid #b52712;
+          border-radius: 50%;
+          width: 50px;
+          height: 50px;
+          animation: spin 1s linear infinite;
+          margin-bottom: 10px;
+        }
+
+        @keyframes spin {
+          0% { transform: rotate(0deg); }
+          100% { transform: rotate(360deg); }
+        }
     </style>
 </head>
 <body>
@@ -80,20 +119,42 @@ <h1>
           <img src="/assets/val.jpg" alt="Valorant">
       </div>
   </div>
+  <div class="overlay" id="loadingOverlay">
+    <div class="loading-container">
+        <p id="loadingText">Loading Game...</p>
+        <div class="loading-icon"></div>
+    </div>
+  </div>
+
   <script>
     document.getElementById('league-of-legends').addEventListener('click', function() {
+      showLoadingOverlay();
       const { invoke } = window.__TAURI__.tauri
       invoke('launch_game', { game: "league_of_legends" })
     });
 
     document.getElementById('valorant').addEventListener('click', function() {
+      showLoadingOverlay();
       const { invoke } = window.__TAURI__.tauri
       invoke('launch_game', { game: "valorant" })
     });
 
     addEventListener("contextmenu", (e) => {
       e.preventDefault();
     });
-    </script>
+
+    let loadingText = document.getElementById('loadingText');
+    let loadingDots = 1;
+
+    function rotateLoadingText() {
+      loadingText.textContent = 'Loading Game' + '.'.repeat(loadingDots);
+      loadingDots = (loadingDots % 4) + 1;
+    }
+
+    function showLoadingOverlay() {
+      document.getElementById('loadingOverlay').style.display = 'flex';
+      loadingInterval = setInterval(rotateLoadingText, 500);
+    }
+  </script>
 </body>
 </html>