b999fe855a
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>
420 lines
13 KiB
JavaScript
420 lines
13 KiB
JavaScript
/**
|
||
* 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();
|
||
}
|