feat: gadget backpack system — save circuits as items

Add Pokemon-style inventory where players save crafted circuits as
"gadgets" in a backpack. Gadgets can be used on puzzle doors to solve
them by testing their truth table against required outputs.

New files:
- js/world/inventory.js: gadget data model, backpack UI (list with
  scroll, action menu, detail panel), keyboard navigation

Changes:
- Workshop gets "Save as Gadget" button (pink, top-right)
- I key opens backpack overlay in world mode
- Puzzle doors open backpack to select a gadget to try
- HUD shows gadget count instead of old component count
- worldState gains gadgets[] array

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Jose Luis
2026-03-20 17:30:30 +01:00
parent f8aa4e2eab
commit b999fe855a
6 changed files with 633 additions and 18 deletions

View File

@@ -6,6 +6,7 @@ import {
import { worldState } from './worldState.js';
import { getMap, getInteraction, getNPC, getExit, isWall } from './maps.js';
import { updateMovement } from './worldInput.js';
import { drawBackpack, getGadgets } from './inventory.js';
let canvas = null;
let ctx = null;
@@ -138,6 +139,11 @@ export function renderWorld(timestamp) {
// === HUD ===
drawHUD(map);
// === Layer 6: Backpack overlay (on top of everything) ===
if (worldState.mode === 'inventory') {
drawBackpack(ctx, canvas.width, canvas.height);
}
}
function drawHUD(map) {
@@ -155,16 +161,17 @@ function drawHUD(map) {
ctx.textAlign = 'left';
ctx.fillText(`📍 ${mapName}`, 12, 16);
// Inventory
// Gadgets count
const gadgetCount = getGadgets().length;
ctx.fillStyle = '#ff44aa';
ctx.textAlign = 'right';
ctx.fillText(`🔧 Components: ${worldState.inventory.length}`, canvas.width - 12, 16);
ctx.fillText(`🎒 Gadgets: ${gadgetCount}`, canvas.width - 12, 16);
// Controls hint
ctx.fillStyle = '#555';
ctx.textAlign = 'center';
ctx.font = '11px "Segoe UI", system-ui, sans-serif';
ctx.fillText('WASD: Move | E: Interact | TAB: Workshop | F3: Debug', canvas.width / 2, 16);
ctx.fillText('WASD: Move | E: Interact | I: Backpack | TAB: Workshop | F3: Debug', canvas.width / 2, 16);
// Debug legend
if (debugMode) {