Failed to start FactoryForge:\n${err}`;
+});
diff --git a/web/src/styles.css b/web/src/styles.css
new file mode 100644
index 00000000..d1f79e6f
--- /dev/null
+++ b/web/src/styles.css
@@ -0,0 +1,407 @@
+:root {
+ --bg: #12160f;
+ --panel: #1c2418ee;
+ --border: #3d4f32;
+ --text: #e8f0e0;
+ --muted: #9aab8c;
+ --accent: #8bc34a;
+ --danger: #e57373;
+ font-family: "Segoe UI", system-ui, sans-serif;
+}
+
+* { box-sizing: border-box; }
+html, body, #app {
+ margin: 0;
+ width: 100%;
+ height: 100%;
+ overflow: hidden;
+ background: var(--bg);
+ color: var(--text);
+}
+
+#game-canvas {
+ display: none;
+ width: 100%;
+ height: 100%;
+}
+
+#ui-root {
+ position: absolute;
+ inset: 0;
+ pointer-events: none;
+}
+
+.hud-top {
+ pointer-events: auto;
+ display: flex;
+ flex-wrap: wrap;
+ gap: 8px;
+ align-items: center;
+ padding: 8px 12px;
+ background: linear-gradient(180deg, #1a2216cc, transparent);
+}
+
+.brand {
+ font-weight: 700;
+ letter-spacing: 0.04em;
+ color: var(--accent);
+ margin-right: 12px;
+}
+
+.status {
+ font-size: 12px;
+ color: var(--muted);
+ flex: 1;
+ min-width: 200px;
+}
+
+.toolbar button {
+ display: inline-flex;
+ align-items: center;
+ gap: 6px;
+}
+.tb-icon {
+ width: 20px;
+ height: 20px;
+ image-rendering: pixelated;
+ object-fit: contain;
+}
+
+button {
+ pointer-events: auto;
+ background: #2a3524;
+ color: var(--text);
+ border: 1px solid var(--border);
+ border-radius: 4px;
+ padding: 6px 10px;
+ cursor: pointer;
+}
+button:hover { border-color: var(--accent); }
+button:disabled { opacity: 0.5; cursor: default; }
+
+.panel {
+ pointer-events: auto;
+ position: absolute;
+ top: 56px;
+ right: 12px;
+ width: min(420px, 92vw);
+ max-height: calc(100% - 80px);
+ overflow: auto;
+ background: var(--panel);
+ border: 1px solid var(--border);
+ border-radius: 8px;
+ padding: 12px;
+ backdrop-filter: blur(6px);
+}
+
+.panel.hidden, .overlay.hidden, .hidden { display: none !important; }
+
+.panel h3, .panel h4 { margin: 0 0 8px; }
+.list { display: flex; flex-direction: column; gap: 4px; }
+.list-item {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ text-align: left;
+ width: 100%;
+}
+.list-item span { color: var(--muted); font-size: 12px; }
+
+.grid {
+ display: grid;
+ grid-template-columns: repeat(8, 1fr);
+ gap: 4px;
+}
+.slot {
+ background: #0f140c;
+ border: 1px solid var(--border);
+ border-radius: 3px;
+ min-height: 44px;
+ font-size: 10px;
+ padding: 2px;
+ overflow: hidden;
+}
+
+.row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
+
+.help-hint {
+ position: absolute;
+ left: 12px;
+ bottom: 10px;
+ font-size: 12px;
+ color: var(--muted);
+ pointer-events: none;
+}
+
+.overlay {
+ pointer-events: auto;
+ position: absolute;
+ inset: 0;
+ background: #0008;
+ display: grid;
+ place-items: center;
+}
+.modal {
+ background: var(--panel);
+ border: 1px solid var(--border);
+ border-radius: 10px;
+ padding: 20px;
+ max-width: 420px;
+}
+.slot-row { font-size: 13px; padding: 4px 0; border-bottom: 1px solid #2a3524; }
+
+/* —— Splash / Loading Menu —— */
+.loading-menu {
+ position: absolute;
+ inset: 0;
+ z-index: 50;
+ pointer-events: auto;
+}
+.loading-menu.hidden { display: none !important; }
+
+.splash {
+ position: absolute;
+ inset: 0;
+ display: grid;
+ place-items: center;
+ overflow: hidden;
+ background: #0a0e0c;
+}
+.splash-img {
+ position: absolute;
+ inset: 0;
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ opacity: 0.55;
+}
+.splash-overlay {
+ position: relative;
+ text-align: center;
+ z-index: 1;
+ padding: 24px 32px;
+ background: #0a120acc;
+ border: 1px solid #3d4f32;
+ border-radius: 12px;
+ backdrop-filter: blur(6px);
+ animation: splash-in 0.6s ease-out;
+}
+@keyframes splash-in {
+ from { opacity: 0; transform: translateY(10px); }
+ to { opacity: 1; transform: none; }
+}
+.splash-title {
+ font-size: clamp(2rem, 6vw, 3.2rem);
+ font-weight: 800;
+ letter-spacing: 0.06em;
+ color: #c5e1a5;
+ text-shadow: 0 0 40px #8bc34a66;
+}
+.splash-sub {
+ margin-top: 8px;
+ color: #9aab8c;
+ letter-spacing: 0.12em;
+ text-transform: uppercase;
+ font-size: 0.8rem;
+}
+.splash-bar {
+ margin: 20px auto 0;
+ width: 200px;
+ height: 4px;
+ background: #2a3524;
+ border-radius: 2px;
+ overflow: hidden;
+}
+.splash-pct {
+ margin-top: 8px;
+ font-size: 12px;
+ color: #9aab8c;
+}
+.splash-bar span {
+ display: block;
+ height: 100%;
+ width: 0%;
+ background: linear-gradient(90deg, #8bc34a, #cddc39);
+ transition: width 0.1s linear;
+}
+
+.menu-splash-bg {
+ position: absolute;
+ inset: 0;
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ opacity: 0.25;
+ filter: saturate(0.8);
+}
+.menu-header {
+ display: flex;
+ gap: 14px;
+ align-items: center;
+ margin-bottom: 8px;
+}
+.menu-icon {
+ width: 56px;
+ height: 56px;
+ image-rendering: pixelated;
+}
+.menu-btn img {
+ width: 22px;
+ height: 22px;
+ vertical-align: middle;
+ margin-right: 4px;
+ image-rendering: pixelated;
+}
+
+.slot.has-item {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ gap: 2px;
+ padding: 2px;
+}
+.slot.has-item img {
+ width: 28px;
+ height: 28px;
+ object-fit: contain;
+ image-rendering: pixelated;
+}
+.slot.has-item span {
+ font-size: 10px;
+ line-height: 1;
+}
+.slot.empty {
+ color: #3d4f32;
+ display: grid;
+ place-items: center;
+ font-size: 10px;
+}
+
+.build-item {
+ flex-direction: row !important;
+ align-items: center;
+ gap: 10px;
+}
+.build-item img {
+ width: 40px;
+ height: 40px;
+ object-fit: contain;
+ image-rendering: pixelated;
+ flex-shrink: 0;
+}
+.build-item em {
+ font-style: normal;
+ color: var(--muted);
+ font-size: 12px;
+}
+
+.menu-screen {
+ position: absolute;
+ inset: 0;
+ display: grid;
+ place-items: center;
+ padding: 24px;
+}
+.menu-bg {
+ position: absolute;
+ inset: 0;
+ background:
+ radial-gradient(ellipse at 50% 0%, #2d4a2288, transparent 55%),
+ linear-gradient(180deg, #10180e 0%, #0a0e0c 100%);
+}
+.menu-card {
+ position: relative;
+ width: min(520px, 94vw);
+ background: #1a2218ee;
+ border: 1px solid #3d4f32;
+ border-radius: 12px;
+ padding: 28px 24px 24px;
+ box-shadow: 0 20px 60px #000a;
+ backdrop-filter: blur(8px);
+ animation: splash-in 0.45s ease-out;
+}
+.menu-brand {
+ margin: 0;
+ font-size: 2rem;
+ color: #c5e1a5;
+ letter-spacing: 0.04em;
+}
+.menu-tagline {
+ margin: 6px 0 18px;
+ color: #9aab8c;
+ font-size: 0.95rem;
+}
+.menu-saves {
+ max-height: 160px;
+ overflow: auto;
+ background: #0f140c;
+ border: 1px solid #2a3524;
+ border-radius: 8px;
+ padding: 8px;
+ margin-bottom: 14px;
+}
+.menu-empty {
+ margin: 12px;
+ text-align: center;
+ color: #6a7a5a;
+ font-size: 0.9rem;
+}
+.save-slot {
+ display: block;
+ width: 100%;
+ text-align: left;
+ margin-bottom: 4px;
+ background: #24301f;
+}
+.save-slot.selected {
+ border-color: #8bc34a;
+ background: #2e4528;
+}
+.menu-actions, .menu-modes {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 8px;
+ margin-bottom: 12px;
+}
+.menu-btn {
+ flex: 1 1 auto;
+ min-width: 110px;
+ padding: 10px 14px;
+ font-weight: 600;
+}
+.menu-btn.primary {
+ background: #3d6b28;
+ border-color: #8bc34a;
+ color: #e8f5d8;
+}
+.menu-btn.primary:hover {
+ background: #4a7f30;
+}
+.menu-help {
+ position: absolute;
+ inset: 12px;
+ background: #12180fee;
+ border: 1px solid #3d4f32;
+ border-radius: 10px;
+ padding: 16px;
+ overflow: auto;
+}
+.menu-help ul {
+ padding-left: 18px;
+ color: #c5d6b8;
+ line-height: 1.55;
+}
+.menu-help.hidden { display: none !important; }
+
+.hud-shell {
+ position: absolute;
+ inset: 0;
+ pointer-events: none;
+}
+.hud-shell > * { pointer-events: none; }
+.hud-shell .hud-top,
+.hud-shell .panel,
+.hud-shell .overlay,
+.hud-shell button { pointer-events: auto; }
+
diff --git a/web/src/ui/Hud.ts b/web/src/ui/Hud.ts
new file mode 100644
index 00000000..0f4805a1
--- /dev/null
+++ b/web/src/ui/Hud.ts
@@ -0,0 +1,386 @@
+import type { GameLoop } from '../engine/core/GameLoop';
+import type { InputManager } from '../engine/input/InputManager';
+import {
+ inventoryCount,
+ type AssemblerComponent,
+ type InventoryComponent,
+ type PositionComponent,
+} from '../game/components';
+import { listSaves, writeSave, readSave, deleteSave } from '../game/data/SaveStore';
+import { assets } from '../engine/render/AssetCatalog';
+
+export class Hud {
+ root: HTMLElement;
+ private panels: Record${title}
${body}
Inventory
${inv.slots
+ .map((s, i) => {
+ if (!s.itemId) return `
${s.count}`;
+ })
+ .join('')}
`;
+ }
+
+ private renderCraft(): void {
+ const recipes = this.game.recipeRegistry.all.filter(
+ (r) =>
+ (r.category === 'crafting' || r.category === 'smelting') &&
+ (this.game.researchSystem.unlockedRecipes.has(r.id) || r.category === 'smelting'),
+ );
+ this.panels.craft!.innerHTML = `${i}
`;
+ const url = assets.iconUrl(s.itemId);
+ return `Crafting
${recipes
+ .map(
+ (r) =>
+ ``,
+ )
+ .join('')}
`;
+ this.panels.craft!.onclick = (e) => {
+ const btn = (e.target as HTMLElement).closest('[data-recipe]') as HTMLElement | null;
+ if (!btn) return;
+ this.game.queueCraft(btn.dataset.recipe!);
+ };
+ }
+
+ private renderBuild(): void {
+ const unlocked = this.game.researchSystem.unlockedRecipes;
+ const buildings = this.game.buildingRegistry.all.filter(
+ (b) => unlocked.has(b.id) || ['burner-mining-drill', 'stone-furnace', 'transport-belt', 'inserter', 'wooden-chest', 'small-electric-pole', 'pipe', 'boiler', 'steam-engine', 'water-pump', 'lab', 'gun-turret', 'wall', 'stone-wall'].includes(b.id),
+ );
+ this.panels.build!.innerHTML = `Build
Click a building, then LMB to place. R rotates. Right-click cancels.
${buildings
+ .map((b) => {
+ const url = assets.iconUrl(b.id);
+ return ``;
+ })
+ .join('')}
+
+
+
+
`;
+ this.panels.build!.onclick = (e) => {
+ const t = e.target as HTMLElement;
+ const build = t.closest('[data-build]') as HTMLElement | null;
+ if (build) {
+ this.input.buildMode = 'placing';
+ this.input.placeBuildingId = build.dataset.build!;
+ this.hideAll();
+ this.input.focusGame();
+ return;
+ }
+ const mode = t.closest('[data-mode]') as HTMLElement | null;
+ if (mode?.dataset.mode === 'remove') {
+ this.input.buildMode = 'removing';
+ this.input.placeBuildingId = null;
+ this.hideAll();
+ this.input.focusGame();
+ }
+ if (mode?.dataset.mode === 'none') {
+ this.input.buildMode = 'none';
+ this.input.placeBuildingId = null;
+ this.hideAll();
+ this.input.focusGame();
+ }
+ };
+ }
+
+ private renderResearch(): void {
+ const techs = this.game.technologyRegistry.all;
+ this.panels.research!.innerHTML = `Research
Current: ${this.game.researchSystem.currentResearchId ?? 'none'}
${techs
+ .map((t) => {
+ const done = this.game.researchSystem.completed.has(t.id);
+ const prog = this.game.researchSystem.progress.get(t.id) ?? 0;
+ return ``;
+ })
+ .join('')}
`;
+ this.panels.research!.onclick = (e) => {
+ const btn = (e.target as HTMLElement).closest('[data-tech]') as HTMLElement | null;
+ if (!btn) return;
+ this.game.researchSystem.startResearch(btn.dataset.tech!);
+ this.renderResearch();
+ };
+ }
+
+ private renderMenu(): void {
+ const saves = listSaves();
+ this.panels.menu!.innerHTML = `
+ Menu
+
+
+
+
+ Load
+${saves.map((s) => ``).join('') || '
+ No saves
'}Modes
+
+
+
+
+
+ Help
+Launch a rocket with a satellite to win. Automate mining, smelting, power, research, and defense.
+ `; + this.panels.menu!.querySelector('#save-game')!.addEventListener('click', () => { + const slot = `save_${new Date().toISOString().replace(/[:.]/g, '-')}`; + writeSave(slot, this.game.serializeSave()); + this.renderMenu(); + this.showMessage('Saved', slot); + }); + this.panels.menu!.querySelector('#new-game')!.addEventListener('click', () => { + location.reload(); + }); + this.panels.menu!.querySelector('#start-pvai')!.addEventListener('click', () => { + this.game.startPvAI(); + this.showMessage('PvAI', 'AI opponents spawned. Survive and outproduce them.'); + }); + this.panels.menu!.querySelector('#open-lobby')!.addEventListener('click', () => this.toggle('lobby')); + this.panels.menu!.querySelector('#open-autoplay')!.addEventListener('click', () => this.toggle('autoplay')); + this.panels.menu!.onclick = (e) => { + const btn = (e.target as HTMLElement).closest('[data-load]') as HTMLElement | null; + if (!btn) return; + const save = readSave(btn.dataset.load!); + if (save) { + this.game.loadSave(save); + this.showMessage('Loaded', btn.dataset.load!); + } + }; + } + + renderMachine(): void { + const id = this.game.selectedEntities[0]; + if (id === undefined) { + this.panels.machine!.innerHTML = 'Machine
No selection
'; + return; + } + const entity = this.game.world.entities.find((e) => e.id === id); + if (!entity) return; + const sprite = this.game.world.getByName<{ textureId: string }>('sprite', entity); + const inv = this.game.world.getByName${sprite?.textureId ?? 'Machine'}
`; + if (inv) { + html += `${inv.slots
+ .filter((s) => s.itemId)
+ .map((s) => {
+ const url = assets.iconUrl(s.itemId!);
+ return `${s.count}`;
+ })
+ .join('')}
`;
+ }
+ if (asm) {
+ const recipes = this.game.recipeRegistry.byCategory('crafting').slice(0, 30);
+ html += `Recipe: ${asm.recipeId ?? 'none'}
${recipes
+ .map((r) => ``)
+ .join('')}
`;
+ }
+ html += ``;
+ this.panels.machine!.innerHTML = html;
+ this.panels.machine!.querySelector('#rot')?.addEventListener('click', () => this.game.rotateSelected());
+ this.panels.machine!.querySelector('#del')?.addEventListener('click', () => {
+ const pos = this.game.world.getByNameLobby
+Mode: ${this.game.lobby.config.mode}
+
+
+
+
+
+
+
+ `;
+ const renderSlots = () => {
+ this.panels.lobby!.querySelector('#lobby-slots')!.innerHTML = this.game.lobby.slots
+ .map((s) => `${s.slotId}: ${s.name || 'empty'} ${s.isAI ? '(AI)' : ''} ${s.ready ? 'ready' : ''}
`)
+ .join('');
+ };
+ renderSlots();
+ this.panels.lobby!.querySelector('#add-ai')!.addEventListener('click', () => {
+ this.game.lobby.addAI();
+ renderSlots();
+ });
+ this.panels.lobby!.querySelector('#start-match')!.addEventListener('click', () => {
+ this.game.startPvAI();
+ this.showMessage('Match', 'Local PvAI match started');
+ this.hideAll();
+ });
+ this.panels.lobby!.querySelector('#connect-mp')!.addEventListener('click', () => {
+ const url = (this.panels.lobby!.querySelector('#ws-url') as HTMLInputElement).value;
+ this.root.dispatchEvent(new CustomEvent('mp-connect', { detail: url }));
+ });
+ }
+
+ private renderAutoPlay(): void {
+ const scenarios = this.game.autoPlaySystem.listScenarios();
+ this.panels.autoplay!.innerHTML = `AutoPlay
${scenarios
+ .map((s) => ``)
+ .join('')}
+
+
+
+
+
+
+
`;
+ this.panels.autoplay!.onclick = (e) => {
+ const t = e.target as HTMLElement;
+ const sc = t.closest('[data-scenario]') as HTMLElement | null;
+ if (sc) this.game.autoPlaySystem.start(sc.dataset.scenario!);
+ const sp = t.closest('[data-speed]') as HTMLElement | null;
+ if (sp) this.game.setGameSpeed(Number(sp.dataset.speed));
+ if (t.id === 'stop-ap') this.game.autoPlaySystem.stop();
+ };
+ }
+
+ update(): void {
+ const player = this.game.localPlayer;
+ if (!player) return;
+ const pos = this.game.world.getByName
+ 
+
+
+ `;
+ const fill = this.root.querySelector('#splash-fill') as HTMLElement;
+ const pct = this.root.querySelector('#splash-pct') as HTMLElement;
+
+ const start = performance.now();
+ await assets.preload((loaded, total) => {
+ const p = Math.round((loaded / total) * 100);
+ fill.style.width = `${p}%`;
+ fill.style.transform = 'none';
+ fill.style.animation = 'none';
+ pct.textContent = `${p}%`;
+ });
+ this.assetsReady = true;
+
+ // Keep splash visible at least ~1.5s for brand moment
+ const elapsed = performance.now() - start;
+ const wait = Math.max(0, 1500 - elapsed);
+ window.setTimeout(() => this.showMenu(), wait);
+ }
+
+ showMenu(): void {
+ audio.ui();
+ const saves = listSaves();
+ this.root.innerHTML = `
+
+
+
+
+
+
+ `;
+
+ this.root.querySelector('#save-list')?.addEventListener('click', (e) => {
+ const btn = (e.target as HTMLElement).closest('.save-slot') as HTMLElement | null;
+ if (!btn) return;
+ this.root.querySelectorAll('.save-slot').forEach((el) => el.classList.remove('selected'));
+ btn.classList.add('selected');
+ this.selectedSlot = btn.dataset.slot ?? null;
+ audio.ui();
+ });
+
+ this.root.addEventListener('click', (e) => {
+ const btn = (e.target as HTMLElement).closest('[data-act]') as HTMLElement | null;
+ if (!btn) return;
+ if (!this.assetsReady) return;
+ const act = btn.dataset.act;
+ audio.ui();
+ if (act === 'new') this.onAction({ type: 'new' });
+ if (act === 'load' && this.selectedSlot) {
+ const save = readSave(this.selectedSlot);
+ if (save) this.onAction({ type: 'load', save, slot: this.selectedSlot });
+ }
+ if (act === 'delete' && this.selectedSlot) {
+ deleteSave(this.selectedSlot);
+ this.showMenu();
+ }
+ if (act === 'pvai') this.onAction({ type: 'pvai' });
+ if (act === 'pvp') this.onAction({ type: 'pvp' });
+ if (act === 'autoplay') this.onAction({ type: 'autoplay' });
+ if (act === 'help') this.root.querySelector('#menu-help')?.classList.remove('hidden');
+ if (act === 'close-help') this.root.querySelector('#menu-help')?.classList.add('hidden');
+ });
+ }
+
+ hide(): void {
+ this.root.classList.add('hidden');
+ }
+
+ show(): void {
+ this.root.classList.remove('hidden');
+ this.showMenu();
+ }
+
+ destroy(): void {
+ this.root.remove();
+ }
+}
diff --git a/web/src/vite-env.d.ts b/web/src/vite-env.d.ts
new file mode 100644
index 00000000..4c47c68a
--- /dev/null
+++ b/web/src/vite-env.d.ts
@@ -0,0 +1,8 @@
+///
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+
+
+