Merge pull request #28 from Ivan23BG:feature-implement-spinner

add spinner
Ivan23BG · Apr 10, 2024 · 3285d48 · 3285d48
2 parents 18872b5 + 4cceff7
commit 3285d48
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 5 deletions.
diff --git a/src/main/game_ui/static/css/game_hex_styles.css b/src/main/game_ui/static/css/game_hex_styles.css
@@ -100,6 +100,30 @@ html {
     display: flex;
 }
 
+#spinner {
+    margin-left: 10px; /* Add some space between the spinner and the buttons */
+}
+
+.loader {
+    border: 8px solid #f3f3f3;
+    border-radius: 50%;
+    border-top: 8px solid #3498db;
+    width: 40px;
+    height: 40px;
+    -webkit-animation: spin 2s linear infinite; /* Safari */
+    animation: spin 2s linear infinite;
+}
+
+@-webkit-keyframes spin {
+    0% { -webkit-transform: rotate(0deg); }
+    100% { -webkit-transform: rotate(360deg); }
+}
+
+@keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}
+
 .hexgame {
     margin: auto;
     width: 50%;
@@ -120,4 +144,5 @@ html {
 
 #hidden_data_red{
     background-color: #A51613;
-}
+}
+
diff --git a/src/main/game_ui/static/js/game_hexia.js b/src/main/game_ui/static/js/game_hexia.js
@@ -59,6 +59,9 @@ window.onload = async function () {
         // Add click event listener to each hex cell
         hex.onclick = function () {
 
+            // show spinner
+            document.getElementById('spinner').style.display = 'block';
+
             if (this.getAttribute('disabled')) {
                 return;
             }
@@ -153,13 +156,20 @@ window.onload = async function () {
                             cell.classList.remove('hex-player2-hover');
                             cell.setAttribute('disabled', true);
                         });
+
+                        // hide spinner
+                        document.getElementById('spinner').style.display = 'none';
                         return;
                     }
                 }
+                // hide spinner
+                document.getElementById('spinner').style.display = 'none';
             })
             .catch((error) => {
                 alert('Unknown error, should never happen, if you get this please warn your supervisor' + error);
             })
+
+
         }; // end of hex.onclick
     }); // end of cells.forEach
 

diff --git a/src/main/game_ui/templates/game_hexia.html b/src/main/game_ui/templates/game_hexia.html
@@ -8,10 +8,15 @@
 
     <body>
         <div class = "titre">
-        <div class = "back_button" onclick="back()">
-        <div class = "text">Home</div></div>
-        <div class = "back_button" onclick="home()">
-        <div class = "text">Hex</div>
+          <div class = "back_button" onclick="back()">
+            <div class = "text">Home</div>
+          </div>
+          <div class = "back_button" onclick="home()">
+            <div class = "text">Hex</div>
+          </div>
+          <div id="spinner" style="display: none;">
+            <div class="loader"></div>
+          </div>
         </div>
           <div class = "hexgame text">
             <h1><center>Hex Game</center></h1>