From 5e906d8052e707612eb9ee9d03242ca4a33682cf Mon Sep 17 00:00:00 2001
From: Degradin <maks.demin2002@mail.ru>
Date: Sat, 18 Jan 2025 03:46:28 +0300
Subject: [PATCH] Update index.html

---
 public/index.html | 30 +++++++++++-------------------
 1 file changed, 11 insertions(+), 19 deletions(-)

diff --git a/public/index.html b/public/index.html
index cca9798..4051ebd 100644
--- a/public/index.html
+++ b/public/index.html
@@ -185,30 +185,22 @@
                 // metall: DataTypes.INTEGER,
                 // gold: DataTypes.INTEGER,
                 // diamond: DataTypes.INTEGER,)
-                // выводим красиво, количество каждого ресурса и добавляем в конце прогрессбар заполненности в виде кольца со статистикой, сколько занимает каждый ресурс (warehouseCapacity это максимальная вместимость совокупности всех ресурсов)
+                // выводим красиво, количество каждого ресурса (без прогрессбара) и добавляем в конце прогрессбар заполненности (warehouseCapacity это максимальная вместимость совокупности всех ресурсов)
                 const warehouseDiv = document.getElementById("warehouse");
                 warehouseDiv.innerHTML = "";
                 const resources = ['wood', 'coal', 'oil', 'metall', 'gold', 'diamond'];
                 resources.forEach(res => {
-                    const resourceDiv = document.createElement("div");
-                    resourceDiv.classList.add("resource");
-                    resourceDiv.innerHTML = `
-                        <strong>${getResourceName(res)}</strong>: ${warehouse[res]}
-                    `;
-                    // Добавляем прогрессбар заполненности склада
-                    const progress = (warehouse[res] / warehouse.warehouseCapacity) * 100;
-                    const progressBar = document.createElement("div");
-                    progressBar.classList.add("progress-bar");
-                    progressBar.innerHTML = `
-                        <svg class="circle" width="100" height="100">
-                            <circle class="background-ring" cx="50" cy="50" r="40"></circle>
-                            <circle class="progress-ring" cx="50" cy="50" r="40" style="stroke-dashoffset: ${251 - (251 * progress / 100)}"></circle>
-                        </svg>
-                        <div class="circle-text">${warehouse[res]}</div>
-                    `;
-                    resourceDiv.appendChild(progressBar);
-                    warehouseDiv.appendChild(resourceDiv);
+                    const div = document.createElement("div");
+                    div.innerHTML = `${getResourceIcon(res)} ${getResourceName(res)}: ${warehouse[res]}`;
+                    warehouseDiv.appendChild(div);
                 });
+                // Добавляем прогрессбар заполненности склада
+                const warehouseProgress = (Object.values(warehouse).reduce((acc, val) => acc + val, 0) / warehouse.warehouseCapacity) * 100;
+                const warehouseProgressBar = document.createElement("div");
+                warehouseProgressBar.classList.add("progress-bar");
+                warehouseProgressBar.innerHTML = `<div class="progress-bar-inner" style="width: ${warehouseProgress}%"></div>`;
+                warehouseDiv.appendChild(warehouseProgressBar);
+
             })
             .catch(err => {
                 console.error("Ошибка загрузки данных:", err);