80 lines
3.5 KiB
HTML
80 lines
3.5 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" />
|
|
<title>GrechkaCraft: Multiplayer</title>
|
|
<!-- Socket.io Client -->
|
|
<script src="https://cdn.socket.io/4.7.4/socket.io.min.js"></script>
|
|
<link rel="stylesheet" href="style.css">
|
|
</head>
|
|
<body>
|
|
|
|
<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">📍 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" id="multiplayerStatus" style="display:none;">👥 <span id="playerCount">0</span></div>
|
|
</div>
|
|
|
|
<div id="modeBtn" class="rbtn pe">🏃</div>
|
|
<div id="saveBtn" class="rbtn pe">💾</div>
|
|
<div id="craftBtn" class="rbtn pe">🔨</div>
|
|
<div id="resetBtn" class="rbtn pe">🔄</div>
|
|
|
|
<div id="craftPanel">
|
|
<div class="top">
|
|
<div style="font-weight:900;font-size:18px;">Крафт</div>
|
|
<button class="close" id="craftClose">Закрыть</button>
|
|
</div>
|
|
<div id="recipes"></div>
|
|
</div>
|
|
|
|
<div id="inventoryPanel">
|
|
<div class="top">
|
|
<div style="font-weight:900;font-size:18px;">Инвентарь</div>
|
|
<button class="close" id="inventoryClose">Закрыть</button>
|
|
</div>
|
|
<div id="inventoryGrid"></div>
|
|
</div>
|
|
|
|
<div id="death">
|
|
<div style="font-size:22px;font-weight:900;">ВЫ ПОГИБЛИ</div>
|
|
<button id="respawnBtn">ВОЗРОДИТЬСЯ</button>
|
|
</div>
|
|
|
|
<div id="hotbar" class="pe"></div>
|
|
<div id="invToggle" class="rbtn pe" style="bottom:10px; left:10px; background:#3498db;">🎒</div>
|
|
</div>
|
|
|
|
<!-- Chat UI -->
|
|
<div id="chatPanel" style="display:none; position:absolute; left:10px; right:10px; top:60px; bottom:160px; background:rgba(0,0,0,0.85); border:2px solid rgba(255,255,255,0.8); border-radius:12px; pointer-events:auto; z-index:50; padding:10px; overflow:hidden;">
|
|
<div style="display:flex; justify-content:space-between; align-items:center; color:#fff; margin-bottom:10px;">
|
|
<div style="font-weight:900;font-size:18px;">💬 Чат</div>
|
|
<button id="chatClose" style="background:#c0392b; border:none; color:#fff; font-weight:900; padding:6px 10px; border-radius:8px; cursor:pointer;">✕</button>
|
|
</div>
|
|
<div id="chatMessages" style="flex:1; overflow-y:auto; color:#fff; font-size:13px; margin-bottom:8px; max-height:calc(100% - 40px);"></div>
|
|
<div style="display:flex; gap:6px;">
|
|
<input id="chatInput" type="text" placeholder="Введите сообщение..." style="flex:1; padding:8px; border:2px solid rgba(255,255,255,0.5); border-radius:8px; background:rgba(255,255,255,0.1); color:#fff; font-size:13px;" />
|
|
<button id="chatSend" style="background:#2ecc71; border:none; color:#fff; font-weight:900; padding:8px 16px; border-radius:8px; cursor:pointer;">➤</button>
|
|
</div>
|
|
</div>
|
|
<div id="chatToggle" class="rbtn pe">💬</div>
|
|
</div>
|
|
|
|
<div id="controls">
|
|
<div id="left" class="cbtn">←</div>
|
|
<div id="right" class="cbtn">→</div>
|
|
<div id="jump" class="cbtn">↑</div>
|
|
</div>
|
|
|
|
<script src="game.js"></script>
|
|
</body>
|
|
</html>
|