The expand

backend/game/engine.py

@@ -998,19 +998,29 @@ class GameEngine:
         return False
 
     def _find_build_position(
-        self, player: PlayerState, bt: BuildingType, near_scv: Unit
+        self,
+        player: PlayerState,
+        bt: BuildingType,
+        near_scv: Unit,
+        search_center: Optional[tuple[float, float]] = None,
+        search_radius: Optional[float] = None,
     ) -> Optional[tuple[float, float]]:
-        """Return CENTER coordinates for a new building, or None if no valid spot found."""
+        """Return CENTER coordinates for a new building, or None if no valid spot found.
+
+        If search_center is given, the spiral search is anchored there instead of the SCV.
+        If search_radius is given, it overrides _SCV_BUILD_RANGE as the maximum search distance.
+        """
         defn = BUILDING_DEFS[bt]
-        cx, cy = near_scv.x, near_scv.y
+        cx, cy = search_center if search_center else (near_scv.x, near_scv.y)
+        radius_limit = search_radius if search_radius is not None else self._SCV_BUILD_RANGE
 
-        for radius in range(1, int(self._SCV_BUILD_RANGE) + 2):
+        for radius in range(1, int(radius_limit) + 2):
             for dx in range(-radius, radius + 1):
                 for dy in range(-radius, radius + 1):
                     tl_x, tl_y = int(cx) + dx, int(cy) + dy
                     tile_cx = tl_x + defn.width / 2.0
                     tile_cy = tl_y + defn.height / 2.0
-                    if (tile_cx - cx) ** 2 + (tile_cy - cy) ** 2 > self._SCV_BUILD_RANGE ** 2:
+                    if (tile_cx - cx) ** 2 + (tile_cy - cy) ** 2 > radius_limit ** 2:
                         continue
                     if not self._can_place(tl_x, tl_y, defn):
                         continue
@@ -1019,6 +1029,91 @@ class GameEngine:
                     return (tile_cx, tile_cy)
         return None
 
+    def _find_expansion_position(self, player: PlayerState) -> Optional[tuple[float, float]]:
+        """Find a valid position for a new command center near unclaimed resource clusters.
+
+        An expansion position is a resource cluster (group of minerals) that has no
+        existing command center (from any player) within CC_CLAIM_RADIUS tiles.
+        The closest such cluster to the player's current base is preferred.
+        """
+        from .map import ResourceType
+        CC_CLAIM_RADIUS = 15.0
+        CLUSTER_MERGE_DIST = 10.0
+        CC_SEARCH_RADIUS = 14.0
+
+        all_ccs = [
+            b
+            for p in self.state.players.values()
+            for b in p.buildings.values()
+            if b.building_type == BuildingType.COMMAND_CENTER
+            and b.status != BuildingStatus.DESTROYED
+        ]
+
+        minerals = [
+            r for r in self.state.game_map.resources
+            if r.resource_type == ResourceType.MINERAL and not r.is_depleted
+        ]
+        if not minerals:
+            return None
+
+        free_minerals = [
+            m for m in minerals
+            if not any(
+                (m.x - cc.x) ** 2 + (m.y - cc.y) ** 2 <= CC_CLAIM_RADIUS ** 2
+                for cc in all_ccs
+            )
+        ]
+        if not free_minerals:
+            return None
+
+        # Group free minerals into clusters
+        clusters: list[list] = []
+        for m in free_minerals:
+            placed = False
+            for cluster in clusters:
+                ccx = sum(r.x for r in cluster) / len(cluster)
+                ccy = sum(r.y for r in cluster) / len(cluster)
+                if (m.x - ccx) ** 2 + (m.y - ccy) ** 2 <= CLUSTER_MERGE_DIST ** 2:
+                    cluster.append(m)
+                    placed = True
+                    break
+            if not placed:
+                clusters.append([m])
+
+        if not clusters:
+            return None
+
+        cc = player.command_center()
+        ref_x = cc.x if cc else float(MAP_WIDTH) / 2
+        ref_y = cc.y if cc else float(MAP_HEIGHT) / 2
+
+        def cluster_center(cluster: list) -> tuple[float, float]:
+            return (
+                sum(r.x for r in cluster) / len(cluster),
+                sum(r.y for r in cluster) / len(cluster),
+            )
+
+        clusters_by_dist = sorted(
+            clusters,
+            key=lambda c: (cluster_center(c)[0] - ref_x) ** 2 + (cluster_center(c)[1] - ref_y) ** 2,
+        )
+
+        cc_defn = BUILDING_DEFS[BuildingType.COMMAND_CENTER]
+        for cluster in clusters_by_dist:
+            ecx, ecy = cluster_center(cluster)
+            for radius in range(0, int(CC_SEARCH_RADIUS) + 2):
+                for dx in range(-radius, radius + 1):
+                    for dy in range(-radius, radius + 1):
+                        tl_x, tl_y = int(ecx) + dx, int(ecy) + dy
+                        tile_cx = tl_x + cc_defn.width / 2.0
+                        tile_cy = tl_y + cc_defn.height / 2.0
+                        if (tile_cx - ecx) ** 2 + (tile_cy - ecy) ** 2 > CC_SEARCH_RADIUS ** 2:
+                            continue
+                        if not self._can_place(tl_x, tl_y, cc_defn):
+                            continue
+                        return (tile_cx, tile_cy)
+        return None
+
     def _eject_units_from_building(self, building: "Building") -> None:
         """Push any ground unit whose centre falls inside building's collision box to the nearest walkable tile."""
         from .pathfinding import snap_to_walkable
@@ -1147,15 +1242,26 @@ class GameEngine:
         if count == 0:
             return ActionResult(action_type="build", success=False, data={"error": "build_no_scv"})
 
-        cc = player.command_center()
-        cx, cy = (float(cc.x), float(cc.y)) if cc else (0.0, 0.0)
-
         built = 0
         for i in range(count):
             scv = available_scvs[i]
 
+            # Determine the command center that should anchor this build
+            nearest_cc = player.nearest_command_center(scv.x, scv.y)
+            cc_anchor = (float(nearest_cc.x), float(nearest_cc.y)) if nearest_cc else None
+
             # Find center position for this building
-            if bt == BuildingType.REFINERY:
+            if bt == BuildingType.COMMAND_CENTER:
+                # New CC must go on an expansion (near unclaimed resources)
+                pos_opt = self._find_expansion_position(player)
+                if not pos_opt:
+                    # Fallback: build anywhere the SCV can reach
+                    pos_opt = self._find_build_position(player, bt, scv)
+                if not pos_opt:
+                    break
+                pos_cx, pos_cy = pos_opt
+            elif bt == BuildingType.REFINERY:
+                cx, cy = cc_anchor if cc_anchor else (scv.x, scv.y)
                 geyser = self.state.game_map.nearest_geyser_without_refinery(cx, cy)
                 if not geyser:
                     break
@@ -1166,7 +1272,12 @@ class GameEngine:
                     break
                 geyser.has_refinery = True
             else:
-                pos_opt = self._find_build_position(player, bt, scv)
+                # Build around the nearest command center with a wider search radius
+                pos_opt = self._find_build_position(
+                    player, bt, scv,
+                    search_center=cc_anchor,
+                    search_radius=12.0,
+                )
                 if not pos_opt:
                     break
                 pos_cx, pos_cy = pos_opt

backend/game/state.py

@@ -69,6 +69,21 @@ class PlayerState(BaseModel):
             None,
         )
 
+    def command_centers(self) -> list[Building]:
+        """Return all non-destroyed command centers."""
+        return [
+            b for b in self.buildings.values()
+            if b.building_type == BuildingType.COMMAND_CENTER
+            and b.status != BuildingStatus.DESTROYED
+        ]
+
+    def nearest_command_center(self, x: float, y: float) -> Optional[Building]:
+        """Return the non-destroyed command center closest to (x, y)."""
+        ccs = self.command_centers()
+        if not ccs:
+            return None
+        return min(ccs, key=lambda b: (b.x - x) ** 2 + (b.y - y) ** 2)
+
     def summary(self, lang: str = "fr") -> str:
         active = [
             b.building_type.value for b in self.buildings.values()

frontend/src/lib/components/TutorialOverlay.svelte

@@ -131,6 +131,7 @@
   // Hint state
   let activeHintId: string | null = null;
   let hintTimers: Map<string, ReturnType<typeof setTimeout>> = new Map();
+  let shownHints: Set<string> = new Set();
 
   // Tutorial completion — driven by lockedCount so Svelte tracks it correctly
   $: allDone = lockedCount === OBJECTIVE_IDS.length;
@@ -160,11 +161,14 @@
   }
 
   function scheduleHintIfNeeded(id: string) {
+    if (shownHints.has(id)) return;
     if (hintTimers.has(id)) return;
+    // Only show hint if all previous objectives are completed
+    const idx = (OBJECTIVE_IDS as readonly string[]).indexOf(id);
+    if (idx > 0 && (OBJECTIVE_IDS as readonly string[]).slice(0, idx).some((prevId) => !doneMap[prevId])) return;
     const t = setTimeout(() => {
       hintTimers.delete(id);
-      const obj = objectives.find((o) => o.id === id);
-      if (obj && !obj.done) {
+      if (!doneMap[id] && !shownHints.has(id)) {
         activeHintId = id;
       }
     }, HINT_DELAY_MS);
@@ -182,9 +186,8 @@
   function dismissHint() {
     const dismissedId = activeHintId;
     activeHintId = null;
-    // Restart timer for same objective so hint can reappear later
     if (dismissedId !== null) {
-      scheduleHintIfNeeded(dismissedId);
+      shownHints.add(dismissedId);
     }
   }
 

frontend/src/routes/+page.svelte

@@ -4,13 +4,13 @@
   import { backendUrl, getSocket } from "$lib/socket";
   import {
     gameState,
+    isTutorial,
     mapTextureUrl,
     myPlayerId,
     playerName,
     roomId,
     roomState,
     winnerId,
-    isTutorial,
   } from "$lib/stores/game";
   import type { GameState, Room } from "$lib/types";
   import { onDestroy, onMount } from "svelte";
@@ -100,8 +100,13 @@
     }, 500);
   }
 
-  const _savedName = typeof localStorage !== 'undefined' ? localStorage.getItem('sc_player_name') : null;
-  const _nameLocked = typeof localStorage !== 'undefined' && localStorage.getItem('sc_name_locked') === 'true';
+  const _savedName =
+    typeof localStorage !== "undefined"
+      ? localStorage.getItem("sc_player_name")
+      : null;
+  const _nameLocked =
+    typeof localStorage !== "undefined" &&
+    localStorage.getItem("sc_name_locked") === "true";
   if (_savedName) playerName.set(_savedName);
 
   let name = _savedName || $playerName || "";
@@ -307,14 +312,14 @@
   // ── Activity toast notifications ─────────────────────────────────────────
   type StatEvent = {
     player_name: string;
-    event_type: 'tutorial_complete' | 'game_won';
+    event_type: "tutorial_complete" | "game_won";
     duration_s: number | null;
     opponent_name: string | null;
     recorded_at: number;
   };
 
   let toastVisible = false;
-  let toastText = '';
+  let toastText = "";
   let toastTimeout: ReturnType<typeof setTimeout> | null = null;
   let toastPollInterval: ReturnType<typeof setInterval> | null = null;
   let toastRotateInterval: ReturnType<typeof setInterval> | null = null;
@@ -322,18 +327,20 @@
   let toastIndex = 0;
 
   function fmtDurationShort(s: number | null): string {
-    if (s == null) return '';
+    if (s == null) return "";
     const m = Math.floor(s / 60);
     const sec = s % 60;
     if (m === 0) return ` in ${sec}s`;
-    return ` in ${m}m ${sec.toString().padStart(2, '0')}s`;
+    return ` in ${m}m ${sec.toString().padStart(2, "0")}s`;
   }
 
   function buildToastText(ev: StatEvent): string {
-    if (ev.event_type === 'tutorial_complete') {
+    if (ev.event_type === "tutorial_complete") {
       return `${ev.player_name} completed the tutorial${fmtDurationShort(ev.duration_s)}`;
     }
-    const opp = ev.opponent_name ? ` defeated ${ev.opponent_name}` : ' won a match';
+    const opp = ev.opponent_name
+      ? ` defeated ${ev.opponent_name}`
+      : " won a match";
     return `${ev.player_name}${opp}${fmtDurationShort(ev.duration_s)}`;
   }
 
@@ -341,7 +348,9 @@
     toastText = text;
     toastVisible = true;
     if (toastTimeout) clearTimeout(toastTimeout);
-    toastTimeout = setTimeout(() => { toastVisible = false; }, 5000);
+    toastTimeout = setTimeout(() => {
+      toastVisible = false;
+    }, 5000);
   }
 
   function rotateToast() {
@@ -364,7 +373,9 @@
         toastIndex = 0;
         showToast(buildToastText(events[0]));
       }
-    } catch { /* silent */ }
+    } catch {
+      /* silent */
+    }
   }
 
   function startToastSystem() {
@@ -390,22 +401,32 @@
   }
 
   // Observe modal
-  type PlayingRoom = { room_id: string; player1: string; player2: string; elapsed: number };
+  type PlayingRoom = {
+    room_id: string;
+    player1: string;
+    player2: string;
+    elapsed: number;
+  };
   let observeModalOpen = false;
   let playingRooms: PlayingRoom[] = [];
   let observeElapsedInterval: ReturnType<typeof setInterval> | null = null;
 
   function formatElapsed(seconds: number): string {
-    const m = Math.floor(seconds / 60).toString().padStart(2, '0');
-    const s = (seconds % 60).toString().padStart(2, '0');
+    const m = Math.floor(seconds / 60)
+      .toString()
+      .padStart(2, "0");
+    const s = (seconds % 60).toString().padStart(2, "0");
     return `${m}:${s}`;
   }
 
   function openObserveModal() {
-    socket.emit('get_playing_rooms', {});
+    socket.emit("get_playing_rooms", {});
     observeModalOpen = true;
     observeElapsedInterval = setInterval(() => {
-      playingRooms = playingRooms.map((r) => ({ ...r, elapsed: r.elapsed + 1 }));
+      playingRooms = playingRooms.map((r) => ({
+        ...r,
+        elapsed: r.elapsed + 1,
+      }));
     }, 1000);
   }
 
@@ -420,7 +441,7 @@
 
   function observeRoom(room_id: string) {
     closeObserveModal();
-    socket.emit('observe', { room_id });
+    socket.emit("observe", { room_id });
   }
 </script>
 
@@ -645,10 +666,17 @@
 
 {#if toastVisible}
   <!-- svelte-ignore a11y-click-events-have-key-events a11y-no-static-element-interactions -->
-  <div class="activity-toast" on:click={() => (toastVisible = false)} role="status" aria-live="polite">
+  <div
+    class="activity-toast"
+    on:click={() => (toastVisible = false)}
+    role="status"
+    aria-live="polite"
+  >
     <span class="activity-toast-icon">🎮</span>
     <span class="activity-toast-text">{toastText}</span>
-    <a href="/leaderboard" class="activity-toast-link" on:click|stopPropagation>View →</a>
+    <a href="/leaderboard" class="activity-toast-link" on:click|stopPropagation
+      >View →</a
+    >
   </div>
 {/if}
 
@@ -656,8 +684,16 @@
   <!-- svelte-ignore a11y-click-events-have-key-events a11y-no-static-element-interactions -->
   <div class="obs-backdrop" on:click={closeObserveModal}>
     <!-- svelte-ignore a11y-click-events-have-key-events a11y-no-noninteractive-element-interactions -->
-    <div class="obs-modal" on:click|stopPropagation role="dialog" aria-modal="true" aria-label="Select a match to observe">
-      <button class="obs-close" on:click={closeObserveModal} aria-label="Close">✕</button>
+    <div
+      class="obs-modal"
+      on:click|stopPropagation
+      role="dialog"
+      aria-modal="true"
+      aria-label="Select a match to observe"
+    >
+      <button class="obs-close" on:click={closeObserveModal} aria-label="Close"
+        >✕</button
+      >
       <h2 class="obs-title">Live Matches</h2>
       {#if playingRooms.length === 0}
         <p class="obs-empty">No matches available right now.</p>
@@ -672,7 +708,10 @@
               </div>
               <div class="obs-meta">
                 <span class="obs-timer">{formatElapsed(room.elapsed)}</span>
-                <button class="btn btn-observe obs-watch-btn" on:click={() => observeRoom(room.room_id)}>Watch</button>
+                <button
+                  class="btn btn-observe obs-watch-btn"
+                  on:click={() => observeRoom(room.room_id)}>Watch</button
+                >
               </div>
             </li>
           {/each}
@@ -1471,7 +1510,6 @@
     font-size: 0.82rem;
   }
 
-
   /* Activity toast notification */
   .activity-toast {
     position: fixed;
@@ -1493,8 +1531,14 @@
     animation: toastIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
   }
   @keyframes toastIn {
-    from { opacity: 0; transform: translateY(-16px); }
-    to   { opacity: 1; transform: translateY(0); }
+    from {
+      opacity: 0;
+      transform: translateY(-16px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
   }
   .activity-toast-icon {
     font-size: 1rem;
@@ -1515,5 +1559,7 @@
     white-space: nowrap;
     transition: color 0.15s;
   }
-  .activity-toast-link:hover { color: #c4b5fd; }
+  .activity-toast-link:hover {
+    color: #c4b5fd;
+  }
 </style>