Слияние dev: фикс клавиатуры, зелёное дуло

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 {

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);