feat(styles): update styles

Author: sebastianjnuwu

www/index.html

@@ -15,28 +15,24 @@
   <audio id="splash" preload="auto">
     <source src="./src/audio/start.mp3" type="audio/mp3">
   </audio>
- <!---
+ 
   <splash-screen class="d-flex flex-column justify-content-center align-items-center vh-100">
     <img src="https://raw.githubusercontent.com/sebastianjnuwu/app/refs/heads/android/android/app/src/main/res/drawable/splash_screen.png" alt="splash-screen" class="icon mb-5">
     <h1>Click...</h1>
-  </splash-screen> --->
+  </splash-screen> 
 
-<ui style="display: none;" class="d-flex flex-column justify-content-center align-items-center text-center vh-100">
+<ui style="display: none !important;" class="d-flex flex-column justify-content-center align-items-center text-center vh-100">
 
-  <div class="stats-container">
-  <table class="stats-table">
+  <div class="text-center">
+  <table class="statistic">
     <tbody>
       <tr>
-        <th><i class="fas fa-mouse-pointer"></i> Clicks</th>
-        <td id="clicks" class="value">0</td>
+        <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="seconds" class="value">0</td>
-      </tr>
-      <tr>
-        <th><i class="fas fa-cookie-bite"></i> Cookies</th>
-        <td id="cookies" class="value">0</td>
+        <td id="cps" class="value">0</td>
       </tr>
     </tbody>
   </table>
@@ -51,7 +47,6 @@ <h1>Click...</h1>
 </ui>
 
 
-       
   <script src="./src/js/main.js" defer></script>
   <script src="./src/js/cookie/game.js" defer></script>
   <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>

www/src/js/cookie/game.js

@@ -1,8 +1,25 @@
+let cookies = 0;
+let $cps = 0;
+
+const $update_cps = () => {
+  $('#cps').text($cps); 
+  $cps = 0;  
+};
+
+const $update_cookies = () => {
+  cookies++; 
+  $cps++;
+  $('#click-cookie').text(`${cookies}`);
+  localStorage.setItem('cookie', cookies);
+};
+
+setInterval($update_cps, 1000);
+
 $('.cookie').on('click', function (e) {
-  
-  const a = 1;
-  
-  const $effect = $(`<div class="click-effect">+${a}</div>`);
+
+  $update_cookies();
+
+  const $effect = $(`<div class="click-effect">+1</div>`);
 
   const offset = $(this).offset();
   const X = e.pageX - offset.left;
@@ -34,4 +51,4 @@ $('.cookie').on('click', function (e) {
         $(this).remove();
       }
     );
-});
+});

www/src/styles/css/ui.css

@@ -89,70 +89,38 @@ body {
   pointer-events: none; 
 }
 
-/* Font Awesome for icons */
-@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css");
-
-/* Estilos para a tabela */
-.stats-container {
-  display: flex;
-  justify-content: center;
-  margin-top: 20px;
-  padding: 0 10px;
-}
-
-.stats-table {
-  width: 100%;
-  max-width: 400px;
-  border-collapse: collapse;
-  text-align: left;
+.statistic {
+  text-align: center;
   font-family: "Press Start 2P", cursive;
   color: var(--text-color);
-  background-color: var(--table-row-bg);
-  border: 2px solid var(--table-border);
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  text-shadow: 1px 1px var(--text-color-dark);
 }
 
-.stats-table th, .stats-table td {
-  border: 2px solid var(--table-border);
-  padding: 10px;
+.statistic th, .statistic td {
+  padding: 5px;
   text-align: center;
 }
 
-.stats-table th {
-  background-color: var(--table-header-bg);
-  font-size: 1em;
+.statistic th {
+  font-size: 0.8em;
 }
 
-.stats-table td {
-  background-color: var(--table-row-bg);
+.statistic td {
   position: relative;
-  font-size: 1.2em;
+  font-size: 1em;
 }
 
-.stats-table td .label {
+.statistic td .label {
   font-weight: bold;
 }
 
-.stats-table td .value {
+.statistic td .value {
   display: block;
   margin-top: 5px;
+  transition: transform 0.2s ease, color 0.2s ease;
 }
 
-.stats-table td .animated-number {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  animation: rise 1s ease-out;
-}
-
-@keyframes rise {
-  0% {
-    opacity: 0;
-    transform: translate(-50%, 50%);
-  }
-  100% {
-    opacity: 1;
-    transform: translate(-50%, -50%);
-  }
+.statistic td .value.animate {
+  transform: scale(1.3);
+  color: #ff4500; 
 }