fix: voice btns row2 align, custom modals, panel-header css, close btn fix
This commit is contained in:
parent
6b6125ae81
commit
5774a41761
53
game.js
53
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 = '🎤<span style="position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:36px;color:#e74c3c;font-weight:bold;">/</span>';
|
||||
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();
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// Показываем кнопку сохранения только если играем одни
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
<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=5">
|
||||
<link rel="stylesheet" href="style.css?v=6">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
|
@ -92,6 +92,6 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<script src="game.js?v=12"></script>
|
||||
<script src="game.js?v=15"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
13
style.css
13
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; }
|
||||
|
|
|
|||
Loading…
Reference in New Issue