PAUSE / INVENTORY MENU SPEC — "Ocarina" rotating screens
STATUS: NEW — build blueprint (next implementation pass). Defines the OoT-style rotating pause menu that
replaces the current Gear & Pack modal. Four panels on a horizontal carousel; the player rotates left/right.
This spec is the contract the in-game build + the responsive CSS rework implement together (same UI surface).
Canon: EQUIPMENT.md, ITEMS.md, RESOURCES.md, ZONES.md (key items), QUESTS.md (shop/map pools), BALANCE.md.
1. THE CAROUSEL (4 panels, horizontal rotation)
Order left → right: [ MAP ] ↔ [ EQUIPMENT ] ↔ [ INVENTORY ] ↔ [ CRAFT ]
- Open on START / pause (and the restored SWAP-area menu button). Opening lands on INVENTORY (center).
- Rotate LEFT from Inventory → Equipment; LEFT again → Map.
- Rotate RIGHT from Inventory → Craft.
- Rotation is a Zelda-style turn (panels sit on a "drum"; a 3D-ish slide/rotate transition, restrained to mood).
- Controls: ◀ ▶ on-screen arrows · keyboard Q/E or ←/→ · swipe L/R on touch · shoulder-buttons if gamepad.
- Map and Craft are the outer panels; rotation does not wrap (Map is hard-left, Craft is hard-right) — or wraps
optionally if it feels better in playtest (decide in build).
2. INVENTORY panel (the core)
32 total slots. The grid is divided into type-locked regions (a slot only accepts its declared type — the
"bottle row / enchanted-arrow section" idea), plus one free random section. Proposed layout (tune in build):
- Key Items region (locked) — the per-zone KEY ITEMS (Veil Medals / region relics, ZONES.md §2). One slot
per zone (up to 12). Never consumed, never sold; their verb powers traversal. Always shown, even if empty (silhouette).
- Bottles row (locked, ~4 slots) — flasks/consumables that refill (water, tonic, revive-salt, antivenom).
- Ammo/charged row (locked, ~4 slots) — e.g. enchanted arrows / thrown / censer-charges (type-locked like bottles).
- Materials region (locked) — stackable resources (ore, copper, gold, gem, wood, sticks, coal, ingot…); stacks,
not 1-per-slot.
- Random section (6 slots) — for non-fixed items (the things that are not key/fixed): found trinkets, region
drops, off-tier curios, quest oddments. Exactly 6 slots; overflow prompts drop/sell.
Behaviors: tap a slot = inspect/use/ready; long-press = drop. Type-lock rejects wrong-type with a soft buzz + hint.
Slots show icon + qty; key items show a glow when their gate is active.
3. EQUIPMENT panel
The character's worn gear. Now: weapon · tool · armor. Next armor pass extends to head · chest · legs · feet
(Leather/Iron/Diamond sets) + accessory. Tap a slot to cycle owned pieces (existing cycleSlot); shows stat deltas
(Might/Def). Hero portrait + the SWAP-hero control live here (and as the quick button — see §6).
4. MAP panel (bought, not given)
- The world/region map is purchased from shops for gold — you don't start with it.
- Each city shop has a random item pool (RESOURCES/ITEMS rotation, seeded) that includes its regional map
among other goods; buying the map reveals that region's overworld + POIs.
- Minor cities may be skipped (lore-optional) — their map is a convenience, not a gate. Major cities (shops /
dungeon hubs) matter.
- Panel shows owned region maps, the player marker, discovered POIs, fast-travel shrines (existing world-map logic
feeds this). Unbought regions render as fogged "purchase at a shop" placeholders.
5. CRAFT panel
The forge/anvil recipes (existing RECIPES + the smelt path), surfaced in-menu so crafting isn't only at the anvil
(or keep anvil as the "lit furnace" requirement — decide in build). Shows tool/weapon/armor recipes, material costs
(ingots + mats), molds owned, and the in-progress craft timer. Mirrors renderForge content in the carousel skin.
6. REPLACES Gear & Pack + SWAP button
- The rotating menu absorbs the current
#gearModal(equip + pack) and folds in the forge/craft and world-map
screens. The old modal is removed; its open hook (I / pause / the gear button) opens the carousel on Inventory.
persistent quick-action chip in the HUD (premium CSS), so swapping doesn't require opening the menu.
7. RESPONSIVE TARGET (built with the CSS rework)
One layout that works on mobile portrait, mobile landscape, tablet, and desktop:
- Portrait: full-screen carousel, big touch targets, arrows bottom, swipe enabled, grid reflows to fewer columns.
- Landscape/tablet/PC: centered card (max-width), panel + side rails for arrows, keyboard rotation, hover states.
- Slot grid uses fluid
clamp()sizing; type-region headers stay legible; safe-area insets respected; no overlap
with the action cluster. The SWAP + action buttons re-flow per orientation (the broader HUD CSS rework).
8. BUILD ORDER (next pass)
- Item model: give items an
{id,type,qty,slotRegion}shape; migrate current count-resources into Materials stacks
and key items into the Key Items region. 2. Carousel container + rotation transitions. 3. Inventory grid +
type-locked regions + 6 random slots. 4. Equipment (reuse cycleSlot). 5. Map (reuse world-map + shop-bought gating
+ shop random pools). 6. Craft (reuse renderForge). 7. Remove Gear & Pack modal; restore SWAP. 8. Responsive CSS
pass across all four breakpoints. Verify with node --check after each step.