Tier 7: bring controls & UX up to RTS standard

Controls (input.js / commands.js):
- Control groups: Shift+1–9 bind, 1–9 recall (Ctrl+digit is the browser's own
tab-switch shortcut, so Shift is the conflict-free bind modifier; matched on
physical key code so it works with Shift held).
- Stop (X) drops orders + queued waypoints; Select Army (Q); Idle Worker (`)
cycles to and centres on the next idle gatherer.
- Ctrl+drag/click adds to the current selection; double-click selects every
on-screen unit of that type.
- Edge scroll: cursor at a canvas edge pans the camera.
- Right-click the minimap to order the selection there (move / attack-move)
without scrolling the main view first.

HUD & readability (main.js / render.js / style.css):
- Unaffordable produce/build/research buttons grey out and play the denied
buzz on click instead of failing silently; buttons carry stat tooltips.
- Selected units/buildings keep their health bar even at full HP, and the bar
now has three colour bands (green/amber/red) rather than a green/red flip.
- A controls legend and Idle Worker / Select Army buttons in the empty panel.

Verified in-browser: full control-key sweep throws nothing, and group
bind/recall round-trips a selection. 189 tests still pass.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01AEQUVetLk31Jj7niDQAsXL

engine/commands.js

@@ -88,6 +88,14 @@ export function issueAssistBuild(units, buildingId, queue = false) {
   units.forEach(u => { if (u.cargo) dispatch(u, { type: "build", buildingId }, queue); });
 }
 
+// Halt: drop the active order and any queued waypoints so the unit stops
+// where it stands. A combat unit still defends itself (it re-auto-acquires an
+// enemy that wanders into range next tick), but it won't chase or resume a
+// path — the standard RTS "stop" that pulls a unit out of a move or a chain.
+export function issueStop(units) {
+  units.forEach(u => { u.order = null; u.orderQueue = []; });
+}
+
 // Every unit the building produces from now on walks to this point
 // instead of wherever the old rally was — production.js reads
 // building.rally fresh at spawn time, so this takes effect immediately

input.js

@@ -8,15 +8,16 @@
 
 "use strict";
 
-import { issueMove, issueGather, issueAttack, issueAttackMove, issueBuild, issueAssistBuild, issueSetRally } from "./engine/commands.js";
+import { issueMove, issueGather, issueAttack, issueAttackMove, issueBuild, issueAssistBuild, issueSetRally, issueStop } from "./engine/commands.js";
 import { UNITS, BUILDINGS } from "./engine/entities.js";
 import { isVisibleAt, isNodeDiscovered } from "./engine/fog.js";
-import { createCamera, screenToWorld, zoomAt, panCamera } from "./camera.js";
+import { createCamera, screenToWorld, zoomAt, panCamera, clampCamera } from "./camera.js";
 
 const CLICK_THRESHOLD = 4;
 const UNIT_PICK_RADIUS = 10;
 const NODE_PICK_RADIUS = 14;
 const ZOOM_STEP = 1.12;
+const EDGE_SCROLL_MARGIN = 20;   // px from a canvas edge that starts scrolling the camera
 const PAN_KEYS = {
   arrowleft: [-1, 0], a: [-1, 0],
   arrowright: [1, 0], d: [1, 0],
@@ -33,6 +34,9 @@ export function attachInput(canvas, state, onChange) {
   let dragBox = null;
   let buildMode = null;
   let lastWorldPos = { x: state.map.width / 2, y: state.map.height / 2 };
+  const groups = new Map();          // control groups: digit -> [unit ids]
+  let idleCycle = 0;                 // round-robins through idle workers on repeated presses
+  let edgePan = [0, 0];              // camera nudge from the cursor sitting at a screen edge
 
   function viewport() {
     return { vw: canvas.clientWidth, vh: canvas.clientHeight };
@@ -70,26 +74,61 @@ export function attachInput(canvas, state, onChange) {
 
   canvas.addEventListener("mousemove", e => {
     lastWorldPos = toWorld(e.clientX, e.clientY);   // tracked continuously for the build-placement ghost
+    // Edge scroll: cursor within a margin of a canvas edge nudges the camera
+    // that way, so you can drag the view without touching the keyboard.
+    const rect = canvas.getBoundingClientRect();
+    const lx = e.clientX - rect.left, ly = e.clientY - rect.top;
+    edgePan = [
+      lx < EDGE_SCROLL_MARGIN ? -1 : lx > rect.width - EDGE_SCROLL_MARGIN ? 1 : 0,
+      ly < EDGE_SCROLL_MARGIN ? -1 : ly > rect.height - EDGE_SCROLL_MARGIN ? 1 : 0,
+    ];
     if (!dragBox) return;
     dragBox.x2 = lastWorldPos.x;
     dragBox.y2 = lastWorldPos.y;
   }, { signal });
+  canvas.addEventListener("mouseleave", () => { edgePan = [0, 0]; }, { signal });
 
   window.addEventListener("mouseup", e => {
     if (e.button !== 0 || !dragBox) return;
     const box = dragBox;
     dragBox = null;
+    // Ctrl (the game's modifier — see the waypoint note below) adds to the
+    // current selection instead of replacing it, so you can pull several groups
+    // together. An empty additive click leaves the selection untouched.
+    const additive = e.ctrlKey;
     const dx = Math.abs(box.x2 - box.x1), dy = Math.abs(box.y2 - box.y1);
+    let picks;
     if (dx < CLICK_THRESHOLD && dy < CLICK_THRESHOLD) {
       const hit = entityAt(box.x1, box.y1);
-      state.selection = hit && hit.owner === "player" ? [hit.id] : [];
+      picks = hit && hit.owner === "player" ? [hit.id] : [];
     } else {
       const x1 = Math.min(box.x1, box.x2), x2 = Math.max(box.x1, box.x2);
       const y1 = Math.min(box.y1, box.y2), y2 = Math.max(box.y1, box.y2);
-      state.selection = [...state.units.values()]
+      picks = [...state.units.values()]
         .filter(u => u.owner === "player" && u.x >= x1 && u.x <= x2 && u.y >= y1 && u.y <= y2)
         .map(u => u.id);
     }
+    if (additive) {
+      if (picks.length) state.selection = [...new Set([...state.selection, ...picks])];
+    } else {
+      state.selection = picks;
+    }
+    onChange();
+  }, { signal });
+
+  // Double-click a unit to grab every same-type unit of yours currently on
+  // screen — the standard "select all of this type" gesture.
+  canvas.addEventListener("dblclick", e => {
+    const p = toWorld(e.clientX, e.clientY);
+    const hit = entityAt(p.x, p.y);
+    if (!hit || hit.owner !== "player" || hit.kind !== "unit") return;
+    const { vw, vh } = viewport();
+    const tl = screenToWorld(camera, vw, vh, 0, 0);
+    const br = screenToWorld(camera, vw, vh, vw, vh);
+    state.selection = [...state.units.values()]
+      .filter(u => u.owner === "player" && u.type === hit.type
+        && u.x >= tl.x && u.x <= br.x && u.y >= tl.y && u.y <= br.y)
+      .map(u => u.id);
     onChange();
   }, { signal });
 
@@ -164,7 +203,63 @@ export function attachInput(canvas, state, onChange) {
     zoomAt(camera, state.map, vw, vh, e.clientX - rect.left, e.clientY - rect.top, e.deltaY < 0 ? ZOOM_STEP : 1 / ZOOM_STEP);
   }, { signal, passive: false });
 
-  window.addEventListener("keydown", e => heldKeys.add(e.key.toLowerCase()), { signal });
+  function alivePlayerUnitIds(ids) {
+    return ids.filter(id => { const u = state.units.get(id); return u && u.owner === "player"; });
+  }
+  function selectedUnits() {
+    return state.selection.map(id => state.units.get(id)).filter(Boolean);
+  }
+  function centerCamera(x, y) {
+    const { vw, vh } = viewport();
+    camera.x = x; camera.y = y;
+    clampCamera(camera, state.map, vw, vh);
+  }
+  function recallGroup(digit) {
+    const ids = alivePlayerUnitIds(groups.get(digit) || []);
+    if (ids.length) state.selection = ids;
+  }
+  function stopSelected() {
+    issueStop(selectedUnits());
+  }
+  function selectAllArmy() {
+    state.selection = [...state.units.values()]
+      .filter(u => u.owner === "player" && UNITS[u.type].role === "combat")
+      .map(u => u.id);
+  }
+  // Cycle to the next worker of yours that's sitting idle (no order, no queued
+  // waypoints) — selecting it and centering the camera on it, so a stalled
+  // gatherer on a big map is one keypress away instead of a manual hunt.
+  function focusIdleWorker() {
+    const idle = [...state.units.values()].filter(u =>
+      u.owner === "player" && u.type === "worker" && !u.order && (!u.orderQueue || !u.orderQueue.length));
+    if (!idle.length) return;
+    const w = idle[idleCycle % idle.length];
+    idleCycle++;
+    state.selection = [w.id];
+    centerCamera(w.x, w.y);
+    onChange();
+  }
+
+  window.addEventListener("keydown", e => {
+    const k = e.key.toLowerCase();
+    heldKeys.add(k);   // still feeds the WASD/arrow camera pan
+    if (e.repeat) return;
+    // Match on e.code, not e.key: with Shift held the number row's e.key becomes
+    // "!@#…", so only the physical Digit1–9 code is reliable for the bind case.
+    const digit = /^Digit([1-9])$/.exec(e.code);
+    if (digit) {
+      // Shift+digit binds the current selection to a control group; a plain
+      // digit recalls it. (Ctrl+digit is the browser's own tab-switch shortcut
+      // and can't be reliably suppressed, so Shift is the bind modifier here.)
+      if (e.shiftKey) groups.set(digit[1], [...state.selection]);
+      else recallGroup(digit[1]);
+      onChange();
+      return;
+    }
+    if (k === "x") { stopSelected(); onChange(); return; }
+    if (k === "q") { selectAllArmy(); onChange(); return; }
+    if (k === "`") { focusIdleWorker(); return; }   // it calls onChange itself
+  }, { signal });
   window.addEventListener("keyup", e => heldKeys.delete(e.key.toLowerCase()), { signal });
 
   // Only exits build mode on an actual successful placement -- an
@@ -186,8 +281,11 @@ export function attachInput(canvas, state, onChange) {
     get building() { return buildMode; },
     getBuildGhost() { return buildMode ? { buildingType: buildMode.buildingType, x: lastWorldPos.x, y: lastWorldPos.y } : null; },
     getCamera: () => camera,
+    focusIdleWorker,
+    selectAllArmy: () => { selectAllArmy(); onChange(); },
+    stopSelected: () => { stopSelected(); onChange(); },
     tickCamera(dt) {
-      let dx = 0, dy = 0;
+      let dx = edgePan[0], dy = edgePan[1];
       for (const key of heldKeys) {
         const dir = PAN_KEYS[key];
         if (dir) { dx += dir[0]; dy += dir[1]; }

main.js

@@ -10,8 +10,9 @@ import { createGameState } from "./engine/state.js";
 import { createLoop } from "./engine/loop.js";
 import { tick } from "./engine/sim.js";
 import { queueProduction, cancelProduction, researchUpgrade } from "./engine/production.js";
+import { issueMove, issueAttackMove } from "./engine/commands.js";
 import { supplyUsed, supplyCap } from "./engine/supply.js";
-import { BUILDINGS, UNITS, UPGRADES } from "./engine/entities.js";
+import { BUILDINGS, UNITS, UPGRADES, canAfford } from "./engine/entities.js";
 import { archetypeFor, PLANET_ARCHETYPE } from "./engine/aiArchetypes.js";
 import { PLANET_MODIFIERS } from "./engine/map.js";
 import { PLANETS } from "./data.js";
@@ -93,6 +94,22 @@ minimapCanvas.addEventListener("click", e => {
   clampCamera(camera, state.map, canvas.clientWidth, canvas.clientHeight);
 });
 
+// Right-click the minimap to command the current selection to that spot without
+// scrolling the main view first — move for workers, attack-move for combat, so
+// you can respond to a raid on a far flank straight from the map.
+minimapCanvas.addEventListener("contextmenu", e => {
+  e.preventDefault();
+  if (!state || !input) return;
+  const rect = minimapCanvas.getBoundingClientRect();
+  const world = minimapToWorld(state.map, MINIMAP_W, MINIMAP_H, e.clientX - rect.left, e.clientY - rect.top);
+  const selected = state.selection.map(id => state.units.get(id)).filter(Boolean);
+  if (!selected.length) return;
+  const combatants = selected.filter(u => UNITS[u.type].role === "combat");
+  const others = selected.filter(u => UNITS[u.type].role !== "combat");
+  if (combatants.length) issueAttackMove(combatants, world.x, world.y);
+  if (others.length) issueMove(others, world.x, world.y);
+});
+
 // Splash-screen game setup, carried across "choose another battlefield"
 // restarts. sizeMult scales the map (map.js); resourceMult scales every
 // deposit's amount; aiApm caps the opponent's actions per minute (ai.js).
@@ -449,6 +466,9 @@ function rebuildSelectionPanel(sel) {
     hint.className = "hint";
     hint.textContent = "Drag-select units, or click a building.";
     panelEl.appendChild(hint);
+    panelEl.appendChild(makeButton("Idle Worker ( ` )", () => input.focusIdleWorker()));
+    panelEl.appendChild(makeButton("Select Army ( Q )", () => input.selectAllArmy()));
+    panelEl.appendChild(controlsLegend());
     return;
   }
 
@@ -473,16 +493,17 @@ function rebuildSelectionPanel(sel) {
 
   const cc = sel.find(e => e.kind === "building" && e.type === "command" && !e.constructing);
   if (cc) {
-    panelEl.appendChild(makeButton(`Produce Worker (${UNITS.worker.cost.ore} ore)`, () => queueProduction(state, cc.id, "worker")));
+    panelEl.appendChild(makeButton(`Produce Worker (${UNITS.worker.cost.ore} ore)`,
+      () => queueProduction(state, cc.id, "worker"), { cost: UNITS.worker.cost, tip: unitTip(UNITS.worker) }));
     if (cc.queue.length) renderQueueRows(cc);
   }
 
   const barracks = sel.find(e => e.kind === "building" && e.type === "barracks" && !e.constructing);
   if (barracks) {
-    panelEl.appendChild(makeButton(`Produce Skiff (${UNITS.skiff.cost.ore} ore)`, () => queueProduction(state, barracks.id, "skiff")));
-    panelEl.appendChild(makeButton(`Produce Bastion (${UNITS.bastion.cost.ore} ore)`, () => queueProduction(state, barracks.id, "bastion")));
-    panelEl.appendChild(makeButton(`Produce Lancer (${UNITS.lancer.cost.ore} ore)`, () => queueProduction(state, barracks.id, "lancer")));
-    panelEl.appendChild(makeButton(`Produce Breacher (${costText(UNITS.breacher.cost)})`, () => queueProduction(state, barracks.id, "breacher")));
+    for (const t of ["skiff", "bastion", "lancer", "breacher"]) {
+      panelEl.appendChild(makeButton(`Produce ${UNITS[t].name} (${costText(UNITS[t].cost)})`,
+        () => queueProduction(state, barracks.id, t), { cost: UNITS[t].cost, tip: unitTip(UNITS[t]) }));
+    }
     if (barracks.queue.length) renderQueueRows(barracks);
   }
 
@@ -496,18 +517,22 @@ function rebuildSelectionPanel(sel) {
         row.textContent = `${u.name} — researched`;
         panelEl.appendChild(row);
       } else {
-        panelEl.appendChild(makeButton(`Research ${u.name} (${costText(u.cost)})`, () => researchUpgrade(state, refinery.id, u.id)));
+        panelEl.appendChild(makeButton(`Research ${u.name} (${costText(u.cost)})`,
+          () => researchUpgrade(state, refinery.id, u.id), { cost: u.cost, tip: u.desc }));
       }
     });
   }
 
   const worker = sel.find(e => e.kind === "unit" && e.type === "worker");
   if (worker && !input.building) {
-    panelEl.appendChild(makeButton(`Build Barracks (${BUILDINGS.barracks.cost.ore} ore)`, () => input.startBuild("barracks")));
-    panelEl.appendChild(makeButton(`Build Refinery (${BUILDINGS.refinery.cost.ore} ore)`, () => input.startBuild("refinery")));
-    panelEl.appendChild(makeButton(`Build Turret (${costText(BUILDINGS.turret.cost)})`, () => input.startBuild("turret")));
-    panelEl.appendChild(makeButton(`Build Habitat (${BUILDINGS.habitat.cost.ore} ore)`, () => input.startBuild("habitat")));
-    panelEl.appendChild(makeButton(`Build Command Center (${BUILDINGS.command.cost.ore} ore)`, () => input.startBuild("command")));
+    for (const t of ["barracks", "refinery", "turret", "habitat", "command"]) {
+      panelEl.appendChild(makeButton(`Build ${BUILDINGS[t].name} (${costText(BUILDINGS[t].cost)})`,
+        () => input.startBuild(t), { cost: BUILDINGS[t].cost, tip: unitTip(BUILDINGS[t]) }));
+    }
+  }
+
+  if (sel.some(e => e.kind === "unit")) {
+    panelEl.appendChild(makeButton("Stop ( X )", () => input.stopSelected()));
   }
 
   if (input.building) {
@@ -534,14 +559,52 @@ function costText(cost) {
   return Object.entries(cost).map(([com, qty]) => `${qty} ${com}`).join(", ");
 }
 
-function makeButton(label, onClick) {
+// A compact keyboard/mouse reference, shown when nothing is selected so the
+// controls aren't hidden knowledge.
+function controlsLegend() {
+  const box = document.createElement("div");
+  box.className = "legend";
+  box.innerHTML = [
+    ["Left-drag", "select · Ctrl+drag adds"],
+    ["Right-click", "move / attack / gather"],
+    ["Ctrl+right", "queue a waypoint"],
+    ["Shift+1–9", "set group · 1–9 recall"],
+    ["Double-click", "select all of that type"],
+    ["Q", "select army · X stop · ` idle worker"],
+    ["Minimap", "left jumps · right orders"],
+    ["Wheel", "zoom · WASD / edge scroll to pan"],
+  ].map(([k, v]) => `<div class="legend-row"><span class="legend-key">${k}</span><span>${v}</span></div>`).join("");
+  return box;
+}
+
+// A build/produce/research button. When `cost` is given and the player can't
+// afford it, the button greys out and a click just plays the denied buzz — so a
+// broke click gives feedback instead of silently doing nothing (previously the
+// only "can't" feedback was the supply block). `tip` becomes a hover tooltip.
+function makeButton(label, onClick, { cost = null, tip = null } = {}) {
   const btn = document.createElement("button");
   btn.className = "btn";
   btn.textContent = label;
-  btn.addEventListener("click", () => { onClick(); renderHUD(); });
+  if (tip) btn.title = tip;
+  const affordable = !cost || canAfford(state.players.player.resources, cost);
+  if (!affordable) {
+    btn.classList.add("disabled");
+    btn.addEventListener("click", () => sound.playProductionBlocked());
+  } else {
+    btn.addEventListener("click", () => { onClick(); renderHUD(); });
+  }
   return btn;
 }
 
+// A compact stat line for a unit/building button tooltip.
+function unitTip(def) {
+  const bits = [`${def.hp} hp`];
+  if (def.attack) bits.push(`${def.attack} dmg`, `rng ${def.range}`);
+  if (def.speed) bits.push(`spd ${def.speed}`);
+  if (def.supplyCost) bits.push(`${def.supplyCost} supply`);
+  return bits.join(" · ");
+}
+
 function showGameOver(winner) {
   if (winner === "player") sound.playVictory(); else sound.playDefeat();
 

render.js

@@ -266,6 +266,7 @@ function drawGasNode(ctx, n, r) {
 /* ---------- buildings ---------- */
 
 function drawBuildings(ctx, state, view) {
+  const selSet = new Set(state.selection);
   for (const b of state.buildings.values()) {
     if (view && !inView(view, b.x, b.y, b.radius + 12)) continue;   // off-screen (pad for the hp bar above it)
     if (b.owner !== "player" && !isVisibleAt(state.fog, b.x, b.y)) continue;
@@ -279,7 +280,7 @@ function drawBuildings(ctx, state, view) {
     else if (b.type === "habitat") drawHabitat(ctx, b, color);
 
     ctx.globalAlpha = 1;
-    drawHealthBar(ctx, b.x, b.y - b.radius - 8, b.radius * 2, b.hp, b.maxHp);
+    drawHealthBar(ctx, b.x, b.y - b.radius - 8, b.radius * 2, b.hp, b.maxHp, selSet.has(b.id));
   }
 }
 
@@ -451,6 +452,7 @@ function turretFacing(state, b) {
 /* ---------- units ---------- */
 
 function drawUnits(ctx, state, view) {
+  const selSet = new Set(state.selection);
   for (const u of state.units.values()) {
     if (view && !inView(view, u.x, u.y, 16)) continue;   // off-screen unit
     if (u.owner !== "player" && !isVisibleAt(state.fog, u.x, u.y)) continue;
@@ -477,7 +479,7 @@ function drawUnits(ctx, state, view) {
       ctx.fillStyle = "#ffd166";
       ctx.fill();
     }
-    drawHealthBar(ctx, u.x, u.y - def.radius - 9, 16, u.hp, u.maxHp);
+    drawHealthBar(ctx, u.x, u.y - def.radius - 9, 16, u.hp, u.maxHp, selSet.has(u.id));
   }
 }
 
@@ -740,12 +742,16 @@ function drawBuildGhost(ctx, state, ghost) {
   ctx.strokeRect(ghost.x - def.radius, ghost.y - def.radius, def.radius * 2, def.radius * 2);
 }
 
-function drawHealthBar(ctx, cx, y, w, hp, maxHp) {
-  if (hp >= maxHp) return;
+// `force` keeps the bar visible at full health for a selected entity, so you
+// can confirm your army's condition at a glance instead of it vanishing the
+// moment it's topped off. Three colour bands (green / amber / red) so the
+// health tier reads without relying on the green-vs-red distinction alone.
+function drawHealthBar(ctx, cx, y, w, hp, maxHp, force = false) {
+  if (hp >= maxHp && !force) return;
   const pct = Math.max(0, hp / maxHp);
   ctx.fillStyle = "#243162";
   ctx.fillRect(cx - w / 2, y, w, 3);
-  ctx.fillStyle = pct > 0.4 ? "#4ade80" : "#f87171";
+  ctx.fillStyle = pct > 0.6 ? "#4ade80" : pct > 0.3 ? "#fbbf24" : "#f87171";
   ctx.fillRect(cx - w / 2, y, w * pct, 3);
 }
 

style.css

@@ -194,6 +194,15 @@ html, body {
   cursor: pointer;
 }
 .btn:hover { border-color: var(--accent); color: var(--accent); }
+/* Unaffordable build/produce/research buttons: dimmed and unhoverable-looking,
+   but still clickable so the click can play the "denied" cue (see main.js). */
+.btn.disabled { opacity: 0.45; cursor: not-allowed; }
+.btn.disabled:hover { border-color: var(--border); color: var(--text); }
+
+/* Controls reference shown in the empty selection panel. */
+.legend { margin-top: 14px; border-top: 1px solid var(--border); padding-top: 10px; }
+.legend-row { display: flex; gap: 8px; font-size: 0.74rem; color: var(--muted); padding: 2px 0; }
+.legend-key { flex: 0 0 88px; color: var(--accent); }
 
 .overlay {
   position: absolute;