Cancel Culture

backend/game/buildings.py

@@ -34,12 +34,12 @@ class BuildingDef(BaseModel):
     height: int = 2
     supply_provided: int = 0
     def col_hw(self) -> float:
-        """Half collision width = half the visual half-width (box is 1/2 visual size)."""
-        return max(0.35, self.width / 4)
+        """Half collision width (~1/3 of visual size) so units can pass between adjacent buildings."""
+        return max(0.2, self.width / 6)
 
     def col_hh(self) -> float:
-        """Half collision height = half the visual half-height (box is 1/2 visual size)."""
-        return max(0.35, self.height / 4)
+        """Half collision height (~1/3 of visual size) so units can pass between adjacent buildings."""
+        return max(0.2, self.height / 6)
 
 
 BUILDING_DEFS: dict[BuildingType, BuildingDef] = {

backend/game/engine.py

@@ -1504,6 +1504,49 @@ class GameEngine:
         self.state.winner = opponent_id
         return ActionResult(action_type="resign", success=True, data={})
 
+    def cancel_building_construction(self, player_id: str, building_id: str) -> ActionResult:
+        """Cancel an in-progress construction: remove the building and refund 75% of costs."""
+        player = self.state.players.get(player_id)
+        if not player:
+            return ActionResult(action_type="cancel_construction", success=False, data={"error": "player_not_found"})
+
+        building = player.buildings.get(building_id)
+        if not building:
+            return ActionResult(action_type="cancel_construction", success=False, data={"error": "building_not_found"})
+        if building.status != BuildingStatus.CONSTRUCTING:
+            return ActionResult(action_type="cancel_construction", success=False, data={"error": "not_under_construction"})
+
+        defn = BUILDING_DEFS[building.building_type]
+
+        # Free the SCV assigned to this building
+        for unit in player.units.values():
+            if unit.building_target_id == building_id:
+                unit.building_target_id = None
+                unit.target_x = unit.target_y = None
+                unit.path_waypoints = []
+                unit.status = UnitStatus.IDLE
+
+        # If it's a refinery, mark the underlying geyser as free again
+        if building.building_type == BuildingType.REFINERY:
+            geyser_x = building.x - 1.0
+            geyser_y = building.y - 1.0
+            for resource in self.state.game_map.resources:
+                if resource.resource_type == ResourceType.GEYSER and abs(resource.x - geyser_x) < 0.5 and abs(resource.y - geyser_y) < 0.5:
+                    resource.has_refinery = False
+                    break
+
+        del player.buildings[building_id]
+        invalidate_path_cache()
+
+        # Refund 75% of the original cost (rounded down)
+        player.minerals += int(defn.mineral_cost * 0.75)
+        player.gas += int(defn.gas_cost * 0.75)
+
+        return ActionResult(
+            action_type="cancel_construction", success=True,
+            data={"building": building.building_type.value, "refund_minerals": int(defn.mineral_cost * 0.75), "refund_gas": int(defn.gas_cost * 0.75)},
+        )
+
     # ------------------------------------------------------------------
     # Broadcast
     # ------------------------------------------------------------------

backend/main.py

@@ -953,6 +953,26 @@ async def accept_bot(sid: str, data: dict) -> None:
     await _start_game(room_obj.room_id)
 
 
+@sio.event
+async def cancel_construction(sid: str, data: dict) -> None:
+    """Cancel an in-progress building construction and refund 75% of resources."""
+    room = lobby.get_room_for_sid(sid)
+    if not room:
+        await _emit_error(sid, "Tu n'es dans aucune room.")
+        return
+    engine = engines.get(room.room_id)
+    if not engine:
+        await _emit_error(sid, "La partie n'a pas encore commencé.")
+        return
+    building_id: str = data.get("building_id", "")
+    if not building_id:
+        await _emit_error(sid, "ID de bâtiment manquant.")
+        return
+    result = engine.cancel_building_construction(sid, building_id)
+    if not result.success:
+        await _emit_error(sid, f"Impossible d'annuler: {result.data.get('error', '?')}")
+
+
 @sio.event
 async def start_tutorial(sid: str, data: dict) -> None:
     """Start a solo tutorial game for the player."""

frontend/src/lib/components/HelpModal.svelte

@@ -1,5 +1,8 @@
 <script lang="ts">
   export let open = false;
+  export let builtBuildings: string[] = [];
+
+  $: built = new Set(builtBuildings);
 </script>
 
 {#if open}
@@ -127,14 +130,16 @@
         <h3 class="help-section-title">🏗️ Tech Tree</h3>
         <div class="tech-tree">
           <div class="tech-row">
-            <div class="tech-node tech-start">
+            <div class="tech-node tech-start" class:tech-built={built.has('command_center')}>
+              {#if built.has('command_center')}<span class="tech-check">✓</span>{/if}
               <img class="tech-sprite" src="/sprites/buildings/command_center.png" alt="" />
               Command Center<span class="tech-cost"><img class="cost-icon" src="/sprites/icons/mineral.png" alt="min" />400</span>
             </div>
             <div class="tech-produces">→ <img class="tech-unit-sprite" src="/sprites/units/scv.png" alt="SCV" /> SCV</div>
           </div>
           <div class="tech-row tech-indent">
-            <div class="tech-node">
+            <div class="tech-node" class:tech-built={built.has('supply_depot')}>
+              {#if built.has('supply_depot')}<span class="tech-check">✓</span>{/if}
               <img class="tech-sprite" src="/sprites/buildings/supply_depot.png" alt="" />
               Supply Depot<span class="tech-cost"><img class="cost-icon" src="/sprites/icons/mineral.png" alt="min" />100</span>
             </div>
@@ -143,42 +148,48 @@
             </div>
           </div>
           <div class="tech-row tech-indent2">
-            <div class="tech-node">
+            <div class="tech-node" class:tech-built={built.has('barracks')}>
+              {#if built.has('barracks')}<span class="tech-check">✓</span>{/if}
               <img class="tech-sprite" src="/sprites/buildings/barracks.png" alt="" />
               Barracks<span class="tech-cost"><img class="cost-icon" src="/sprites/icons/mineral.png" alt="min" />150</span>
             </div>
             <div class="tech-produces">→ <img class="tech-unit-sprite" src="/sprites/units/marine.png" alt="Marine" /> Marine</div>
           </div>
           <div class="tech-row tech-indent3">
-            <div class="tech-node">
+            <div class="tech-node" class:tech-built={built.has('engineering_bay')}>
+              {#if built.has('engineering_bay')}<span class="tech-check">✓</span>{/if}
               <img class="tech-sprite" src="/sprites/buildings/engineering_bay.png" alt="" />
               Eng. Bay<span class="tech-cost"><img class="cost-icon" src="/sprites/icons/mineral.png" alt="min" />125</span>
             </div>
             <div class="tech-produces">→ <img class="tech-unit-sprite" src="/sprites/units/medic.png" alt="Medic" /> Medic</div>
           </div>
           <div class="tech-row tech-indent3">
-            <div class="tech-node">
+            <div class="tech-node" class:tech-built={built.has('factory')}>
+              {#if built.has('factory')}<span class="tech-check">✓</span>{/if}
               <img class="tech-sprite" src="/sprites/buildings/factory.png" alt="" />
               Factory<span class="tech-cost"><img class="cost-icon" src="/sprites/icons/mineral.png" alt="min" />200 <img class="cost-icon" src="/sprites/icons/gas.png" alt="gas" />100</span>
             </div>
             <div class="tech-produces">→ <img class="tech-unit-sprite" src="/sprites/units/goliath.png" alt="Goliath" /> Goliath</div>
           </div>
           <div class="tech-row tech-indent4">
-            <div class="tech-node">
+            <div class="tech-node" class:tech-built={built.has('armory')}>
+              {#if built.has('armory')}<span class="tech-check">✓</span>{/if}
               <img class="tech-sprite" src="/sprites/buildings/armory.png" alt="" />
               Armory<span class="tech-cost"><img class="cost-icon" src="/sprites/icons/mineral.png" alt="min" />100 <img class="cost-icon" src="/sprites/icons/gas.png" alt="gas" />50</span>
             </div>
             <div class="tech-produces">→ <img class="tech-unit-sprite" src="/sprites/units/tank.png" alt="Tank" /> Tank</div>
           </div>
           <div class="tech-row tech-indent4">
-            <div class="tech-node">
+            <div class="tech-node" class:tech-built={built.has('starport')}>
+              {#if built.has('starport')}<span class="tech-check">✓</span>{/if}
               <img class="tech-sprite" src="/sprites/buildings/starport.png" alt="" />
               Starport<span class="tech-cost"><img class="cost-icon" src="/sprites/icons/mineral.png" alt="min" />150 <img class="cost-icon" src="/sprites/icons/gas.png" alt="gas" />100</span>
             </div>
             <div class="tech-produces">→ <img class="tech-unit-sprite" src="/sprites/units/wraith.png" alt="Wraith" /> Wraith</div>
           </div>
           <div class="tech-row tech-indent">
-            <div class="tech-node">
+            <div class="tech-node" class:tech-built={built.has('refinery')}>
+              {#if built.has('refinery')}<span class="tech-check">✓</span>{/if}
               <img class="tech-sprite" src="/sprites/buildings/refinery.png" alt="" />
               Refinery<span class="tech-cost"><img class="cost-icon" src="/sprites/icons/mineral.png" alt="min" />100</span>
             </div>
@@ -425,6 +436,19 @@
 
   .tech-start { border-color: var(--accent); color: var(--accent); }
 
+  .tech-built {
+    border-color: rgba(80, 220, 130, 0.6) !important;
+    background: rgba(80, 220, 130, 0.08) !important;
+    color: #50dc82 !important;
+  }
+
+  .tech-check {
+    font-size: 0.75rem;
+    color: #50dc82;
+    font-weight: 700;
+    flex-shrink: 0;
+  }
+
   .tech-cost {
     font-size: 0.7rem;
     color: var(--text-muted);

frontend/src/lib/components/Map.svelte

@@ -792,6 +792,9 @@
     {@const ry = rs?.renderY ?? u.y}
     {@const angle = rs?.angle ?? 0}
     {@const isSelected = u.id === $selectedUnit?.id}
+    {@const isLargeUnit = u.unit_type === 'goliath' || u.unit_type === 'tank' || u.unit_type === 'wraith'}
+    {@const spriteHalf = isLargeUnit ? 0.76 : 0.38}
+    {@const spriteSize = isLargeUnit ? 1.52 : 0.76}
 
     <g transform="translate({rx},{ry})">
       <!-- Selection ring -->
@@ -812,8 +815,8 @@
       <!-- Unit sprite, rotated toward movement direction -->
       <image
         href="{spriteBase}/units/{UNIT_SPRITE[u.unit_type]}"
-        x="-0.38" y="-0.38"
-        width="0.76" height="0.76"
+        x={-spriteHalf} y={-spriteHalf}
+        width={spriteSize} height={spriteSize}
         opacity={u.is_cloaked ? 0.35 : 1}
         preserveAspectRatio="xMidYMid meet"
         transform="rotate({angle})"
@@ -858,7 +861,7 @@
        per-cell rects, works in all environments (no SVG mask url(#id) needed).
        Computed reactively via $: fogRects so viewport panning is always in sync. -->
   {#each fogRects as r}
-    <rect x={r.x} y={r.y} width={r.w} height="1" fill="rgba(0,0,0,{r.opacity})" pointer-events="none" />
+    <rect x={r.x} y={r.y} width={r.w + 0.02} height={1.02} fill="rgba(0,0,0,{r.opacity})" pointer-events="none" shape-rendering="crispEdges" />
   {/each}
 
   <!-- Tutorial target beacon (rendered above fog so it's always visible) -->

frontend/src/lib/components/UnitPanel.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { selectedUnit, selectedBuilding, myPlayerId } from '$lib/stores/game';
   import { UNIT_DESCRIPTIONS, BUILDING_LABELS } from '$lib/types';
+  import { getSocket } from '$lib/socket';
 
   $: unit = $selectedUnit;
   $: building = $selectedBuilding;
@@ -42,6 +43,14 @@
   function secFromTicks(t: number) {
     return (t / 4).toFixed(0) + 's';
   }
+
+  const socket = getSocket();
+
+  function cancelConstruction() {
+    if (!building) return;
+    socket.emit('cancel_construction', { building_id: building.id });
+    selectedBuilding.set(null);
+  }
 </script>
 
 {#if isVisible}
@@ -107,6 +116,11 @@
           <span class="stat-label">Building</span>
           <span class="stat-val">{secFromTicks(building.construction_ticks_remaining)} remaining</span>
         </div>
+        {#if isOwn}
+          <button class="cancel-btn" on:click={cancelConstruction}>
+            ✕ Annuler (remb. 75%)
+          </button>
+        {/if}
       {/if}
 
       {#if building.production_queue.length > 0}
@@ -277,4 +291,21 @@
   .queue-icon { font-size: 0.65rem; color: var(--player); }
   .queue-name { flex: 1; font-weight: 600; font-family: var(--font-mono); }
   .queue-time { font-family: var(--font-mono); font-size: 0.75rem; color: var(--supply); }
+
+  .cancel-btn {
+    margin-top: 10px;
+    width: 100%;
+    padding: 8px 12px;
+    background: rgba(248, 81, 73, 0.12);
+    border: 1px solid rgba(248, 81, 73, 0.35);
+    border-radius: var(--radius);
+    color: var(--danger);
+    font-size: 0.8rem;
+    font-weight: 700;
+    cursor: pointer;
+    transition: background 0.15s;
+  }
+  .cancel-btn:hover {
+    background: rgba(248, 81, 73, 0.22);
+  }
 </style>

frontend/src/routes/game/+page.svelte

@@ -147,6 +147,12 @@
   $: myId = $myPlayerId;
   $: isWinner = $winnerId === myId;
 
+  $: myBuiltBuildings = myId && $gameState
+    ? Object.values($gameState.players[myId]?.buildings ?? {})
+        .filter((b: any) => b.status !== 'destroyed')
+        .map((b: any) => b.building_type as string)
+    : [];
+
   let helpOpen = false;
 </script>
 
@@ -203,7 +209,7 @@
   </div>
 </div>
 
-<HelpModal bind:open={helpOpen} />
+<HelpModal bind:open={helpOpen} builtBuildings={myBuiltBuildings} />
 
 <!-- Game over modal -->
 {#if showGameOver}