231 lines
15 KiB
HTML
231 lines
15 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">
|
||
<!-- Заставка появляется МГНОВЕННО, до загрузки game3d.js. Без неё браузер
|
||
показывает белый экран, пока тянется JS-бандл на 300 КБ. -->
|
||
<div id="v3boot" style="position:fixed;inset:0;z-index:2147483000;overflow:hidden;
|
||
background:linear-gradient(180deg,#0d1b3e 0%,#1b3a6b 42%,#3f6fa8 68%,#8fc7f5 100%);
|
||
font:600 15px/1.4 system-ui,-apple-system,Segoe UI,sans-serif;color:#eaf3ff;
|
||
display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center">
|
||
<div style="position:absolute;inset:0;overflow:hidden;pointer-events:none">
|
||
<div style="position:absolute;left:50%;top:26%;width:170px;height:170px;margin:-85px 0 0 -85px;
|
||
border-radius:50%;background:radial-gradient(circle,#fff6d8 0%,#ffe08a 42%,rgba(255,214,120,0) 72%);
|
||
animation:v3sun 6s ease-in-out infinite"></div>
|
||
<div style="position:absolute;top:16%;left:-30%;width:52%;height:40px;border-radius:50%;
|
||
background:radial-gradient(ellipse,#ffffff8a 0%,#ffffff3d 56%,rgba(255,255,255,0) 78%);filter:blur(3px);animation:v3cloud 40s linear infinite"></div>
|
||
<div style="position:absolute;top:27%;left:-40%;width:38%;height:26px;border-radius:50%;
|
||
background:radial-gradient(ellipse,#ffffff70 0%,#ffffff30 56%,rgba(255,255,255,0) 78%);filter:blur(3px);animation:v3cloud 58s linear infinite"></div>
|
||
<div style="position:absolute;left:-10%;bottom:0;width:120%;height:38%;border-radius:50% 50% 0 0;
|
||
background:linear-gradient(180deg,#2f7a3d,#1d5427)"></div>
|
||
<div style="position:absolute;left:6%;bottom:0;width:80%;height:26%;border-radius:50% 50% 0 0;
|
||
background:linear-gradient(180deg,#3a8f47,#256030)"></div>
|
||
<div style="position:absolute;left:50%;bottom:15%;margin-left:-11px;width:22px;height:56px;animation:v3bob 2.4s ease-in-out infinite"><div style="position:absolute;left:9px;bottom:0;width:4px;height:46px;background:#7dbf4a;border-radius:2px 2px 0 0"></div><div style="position:absolute;left:1px;bottom:38px;width:10px;height:10px;background:#e8c95c;border-radius:50% 50% 50% 0"></div><div style="position:absolute;left:12px;bottom:38px;width:10px;height:10px;background:#e8c95c;border-radius:50% 50% 0 50%"></div><div style="position:absolute;left:3px;bottom:29px;width:9px;height:9px;background:#dcbb4e;border-radius:50% 50% 50% 0"></div><div style="position:absolute;left:11px;bottom:29px;width:9px;height:9px;background:#dcbb4e;border-radius:50% 50% 0 50%"></div><div style="position:absolute;left:4px;bottom:20px;width:8px;height:8px;background:#cfae42;border-radius:50% 50% 50% 0"></div><div style="position:absolute;left:11px;bottom:20px;width:8px;height:8px;background:#cfae42;border-radius:50% 50% 0 50%"></div><div style="position:absolute;left:7px;bottom:44px;width:9px;height:11px;background:#dfc163;border-radius:50% 50% 45% 45%"></div></div><div style="width:8px;height:8px;margin:-38px -8px 0 0;background:#dcbb4e;border-radius:50% 50% 50% 0;transform:rotate(-40deg)"></div><div style="width:8px;height:8px;margin:-32px 0 0 0;background:#dcbb4e;border-radius:50% 50% 0 50%;transform:rotate(40deg)"></div><div style="width:7px;height:7px;margin:-26px -7px 0 0;background:#cfae42;border-radius:50% 50% 50% 0;transform:rotate(-40deg)"></div><div style="width:7px;height:7px;margin:-20px 0 0 0;background:#cfae42;border-radius:50% 50% 0 50%;transform:rotate(40deg)"></div></div>
|
||
</div>
|
||
<style>
|
||
@keyframes v3sun{0%,100%{transform:scale(1);opacity:.9}50%{transform:scale(1.08);opacity:1}}
|
||
@keyframes v3cloud{from{transform:translateX(0)}to{transform:translateX(280%)}}
|
||
@keyframes v3bob{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,-10px)}}
|
||
@keyframes v3spin{to{transform:rotate(360deg)}}
|
||
</style>
|
||
<div style="position:relative;display:flex;flex-direction:column;align-items:center;gap:16px">
|
||
<div style="font-size:clamp(22px,5vw,34px);font-weight:800;letter-spacing:.5px;
|
||
text-shadow:0 3px 14px #0007">Гречка Craft 3D</div>
|
||
<div id="v3bootstage" style="font-size:13px;opacity:.82;min-height:19px">Загружаем игру…</div>
|
||
<div style="width:min(330px,74vw);height:12px;border-radius:8px;background:#ffffff2b;overflow:hidden;
|
||
box-shadow:inset 0 1px 3px #0005,0 6px 18px #0004">
|
||
<div id="v3bootfill" style="width:0%;height:100%;border-radius:8px;
|
||
background:linear-gradient(90deg,#7ee08a,#2ecc71);box-shadow:0 0 12px #7ee08aaa;
|
||
transition:width .3s ease-out"></div></div>
|
||
<div id="v3boottxt" style="font-size:12px;opacity:.7">0%</div>
|
||
</div>
|
||
</div>
|
||
<script>
|
||
// Плавно доводим полосу до ~90%: реальный прогресс начнётся, когда загрузится
|
||
// game3d.js. Дальше его перехватит экран генерации мира.
|
||
(function(){
|
||
var f=document.getElementById('v3bootfill'), t=document.getElementById('v3boottxt');
|
||
var p=0, stop=false;
|
||
window.__v3bootDone=function(){ stop=true; };
|
||
var iv=setInterval(function(){
|
||
if(stop) return clearInterval(iv);
|
||
p=Math.min(90, p + (p<40?6:p<75?3:1.2));
|
||
if(f) f.style.width=p+'%';
|
||
if(t) t.textContent=Math.round(p)+'%';
|
||
},140);
|
||
setTimeout(function(){ if(!stop){ p=92; if(f)f.style.width='92%'; if(t)t.textContent='92%'; } },6000);
|
||
})();
|
||
</script>
|
||
<style>
|
||
/* ===== Джойстик для 3D-режима (только /v2, style.css не трогаем) ===== */
|
||
#v2joy{position:fixed;left:18px;bottom:22px;width:132px;height:132px;z-index:120;
|
||
border-radius:50%;pointer-events:auto;touch-action:none;
|
||
background:radial-gradient(circle at 50% 50%,rgba(255,255,255,.16),rgba(0,0,0,.30) 70%);
|
||
border:2px solid rgba(255,255,255,.34);display:none}
|
||
#v2joy.on{display:block}
|
||
#v2joy .knob{position:absolute;left:50%;top:50%;width:58px;height:58px;margin:-29px 0 0 -29px;
|
||
border-radius:50%;background:rgba(255,255,255,.60);border:2px solid rgba(255,255,255,.85);
|
||
box-shadow:0 3px 10px rgba(0,0,0,.4);transition:background .1s}
|
||
#v2joy.act .knob{background:rgba(120,220,255,.80)}
|
||
#v2jump{position:fixed;right:16px;bottom:26px;width:86px;height:86px;z-index:120;border-radius:50%;
|
||
display:none;align-items:center;justify-content:center;font-size:34px;pointer-events:auto;
|
||
touch-action:none;background:rgba(50,140,255,.42);border:2px solid rgba(255,255,255,.62);color:#fff}
|
||
#v2jump.on{display:flex}
|
||
#v2jump:active{background:rgba(50,140,255,.75)}
|
||
#v2mine{position:fixed;right:112px;bottom:32px;width:70px;height:70px;z-index:120;border-radius:50%;
|
||
display:none;align-items:center;justify-content:center;font-size:28px;pointer-events:auto;
|
||
touch-action:none;background:rgba(255,140,40,.42);border:2px solid rgba(255,255,255,.62);color:#fff}
|
||
#v2mine.on{display:flex}
|
||
#v2mine:active{background:rgba(255,140,40,.78)}
|
||
/* Тач-устройства: джойстик виден. Десктоп: скрыт навсегда — работает клавиатура. */
|
||
@media (hover:none) and (pointer:coarse){ #v2joy.on{display:block} #v2jump.on,#v2mine.on{display:flex} }
|
||
@media (hover:hover) and (pointer:fine){ #v2joy,#v2jump,#v2mine{display:none !important} }
|
||
</style>
|
||
</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="v2joy"><div class="knob"></div></div>
|
||
<div id="v2jump">⬆️</div>
|
||
<div id="v2mine">⛏️</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=4"></script>
|
||
</body>
|
||
</html>
|