From aa4277453f4409da8838393564024c58ec70545e Mon Sep 17 00:00:00 2001
From: Degradin <42292046+Degradin@users.noreply.github.com>
Date: Tue, 21 Jan 2025 17:19:47 +0300
Subject: [PATCH] MiniApp Updates

---
 public/index.html      |   2 +-
 public/scoreboard.html | 130 ++++++++++++++++++++++++++++++++++-------
 server.js              |   4 +-
 3 files changed, 112 insertions(+), 24 deletions(-)

diff --git a/public/index.html b/public/index.html
index eaa06bc..a4df3f2 100644
--- a/public/index.html
+++ b/public/index.html
@@ -311,7 +311,7 @@ body {
             </div>
         </div>
 
-        <a href="/scoreboard" class="button">🏠 Перейти в чат бота</a>
+        <a href="/scoreboard" class="button">🔒</a>
     </div>
 
     <script>
diff --git a/public/scoreboard.html b/public/scoreboard.html
index f8927bd..7acd9a6 100644
--- a/public/scoreboard.html
+++ b/public/scoreboard.html
@@ -5,6 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
     <title>Таблица лидеров</title>
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEJgP4v8Jf+K6cM7V3zv7+uCGo5F5O+Xq6bM+bB5HXitBzvvhQ2V5+fu+n9U7" crossorigin="anonymous">
+    <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@500&display=swap" rel="stylesheet">
     <style>
         body {
             background-color: #121212;
@@ -61,21 +62,19 @@
             color: #d46600;
             font-size: 1rem;
             padding: 10px;
+            border-radius: 10px;
             text-align: center;
         }
         .card-body {
             padding: 15px;
             background-color: #282828;
+            border-radius: 0 0 10px 10px;
             color: #b0b0b0;
         }
         .card-body p {
             margin: 8px 0;
             font-size: 0.9rem;
         }
-        .money {
-            color: #00c853;
-            font-weight: bold;
-        }
         .no-data {
             text-align: center;
             font-size: 1.2rem;
@@ -86,12 +85,6 @@
             font-size: 1.2rem;
             color: #ffeb3b;
         }
-        .circle {
-            border-radius: 5px;
-            background-color: orange;
-            color: black;
-            padding: 5px;
-        }
         /* Статистика игрока */
         .fire-stats {
             display: grid;
@@ -110,12 +103,107 @@
         .fire-stats .stat span {
             font-weight: bold;
         }
+
+        .circle {
+            width: 20px; /* Размер круга */
+            height: 20px; /* Размер круга */
+            border-radius: 50%; /* Скругление для круга */
+            display: inline-flex;
+            justify-content: center;
+            align-items: center;
+            font-family: 'Orbitron', sans-serif; /* Используем футуристический шрифт */
+            font-size: 11px; /* Размер текста внутри круга */
+            color: white; /* Цвет текста */
+            background: radial-gradient(circle, rgba(255, 165, 0, 1) 10%, rgba(255, 69, 0, 1) 60%, rgba(255, 0, 0, 1) 100%); /* Огненный градиент */
+            background-size: 200% 200%;
+            animation: fireGlow 2s ease-in-out infinite; /* Анимации */
+            text-shadow: 0 0 5px rgba(255, 69, 0, 0.9), 0 0 10px rgba(255, 69, 0, 0.8), 0 0 15px rgba(255, 69, 0, 0.7); /* Эффект свечения */
+        }
+
+        @keyframes fireGlow {
+            0% {
+                box-shadow: 0 0 10px rgba(255, 69, 0, 0.7), 0 0 20px rgba(255, 69, 0, 0.5), 0 0 30px rgba(255, 69, 0, 0.3);
+            }
+            50% {
+                box-shadow: 0 0 20px rgba(255, 69, 0, 1), 0 0 40px rgba(255, 69, 0, 0.8), 0 0 60px rgba(255, 69, 0, 0.6);
+            }
+            100% {
+                box-shadow: 0 0 10px rgba(255, 69, 0, 0.7), 0 0 20px rgba(255, 69, 0, 0.5), 0 0 30px rgba(255, 69, 0, 0.3);
+            }
+        }
+
+
+        .money {
+            font-family: 'Orbitron', sans-serif; /* Используем тот же футуристический шрифт */
+            font-size: 12px;
+            font-weight: bold;
+            color: #00ff99; /* Цвет текста — светлый неоново-зеленый */
+            text-shadow: 0 0 5px rgba(0, 255, 153, 0.8), 0 0 10px rgba(0, 255, 153, 0.7), 0 0 15px rgba(0, 255, 153, 0.6); /* Электронный блеск */
+            letter-spacing: 2px; /* Немного увеличиваем расстояние между символами для эффектности */
+            text-transform: uppercase; /* Верхний регистр для четкости */
+            background: linear-gradient(90deg, #00ff99, #33ccff, #ff33cc); /* Градиент для фона текста */
+            background-clip: text; /* Применяем фон к тексту */
+            color: transparent; /* Делаем текст прозрачным, чтобы фон был виден */
+            animation: glow-electronic 3s infinite alternate; /* Анимация мерцающего эффекта */
+        }
+
+        @keyframes glow-electronic {
+            0% {
+                text-shadow: 0 0 5px rgba(0, 255, 153, 0.8), 0 0 10px rgba(0, 255, 153, 0.7), 0 0 15px rgba(0, 255, 153, 0.6);
+            }
+            50% {
+                text-shadow: 0 0 10px rgba(0, 255, 153, 1), 0 0 20px rgba(0, 255, 153, 0.9), 0 0 30px rgba(0, 255, 153, 0.8);
+            }
+            100% {
+                text-shadow: 0 0 5px rgba(0, 255, 153, 0.8), 0 0 10px rgba(0, 255, 153, 0.7), 0 0 15px rgba(0, 255, 153, 0.6);
+            }
+        }
+
+
+        .nickname {
+            font-family: 'Orbitron', sans-serif; /* Шрифт с футуристическим стилем */
+            font-size: 13px;
+            font-weight: bold;
+            background: linear-gradient(90deg, #00ff99, #00ccff, #ff33cc); /* Градиент для текста */
+            background-clip: text; /* Применяет фон к тексту */
+            color: transparent; /* Делаем текст прозрачным, чтобы фон был виден */
+            text-shadow: 0 0 10px rgba(0, 255, 153, 0.7), 0 0 20px rgba(0, 204, 255, 0.7), 0 0 30px rgba(255, 51, 204, 0.7); /* Неоновые тени */
+            letter-spacing: 1px; /* Расстояние между буквами для футуристичного эффекта */
+            text-transform: uppercase; /* Преобразуем в верхний регистр для более стильного вида */
+            transition: all 0.3s ease; /* Плавные переходы */
+        }
+
+        .nickname:hover  {
+            transform: scale(1.05); /* Легкое увеличение при наведении */
+            text-shadow: 0 0 15px rgba(0, 255, 153, 1), 0 0 40px rgba(0, 204, 255, 1), 0 0 60px rgba(255, 51, 204, 1);
+        }
+
+        .company {
+            font-family: 'Orbitron', sans-serif; /* Футуристический шрифт */
+            font-size: 16px; /* Размер текста */
+            font-weight: bold; /* Жирное начертание */
+            color: #00FFFF; /* Холодный цвет для футуристичного эффекта */
+            text-transform: uppercase; /* Заглавные буквы */
+            letter-spacing: 2px; /* Расстояние между буквами для четкости */
+            background: linear-gradient(90deg, #00FFFF, #0099CC, #003366); /* Градиент */
+            -webkit-background-clip: text; /* Применение градиента к тексту */
+            color: transparent; /* Прозрачный цвет для текста */
+            text-shadow: 0 0 10px rgba(0, 255, 255, 0.6), 0 0 20px rgba(0, 255, 255, 0.4), 0 0 30px rgba(0, 255, 255, 0.3); /* Тени для неонового эффекта */
+            transition: all 0.3s ease; /* Плавные переходы */
+        }
+
+        .company:hover {
+            transform: scale(1.05); /* Легкое увеличение при наведении */
+            text-shadow: 0 0 15px rgba(0, 255, 255, 1), 0 0 25px rgba(0, 255, 255, 0.8), 0 0 35px rgba(0, 255, 255, 0.6); /* Увеличение свечения при наведении */
+        }
+
+
     </style>
 </head>
 <body>
 
 <div class="container">
-    <h1>Таблица Лидеров</h1>
+    <h1 class="company">Таблица Лидеров</h1>
 
     <!-- Кнопки для выбора топа -->
     <div class="btn-group" role="group">
@@ -153,7 +241,7 @@
                 topContent.innerHTML = data.map(player => `
                     <div class="card">
                         <div class="card-header">
-                            ${player.username} ${player.status === 'bronze' ? '[🔺]' : player.status === 'silver' ? '[🔹]' : '[🔸]'}
+                            <span class="nickname">${player.username} ${player.status === 'bronze' ? '[🔺]' : player.status === 'silver' ? '[🔹]' : player.status === 'gold' ? '[🔸]' : player.status === 'admin' ? '[🛡️]' : ''}
                         </div>
                         <div class="card-body">
                             <p>Баланс: <span class="money">${player.money} ₽</span></p>
@@ -166,10 +254,10 @@
                 topContent.innerHTML = data.map(character => `
                     <div class="card">
                         <div class="card-header">
-                            ${character.username}
+                            <span class="nickname">${character.username}
                         </div>
                         <div class="card-body">
-                            <p>Грязные деньги: <span class="money">${character.dirtymoney} Ð</span></p>
+                            <p>Баланс: <span class="money">${character.dirtymoney} Ð</span></p>
                             <p>Уровень: <span class="circle">${character.level} </span></p>
                             <div class="fire-stats">
                             <div class="stat">
@@ -197,15 +285,15 @@
                 topContent.innerHTML = data.map(enterprise => `
                     <div class="card">
                         <div class="card-header">
-                            ${enterprise.name} <span class="icon">${enterprise.icon}</span>
+                            <span class="company">${enterprise.name} <span class="icon">${enterprise.icon}</span>
                         </div>
                         <div class="card-body">
                             <p>Тип ресурса: ${enterprise.resourceType}</p>
-                            <p>Уровень: ${enterprise.level}</p>
+                            <p>Уровень: <span class="circle">${enterprise.level}</span></p>
                             <p>Производительность: ${enterprise.efficiency} ед./час</p>
                             <p>Емкость склада: ${enterprise.warehouseCapacity} ед.</p>
                             <p>Текущие ресурсы: ${enterprise.currentResources} ед.</p>
-                            <p>Владелец: ${enterprise.owner}</p>
+                            <p>Владелец: <span class="nickname">${enterprise.owner}</p>
                         </div>
                     </div>
                 `).join('');
@@ -214,12 +302,12 @@
                 topContent.innerHTML = data.map(business => `
                     <div class="card">
                         <div class="card-header">
-                            ${business.name}
+                            <span class="company">${business.name}
                         </div>
                         <div class="card-body">
-                            <p>Владелец: ${business.owner}</p>
-                            <p>Баланс: ${business.balance} ₽</p>
-                            <p>Пользователи: ${business.usersCount}</p>
+                            <p>Владелец: <span class="nickname">${business.owner}</span></p>
+                            <p>Баланс: <span class="money">${business.balance} ₽</span></p>
+                            <p>Сотрудники: ${business.usersCount}</p>
                         </div>
                     </div>
                 `).join('');
diff --git a/server.js b/server.js
index 561d3f7..5ccc539 100644
--- a/server.js
+++ b/server.js
@@ -111,7 +111,7 @@ app.get('/characters', async (req, res) => {
 
     res.json(topCharacter.map(character => ({
         username: character.username,
-        dirtymoney: character.dirtymoney,
+        dirtymoney: utils.spaces(character.dirtymoney),
         level: character.level,
         force: character.force,
         intelligence: character.intelligence,
@@ -178,7 +178,7 @@ app.get('/businesses', async (req, res) => {
 
         return {
             name: business.name,
-            balance: business.balance,
+            balance: utils.spaces(business.balance),
             usersCount: business.users.length,
             owner: owner ? owner.username : 'Unknown'
         };