grechka-game/index.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?v=6">
</head>
<body>

<div id="game">
  <canvas id="c"></canvas>

  <div class="ui">
    <div id="stats">
      <div class="row">❤️ <span id="hp">100</span> &nbsp; 🍗 <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">⭐ 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="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>
  </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;"></div>
  </div>
</div>

<script src="game.js?v=44"></script>
<!-- Выбор игры: Grechka Craft / Grechka Armageddon -->
<style>
#gamePick{position:fixed;inset:0;z-index:2147483647;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.6);font-family:sans-serif}
#gamePick .box{background:#fff;border-radius:12px;padding:24px 32px;text-align:center;max-width:86vw}
#gamePick h1{font-size:22px;margin:0 0 16px;color:#111}
#gamePick .pick{display:block;width:270px;margin:10px auto;padding:12px 24px;font-size:18px;border:none;border-radius:10px;cursor:pointer;color:#fff}
#gamePick .craft{background:#27ae60}#gamePick .arma{background:#2980b9}

</style>
<div id="gamePick"><div class="box">
<h1>Во что играем?</h1>
<button class="pick craft" id="pickCraft">⛏️ Grechka Craft</button>
<button class="pick arma" id="pickArma">💥 Grechka Armageddon</button>
</div></div>

<script>
(function(){
  try {
    var q = new URLSearchParams(location.search).get('play');
    var ov = document.getElementById('gamePick');
    // выбор — всегда вручную, никаких автопереходов
    if (q === 'craft') { try { localStorage.setItem('grechka-game-choice','craft'); } catch(e){} return; }
    if (q === 'armageddon') { location.replace('/worms/'); return; }
    ov.style.display = 'flex';
    document.getElementById('pickCraft').onclick = function(){
      try { localStorage.setItem('grechka-game-choice','craft'); } catch(e){}
      ov.style.display = 'none';
    };
    document.getElementById('pickArma').onclick = function(){
      try { localStorage.setItem('grechka-game-choice','armageddon'); } catch(e){}
      location.href = '/worms/';
    };
  } catch(e){}
})();
</script>
</body>
</html>