feat(ui): customize modal, radio buttons, toast, and close buttons wi…

…th smooth transitions and modern design Styled modal, radio buttons, toast notifications, and close buttons with custom colors, icons, and smooth transitions. Added CSS variables for easy future customization.
sebastianjnuwu · Jan 6, 2025 · b1412a7 · b1412a7
1 parent 2a74231
commit b1412a7
Show file tree

Hide file tree

Showing 6 changed files with 237 additions and 51 deletions.
diff --git a/k b/k
@@ -0,0 +1,9 @@
+[33m2a74231[m[33m ([m[1;36mHEAD[m[33m -> [m[1;32mandroid[m[33m, [m[1;31morigin/android[m[33m, [m[1;31morigin/HEAD[m[33m)[m HEAD@{0}: commit: chore(metadata): add citation metadata for the project
+[33mdf8a154[m HEAD@{1}: commit: chore(license): add LICENSE file with Mozilla Public License v2.0
+[33m1a48d65[m HEAD@{2}: commit: chore(nvm): update Node.js version to v23.5.0 in .nvmrc
+[33m0527a36[m HEAD@{3}: commit: chore(renovate): configure dependency updates every 3 months
+[33mf90e210[m HEAD@{4}: commit: chore(templates): remove Feature Request from ISSUE_TEMPLATE
+[33mb07a6a8[m HEAD@{5}: commit: chore(config): add comprehensive .gitignore for Node.js project
+[33m8c79a1e[m HEAD@{6}: commit: docs(readme): update image format from PNG to WebP
+[33m7d24b58[m HEAD@{7}: commit: feat(assets): replace PNG images with optimized WebP
+[33mff6b2cf[m HEAD@{8}: clone: from https://github.com/sebastianjnuwu/app
diff --git a/www/index.html b/www/index.html
@@ -6,28 +6,20 @@
   <title>Cookie</title>
   <link rel="shortcut icon" href="./src/img/icon.webp" type="image/webp">
   <link rel="stylesheet" href="./src/styles/css/ui.css">
-  <script type="module" src="./src/js/modules/js.cookie.min.js"></script>
   <script type="module" src="./src/js/modules/socket.io.min.js"></script>
   <script type="module" src="./src/js/modules/jquery.min.js"></script>
+  <script type="module" src="./src/js/main.js"></script>
   <script type="module" src="./src/js/cookie/start.js"></script>
   <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)  --->
-  <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) --->
-  <audio id="click" preload="auto">
-   <source src="https://github.com/sebastianjnuwu/sebastianjnuwu/raw/refs/heads/main/CDN/click.mp3">
-  </audio>
-  <!--- (sound of button clicks /) --->
 
+  <div class="toast-container position-fixed bottom-0 end-0 p-3">
+   <div id="message"></div>
+  </div>
+
    <!--- (splash-screen) ---> 
   <div id="splash-screen">
     <img src="./src/img/icon.webp" alt="splash-screen" class="icon mb-5">
@@ -54,25 +46,16 @@ <h1 class="title">
   </div>
    <!--- (splash-screen /) ---> 
 
-    <!-- (countdown) -->
+   <!-- (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>
-    <!-- (countdown /) -->
+   <!-- (countdown /) -->
 
   <!-- (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) -->
+   <!-- (ranking) -->
   <div id="ranking" style="display: none;">
    <h2><i class="fas fa-trophy"></i> Ranking</h2>
     <ul id="ranking-list"></ul>
@@ -82,8 +65,17 @@ <h2><i class="fas fa-trophy"></i> Ranking</h2>
    </button>
    </div>
   </div>
-    <!-- (ranking /) -->
-
+   <!-- (ranking /) -->
+
+   <!-- (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 /) -->
+
     <!-- (Waiting room) -->
   <div class="waiting-room">
   <h1><i class="fas fa-cookie-bite"></i> Aguardando...</h1>
@@ -104,8 +96,8 @@ <h1><i class="fas fa-cookie-bite"></i> Aguardando...</h1>
 
   <div id="game" style="display: none;">
 
-   <!-- statistics table -->
-  <table class="d-flex flex-column justify-content-center align-items-center statistic position-relative">
+    <!-- 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>
@@ -117,21 +109,22 @@ <h1><i class="fas fa-cookie-bite"></i> Aguardando...</h1>
             </tr>
     </tbody>
   </table>
-   <!-- statistics table -->
+    <!-- statistics table -->
 
     <!-- Clicking on the cookie -->
-  <cookie class="d-flex flex-column justify-content-center align-items-center cookie position-relative">
+   <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;">
+   <div class="game-time position-fixed bottom-0 start-50 translate-middle-x mb-4">
     <h3><i class="fas fa-stopwatch"> Tempo: </i> <span id="timer">0:00</span></h3>
   </div>
     <!-- (room game time /) -->
+
+ </div>
+
 
 </ui>
   <!-- (layout-game /) -->
@@ -194,16 +187,19 @@ <h5 class="modal-title" id="room_modalLabel">
         </form>
       </div>
       <div class="modal-footer">
-        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
-        <button id="form_button" class="btn btn-primary">Confirmar</button>
+     <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
+  <i class="fas fa-times"></i> Cancelar
+</button>
+<button id="form_button" class="btn btn-primary">
+  <i class="fas fa-check"></i> Confirmar
+</button>
       </div>
     </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 type="module" src="./src/js/modules/bootstrap.min.js"></script>
   <!--- (script /) ---> 

diff --git a/www/src/js/cookie/start.js b/www/src/js/cookie/start.js
@@ -1,18 +1,56 @@
+
+  // Display a message with boostrap toast 
+function $message(text) {
+
+  $('#message').html('');
+
+  setTimeout(() => {
+    $('#message').html('');
+  }, 10000);
+
+  return $('#message').html(`
+    <div class="toast fade show">
+    <div class="toast-header">
+    <img style="width: 10%;" src="./src/img/icon.webp" class="rounded me-2">
+    <strong class="me-auto">Cookie</strong>
+    <small>Agora</small>
+    <button type="button" style="box-shadow: none; outline: none;" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
+    </div>
+    <div class="toast-body"> ${text}</div></div>`);
+
+};
+
+ // connect the server to the socket
 const socket = io("http://localhost:3000", {
   transports: ["websocket", "polling"],
 });
 
 let name = null;
 let code = null;
 
+ // form for creating the room 
 $('#form_button').on('click', () => {
 
+  const option = $('input[name="option_game"]:checked').val();
   const room_player = $('#room_name').val();
   const room_code = $('#room_code').val();
   const room_time = $('#room_time').val();
 
-  $('#room_modal').modal('hide');
-  $("#start-screen").hide();
+  if (!room_player) {
+    return $message('<b><i class="fas fa-exclamation-circle"></i> Ops!</b> Parece que você não definiu seu nickname!');
+  }; 
+
+  if (option === "create" && !room_time) {
+    return $message('<b><i class="fas fa-exclamation-circle"></i> Ops!</b> Parece que você não definiu o tempo da sala!');
+  }; 
+
+  if (option === "join" && !room_code) {
+    return $message('<b><i class="fas fa-exclamation-circle"></i> Ops!</b> Parece que você não adicionou o código da sala');
+  }; 
+
+  if (!socket.connected) {
+    return $message('<b><i class="fas fa-exclamation-circle"></i> Ops!</b> Parece que você foi desconectado do jogo Cookie!');
+  }; 
 
   socket.emit("room", { 
     room_code, room_time, room_player
@@ -22,12 +60,25 @@ $('#form_button').on('click', () => {
 
 });
 
+socket.on("err_socket", ({ message }) => {
+  $message(message)
+});
+
 socket.on("update_room", ({ 
   room_player, room
 }) => {
 
+  $('#room_modal').modal('hide');
+  $("#start-screen").hide();
   $("ui").show();
 
+  if (room.state === "waiting") {
+    $(".waiting-room").show();
+    $(".room-code").show();
+  } else if (room.state = "in_game") {
+    $("#game").show();
+  };
+
   if (room.owner !== name) {
     $("#start_game").hide();
   };
@@ -84,7 +135,6 @@ socket.on("timer", ({ time_game }) => {
 socket.on("game_end", ({ ranking }) => {
   $(".room-code").hide();
   $("#game").hide();
-  $(".game-time").hide();
 
   $("#ranking").show();
   $("#ranking-list").empty();
@@ -101,5 +151,7 @@ socket.on("game_end", ({ ranking }) => {
 });
 
 $("#game_exit").on("click", () => {
-  return location.reload();
+  $("ui").hide();
+  $("#ranking").hide();
+  $("#start-screen").show();
 });
diff --git a/www/src/js/main.js b/www/src/js/main.js
@@ -2,18 +2,12 @@ $(() => {
 
    // splash-screen
   $("#splash-screen").on("click", () => {
-    $("#splash")[0].play();
     setTimeout(() => {
       $("#splash-screen").hide();
       $("#start-screen").show();
     }, 1000);
   });
 
-  // 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', () => {
 

diff --git a/www/src/js/modules/js.cookie.min.js b/www/src/js/modules/js.cookie.min.js