feat(socket): add script 3/3

sebastianjnuwu · Jan 5, 2025 · 87abe9e · 87abe9e
1 parent 87b0d15
commit 87abe9e
Show file tree

Hide file tree

Showing 6 changed files with 172 additions and 105 deletions.
diff --git a/socket/src/main.js b/socket/src/main.js
@@ -101,8 +101,6 @@ io.on("connection", (socket) => {
     // Log para fins de depuração
     console.log(`Socket ${socket.id} (${room_player}) saiu da sala ${room_code}`);
 
-    console.log(room);
-
 });
 
    // rejoin_room
@@ -128,16 +126,14 @@ io.on("connection", (socket) => {
      // send the update to room.
     io.to(room_code).emit("update_room", { room_player, room });
 
-    console.log(room);
-
   });
 
   socket.on("start_game", ({ room_code }) => {
 
     const room = ROOMS[room_code];
     room.state = "in_game";
 
-    let countdown = 3; // Contagem regressiva de 10 segundos
+    let countdown = 1; // Contagem regressiva de 10 segundos
     const countdownInterval = setInterval(() => {
         io.to(room_code).emit("count_down", { countdown });
 

diff --git a/typos.toml b/typos.toml
@@ -3,8 +3,10 @@ check-filename = true
 
 [files]
 extend-exclude = [
+  "www/src/js/modules",
   "node_modules",
-  "android"
+  "android",
+  "socket"
 ]
 
 [default.extend-words]

diff --git a/www/index.html b/www/index.html
@@ -13,24 +13,27 @@
   <script type="module" src="./main.ts"></script>
 </head>
 
+  <!-- (body) -->
 <body class="d-flex flex-column justify-content-center align-items-center vh-100">
 
-  <!--- background sound  --->
+  <!--- (background sound)  --->
   <audio id="splash" preload="auto" loop>
    <source src="https://github.com/sebastianjnuwu/sebastianjnuwu/raw/refs/heads/main/CDN/start.mp3">
   </audio>
+  <!--- (background sound /) --->
 
-  <!--- sound of button clicks --->
+  <!--- (sound of button clicks) --->
   <audio id="click" preload="auto">
    <source src="https://github.com/sebastianjnuwu/sebastianjnuwu/raw/refs/heads/main/CDN/click.mp3">
   </audio>
+  <!--- (sound of button clicks /) --->
 
    <!--- (splash-screen) ---> 
   <div id="splash-screen">
     <img src="./src/img/icon.webp" alt="splash-screen" class="icon mb-5">
     <h1>Click...</h1>
   </div> 
-   <!--- (splash-screen) ---> 
+   <!--- (splash-screen /) ---> 
 
    <!--- (start-screen) ---> 
   <div id="start-screen" style="display: none;">
@@ -49,26 +52,39 @@ <h1 class="title">
     </button> -->
    </div>
   </div>
-   <!--- (splash-screen) ---> 
+   <!--- (splash-screen /) ---> 
 
-<ui style="display: none;">
+  <!-- (layout-game) -->
+ <ui style="display: none;">
 
+   <!-- (room code) -->
   <div class="room-code position-fixed top-0 start-50 translate-middle-x mt-4">
     <h3><i class="fas fa-key"></i> Código da Sala:</h3>
     <p id="current_code">
    <i class="fas fa-wifi"></i>
     </p>
 </div>
+   <!-- (room code /) -->
 
+    <!-- (ranking) -->
   <div id="ranking" style="display: none;">
-  <h2>Ranking Final</h2>
-  <ul id="ranking-list"></ul>
+   <h2><i class="fas fa-trophy"></i> Ranking</h2>
+    <ul id="ranking-list"></ul>
+    <div class="d-flex flex-column justify-content-center align-items-center gap-2">
+    <button id="leave_room" class="btn btn-secondary">
+     <i class="fas fa-sign-out-alt"></i> Sair
+   </button>
+   </div>
   </div>
+    <!-- (ranking /) -->
 
-  <div id="countdown-container" class="countdown-overlay d-flex justify-content-center align-items-center" style="display: none !important;">
+    <!-- (countdown) -->
+  <div style="display: none;" id="countdown-container" class="countdown-overlay justify-content-center align-items-center">
     <h1 id="countdown" class="countdown-text">3</h1>
-</div>
-
+  </div>
+    <!-- (countdown /) -->
+
+    <!-- (Waiting room) -->
   <div class="waiting-room">
   <h1><i class="fas fa-cookie-bite"></i> Aguardando...</h1>
   <p>
@@ -78,43 +94,50 @@ <h1><i class="fas fa-cookie-bite"></i> Aguardando...</h1>
   <button id="start_game" class="btn btn-primary">
     <i class="fas fa-play"></i> Começar
   </button>
-  <button id="leave_room" class="btn btn-secondary">
-    <i class="fas fa-sign-out-alt"></i> Sair
-  </button>
+    <button id="leave_room_2" class="btn btn-secondary">
+     <i class="fas fa-sign-out-alt"></i> Sair
+   </button>
 </div>
 
 </div>
+   <!-- (Waiting room /) -->
 
-  <div style="display: none !important;" class="game d-flex flex-column justify-content-center align-items-center">
-
-    <table class="statistic position-relative">
-          <tbody>
-            <tr>
+  <div id="game" style="display: none;">
+
+   <!-- statistics table -->
+  <table class="d-flex flex-column justify-content-center align-items-center statistic position-relative">
+    <tbody>
+      <tr>
               <th><i class="fas fa-cookie-bite"></i> Cookies</th>
               <td id="click-cookie" class="value">0</td>
             </tr>
-              <tr>
+      <tr>
               <th><i class="fas fa-stopwatch"></i> Seconds</th>
               <td id="cps" class="value">0</td>
             </tr>
-          </tbody>
-        </table>
-
-    <cookie class="cookie position-relative game">
-     <img src="./src/img/cookie.webp" alt="cookie" class="icon mb-4">
-   </cookie>
+    </tbody>
+  </table>
+   <!-- statistics table -->
+
+    <!-- Clicking on the cookie -->
+  <cookie class="d-flex flex-column justify-content-center align-items-center cookie position-relative">
+    <img src="./src/img/cookie.webp" alt="cookie" class="icon mb-4">
+  </cookie>
+    <!-- Clicking on the cookie -->
 
   </div>
 
+    <!-- (room game time) -->
   <div class="game-time position-fixed bottom-0 start-50 translate-middle-x mb-4" style="display: none;">
     <h3><i class="fas fa-stopwatch"> Tempo: </i> <span id="timer">0:00</span></h3>
   </div>
-
+    <!-- (room game time /) -->
 
 </ui>
+  <!-- (layout-game /) -->
 
-
-<div class="modal fade" id="gameModal" tabindex="-1" aria-labelledby="gameModalLabel" aria-hidden="true">
+  <!-- (room settings) -->
+  <div class="modal fade" id="gameModal" tabindex="-1" aria-labelledby="gameModalLabel" aria-hidden="true">
   <div class="modal-dialog">
     <div class="modal-content">
       <div class="modal-header">
@@ -177,12 +200,15 @@ <h5 class="modal-title" id="gameModalLabel">
     </div>
   </div>
 </div>
+  <!-- (room settings /) -->
 
   <!--- (script) ---> 
   <script type="module" src="./src/js/main.js" defer></script>
   <script type="module" src="./src/js/cookie/game.js" defer></script>
   <script src="./src/js/modules/bootstrap.min.js"></script>
-  <!--- (script) ---> 
+  <!--- (script /) ---> 
 
-   </body>
-</html>
+  </body>
+  <!-- (body /) -->
+
+</html>
diff --git a/www/src/js/main.js b/www/src/js/main.js
@@ -2,26 +2,31 @@ $(() => {
 
    // splash-screen
   $("#splash-screen").on("click", () => {
-    $("#splash")[0].volume = 0.1;
     $("#splash")[0].play();
     setTimeout(() => {
       $("#splash-screen").hide();
       $("#start-screen").show();
     }, 1000);
   });
 
-  $("#start-screen button").on("click", () => $("#click")[0].play());
+  // sound when clicking buttons 
+  $("#start-screen button").on("click", () => {
+    return $("#click")[0].play(); 
+  });
 
+  // add and remove add room field
   $('input[name="option_game"]').on('change', () => {
+
+    $('#room_code').val("");
+
     if ($('#room_join').is(':checked')) {
-      $('#room_code').val("");
       $('#code_container').show();
       $("#game_container").hide();
     } else {
-      $('#room_code').val("");
       $('#code_container').hide();
       $("#game_container").show();
-    }
+    };
+
   });
 
 });