Win: capture Babylon or remove all bot pieces.
`;
+}
+
+function queueCityProduction(itemId) {
+ if (S.phase === 'gameover') return;
+ const city = S.cities.find(c => c.owner === 'player');
+ if (!city) return;
+ const item = enqueueProduction(city.productionQueue, itemId).items.at(-1);
+ log(`${city.name} queued ${item.label}`, 'build');
+ updateProductionPanel();
+}
+
// ─── City management panel ──────────────────────────
function updateCityPanel() {
const city = S.cities.find(c => c.owner === 'player');
@@ -2208,6 +2281,7 @@ function handleClick(tx, ty) {
claimTerritory(S.map, S.cities);
updateHud();
updateCityPanel();
+ updateProductionPanel();
playAudioEvent(AUDIO_EVENTS.build);
log(`Captured ${cap.name}!`, 'build');
checkWin();
@@ -2280,6 +2354,8 @@ document.getElementById('btnCenter').addEventListener('click', () => {
centerOn(u.x, u.y);
}
});
+document.getElementById('btnQueueWarrior')?.addEventListener('click', () => queueCityProduction('warrior'));
+document.getElementById('btnQueueScout')?.addEventListener('click', () => queueCityProduction('scout'));
dom.btnStartSetup?.addEventListener('click', () => applyGameSetup());
renderSetupRoster();
dom.cityDet.addEventListener('click', e => {
@@ -2295,6 +2371,7 @@ dom.cityDet.addEventListener('click', e => {
log(`Cannot build ${CITY_BUILDINGS[btn.dataset.building]?.name || 'building'}: ${result.reason}.`, 'combat');
}
updateCityPanel();
+ updateProductionPanel();
});
dom.tradeBtn.addEventListener('click', openTradeRoute);
document.getElementById('btnHelp').addEventListener('click', () => setTutorial());
@@ -2392,5 +2469,7 @@ function gameLoop(now) {
updateEmpireHud();
renderEventPanel();
updateTechPanel();
+ updateCityPanel();
+ updateProductionPanel();
requestAnimationFrame(gameLoop);
})();
diff --git a/demo/civ-lite/index.html b/demo/civ-lite/index.html
index 5c67676..3cafe85 100644
--- a/demo/civ-lite/index.html
+++ b/demo/civ-lite/index.html
@@ -93,6 +93,15 @@
Context
diff --git a/demo/civ-lite/production-model.js b/demo/civ-lite/production-model.js
new file mode 100644
index 0000000..7a24449
--- /dev/null
+++ b/demo/civ-lite/production-model.js
@@ -0,0 +1,106 @@
+export const DEFAULT_PRODUCTION_OPTIONS = [
+ { id: 'warrior', label: 'Warrior', cost: 12, unitType: 'warrior' },
+ { id: 'scout', label: 'Scout', cost: 8, unitType: 'scout' },
+];
+
+export function createProductionQueue(options = DEFAULT_PRODUCTION_OPTIONS) {
+ return {
+ options: options.map(option => ({ ...option })),
+ items: [],
+ progress: 0,
+ };
+}
+
+export function enqueueProduction(queue, itemId) {
+ const option = queue.options.find(candidate => candidate.id === itemId);
+ if (!option) throw new Error(`Unknown production item: ${itemId}`);
+ queue.items.push({ ...option });
+ return queue;
+}
+
+export function progressProductionQueue(queue, production) {
+ let available = Math.max(0, production);
+ const completed = [];
+ let nextQueue = {
+ options: queue.options.map(option => ({ ...option })),
+ items: queue.items.map(item => ({ ...item })),
+ progress: queue.progress,
+ };
+
+ while (available > 0 && nextQueue.items.length > 0) {
+ const current = nextQueue.items[0];
+ const remaining = current.cost - nextQueue.progress;
+ if (available < remaining) {
+ nextQueue.progress += available;
+ available = 0;
+ } else {
+ available -= remaining;
+ completed.push(current);
+ nextQueue.items.shift();
+ nextQueue.progress = 0;
+ }
+ }
+
+ return { queue: nextQueue, completed };
+}
+
+export function movementPlanForPath(path, options) {
+ const steps = [];
+ let movementLeft = Math.max(0, options.movementLeft ?? 0);
+ let stopReason = null;
+
+ for (let i = 1; i < path.length; i++) {
+ const tile = path[i];
+ if (options.isBlocked?.(tile)) {
+ stopReason = 'blocked';
+ break;
+ }
+
+ const cost = options.costForTile(tile);
+ if (!Number.isFinite(cost) || cost <= 0) {
+ stopReason = 'impassable';
+ break;
+ }
+
+ if (cost > movementLeft) {
+ stopReason = 'movement';
+ break;
+ }
+
+ steps.push({ ...tile });
+ movementLeft -= cost;
+ }
+
+ return { steps, movementLeft, stopReason };
+}
+
+export function evaluateVictory(state) {
+ const playerPieces = countOwnedPieces(state, 'player');
+ const botPieces = countOwnedPieces(state, 'bot');
+ const playerCities = state.cities.filter(city => city.owner === 'player').length;
+ const botCities = state.cities.filter(city => city.owner === 'bot').length;
+
+ if (botPieces === 0 && playerPieces > 0) {
+ return { phase: 'gameover', winner: 'player', reason: 'conquest' };
+ }
+
+ if (playerPieces === 0 && botPieces > 0) {
+ return { phase: 'gameover', winner: 'bot', reason: 'conquest' };
+ }
+
+ if (botCities === 0 && playerCities > 0) {
+ return { phase: 'gameover', winner: 'player', reason: 'domination' };
+ }
+
+ if (playerCities === 0 && botCities > 0) {
+ return { phase: 'gameover', winner: 'bot', reason: 'domination' };
+ }
+
+ return { phase: 'active', winner: null, reason: null };
+}
+
+function countOwnedPieces(state, owner) {
+ const units = state.units.filter(unit => unit.owner === owner).length;
+ const cities = state.cities.filter(city => city.owner === owner).length;
+ return units + cities;
+}
diff --git a/demo/civ-lite/production-model.test.mjs b/demo/civ-lite/production-model.test.mjs
new file mode 100644
index 0000000..6c4a264
--- /dev/null
+++ b/demo/civ-lite/production-model.test.mjs
@@ -0,0 +1,94 @@
+import test from 'node:test';
+import assert from 'node:assert/strict';
+
+import {
+ createProductionQueue,
+ enqueueProduction,
+ progressProductionQueue,
+ movementPlanForPath,
+ evaluateVictory,
+} from './production-model.js';
+
+test('production queue completes the front item and carries overflow into the next item', () => {
+ const queue = createProductionQueue([
+ { id: 'warrior', label: 'Warrior', cost: 12, unitType: 'warrior' },
+ { id: 'scout', label: 'Scout', cost: 8, unitType: 'scout' },
+ ]);
+
+ const updatedQueue = enqueueProduction(queue, 'warrior');
+ enqueueProduction(updatedQueue, 'scout');
+
+ const result = progressProductionQueue(updatedQueue, 15);
+
+ assert.equal(result.completed.length, 1);
+ assert.equal(result.completed[0].id, 'warrior');
+ assert.equal(result.queue.items[0].id, 'scout');
+ assert.equal(result.queue.progress, 3);
+});
+
+test('movement plan spends terrain costs without entering blocked or unaffordable tiles', () => {
+ const path = [
+ { x: 1, y: 1 },
+ { x: 2, y: 1 },
+ { x: 3, y: 1 },
+ { x: 4, y: 1 },
+ ];
+ const costs = new Map([
+ ['2,1', 1],
+ ['3,1', 2],
+ ['4,1', 1],
+ ]);
+ const occupied = new Set(['4,1']);
+
+ const plan = movementPlanForPath(path, {
+ movementLeft: 3,
+ costForTile: tile => costs.get(`${tile.x},${tile.y}`),
+ isBlocked: tile => occupied.has(`${tile.x},${tile.y}`),
+ });
+
+ assert.deepEqual(plan.steps, [{ x: 2, y: 1 }, { x: 3, y: 1 }]);
+ assert.equal(plan.movementLeft, 0);
+ assert.equal(plan.stopReason, 'blocked');
+});
+
+test('victory evaluation reports conquest and domination states', () => {
+ assert.deepEqual(
+ evaluateVictory({
+ units: [{ owner: 'player' }],
+ cities: [{ owner: 'player' }],
+ }),
+ { phase: 'gameover', winner: 'player', reason: 'conquest' },
+ );
+
+ assert.deepEqual(
+ evaluateVictory({
+ units: [{ owner: 'bot' }],
+ cities: [{ owner: 'bot' }],
+ }),
+ { phase: 'gameover', winner: 'bot', reason: 'conquest' },
+ );
+
+ assert.deepEqual(
+ evaluateVictory({
+ units: [{ owner: 'player' }, { owner: 'bot' }],
+ cities: [{ owner: 'player' }],
+ }),
+ { phase: 'gameover', winner: 'player', reason: 'domination' },
+ );
+
+ assert.deepEqual(
+ evaluateVictory({
+ units: [{ owner: 'player' }, { owner: 'bot' }],
+ cities: [{ owner: 'bot' }],
+ }),
+ { phase: 'gameover', winner: 'bot', reason: 'domination' },
+ );
+
+ assert.deepEqual(
+ evaluateVictory({
+ units: [{ owner: 'player' }, { owner: 'bot' }],
+ cities: [{ owner: 'player' }, { owner: 'bot' }],
+ }),
+ { phase: 'active', winner: null, reason: null },
+ );
+});
diff --git a/demo/civ-lite/styles.css b/demo/civ-lite/styles.css
index 13cdd5c..181dccf 100644
--- a/demo/civ-lite/styles.css
+++ b/demo/civ-lite/styles.css
@@ -333,6 +333,64 @@ main {
.stat-val.hp-mid { color: var(--gold); }
.stat-val.hp-low { color: var(--danger); }
+/* ───── City Production ─────────────────────────── */
+#cityProduction {
+ display: grid;
+ gap: 6px;
+ font-size: 0.76rem;
+}
+
+.city-row,
+.queue-row {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: 8px;
+}
+
+.city-name,
+.queue-name {
+ font-weight: 700;
+ color: var(--text);
+}
+
+.queue-meta {
+ color: var(--dim);
+ white-space: nowrap;
+}
+
+.queue-track {
+ width: 100%;
+ height: 6px;
+ overflow: hidden;
+ border: 1px solid var(--border);
+ border-radius: 999px;
+ background: #0b111b;
+}
+
+.queue-fill {
+ height: 100%;
+ width: var(--pct, 0%);
+ background: linear-gradient(90deg, var(--accent), var(--accent2));
+}
+
+.queue-list {
+ color: var(--dim);
+ line-height: 1.35;
+}
+
+.production-actions {
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ gap: 6px;
+ margin-top: 8px;
+}
+
+.production-actions button {
+ padding: 6px 8px;
+ font-size: 0.76rem;
+}
+
/* ───── Technology ───────────────────────────────── */
#technology {
max-height: 260px;