164 lines
6.0 KiB
HTML
164 lines
6.0 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>
|
||
<style>
|
||
body {
|
||
font-family: 'Arial', sans-serif;
|
||
margin: 0;
|
||
padding: 0;
|
||
background-color: #f4f7fc;
|
||
color: #333;
|
||
}
|
||
.container {
|
||
max-width: 700px;
|
||
margin: 30px auto;
|
||
background: white;
|
||
padding: 20px;
|
||
border-radius: 15px;
|
||
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
|
||
font-size: 16px;
|
||
}
|
||
.title {
|
||
font-size: 28px;
|
||
font-weight: bold;
|
||
text-align: center;
|
||
margin-bottom: 20px;
|
||
color: #4e7dd1;
|
||
}
|
||
.section {
|
||
margin-bottom: 20px;
|
||
}
|
||
.section h2 {
|
||
font-size: 20px;
|
||
margin-bottom: 10px;
|
||
color: #4e7dd1;
|
||
}
|
||
.section p {
|
||
margin: 5px 0;
|
||
}
|
||
.section span {
|
||
font-weight: bold;
|
||
}
|
||
.button {
|
||
display: inline-block;
|
||
background-color: #4e7dd1;
|
||
color: white;
|
||
padding: 10px 20px;
|
||
text-decoration: none;
|
||
border-radius: 5px;
|
||
font-size: 16px;
|
||
margin-top: 20px;
|
||
text-align: center;
|
||
width: 100%;
|
||
}
|
||
.emoji {
|
||
font-size: 1.3em;
|
||
}
|
||
.resource-icon {
|
||
font-size: 1.5em;
|
||
}
|
||
.enterprise {
|
||
padding: 15px;
|
||
background-color: #f9f9f9;
|
||
border-radius: 10px;
|
||
margin-top: 10px;
|
||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
|
||
}
|
||
</style>
|
||
<script src="https://telegram.org/js/telegram-web-app.js"></script>
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
<div class="title">📜 Меню игрока</div>
|
||
|
||
<div class="section">
|
||
<h2>👤 Личные данные</h2>
|
||
<p>Имя: <span id="name">—</span></p>
|
||
<p>Уровень: <span id="level">—</span></p>
|
||
<p>Опыт: <span id="exp">—</span></p>
|
||
<p>Здоровье: <span id="hp">—</span> / <span id="max_hp">—</span></p>
|
||
<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>
|
||
|
||
<a href="https://t.me/yourbot" 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 } = data;
|
||
|
||
// Личные данные
|
||
document.getElementById("name").textContent = user.name || user.username;
|
||
document.getElementById("level").textContent = user.level;
|
||
document.getElementById("exp").textContent = user.exp;
|
||
document.getElementById("hp").textContent = user.hp;
|
||
document.getElementById("max_hp").textContent = user.max_hp;
|
||
document.getElementById("money").textContent = user.money;
|
||
document.getElementById("dirtymoney").textContent = user.dirtymoney;
|
||
|
||
// Организация
|
||
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)} ${ent.resourceType}<br>
|
||
Уровень: ${ent.level}<br>
|
||
Эффективность: ${ent.efficiency}/час<br>
|
||
Заполненность склада: ${ent.currentResources}/${ent.warehouseCapacity}
|
||
`;
|
||
enterprisesDiv.appendChild(div);
|
||
});
|
||
}
|
||
})
|
||
.catch(err => {
|
||
console.error("Ошибка загрузки данных:", err);
|
||
});
|
||
|
||
// Функция для конвертации типов ресурсов в эмодзи
|
||
function getResourceIcon(resource) {
|
||
switch (resource.toLowerCase()) {
|
||
case 'дерево': return '🌳';
|
||
case 'металл': return '🛠️';
|
||
case 'нефть': return '🛢️';
|
||
case 'уголь': return '⛏️';
|
||
case 'золото': return '💰';
|
||
case 'алмазы': return '💎';
|
||
default: return '⚙️';
|
||
}
|
||
}
|
||
</script>
|
||
</body>
|
||
</html>
|