feat: Adding animations for map actions + getting rid of debugMode

public/index.html

@@ -297,6 +297,7 @@
         <!-- Mobile burger button -->
         <button type="button" id="burgerBtn" class="burgerBtn" aria-label="Open menu">☰</button>
         <canvas id="canvas" width="1000" height="1000"></canvas>
+        <div id="mapAnim" class="mapAnim" aria-hidden="true"></div>
         <div id="hint" class="hint">Cliquez sur une tuile. Les stats seront vides à moins de cliquer.</div>
 
         <!-- Military attack confirmation modal -->

public/src/game.js

@@ -23,7 +23,6 @@ const COLOR_OPPONENT_GREY   = "rgba(95, 98, 110, 0.72)";
 export const GAME_CONFIG = {
   dailyActionQuota: 100,
   databaseWipeoutIntervalSeconds: 21600,
-  debugModeForTeams: false,
   configReloadIntervalSeconds: 30,
   worldSeed: "",
   seedPeriodEndsAtUtc: "",
@@ -237,6 +236,7 @@ const teamQuotaEl      = document.getElementById("teamActionsRemaining");
 const captorInfoEl     = document.getElementById("captorInfo");
 const playerListPopupEl = document.getElementById("playerListPopup");
 const playerListContentEl = document.getElementById("playerListContent");
+const mapAnimEl        = document.getElementById("mapAnim");
 // ── Cell helpers ──────────────────────────────────────────────────────────────
 
 export function cellKey(x, y) { return `${x},${y}`; }
@@ -260,7 +260,6 @@ export function isOwnTile(key)       { const m = cellMeta(key); return m !== nul
 export function applyConfigPayload(data) {
   GAME_CONFIG.dailyActionQuota              = Number(data.dailyActionQuota) || 100;
   GAME_CONFIG.databaseWipeoutIntervalSeconds = Number(data.databaseWipeoutIntervalSeconds) || 21600;
-  GAME_CONFIG.debugModeForTeams             = Boolean(data.debugModeForTeams);
   GAME_CONFIG.configReloadIntervalSeconds   = Math.max(5, Number(data.configReloadIntervalSeconds) || 30);
   GAME_CONFIG.worldSeed                     = String(data.worldSeed ?? "");
   GAME_CONFIG.seedPeriodEndsAtUtc           = String(data.seedPeriodEndsAtUtc ?? "");
@@ -837,6 +836,29 @@ export function draw() {
   ctx.restore();
 }
 
+// ── Map action animation ─────────────────────────────────────────────────────
+
+const mapAnimTextByType = {
+  "reveal-empty": "🔍",
+  "reveal-planet": "👁️",
+  "capture": "⚔️",
+};
+
+/**
+ * Triggers a spinning emoji animation at the centre of the map zone.
+ * @param {"reveal-empty"|"reveal-planet"|"capture"} type
+ */
+function triggerMapAnimation(type) {
+  if (!mapAnimEl) return;
+  mapAnimEl.textContent = mapAnimTextByType[type] || "🔍";
+  mapAnimEl.classList.remove("mapAnim--active");
+  void mapAnimEl.offsetWidth; // force reflow to restart the animation
+  mapAnimEl.classList.add("mapAnim--active");
+  mapAnimEl.addEventListener("animationend", () => {
+    mapAnimEl.classList.remove("mapAnim--active");
+  }, { once: true });
+}
+
 // ── Cursor ────────────────────────────────────────────────────────────────────
 
 function pickCell(ev) {
@@ -1040,6 +1062,7 @@ async function onCanvasClick(ev) {
       }
       if (!res.ok) throw new Error("reveal");
       applyRevealPayload(await res.json());
+      triggerMapAnimation(cells.get(key)?.hasPlanet ? "reveal-planet" : "reveal-empty");
       startCooldown();
       updateEconomyDisplay();
       draw();
@@ -1101,6 +1124,7 @@ async function onCanvasClick(ev) {
       teamActionsRemaining = data.teamActionsRemaining;
       updateTeamQuotaDisplay();
     }
+    triggerMapAnimation("capture");
     hint.textContent = `🏴 Planète (${cell.x},${cell.y}) capturée !`;
     showLocalSelection(cell.x, cell.y);
     updateEconomyDisplay();

public/style.css

@@ -1295,4 +1295,31 @@ canvas {
 .playerListEmpty {
   color: rgba(233, 238, 246, 0.4);
   font-style: italic;
+}
+
+/* ── Map action animation ─────────────────────────────────────────────────── */
+
+@keyframes mapAnimPop {
+  0%   { transform: translate(-50%, -50%) scale(0.1); opacity: 0; }
+  20%  { transform: translate(-50%, -50%) scale(1.1); opacity: 1; }
+  80%  { transform: translate(-50%, -50%) scale(1);   opacity: 1; }
+  100% { transform: translate(-50%, -50%) scale(1.2); opacity: 0; }
+}
+
+.mapAnim {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  font-size: 88px;
+  line-height: 1;
+  pointer-events: none;
+  z-index: 20;
+  display: none;
+  user-select: none;
+}
+
+.mapAnim--active {
+  display: block;
+  animation: mapAnimPop 0.5s ease-out forwards;
 }