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:42:29 +03:00
parent cc59034f49
commit 39341f601b
1 changed files with 18 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
public/index.html
View File

@ -185,27 +185,30 @@
// 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 warehouseCapacity = warehouse.capacity; const resources = ['wood', 'coal', 'oil', 'metall', 'gold', 'diamond'];
const resources = Object.keys(warehouse).filter(key => key !== 'capacity' && key !== 'createdAt' && key !== 'updatedAt'); resources.forEach(res => {
resources.forEach(resource => { const resourceDiv = document.createElement("div");
const amount = warehouse[resource]; resourceDiv.classList.add("resource");
const progress = (amount / warehouseCapacity) * 100; resourceDiv.innerHTML = `
const div = document.createElement("div"); <strong>${getResourceName(res)}</strong>: ${warehouse[res]}
div.innerHTML = `
<strong>${getResourceName(resource)}</strong><br>
Количество: ${amount}<br>
Вместимость: ${warehouseCapacity}
`; `;
// Добавляем прогрессбар заполненности склада
const progress = (warehouse[res] / warehouse.warehouseCapacity) * 100;
const progressBar = document.createElement("div"); const progressBar = document.createElement("div");
progressBar.classList.add("progress-bar"); progressBar.classList.add("progress-bar");
progressBar.innerHTML = `<div class="progress-bar-inner" style="width: ${progress}%"></div>`; progressBar.innerHTML = `
div.appendChild(progressBar); <svg class="circle" width="100" height="100">
warehouseDiv.appendChild(div); <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);
}); });
}) })
.catch(err => { .catch(err => {
console.error("Ошибка загрузки данных:", err); console.error("Ошибка загрузки данных:", err);