154 lines
7.6 KiB
HTML
154 lines
7.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="ru">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover" />
|
|
<meta name="apple-mobile-web-app-capable" content="yes" />
|
|
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
|
|
<meta name="mobile-web-app-capable" content="yes" />
|
|
<meta name="theme-color" content="#1a1a2e" />
|
|
<link rel="manifest" href="manifest.json" />
|
|
<link rel="apple-touch-icon" href="imgs/icon-192.png" />
|
|
<title>GrechkaCraft</title>
|
|
<!-- Telegram WebApp -->
|
|
<script src="https://telegram.org/js/telegram-web-app.js"></script>
|
|
<!-- Socket.io Client -->
|
|
<script src="https://cdn.socket.io/4.7.4/socket.io.min.js"></script>
|
|
<link rel="stylesheet" href="style.css?v=7">
|
|
</head>
|
|
<body>
|
|
|
|
<div id="game">
|
|
<canvas id="c"></canvas>
|
|
|
|
<div class="ui">
|
|
<div id="stats" title="Тяни по экрану — поворот камеры · колесо/щипок — зум · тап по блоку — добыча/стройка">
|
|
<div class="row">❤️ <span id="hp">100</span> 🍗 <span id="food">100</span></div>
|
|
<div class="row">🫁 <span id="o2">100</span></div>
|
|
<div class="row">🌡️ <span id="temp">15°C</span></div>
|
|
<div class="row">📍 X:<span id="sx">0</span> Y:<span id="sy">0</span></div>
|
|
<div class="row">🕒 <span id="tod">День</span></div>
|
|
<div class="row">🌐 <span id="worldId" style="cursor:pointer; text-decoration:underline;" title="Нажмите, чтобы скопировать ссылку">default</span></div>
|
|
<div class="row">⭐ Lv.<span id="xplevel">1</span> | XP: <span id="xpbar">0/50</span></div>
|
|
<div class="row" id="multiplayerStatus" style="display:none;">👥 <span id="playerCount">0</span></div>
|
|
</div>
|
|
|
|
<div id="modeBtn" class="rbtn pe">⛏️</div>
|
|
<div id="craftBtn" class="rbtn pe">🔨</div>
|
|
|
|
<div id="chatToggle" class="rbtn pe">💬</div>
|
|
<div id="invToggle" class="rbtn pe">📦</div>
|
|
<div id="mapToggle" class="rbtn pe">🗺️</div>
|
|
<div id="menuBtn" class="rbtn pe">⋯</div>
|
|
<div id="menuDropdown" class="menu-dropdown">
|
|
<div id="saveItem" class="menu-item">💾 Сохранить</div>
|
|
<div id="resetItem" class="menu-item">🔄 Новый мир</div>
|
|
<div id="marketItem" class="menu-item">🏪 Рынок</div>
|
|
<div id="settingsItem" class="menu-item">⚙️ Настройки</div>
|
|
</div>
|
|
<div id="selectedItem"></div>
|
|
<div id="hotbar" class="pe"></div>
|
|
</div>
|
|
|
|
<!-- Миникарта -->
|
|
<div id="minimapWrap" style="display:none;position:absolute;left:190px;top:10px;z-index:200;pointer-events:auto;">
|
|
<canvas id="minimap" width="200" height="120" style="border:2px solid rgba(255,255,255,0.7);border-radius:8px;background:rgba(0,0,0,0.8);"></canvas>
|
|
<span id="minimapClose" style="position:absolute;top:2px;right:6px;cursor:pointer;color:#fff;font-size:18px;font-weight:900;z-index:201;">✕</span>
|
|
</div>
|
|
|
|
<!-- Печь -->
|
|
<div id="furnacePanel" class="panel" style="display:none;">
|
|
<div class="panel-header">
|
|
<span>🔥 Печь</span>
|
|
<span id="furnaceClose" class="close" style="cursor:pointer;">✕</span>
|
|
</div>
|
|
<div id="furnaceContent" style="padding:8px;"></div>
|
|
</div>
|
|
|
|
<div id="controls">
|
|
<div id="left" class="btn pe">⬅️</div>
|
|
<div id="jump" class="btn pe">⬆️</div>
|
|
<div id="down" class="btn pe">⬇️</div>
|
|
<div id="right" class="btn pe">➡️</div>
|
|
</div>
|
|
|
|
|
|
<div id="craftPanel" class="panel" style="display:none;">
|
|
<div class="panel-header">
|
|
<span>Крафт</span>
|
|
<span id="craftClose" class="close" style="cursor:pointer;">✕</span>
|
|
</div>
|
|
<div id="recipes"></div>
|
|
</div>
|
|
|
|
<div id="inventoryPanel" class="panel" style="display:none;">
|
|
<div class="panel-header">
|
|
<span>Инвентарь</span>
|
|
<span id="inventoryClose" class="close" style="cursor:pointer;">✕</span>
|
|
</div>
|
|
<div id="inventoryGrid"></div>
|
|
</div>
|
|
|
|
<div id="chatPanel" class="panel" style="display:none;">
|
|
<div class="panel-header">
|
|
<span>Чат</span>
|
|
<span id="chatClose" class="close" style="cursor:pointer;">✕</span>
|
|
</div>
|
|
<div id="chatMessages"></div>
|
|
<div class="chat-input">
|
|
<input type="text" id="chatInput" placeholder="Введите сообщение...">
|
|
<button id="chatSend">Отправить</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="death" class="death-screen" style="display:none;">
|
|
<div class="death-content">
|
|
<h1>💀 Вы погибли!</h1>
|
|
<button id="respawnBtn" class="respawn-btn">Возродиться</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="marketPanel" class="panel" style="display:none;">
|
|
<div class="panel-header">
|
|
<span>🏪 Рынок</span>
|
|
<span id="marketClose" class="close" style="cursor:pointer;">✕</span>
|
|
</div>
|
|
<div id="marketContent" style="padding:8px;max-height:60vh;overflow-y:auto;"></div>
|
|
</div>
|
|
|
|
<div id="settingsPanel" class="panel" style="display:none;">
|
|
<div class="panel-header">
|
|
<span>⚙️ Настройки</span>
|
|
<span id="settingsClose" class="close" style="cursor:pointer;">✕</span>
|
|
</div>
|
|
<div id="settingsContent" style="padding:8px;max-height:60vh;overflow-y:auto;">
|
|
<label style="display:flex;align-items:center;gap:8px;color:#fff"><input type="checkbox" id="dayNightToggle"> Цикл день/ночь</label>
|
|
<div style="margin-top:10px;color:#fff;">
|
|
<label style="font-size:13px;">Время суток</label>
|
|
<input type="range" id="timeSlider" min="0" max="100" value="0" style="width:100%;accent-color:#f1c40f;">
|
|
<div style="display:flex;justify-content:space-between;font-size:10px;color:#aaa;">
|
|
<span>Рассвет</span><span>День</span><span>Закат</span><span>Ночь</span>
|
|
</div>
|
|
</div>
|
|
<div style="margin-top:12px;color:#fff;">
|
|
<label style="font-size:13px;">Погода</label>
|
|
<div style="display:flex;gap:6px;margin-top:4px;">
|
|
<button id="weatherClear" class="weather-btn weather-active" data-weather="clear" style="flex:1;padding:6px;background:#3498db;color:#fff;border:none;border-radius:6px;cursor:pointer;font-size:12px;">Ясно</button>
|
|
<button id="weatherRain" class="weather-btn" data-weather="rain" style="flex:1;padding:6px;background:#555;color:#fff;border:none;border-radius:6px;cursor:pointer;font-size:12px;">Дождь</button>
|
|
<button id="weatherSnow" class="weather-btn" data-weather="snow" style="flex:1;padding:6px;background:#555;color:#fff;border:none;border-radius:6px;cursor:pointer;font-size:12px;">Снег</button>
|
|
<button id="weatherThunder" class="weather-btn" data-weather="thunder" style="flex:1;padding:6px;background:#555;color:#fff;border:none;border-radius:6px;cursor:pointer;font-size:12px;">Гроза</button>
|
|
</div>
|
|
<label style="font-size:12px;color:#aaa;margin-top:6px;display:block;">Интенсивность</label>
|
|
<input type="range" id="weatherIntensity" min="0" max="100" value="40" style="width:100%;accent-color:#3498db;">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="sleepOverlay" style="display:none;position:absolute;inset:0;z-index:9;align-items:center;justify-content:center;flex-direction:column;background:rgba(0,0,0,0.7);color:#fff;font:700 32px system-ui;">💤 Спим...<div style="font:400 18px system-ui;margin-top:10px;">Нажмите на кровать чтобы проснуться</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="three147.min.js"></script>
|
|
<script src="game3d.js?v=1"></script>
|
|
</body>
|
|
</html>
|