degradin/CampFirePlay
degradin/CampFirePlay
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

Update index.html

Browse Source
This commit is contained in:
Degradin 2025-01-18 03:46:28 +03:00
parent 39341f601b
commit 5e906d8052
1 changed files with 11 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
public/index.html
View File

@ -185,30 +185,22 @@
// metall: DataTypes.INTEGER, // metall: DataTypes.INTEGER,
// gold: DataTypes.INTEGER, // gold: DataTypes.INTEGER,
// diamond: DataTypes.INTEGER,) // diamond: DataTypes.INTEGER,)
// выводим красиво, количество каждого ресурса и добавляем в конце прогрессбар заполненности в виде кольца со статистикой, сколько занимает каждый ресурс (warehouseCapacity это максимальная вместимость совокупности всех ресурсов) // выводим красиво, количество каждого ресурса (без прогрессбара) и добавляем в конце прогрессбар заполненности (warehouseCapacity это максимальная вместимость совокупности всех ресурсов)
const warehouseDiv = document.getElementById("warehouse"); const warehouseDiv = document.getElementById("warehouse");
warehouseDiv.innerHTML = ""; warehouseDiv.innerHTML = "";
const resources = ['wood', 'coal', 'oil', 'metall', 'gold', 'diamond']; const resources = ['wood', 'coal', 'oil', 'metall', 'gold', 'diamond'];
resources.forEach(res => { resources.forEach(res => {
const resourceDiv = document.createElement("div"); const div = document.createElement("div");
resourceDiv.classList.add("resource"); div.innerHTML = `${getResourceIcon(res)} ${getResourceName(res)}: ${warehouse[res]}`;
resourceDiv.innerHTML = ` warehouseDiv.appendChild(div);
<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 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 => { .catch(err => {
console.error("Ошибка загрузки данных:", err); console.error("Ошибка загрузки данных:", err);