Coop с AI/базой (соло-старт), реванш, чистые URL, доработки клиента

Сервер (Game.hpp/cpp):
- coop-режим: AI-противники (волна 8, до 3 одновременно), простое
  преследование базы с рандомизацией, база с укрытием из кирпича.
- Комната стартует соло (1 игрок), второй может подключиться позже.
- Fix: хитбокс пули по базе брал радиус танка вместо пули.
- Fix: AI при столкновении со стеной теперь сразу перерешает направление,
  а не долбит в одну точку до 3с — без этого база падала за секунды.

Клиент:
- Танк: гусеницы, башня, заметный ствол (было — незаметный нубик).
- Рендер базы (укрытие/флаг), AI-танки — отдельным оттенком зелёного.
- Экран победы/поражения — крупный glitch-текст на весь оверлей вместо
  строки текста; кнопки "играть ещё" (без reload) и "в лобби".
- Блок кнопок управления (D-pad + огонь) справа от игрового поля.
- Лобби: coop стартует по кнопке "готов" в одиночку.

nginx: try_files с fallback на .html — чистые URL (/projects, /game)
без расширения, старые /projects.html и т.п. продолжают работать.

frontend/js/game/battle.js

@@ -1,4 +1,5 @@
 import { ClientMessage, ServerMessage } from './protocol.js';
+import { returnToLobbyContainer, leaveRoomAndReturn } from './lobby.js';
 
 const TILE_PX = 32;
 // Quintus транслирует и вращает контекст сам (Sprite.render -> matrix.setContextTransform)
@@ -12,21 +13,46 @@ let myPlayerId = null;
 let stage = null;
 let tankSprites = new Map();
 let bulletSprites = new Map();
+let baseSprite = null;
 let lastSentInput = null;
 let seq = 0;
 let polling = false;
 
+function tankColor(p) {
+  if (p.isAi) return '#0a8f2c';
+  return p.isMe ? '#00ff41' : '#9fa3a0';
+}
+
 function setupEntities() {
   Q.Sprite.extend('Tank', {
     init(p) {
-      this._super(p, { w: 26, h: 26, renderAlways: true });
+      this._super(p, { w: 24, h: 24, renderAlways: true });
     },
     draw(ctx) {
       const p = this.p;
-      ctx.fillStyle = p.isMe ? '#00ff41' : '#9fa3a0';
+      const color = tankColor(p);
+
+      // корпус
+      ctx.fillStyle = color;
       ctx.fillRect(-p.w / 2, -p.h / 2, p.w, p.h);
+
+      // гусеницы по бокам
       ctx.fillStyle = '#0a0e0c';
-      ctx.fillRect(-3, -p.h / 2 - 8, 6, 12);
+      ctx.fillRect(-p.w / 2, -p.h / 2, 3, p.h);
+      ctx.fillRect(p.w / 2 - 3, -p.h / 2, 3, p.h);
+
+      // башня
+      ctx.beginPath();
+      ctx.arc(0, 0, p.w / 2 - 5, 0, Math.PI * 2);
+      ctx.fillStyle = color;
+      ctx.fill();
+      ctx.lineWidth = 1.5;
+      ctx.strokeStyle = '#0a0e0c';
+      ctx.stroke();
+
+      // ствол — явно торчит вперёд по направлению взгляда (локально «вверх»)
+      ctx.fillStyle = '#0a0e0c';
+      ctx.fillRect(-2.5, -p.h / 2 - 12, 5, 16);
     },
   });
 
@@ -59,6 +85,26 @@ function setupEntities() {
       }
     },
   });
+
+  Q.Sprite.extend('Base', {
+    init(p) {
+      this._super(p, { w: TILE_PX * 0.85, h: TILE_PX * 0.85, renderAlways: true });
+    },
+    draw(ctx) {
+      const p = this.p;
+      ctx.fillStyle = p.alive ? '#9fa3a0' : '#2a2d2b';
+      ctx.fillRect(-p.w / 2, -p.h / 2, p.w, p.h);
+      ctx.strokeStyle = '#0a0e0c';
+      ctx.strokeRect(-p.w / 2 + 1, -p.h / 2 + 1, p.w - 2, p.h - 2);
+      ctx.fillStyle = p.alive ? '#00ff41' : '#0a0e0c';
+      ctx.beginPath();
+      ctx.moveTo(0, -p.h / 2);
+      ctx.lineTo(-p.w / 4, 0);
+      ctx.lineTo(p.w / 4, 0);
+      ctx.closePath();
+      ctx.fill();
+    },
+  });
 }
 
 function ensureQuintus(cols, rows) {
@@ -78,8 +124,6 @@ function ensureQuintus(cols, rows) {
   Q.scene('battle', (stageRef) => {
     stage = stageRef;
   });
-
-  document.getElementById('battlecity-canvas-container').appendChild(Q.el);
 }
 
 function buildMap(map) {
@@ -100,6 +144,28 @@ function buildMap(map) {
   }
 }
 
+function bindControlButtons(root) {
+  const press = (input, active) => {
+    if (Q) {
+      Q.inputs[input] = active;
+    }
+  };
+  root.querySelectorAll('[data-input]').forEach((btn) => {
+    const input = btn.dataset.input;
+    btn.addEventListener('mousedown', () => press(input, true));
+    btn.addEventListener('mouseup', () => press(input, false));
+    btn.addEventListener('mouseleave', () => press(input, false));
+    btn.addEventListener('touchstart', (e) => {
+      e.preventDefault();
+      press(input, true);
+    });
+    btn.addEventListener('touchend', (e) => {
+      e.preventDefault();
+      press(input, false);
+    });
+  });
+}
+
 function pollInput() {
   if (!polling) {
     return;
@@ -121,10 +187,17 @@ function pollInput() {
 }
 
 function onState(payload) {
+  const seenTanks = new Set();
   for (const t of payload.tanks) {
+    seenTanks.add(t.id);
     let sprite = tankSprites.get(t.id);
     if (!sprite) {
-      sprite = new Q.Tank({ x: t.x * TILE_PX, y: t.y * TILE_PX, isMe: t.id === myPlayerId });
+      sprite = new Q.Tank({
+        x: t.x * TILE_PX,
+        y: t.y * TILE_PX,
+        isMe: t.id === myPlayerId,
+        isAi: !!t.is_ai,
+      });
       stage.insert(sprite);
       tankSprites.set(t.id, sprite);
     }
@@ -133,6 +206,12 @@ function onState(payload) {
     sprite.p.angle = DIR_DEGREES[t.direction] || 0;
     sprite.p.hidden = !t.alive;
   }
+  for (const [id, sprite] of tankSprites) {
+    if (!seenTanks.has(id)) {
+      sprite.destroy();
+      tankSprites.delete(id);
+    }
+  }
 
   const seenBullets = new Set();
   for (const b of payload.bullets) {
@@ -152,14 +231,49 @@ function onState(payload) {
       bulletSprites.delete(id);
     }
   }
+
+  if (payload.base) {
+    if (!baseSprite) {
+      baseSprite = new Q.Base({
+        x: payload.base.x * TILE_PX,
+        y: payload.base.y * TILE_PX,
+        alive: payload.base.alive,
+      });
+      stage.insert(baseSprite);
+    } else {
+      baseSprite.p.alive = payload.base.alive;
+    }
+  }
 }
 
 function onOver(payload) {
   polling = false;
-  const resultText = { win: 'Победа', lose: 'Поражение', draw: 'Ничья' }[payload.result] || payload.result;
-  const resultEl = document.getElementById('battle-result');
-  resultEl.textContent = `${resultText} — ${payload.reason}`;
-  document.getElementById('battle-back').style.display = 'inline-block';
+  const titles = { win: 'ПОБЕДА', lose: 'ПОРАЖЕНИЕ', draw: 'НИЧЬЯ' };
+  const title = titles[payload.result] || payload.result.toUpperCase();
+  const overlay = document.getElementById('battle-result-overlay');
+  overlay.innerHTML = `
+    <div class="battle-result battle-result--${payload.result}">
+      <h2 class="glitch" data-text="${title}">${title}</h2>
+      <p>${payload.reason}</p>
+      <div class="battle-result__actions">
+        <button data-action="rematch">играть ещё</button>
+        <button data-action="to-lobby">в лобби</button>
+      </div>
+    </div>`;
+  overlay.style.display = 'flex';
+}
+
+function onOverlayClick(e) {
+  const btn = e.target.closest('[data-action]');
+  if (!btn) return;
+  const overlay = document.getElementById('battle-result-overlay');
+  overlay.style.display = 'none';
+  overlay.innerHTML = '';
+  if (btn.dataset.action === 'rematch') {
+    returnToLobbyContainer();
+  } else {
+    leaveRoomAndReturn();
+  }
 }
 
 export function startBattle(networkInstance, payload, ownPlayerId) {
@@ -172,12 +286,30 @@ export function startBattle(networkInstance, payload, ownPlayerId) {
   document.getElementById('lobby').style.display = 'none';
   const container = document.getElementById('battlecity-canvas-container');
   container.style.display = 'block';
-  container.innerHTML = '<p id="battle-result"></p><button id="battle-back" style="display:none">выйти в лобби</button>';
+  container.innerHTML = `
+    <div class="battle-layout">
+      <div id="battle-canvas-slot"></div>
+      <div class="battle-controls">
+        <div class="dpad">
+          <button class="dpad__up" data-input="up">&uarr;</button>
+          <button class="dpad__left" data-input="left">&larr;</button>
+          <button class="dpad__right" data-input="right">&rarr;</button>
+          <button class="dpad__down" data-input="down">&darr;</button>
+        </div>
+        <button class="fire-btn" data-input="fire">огонь</button>
+      </div>
+    </div>
+    <div id="battle-result-overlay"></div>`;
 
   ensureQuintus(cols, rows);
+  document.getElementById('battle-canvas-slot').appendChild(Q.el);
+  bindControlButtons(container.querySelector('.battle-controls'));
+  container.querySelector('#battle-result-overlay').addEventListener('click', onOverlayClick);
+
   Q.stageScene('battle', 0);
   tankSprites = new Map();
   bulletSprites = new Map();
+  baseSprite = null;
 
   buildMap(payload.map);
 
@@ -188,8 +320,4 @@ export function startBattle(networkInstance, payload, ownPlayerId) {
   seq = 0;
   polling = true;
   requestAnimationFrame(pollInput);
-
-  document.getElementById('battle-back').addEventListener('click', () => {
-    location.reload();
-  });
 }

frontend/js/game/lobby.js

@@ -52,14 +52,12 @@ function renderLobbyView() {
 function renderRoomView() {
   const full = currentRoom.players.length >= 2;
   let statusLine = '';
-  let readyBtn = '';
-  if (currentRoom.mode !== 'pvp') {
-    statusLine = '<p class="lobby-error">coop ещё не реализован (этап 5)</p>';
-  } else if (!full) {
+  let readyBtn = '<button data-action="ready">готов</button>';
+  if (currentRoom.mode === 'pvp' && !full) {
     statusLine = '<p class="lobby-error">жду второго игрока (1/2) — открой комнату во второй вкладке/другим человеком</p>';
     readyBtn = '<button data-action="ready" disabled>готов</button>';
-  } else {
-    readyBtn = '<button data-action="ready">готов</button>';
+  } else if (currentRoom.mode === 'coop' && !full) {
+    statusLine = '<p class="lobby-error">можно начать соло, второй игрок сможет подключиться позже</p>';
   }
   container.innerHTML = `
     <div class="lobby-panel">
@@ -83,6 +81,19 @@ function render() {
   }
 }
 
+// Вызывается из battle.js по кнопкам экрана победы/поражения.
+export function returnToLobbyContainer() {
+  document.getElementById('battlecity-canvas-container').style.display = 'none';
+  container.style.display = '';
+  render();
+}
+
+export function leaveRoomAndReturn() {
+  currentRoom = null;
+  net.leaveRoom();
+  returnToLobbyContainer();
+}
+
 container?.addEventListener('click', (e) => {
   const btn = e.target.closest('[data-action]');
   if (!btn) return;