253 lines
12 KiB
HTML
253 lines
12 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Меню игрока</title>
|
||
<link rel="stylesheet" type="text/css" href="/styles.css">
|
||
<script src="https://telegram.org/js/telegram-web-app.js"></script>
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
<div class="last-update">Последнее обновление: <span id="last-update">—</span></div>
|
||
<div class="title">📜 Меню игрока</div>
|
||
|
||
<div class="profile-section">
|
||
<div id="profile-img" class="profile-img"></div>
|
||
<div class="progress-circle">
|
||
<div class="circle-container">
|
||
<svg class="circle" width="100" height="100">
|
||
<circle class="background-ring" cx="50" cy="50" r="40"></circle>
|
||
<circle class="progress-ring" id="profile-progress" cx="50" cy="50" r="40"></circle>
|
||
</svg>
|
||
<div class="circle-text" id="profile-level">0</div>
|
||
</div>
|
||
<p>Профиль</p>
|
||
</div>
|
||
<div class="progress-circle">
|
||
<div class="circle-container">
|
||
<svg class="circle" width="100" height="100">
|
||
<circle class="background-ring" cx="50" cy="50" r="40"></circle>
|
||
<circle class="progress-ring" id="character-progress" cx="50" cy="50" r="40"></circle>
|
||
</svg>
|
||
<div class="circle-text" id="character-level">0</div>
|
||
</div>
|
||
<p>Персонаж</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="progress-bar">
|
||
<div class="progress-hp" id="hp-bar"></div>
|
||
</div>
|
||
|
||
<div class="progress-bar">
|
||
<div class="progress-stamina" id="stamina-bar"></div>
|
||
</div>
|
||
|
||
<div class="fire-stats">
|
||
<div class="stat">
|
||
<p>Сила</p>
|
||
<span id="force">—</span>
|
||
</div>
|
||
<div class="stat">
|
||
<p>Интеллект</p>
|
||
<span id="intelligence">—</span>
|
||
</div>
|
||
<div class="stat">
|
||
<p>Выносливость</p>
|
||
<span id="endurance">—</span>
|
||
</div>
|
||
<div class="stat">
|
||
<p>Стойкость</p>
|
||
<span id="resilience">—</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="section">
|
||
<h2>👤 Личные данные</h2>
|
||
<p>Имя: <span id="name">—</span></p>
|
||
<p>Telegram ID: <span id="telegramID">—</span></p>
|
||
</div>
|
||
|
||
<div class="section">
|
||
<h2>👤 Профиль</h2>
|
||
<p>Деньги: ₽<span id="money">—</span></p>
|
||
<p>Грязные деньги: ₽<span id="dirtymoney">—</span></p>
|
||
</div>
|
||
|
||
<div class="section">
|
||
<h2>🏢 Организация</h2>
|
||
<p>Название: <span id="business-name">—</span></p>
|
||
<p>Баланс: ₽<span id="business-balance">—</span></p>
|
||
<p>Материалы: <span id="business-materials">—</span></p>
|
||
</div>
|
||
|
||
<div class="section">
|
||
<h2>🏭 Предприятия</h2>
|
||
<div id="enterprises">
|
||
<p>Нет активных предприятий.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="section">
|
||
<h2>🗄️ Склад</h2>
|
||
<div id="warehouse">
|
||
<p>Нет доступного склада.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<a href="https://t.me/CampFireGameBot" class="button">🏠 Перейти в чат бота</a>
|
||
</div>
|
||
|
||
<script>
|
||
const tg = window.Telegram.WebApp;
|
||
const playerId = tg.initDataUnsafe.user.id;
|
||
|
||
fetch(`/player/${playerId}`)
|
||
.then(response => response.json())
|
||
.then(data => {
|
||
const { user, business, enterprises, warehouse } = data;
|
||
|
||
// Личные данные
|
||
document.getElementById("name").textContent = user.name || user.username;
|
||
document.getElementById("telegramID").textContent = user.telegramID;
|
||
|
||
// Профиль
|
||
document.getElementById("money").textContent = user.money;
|
||
document.getElementById("dirtymoney").textContent = user.dirtymoney;
|
||
|
||
// Устанавливаем картинку профиля
|
||
const profileImg = document.getElementById("profile-img");
|
||
const profilePhotoUrl = tg.initDataUnsafe.user.photo_url;
|
||
|
||
if (profilePhotoUrl) {
|
||
profileImg.style.backgroundImage = `url(${profilePhotoUrl})`;
|
||
} else {
|
||
profileImg.style.backgroundImage = `url('https://via.placeholder.com/100')`;
|
||
}
|
||
|
||
// Уровни профиля и персонажа
|
||
document.getElementById("profile-level").textContent = user.profileLevel;
|
||
document.getElementById("character-level").textContent = user.characterLevel;
|
||
|
||
const profileProgress = document.getElementById("profile-progress");
|
||
const characterProgress = document.getElementById("character-progress");
|
||
profileProgress.style.strokeDashoffset = 251 - (251 * user.profileLevel / 100);
|
||
characterProgress.style.strokeDashoffset = 251 - (251 * user.characterLevel / 100);
|
||
|
||
// Установка прогресса HP и Стамины
|
||
const hpProgress = (user.hp / user.maxHp) * 100;
|
||
const staminaProgress = (user.stamina / user.maxStamina) * 100;
|
||
|
||
document.getElementById("hp-bar").style.width = `${hpProgress}%`;
|
||
document.getElementById("stamina-bar").style.width = `${staminaProgress}%`;
|
||
|
||
// Характеристики FIRE
|
||
document.getElementById("force").textContent = user.force;
|
||
document.getElementById("intelligence").textContent = user.intelligence;
|
||
document.getElementById("endurance").textContent = user.endurance;
|
||
document.getElementById("resilience").textContent = user.resilience;
|
||
|
||
// Организация
|
||
document.getElementById("business-name").textContent = business.name;
|
||
document.getElementById("business-balance").textContent = business.balance;
|
||
document.getElementById("business-materials").textContent = business.materials;
|
||
|
||
// Предприятия
|
||
const enterprisesDiv = document.getElementById("enterprises");
|
||
if (enterprises.length > 0) {
|
||
enterprisesDiv.innerHTML = "";
|
||
enterprises.forEach(ent => {
|
||
const div = document.createElement("div");
|
||
div.classList.add("enterprise");
|
||
div.innerHTML = `
|
||
<strong>${ent.name}</strong><br>
|
||
Тип ресурса: ${getResourceIcon(ent.resourceType)} ${getResourceName(ent.resourceType)}<br>
|
||
Уровень: ${ent.level}<br>
|
||
Эффективность: ${ent.efficiency}/час<br>
|
||
Заполненность склада: ${ent.currentResources}/${ent.warehouseCapacity}
|
||
`;
|
||
// Добавляем прогрессбар заполненности склада
|
||
const progress = (ent.currentResources / ent.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);
|
||
enterprisesDiv.appendChild(div);
|
||
});
|
||
}
|
||
|
||
// Склад (имеет следующие переменные
|
||
// playerId: DataTypes.BIGINT,
|
||
// capacity: DataTypes.INTEGER, // Общая ёмкость склада
|
||
// wood: DataTypes.INTEGER,
|
||
// coal: DataTypes.INTEGER,
|
||
// oil: DataTypes.INTEGER,
|
||
// metall: DataTypes.INTEGER,
|
||
// gold: DataTypes.INTEGER,
|
||
// diamond: DataTypes.INTEGER,)
|
||
// выводим красиво, количество каждого ресурса (без прогрессбара) и добавляем в конце прогрессбар заполненности с указанием процента (warehouseCapacity это максимальная вместимость совокупности всех ресурсов)
|
||
const warehouseDiv = document.getElementById("warehouse");
|
||
warehouseDiv.innerHTML = "";
|
||
const resources = ['wood', 'coal', 'oil', 'metall', 'gold', 'diamond'];
|
||
resources.forEach(res => {
|
||
const div = document.createElement("div");
|
||
div.innerHTML = `${getResourceIcon(res)} ${getResourceName(res)}: ${warehouse[res]}`;
|
||
warehouseDiv.appendChild(div);
|
||
});
|
||
// Добавляем прогрессбар заполненности склада
|
||
const warehouseCapacity = warehouse.wood + warehouse.coal + warehouse.oil + warehouse.metall + warehouse.gold + warehouse.diamond;
|
||
const progress = (warehouseCapacity / warehouse.capacity) * 100;
|
||
const progressBar = document.createElement("div");
|
||
progressBar.classList.add("progress-bar");
|
||
progressBar.innerHTML = `<div class="progress-bar-inner" style="width: ${progress}%"></div>`;
|
||
warehouseDiv.appendChild(progressBar);
|
||
|
||
// Время последнего обновления
|
||
const lastUpdate = new Date();
|
||
document.getElementById("last-update").textContent = lastUpdate.toLocaleString();
|
||
})
|
||
.catch(err => {
|
||
console.error("Ошибка загрузки данных:", err);
|
||
});
|
||
|
||
function getResourceIcon(resource) {
|
||
switch (resource.toLowerCase()) {
|
||
case 'wood': return '🌳';
|
||
case 'metall': return '🛠️';
|
||
case 'oil': return '🛢️';
|
||
case 'coal': return '⛏️';
|
||
case 'gold': return '💰';
|
||
case 'diamond': return '💎';
|
||
default: return '⚙️';
|
||
}
|
||
}
|
||
|
||
function getResourceName(resource) {
|
||
switch (resource.toLowerCase()) {
|
||
case 'wood': return 'Дерево';
|
||
case 'metall': return 'Металл';
|
||
case 'oil': return 'Нефть';
|
||
case 'coal': return 'Уголь';
|
||
case 'gold': return 'Золото';
|
||
case 'diamond': return 'Алмазы';
|
||
default: return 'Ресурс';
|
||
}
|
||
}
|
||
|
||
// Подписываемся на обновления данных
|
||
tg.subscribeToData((data) => {
|
||
console.log("Обновление данных:", data);
|
||
});
|
||
// При получении сообщения от бота обновляем страницу
|
||
tg.subscribeToMessages((messages) => {
|
||
console.log("Получено сообщение:", messages);
|
||
location.reload();
|
||
});
|
||
// Обновляем страницу каждые 30 секунд
|
||
setInterval(() => {
|
||
location.reload();
|
||
}, 5000);
|
||
</script>
|
||
</body>
|
||
</html> |