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,
// gold: DataTypes.INTEGER,
// diamond: DataTypes.INTEGER,)
// выводим весь склад и добавляем прогрессбар заполненности (warehouseCapacity это максимальная вместимость совокупности всех ресурсов)
// выводим красиво, количество каждого ресурса и добавляем в конце прогрессбар заполненности в виде кольца со статистикой, сколько занимает каждый ресурс (warehouseCapacity это максимальная вместимость совокупности всех ресурсов)
const warehouseDiv = document.getElementById("warehouse");
warehouseDiv.innerHTML = "";
const warehouseCapacity = warehouse.capacity;
const resources = Object.keys(warehouse).filter(key => key !== 'capacity' && key !== 'createdAt' && key !== 'updatedAt');
resources.forEach(resource => {
const amount = warehouse[resource];
const progress = (amount / warehouseCapacity) * 100;
const div = document.createElement("div");
div.innerHTML = `
<strong>${getResourceName(resource)}</strong><br>
Количество: ${amount}<br>
Вместимость: ${warehouseCapacity}
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 = `<div class="progress-bar-inner" style="width: ${progress}%"></div>`;
div.appendChild(progressBar);
warehouseDiv.appendChild(div);
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);
});
})
.catch(err => {
console.error("Ошибка загрузки данных:", err);