+
- Clicks |
- 0 |
+ Cookies |
+ 0 |
-
+
Seconds |
- 0 |
-
-
- Cookies |
- 0 |
+ 0 |
@@ -51,7 +47,6 @@
Click...
-
diff --git a/www/src/js/cookie/game.js b/www/src/js/cookie/game.js
index c64ce71..a10edad 100644
--- a/www/src/js/cookie/game.js
+++ b/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 = $(`
+${a}
`);
+
+ $update_cookies();
+
+ const $effect = $(`
+1
`);
const offset = $(this).offset();
const X = e.pageX - offset.left;
@@ -34,4 +51,4 @@ $('.cookie').on('click', function (e) {
$(this).remove();
}
);
-});
\ No newline at end of file
+});
diff --git a/www/src/styles/css/ui.css b/www/src/styles/css/ui.css
index 308ec1d..43641a8 100644
--- a/www/src/styles/css/ui.css
+++ b/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;
}
\ No newline at end of file