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
419
js/world/inventory.js
Normal file
419
js/world/inventory.js
Normal file
@@ -0,0 +1,419 @@
|
||||
/**
|
||||
* inventory.js — Gadget backpack system
|
||||
*
|
||||
* A "gadget" is a saved circuit (gates + connections) the player crafted
|
||||
* in the Workshop. Gadgets live in the backpack and can be used on
|
||||
* puzzle doors to solve them.
|
||||
*
|
||||
* Inspired by the Pokemon item/bag menu but adapted for logic circuits.
|
||||
*/
|
||||
|
||||
import { worldState } from './worldState.js';
|
||||
import { TILE_PX } from './sprites.js';
|
||||
|
||||
// ==================== Gadget storage ====================
|
||||
|
||||
/**
|
||||
* Gadget shape:
|
||||
* {
|
||||
* id: string, // sanitized unique ID
|
||||
* name: string, // player-chosen display name
|
||||
* inputCount: number,
|
||||
* outputCount: number,
|
||||
* gates: Array, // deep-cloned gate array
|
||||
* connections: Array, // deep-cloned connection array
|
||||
* inputIds: number[], // ordered input gate IDs
|
||||
* outputIds: number[], // ordered output gate IDs
|
||||
* icon: string, // emoji icon (auto-assigned)
|
||||
* createdAt: number // Date.now()
|
||||
* }
|
||||
*/
|
||||
|
||||
const GADGET_ICONS = ['⚡', '🔌', '💡', '🔋', '📡', '🛠️', '⚙️', '🔩', '🧲', '💎', '🔮', '🧪'];
|
||||
|
||||
/** All saved gadgets — persisted in worldState.gadgets */
|
||||
export function getGadgets() {
|
||||
if (!worldState.gadgets) worldState.gadgets = [];
|
||||
return worldState.gadgets;
|
||||
}
|
||||
|
||||
/**
|
||||
* Save a circuit as a gadget in the backpack
|
||||
* @param {Object} component — component definition from components.js
|
||||
* @returns {{ success: boolean, gadget?: Object, error?: string }}
|
||||
*/
|
||||
export function saveGadget(component) {
|
||||
if (!component || !component.gates || !component.connections) {
|
||||
return { success: false, error: 'Invalid circuit data' };
|
||||
}
|
||||
if (!component.inputIds?.length || !component.outputIds?.length) {
|
||||
return { success: false, error: 'Circuit needs at least 1 INPUT and 1 OUTPUT' };
|
||||
}
|
||||
|
||||
const gadgets = getGadgets();
|
||||
|
||||
// Check for duplicate — update if same id exists
|
||||
const existingIdx = gadgets.findIndex(g => g.id === component.id);
|
||||
|
||||
const gadget = {
|
||||
id: component.id,
|
||||
name: component.name,
|
||||
inputCount: component.inputCount,
|
||||
outputCount: component.outputCount,
|
||||
gates: JSON.parse(JSON.stringify(component.gates)),
|
||||
connections: JSON.parse(JSON.stringify(component.connections)),
|
||||
inputIds: [...component.inputIds],
|
||||
outputIds: [...component.outputIds],
|
||||
icon: GADGET_ICONS[gadgets.length % GADGET_ICONS.length],
|
||||
createdAt: Date.now()
|
||||
};
|
||||
|
||||
if (existingIdx >= 0) {
|
||||
gadget.icon = gadgets[existingIdx].icon; // keep original icon
|
||||
gadgets[existingIdx] = gadget;
|
||||
} else {
|
||||
gadgets.push(gadget);
|
||||
}
|
||||
|
||||
console.log(`[inventory] saved gadget "${gadget.name}" (${gadget.inputCount}in/${gadget.outputCount}out)`);
|
||||
return { success: true, gadget };
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove a gadget from the backpack
|
||||
*/
|
||||
export function removeGadget(gadgetId) {
|
||||
const gadgets = getGadgets();
|
||||
const idx = gadgets.findIndex(g => g.id === gadgetId);
|
||||
if (idx >= 0) {
|
||||
gadgets.splice(idx, 1);
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
/**
|
||||
* Get a gadget by ID
|
||||
*/
|
||||
export function getGadget(gadgetId) {
|
||||
return getGadgets().find(g => g.id === gadgetId) || null;
|
||||
}
|
||||
|
||||
|
||||
// ==================== Backpack UI state ====================
|
||||
|
||||
let backpackOpen = false;
|
||||
let cursorIndex = 0;
|
||||
let scrollOffset = 0;
|
||||
let selectedGadget = null; // gadget currently inspected
|
||||
let actionMenuOpen = false;
|
||||
let actionCursor = 0;
|
||||
let onUseCallback = null; // called when player selects "Use" on a gadget
|
||||
|
||||
const MAX_VISIBLE = 7; // items visible without scrolling
|
||||
|
||||
export function isBackpackOpen() { return backpackOpen; }
|
||||
|
||||
export function openBackpack(onUse) {
|
||||
backpackOpen = true;
|
||||
cursorIndex = 0;
|
||||
scrollOffset = 0;
|
||||
selectedGadget = null;
|
||||
actionMenuOpen = false;
|
||||
actionCursor = 0;
|
||||
onUseCallback = onUse || null;
|
||||
worldState.mode = 'inventory';
|
||||
}
|
||||
|
||||
export function closeBackpack() {
|
||||
backpackOpen = false;
|
||||
selectedGadget = null;
|
||||
actionMenuOpen = false;
|
||||
worldState.mode = 'world';
|
||||
}
|
||||
|
||||
// ==================== Backpack input ====================
|
||||
|
||||
export function handleBackpackInput(key) {
|
||||
if (!backpackOpen) return false;
|
||||
|
||||
const gadgets = getGadgets();
|
||||
|
||||
// Action sub-menu open
|
||||
if (actionMenuOpen) {
|
||||
if (key === 'ArrowUp' || key === 'w' || key === 'W') {
|
||||
actionCursor = Math.max(0, actionCursor - 1);
|
||||
} else if (key === 'ArrowDown' || key === 's' || key === 'S') {
|
||||
actionCursor = Math.min(1, actionCursor + 1); // 0=Use, 1=Toss
|
||||
} else if (key === 'Enter' || key === ' ' || key === 'e' || key === 'E') {
|
||||
if (actionCursor === 0 && selectedGadget) {
|
||||
// USE
|
||||
if (onUseCallback) {
|
||||
const g = selectedGadget;
|
||||
closeBackpack();
|
||||
onUseCallback(g);
|
||||
} else {
|
||||
// Just close — no active puzzle
|
||||
closeBackpack();
|
||||
}
|
||||
} else if (actionCursor === 1 && selectedGadget) {
|
||||
// TOSS
|
||||
removeGadget(selectedGadget.id);
|
||||
actionMenuOpen = false;
|
||||
selectedGadget = null;
|
||||
if (cursorIndex >= gadgets.length) cursorIndex = Math.max(0, gadgets.length - 1);
|
||||
}
|
||||
} else if (key === 'Escape' || key === 'Backspace' || key === 'b' || key === 'B') {
|
||||
actionMenuOpen = false;
|
||||
selectedGadget = null;
|
||||
}
|
||||
return true;
|
||||
}
|
||||
|
||||
// Main list navigation
|
||||
if (key === 'ArrowUp' || key === 'w' || key === 'W') {
|
||||
cursorIndex = Math.max(0, cursorIndex - 1);
|
||||
if (cursorIndex < scrollOffset) scrollOffset = cursorIndex;
|
||||
} else if (key === 'ArrowDown' || key === 's' || key === 'S') {
|
||||
cursorIndex = Math.min(gadgets.length - 1, cursorIndex + 1);
|
||||
if (cursorIndex >= scrollOffset + MAX_VISIBLE) scrollOffset = cursorIndex - MAX_VISIBLE + 1;
|
||||
} else if (key === 'Enter' || key === ' ' || key === 'e' || key === 'E') {
|
||||
if (gadgets.length > 0 && gadgets[cursorIndex]) {
|
||||
selectedGadget = gadgets[cursorIndex];
|
||||
actionMenuOpen = true;
|
||||
actionCursor = 0;
|
||||
}
|
||||
} else if (key === 'Escape' || key === 'i' || key === 'I' || key === 'Backspace' || key === 'b' || key === 'B') {
|
||||
closeBackpack();
|
||||
}
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
|
||||
// ==================== Backpack rendering ====================
|
||||
|
||||
/**
|
||||
* Draw the full-screen backpack overlay on canvas
|
||||
*/
|
||||
export function drawBackpack(ctx, canvasW, canvasH) {
|
||||
if (!backpackOpen) return;
|
||||
|
||||
const gadgets = getGadgets();
|
||||
|
||||
// Dim background
|
||||
ctx.fillStyle = 'rgba(0, 0, 0, 0.75)';
|
||||
ctx.fillRect(0, 0, canvasW, canvasH);
|
||||
|
||||
// Main panel
|
||||
const panelW = Math.min(420, canvasW - 40);
|
||||
const panelH = Math.min(440, canvasH - 40);
|
||||
const px = (canvasW - panelW) / 2;
|
||||
const py = (canvasH - panelH) / 2;
|
||||
|
||||
// Panel background
|
||||
ctx.fillStyle = '#181c2a';
|
||||
ctx.strokeStyle = '#00e599';
|
||||
ctx.lineWidth = 2;
|
||||
roundRect(ctx, px, py, panelW, panelH, 8);
|
||||
ctx.fill();
|
||||
ctx.stroke();
|
||||
|
||||
// Header
|
||||
ctx.fillStyle = '#00e599';
|
||||
ctx.font = 'bold 16px "Segoe UI", system-ui, sans-serif';
|
||||
ctx.textAlign = 'left';
|
||||
ctx.textBaseline = 'top';
|
||||
ctx.fillText('🎒 Backpack', px + 16, py + 12);
|
||||
|
||||
ctx.fillStyle = '#555';
|
||||
ctx.font = '11px "Segoe UI", system-ui, sans-serif';
|
||||
ctx.textAlign = 'right';
|
||||
ctx.fillText(`${gadgets.length} gadget${gadgets.length !== 1 ? 's' : ''}`, px + panelW - 16, py + 16);
|
||||
|
||||
// Divider
|
||||
ctx.strokeStyle = '#2a2f45';
|
||||
ctx.lineWidth = 1;
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(px + 12, py + 38);
|
||||
ctx.lineTo(px + panelW - 12, py + 38);
|
||||
ctx.stroke();
|
||||
|
||||
// Empty state
|
||||
if (gadgets.length === 0) {
|
||||
ctx.fillStyle = '#555';
|
||||
ctx.font = '13px "Segoe UI", system-ui, sans-serif';
|
||||
ctx.textAlign = 'center';
|
||||
ctx.textBaseline = 'middle';
|
||||
ctx.fillText('No gadgets yet!', canvasW / 2, canvasH / 2 - 10);
|
||||
ctx.fillStyle = '#444';
|
||||
ctx.font = '11px "Segoe UI", system-ui, sans-serif';
|
||||
ctx.fillText('Craft circuits in the Workshop (TAB)', canvasW / 2, canvasH / 2 + 14);
|
||||
ctx.fillText('then save them as gadgets.', canvasW / 2, canvasH / 2 + 30);
|
||||
|
||||
// Close hint
|
||||
drawCloseHint(ctx, px, py + panelH, panelW);
|
||||
return;
|
||||
}
|
||||
|
||||
// Item list
|
||||
const listX = px + 12;
|
||||
const listY = py + 46;
|
||||
const itemH = 44;
|
||||
const listH = MAX_VISIBLE * itemH;
|
||||
|
||||
// Clip list area
|
||||
ctx.save();
|
||||
ctx.beginPath();
|
||||
ctx.rect(listX, listY, panelW - 24, listH);
|
||||
ctx.clip();
|
||||
|
||||
const visibleGadgets = gadgets.slice(scrollOffset, scrollOffset + MAX_VISIBLE);
|
||||
visibleGadgets.forEach((gadget, vi) => {
|
||||
const i = vi + scrollOffset;
|
||||
const iy = listY + vi * itemH;
|
||||
const isSelected = i === cursorIndex;
|
||||
|
||||
// Selection highlight
|
||||
if (isSelected) {
|
||||
ctx.fillStyle = 'rgba(0, 229, 153, 0.12)';
|
||||
roundRect(ctx, listX, iy, panelW - 24, itemH - 2, 4);
|
||||
ctx.fill();
|
||||
|
||||
// Arrow cursor
|
||||
ctx.fillStyle = '#00e599';
|
||||
ctx.font = '14px sans-serif';
|
||||
ctx.textAlign = 'left';
|
||||
ctx.textBaseline = 'middle';
|
||||
ctx.fillText('▸', listX + 4, iy + itemH / 2);
|
||||
}
|
||||
|
||||
// Icon
|
||||
ctx.font = '18px sans-serif';
|
||||
ctx.textAlign = 'left';
|
||||
ctx.textBaseline = 'middle';
|
||||
ctx.fillText(gadget.icon, listX + 20, iy + itemH / 2);
|
||||
|
||||
// Name
|
||||
ctx.fillStyle = isSelected ? '#fff' : '#c8cad0';
|
||||
ctx.font = `${isSelected ? 'bold ' : ''}13px "Segoe UI", system-ui, sans-serif`;
|
||||
ctx.textAlign = 'left';
|
||||
ctx.fillText(gadget.name, listX + 46, iy + itemH / 2 - 8);
|
||||
|
||||
// Details
|
||||
ctx.fillStyle = '#666';
|
||||
ctx.font = '10px monospace';
|
||||
ctx.fillText(`${gadget.inputCount} IN → ${gadget.outputCount} OUT | ${gadget.gates.length} gates`, listX + 46, iy + itemH / 2 + 10);
|
||||
});
|
||||
|
||||
ctx.restore();
|
||||
|
||||
// Scroll indicators
|
||||
if (scrollOffset > 0) {
|
||||
ctx.fillStyle = '#00e599';
|
||||
ctx.font = '12px sans-serif';
|
||||
ctx.textAlign = 'center';
|
||||
ctx.fillText('▲', px + panelW / 2, listY - 4);
|
||||
}
|
||||
if (scrollOffset + MAX_VISIBLE < gadgets.length) {
|
||||
ctx.fillStyle = '#00e599';
|
||||
ctx.font = '12px sans-serif';
|
||||
ctx.textAlign = 'center';
|
||||
ctx.fillText('▼', px + panelW / 2, listY + listH + 10);
|
||||
}
|
||||
|
||||
// Detail panel (right side of selected item)
|
||||
if (gadgets[cursorIndex]) {
|
||||
const g = gadgets[cursorIndex];
|
||||
const detailY = listY + listH + 16;
|
||||
|
||||
ctx.strokeStyle = '#2a2f45';
|
||||
ctx.lineWidth = 1;
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(px + 12, detailY - 6);
|
||||
ctx.lineTo(px + panelW - 12, detailY - 6);
|
||||
ctx.stroke();
|
||||
|
||||
// Mini circuit preview info
|
||||
ctx.fillStyle = '#aaa';
|
||||
ctx.font = '11px "Segoe UI", system-ui, sans-serif';
|
||||
ctx.textAlign = 'left';
|
||||
ctx.textBaseline = 'top';
|
||||
|
||||
const gateTypes = {};
|
||||
g.gates.forEach(gate => {
|
||||
if (gate.type !== 'INPUT' && gate.type !== 'OUTPUT') {
|
||||
gateTypes[gate.type] = (gateTypes[gate.type] || 0) + 1;
|
||||
}
|
||||
});
|
||||
const breakdown = Object.entries(gateTypes).map(([t, n]) => `${n}× ${t}`).join(', ');
|
||||
ctx.fillText(`Components: ${breakdown || 'none'}`, px + 16, detailY);
|
||||
|
||||
ctx.fillStyle = '#666';
|
||||
ctx.font = '10px "Segoe UI", system-ui, sans-serif';
|
||||
const date = new Date(g.createdAt);
|
||||
ctx.fillText(`Created: ${date.toLocaleDateString()} ${date.toLocaleTimeString()}`, px + 16, detailY + 18);
|
||||
}
|
||||
|
||||
// Action sub-menu
|
||||
if (actionMenuOpen && selectedGadget) {
|
||||
drawActionMenu(ctx, px + panelW - 120, py + 50 + (cursorIndex - scrollOffset) * itemH);
|
||||
}
|
||||
|
||||
// Close hint
|
||||
drawCloseHint(ctx, px, py + panelH, panelW);
|
||||
}
|
||||
|
||||
function drawActionMenu(ctx, x, y) {
|
||||
const w = 100, itemH = 28;
|
||||
const h = itemH * 2 + 8;
|
||||
|
||||
// Background
|
||||
ctx.fillStyle = '#1e2235';
|
||||
ctx.strokeStyle = '#00e599';
|
||||
ctx.lineWidth = 1.5;
|
||||
roundRect(ctx, x, y, w, h, 4);
|
||||
ctx.fill();
|
||||
ctx.stroke();
|
||||
|
||||
const actions = ['⚡ Use', '🗑️ Toss'];
|
||||
actions.forEach((label, i) => {
|
||||
const iy = y + 4 + i * itemH;
|
||||
const isSel = i === actionCursor;
|
||||
|
||||
if (isSel) {
|
||||
ctx.fillStyle = 'rgba(0, 229, 153, 0.15)';
|
||||
ctx.fillRect(x + 2, iy, w - 4, itemH);
|
||||
}
|
||||
|
||||
ctx.fillStyle = isSel ? '#00e599' : '#aaa';
|
||||
ctx.font = `${isSel ? 'bold ' : ''}12px "Segoe UI", system-ui, sans-serif`;
|
||||
ctx.textAlign = 'left';
|
||||
ctx.textBaseline = 'middle';
|
||||
|
||||
if (isSel) ctx.fillText('▸', x + 6, iy + itemH / 2);
|
||||
ctx.fillText(label, x + 20, iy + itemH / 2);
|
||||
});
|
||||
}
|
||||
|
||||
function drawCloseHint(ctx, x, y, w) {
|
||||
ctx.fillStyle = '#444';
|
||||
ctx.font = '10px "Segoe UI", system-ui, sans-serif';
|
||||
ctx.textAlign = 'center';
|
||||
ctx.textBaseline = 'top';
|
||||
ctx.fillText('I / ESC: Close | E: Select | ↑↓: Navigate', x + w / 2, y - 18);
|
||||
}
|
||||
|
||||
function roundRect(ctx, x, y, w, h, r) {
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(x + r, y);
|
||||
ctx.lineTo(x + w - r, y);
|
||||
ctx.quadraticCurveTo(x + w, y, x + w, y + r);
|
||||
ctx.lineTo(x + w, y + h - r);
|
||||
ctx.quadraticCurveTo(x + w, y + h, x + w - r, y + h);
|
||||
ctx.lineTo(x + r, y + h);
|
||||
ctx.quadraticCurveTo(x, y + h, x, y + h - r);
|
||||
ctx.lineTo(x, y + r);
|
||||
ctx.quadraticCurveTo(x, y, x + r, y);
|
||||
ctx.closePath();
|
||||
}
|
||||
Reference in New Issue
Block a user