From 5774a4176115976ee823f253041c559a2634a40b Mon Sep 17 00:00:00 2001 From: Mk Date: Tue, 26 May 2026 13:07:06 +0000 Subject: [PATCH] fix: voice btns row2 align, custom modals, panel-header css, close btn fix --- game.js | 53 ++++++++++++++++++++++++++++++++++++++++++++++++----- index.html | 4 ++-- style.css | 13 +++++++++++++ 3 files changed, 63 insertions(+), 7 deletions(-) diff --git a/game.js b/game.js index a3e37ce..1b5c8ae 100644 --- a/game.js +++ b/game.js @@ -1,5 +1,48 @@ (() => { // ==================== КОНФИГУРАЦИЯ СЕРВЕРА ==================== +// === Custom modal functions === +function customAlert(msg) { + const overlay = document.createElement("div"); + overlay.className = "custom-modal-overlay"; + const box = document.createElement("div"); + box.className = "custom-modal-box"; + const text = document.createElement("div"); + text.textContent = msg; + text.style.marginBottom = "16px"; + const btn = document.createElement("button"); + btn.className = "btn-ok"; + btn.textContent = "OK"; + btn.onclick = () => overlay.remove(); + box.appendChild(text); + box.appendChild(btn); + overlay.appendChild(box); + document.querySelector("#game").appendChild(overlay); +} +function customConfirm(msg, onYes) { + const overlay = document.createElement("div"); + overlay.className = "custom-modal-overlay"; + const box = document.createElement("div"); + box.className = "custom-modal-box"; + const text = document.createElement("div"); + text.textContent = msg; + text.style.marginBottom = "16px"; + const btns = document.createElement("div"); + btns.className = "modal-btns"; + const yesBtn = document.createElement("button"); + yesBtn.className = "btn-yes"; + yesBtn.textContent = "Да"; + yesBtn.onclick = () => { overlay.remove(); onYes(); }; + const noBtn = document.createElement("button"); + noBtn.className = "btn-no"; + noBtn.textContent = "Отмена"; + noBtn.onclick = () => overlay.remove(); + btns.appendChild(yesBtn); + btns.appendChild(noBtn); + box.appendChild(text); + box.appendChild(btns); + overlay.appendChild(box); + document.querySelector("#game").appendChild(overlay); +} // Возможность переопределить сервер через query string const urlParams = new URLSearchParams(window.location.search); const SERVER_URL = urlParams.get('server') || 'https://apigrech.mkn8n.ru'; @@ -1255,14 +1298,14 @@ const voiceBtn = document.createElement('div'); voiceBtn.innerHTML = '🎤/'; voiceBtn.title = 'Голосовой чат (выкл)'; - voiceBtn.style.cssText = 'position:absolute;top:74px;right:170px;width:52px;height:52px;border-radius:12px;background:#555;z-index:200;display:flex;align-items:center;justify-content:center;font-size:24px;cursor:pointer;border:2px solid rgba(255,255,255,0.9);box-shadow:0 4px 0 rgba(0,0,0,0.5);pointer-events:auto;'; + voiceBtn.style.cssText = 'position:absolute;top:74px;right:130px;width:52px;height:52px;border-radius:12px;background:#555;z-index:200;display:flex;align-items:center;justify-content:center;font-size:24px;cursor:pointer;border:2px solid rgba(255,255,255,0.9);box-shadow:0 4px 0 rgba(0,0,0,0.5);pointer-events:auto;'; document.querySelector('.ui').appendChild(voiceBtn); // Кнопка режима голоса (близко / весь мир) const voiceModeBtn = document.createElement('div'); voiceModeBtn.innerHTML = '📢'; voiceModeBtn.title = 'Режим: рядом (600px)'; - voiceModeBtn.style.cssText = 'position:absolute;top:74px;right:112px;width:48px;height:52px;border-radius:12px;background:#3498db;z-index:200;display:flex;align-items:center;justify-content:center;font-size:20px;cursor:pointer;border:2px solid rgba(255,255,255,0.7);box-shadow:0 4px 0 rgba(0,0,0,0.5);pointer-events:auto;color:#fff;font-weight:bold;'; + voiceModeBtn.style.cssText = 'position:absolute;top:74px;right:190px;width:48px;height:52px;border-radius:12px;background:#3498db;z-index:200;display:flex;align-items:center;justify-content:center;font-size:20px;cursor:pointer;border:2px solid rgba(255,255,255,0.7);box-shadow:0 4px 0 rgba(0,0,0,0.5);pointer-events:auto;color:#fff;font-weight:bold;'; document.querySelector('.ui').appendChild(voiceModeBtn); voiceModeBtn.onclick = () => { if (voiceMode === 'near') { @@ -1640,13 +1683,13 @@ saveBtn.onclick = () => { playSound('click'); saveGame(); - alert('Игра сохранена!'); + customAlert('Игра сохранена!'); }; // Кнопка сброса игры (удаление сохранения и создание нового мира) const resetBtn = document.getElementById('resetBtn'); resetBtn.onclick = () => { - if (confirm('Вы уверены, что хотите удалить сохранение и начать новую игру?')) { + customConfirm('Вы уверены, что хотите удалить сохранение и начать новую игру?', () => { playSound('click'); // Удаляем сохранение из localStorage @@ -1680,7 +1723,7 @@ // Перезагружаем страницу location.reload(); - } + }); }; // Показываем кнопку сохранения только если играем одни diff --git a/index.html b/index.html index cffd717..fae2b2f 100644 --- a/index.html +++ b/index.html @@ -6,7 +6,7 @@ GrechkaCraft: Multiplayer - + @@ -92,6 +92,6 @@ - + diff --git a/style.css b/style.css index 09f40eb..54d8a5f 100644 --- a/style.css +++ b/style.css @@ -91,3 +91,16 @@ body.touch-device #hotbar { #death { display:none; position:absolute; inset:0; background: rgba(60,0,0,0.88); z-index:200; color:#fff; pointer-events:auto; align-items:center; justify-content:center; flex-direction:column; gap:12px; } #death button { padding:12px 18px; font-size:18px; font-weight:900; border:none; border-radius:12px; cursor:pointer; } + +/* Panel header + close button fix */ +.panel-header { display:flex; justify-content:space-between; align-items:center; color:#fff; font-weight:900; font-size:18px; margin-bottom:12px; padding-bottom:8px; border-bottom:1px solid rgba(255,255,255,0.15); } +.panel-header .close { background:#c0392b; border:none; color:#fff; font-weight:900; padding:8px 12px; border-radius:10px; cursor:pointer; font-size:16px; min-width:36px; text-align:center; flex-shrink:0; margin-left:12px; } + +/* Custom modal (alerts/confirms) */ +.custom-modal-overlay { position:absolute; inset:0; background:rgba(0,0,0,0.7); z-index:9999; display:flex; align-items:center; justify-content:center; } +.custom-modal-box { background:#1a1a2e; border:2px solid #e74c3c; border-radius:16px; padding:24px 32px; color:#fff; font-size:16px; font-weight:700; text-align:center; max-width:320px; box-shadow:0 8px 32px rgba(0,0,0,0.5); } +.custom-modal-box .modal-btns { display:flex; gap:10px; justify-content:center; margin-top:16px; } +.custom-modal-box button { font-weight:900; padding:10px 20px; border-radius:10px; font-size:15px; cursor:pointer; border:none; color:#fff; } +.custom-modal-box .btn-yes { background:#e74c3c; } +.custom-modal-box .btn-no { background:#555; } +.custom-modal-box .btn-ok { background:#2ecc71; }