192 lines
10 KiB
HTML
192 lines
10 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: УБРАН (v80). Синхронный скрипт telegram.org вешал парсер:
|
||
если сеть до него тупила, страница оставалась белой десятки секунд.
|
||
Весь TG-код за гардами (isTgWebApp), без скрипта игра работает как обычный веб. -->
|
||
<!-- Socket.io: грузится в конце body (v81), а НЕ в head — синхронный скрипт
|
||
в head блокировал парсер: заставка #boot не рисовалась, пока CDN не ответит.
|
||
Порядок сохранён: socket.io идёт строго перед game.js. -->
|
||
<link rel="stylesheet" href="style.css?v=7">
|
||
</head>
|
||
<body>
|
||
<!-- BOOT v79: мгновенная заставка. Рисуется парсером ДО внешних скриптов и game.js,
|
||
поэтому белый экран исключён. Убирается из игры вызовом hideBoot()
|
||
(меню / авто-join / заглушка генерации). Встроенный таймер не зависит от
|
||
game.js: если игра не стартовала за 20 с — показывает кнопку «Обновить». -->
|
||
<div id="boot" data-v="79">
|
||
<style>
|
||
#boot{position:fixed;inset:0;z-index:2147482999;display:flex;align-items:center;justify-content:center;background:linear-gradient(#0f1720,#1c2b3a);font:14px/1.4 system-ui,-apple-system,"Segoe UI",sans-serif;color:#e8f0f8}
|
||
.boot-box{text-align:center;max-width:320px;padding:0 24px}
|
||
.boot-logo{width:60px;height:60px;margin:0 auto 12px;border-radius:14px;background:#5a8f3c;position:relative}
|
||
.boot-logo:before{content:"";position:absolute;left:12px;right:12px;top:16px;height:10px;background:#7cc24a;border-radius:5px}
|
||
.boot-logo:after{content:"";position:absolute;left:18px;right:18px;top:34px;height:8px;background:#e8f0f8;border-radius:4px}
|
||
.boot-title{font-size:22px;margin-bottom:2px}
|
||
.boot-ver{color:#8fa3b8;font-size:12px;margin-bottom:14px}
|
||
.boot-bar{height:6px;background:rgba(255,255,255,.12);border-radius:3px;overflow:hidden}
|
||
.boot-bar>i{display:block;height:100%;width:35%;background:#5a8f3c;border-radius:3px;animation:bootSlide 1.1s ease-in-out infinite}
|
||
@keyframes bootSlide{0%{margin-left:-35%}100%{margin-left:100%}}
|
||
.boot-hint{margin-top:12px;color:#8fa3b8;font-size:12px;min-height:36px}
|
||
.boot-btn{display:none;font:inherit;margin-top:10px;padding:11px 22px;border:0;border-radius:9px;background:#5a8f3c;color:#fff;cursor:pointer}
|
||
</style>
|
||
<div class="boot-box">
|
||
<div class="boot-logo"></div>
|
||
<div class="boot-title">Гречка</div>
|
||
<div class="boot-ver">v79</div>
|
||
<div class="boot-bar"><i></i></div>
|
||
<div class="boot-hint" id="bootHint">Загрузка игры…</div>
|
||
<button class="boot-btn" id="bootRetry" onclick="location.reload()">Обновить</button>
|
||
</div>
|
||
<script>
|
||
setTimeout(function(){
|
||
var boot=document.getElementById('boot');
|
||
if(boot&&boot.isConnected){
|
||
var h=document.getElementById('bootHint'),b=document.getElementById('bootRetry');
|
||
if(h)h.textContent='Загрузка затянулась — проверь интернет и нажми «Обновить».';
|
||
if(b)b.style.display='inline-block';
|
||
}
|
||
},20000);
|
||
</script>
|
||
</div>
|
||
|
||
<div id="game">
|
||
<canvas id="c"></canvas>
|
||
|
||
<div class="ui">
|
||
<div id="stats">
|
||
<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>
|
||
|
||
<script src="https://cdn.socket.io/4.7.4/socket.io.min.js"></script>
|
||
<script src="game.js?v=79"></script>
|
||
</body>
|
||
</html>
|