From 20d63f0cee9b9b03d730cedd9ec0ab3eb8590d04 Mon Sep 17 00:00:00 2001
From: Dmitry Gammel <cactozzz93@gmail.com>
Date: Thu, 6 Aug 2026 18:50:20 +0500
Subject: [PATCH] =?UTF-8?q?=D0=A4=D0=B8=D0=BA=D1=81=20=D0=BA=D0=BB=D0=B0?=
 =?UTF-8?q?=D0=B2=D0=B8=D0=B0=D1=82=D1=83=D1=80=D1=8B=20=D0=B2=20=D0=B1?=
 =?UTF-8?q?=D0=BE=D1=8E,=20=D0=BF=D0=BE=D0=B4=D1=81=D0=BA=D0=B0=D0=B7?=
 =?UTF-8?q?=D0=BA=D0=B0=20=D0=BF=D1=80=D0=BE=20WASD,=20=D0=B7=D0=B5=D0=BB?=
 =?UTF-8?q?=D1=91=D0=BD=D0=BE=D0=B5=20=D0=B4=D1=83=D0=BB=D0=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Quintus слушает клавиатуру на самом канвасе, а не на document/window;
без autoFocus и явного focus() канвас не получал фокус (особенно после
переприкрепления к DOM на реванш) — WASD/стрелки/space никуда не долетали.
Клик по кнопке D-pad тоже уводил фокус — возвращаем его на канвас.

Дуло танка было почти того же цвета, что фон (#0a0e0c на чёрном) — не
видно. Сделал ярко-зелёным с тёмной обводкой, читается на любом корпусе.

Над блоком кнопок управления — подсказка, что WASD/стрелки тоже работают.
---
 frontend/css/game.css      |  8 ++++++++
 frontend/js/game/battle.js | 22 +++++++++++++++++++---
 2 files changed, 27 insertions(+), 3 deletions(-)

diff --git a/frontend/css/game.css b/frontend/css/game.css
index 3e56a90..342113b 100644
--- a/frontend/css/game.css
+++ b/frontend/css/game.css
@@ -115,6 +115,14 @@
   align-items: center;
   gap: 1.25rem;
   padding-top: 0.5rem;
+  max-width: 180px;
+}
+
+.battle-controls__hint {
+  color: var(--color-silver);
+  font-size: 0.8rem;
+  text-align: center;
+  margin: 0;
 }
 
 .dpad {
diff --git a/frontend/js/game/battle.js b/frontend/js/game/battle.js
index cb01449..0455d97 100644
--- a/frontend/js/game/battle.js
+++ b/frontend/js/game/battle.js
@@ -52,9 +52,13 @@ function setupEntities() {
       ctx.strokeStyle = '#0a0e0c';
       ctx.stroke();
 
-      // ствол — явно торчит вперёд по направлению взгляда (локально «вверх»)
-      ctx.fillStyle = '#0a0e0c';
+      // ствол — явно торчит вперёд по направлению взгляда (локально «вверх»).
+      // Ярко-зелёный с тёмной обводкой — иначе на тёмном корпусе не виден.
+      ctx.fillStyle = '#00ff41';
+      ctx.strokeStyle = '#0a0e0c';
+      ctx.lineWidth = 1;
       ctx.fillRect(-2.5, -p.h / 2 - 12, 5, 16);
+      ctx.strokeRect(-2.5, -p.h / 2 - 12, 5, 16);
     },
   });
 
@@ -116,7 +120,9 @@ function ensureQuintus(cols, rows) {
   Q = window.Quintus().include('Sprites, Scenes, 2D, Input').setup({
     width: cols * TILE_PX,
     height: rows * TILE_PX,
+    autoFocus: true,
   });
+  Q.el.tabIndex = 1;
   Q.input.keyboardControls({
     LEFT: 'left', RIGHT: 'right', UP: 'up', DOWN: 'down',
     A: 'left', D: 'right', W: 'up', S: 'down',
@@ -157,7 +163,12 @@ function bindControlButtons(root) {
   };
   root.querySelectorAll('[data-input]').forEach((btn) => {
     const input = btn.dataset.input;
-    btn.addEventListener('mousedown', () => press(input, true));
+    // Клик по кнопке уводит фокус с канваса — а Quintus слушает клавиатуру
+    // именно на нём, так что после клика WASD/стрелки перестанут работать.
+    btn.addEventListener('mousedown', () => {
+      press(input, true);
+      Q?.el.focus();
+    });
     btn.addEventListener('mouseup', () => press(input, false));
     btn.addEventListener('mouseleave', () => press(input, false));
     btn.addEventListener('touchstart', (e) => {
@@ -320,6 +331,7 @@ export function startBattle(networkInstance, payload, ownPlayerId) {
     <div class="battle-layout">
       <div id="battle-canvas-slot"></div>
       <div class="battle-controls">
+        <p class="battle-controls__hint">WASD / стрелки + пробел тоже работают</p>
         <div class="dpad">
           <button class="dpad__up" data-input="up">&uarr;</button>
           <button class="dpad__left" data-input="left">&larr;</button>
@@ -333,6 +345,10 @@ export function startBattle(networkInstance, payload, ownPlayerId) {
 
   ensureQuintus(cols, rows);
   document.getElementById('battle-canvas-slot').appendChild(Q.el);
+  // Клавиатурные события Quintus слушает на самом канвасе — если фокус
+  // не на нём (а он теряется при каждом переприкреплении к DOM на реванш),
+  // WASD/стрелки/space просто никуда не долетают.
+  Q.el.focus();
   bindControlButtons(container.querySelector('.battle-controls'));
   container.querySelector('#battle-result-overlay').addEventListener('click', onOverlayClick);