The game interface — first brush

client done

repo: land-of-lor · updated 2026-08-12

What this is

The first visual brush of the actual game. The live multiplayer POC already gives us a 3D browser world with touch-to-move (server-architecture, deliverable 8); this epic puts the game around it: a title screen, an in-game HUD, and the player’s collection — the 64 elements rendered as collectable cards. It also builds the authoring tool Kris uses to create and edit those 64 cards, which is the vehicle for element-table’s task 001 (this epic builds the tool and the card look; element-table stays the owner of the content — names, properties, rarities).

The goal state for this pass: title screen → walk around the world → open your Ingredients and look at your cards. Placeholder visuals are fine; the real visual design comes from a Claude Design session driven by design-brief.md in this folder. Once account creation lands (the immediate next epic after this one), this is a functioning MVP that real beta testers — Kris’s kids, nephews and nieces, and interested friends — can be invited into.

What’s decided (2026-08-11, planning session with Kris)

HUD structure: a health bar plus three buttons — Ingredients, Spells (cauldron icon — eventually a view of the actual cauldron object), Gear — and all three open one full-screen panel on different tabs. This is the hybrid of the two options Kris was weighing, and it matches the earlier inventory thinking in land-of-lor/docs/thought-specs/inventory-interface.md (one inventory, major tabs); Blueprints/Recipes can join as a tab later without touching the HUD.
The element card (from Kris’s pencil sketches + the physical table session): card background is the element’s colour · art panel · hexagram glyph + King Wen number in the corner · trigram pair (“Wind over Mountain”) · name bar · a lower box for where it comes from + what you need to hold/collect it (the origin column made visible) · rarity: common / rare / legendary. The machinery (hexagram, number) is never hidden; only flavour is.
The Ingredients grid shows all 64, always — laid out logically (upper-trigram rows × lower-trigram columns, same as Kris’s physical table). Cards you haven’t collected are greyed-out templates with a big ”?” — the full set is memorisable and the gaps invite collection.
Shell architecture: an HTML/CSS/JS layer that boots the untouched Godot web export from its own page (GODOT_CONFIG lives in the page, so no re-export is needed) and overlays DOM UI above the canvas. Claude Design produces HTML/CSS, so its output slots straight in. Lives at land-of-lor/pocs/game-shell/.

Notes toward later decisions

The collectible-card framing opens a real-money acquisition channel outside the game: purchasable element packs (dozen-based bundles, at least one rare per dozen; maybe premium rare-heavy dozens; maybe player-created packs offered on the web version of the trading post). In-game remains currency-free — trading stays item-for-item, per the settled no-in-game-currency principle. Direction Kris likes, not yet a decision.
Hold the 64 lightly. The hexagram set is the guiding structure and its boundedness is genuinely useful (any player can memorise the whole table) — but Kris can imagine wanting more than 64 someday. Everything here keys elements by King Wen number without hard-capping the set.

Sequencing (named, not decomposed here)

After this epic: account creation and remembering accounts (so testers keep their collections), then a marketing pass — inviting the beta family/friends circle in, website engagement work, and the Kickstarter pre-launch (kickstarter-prelaunch) — engagement more than money. A step soon after MVP: collecting ingredients in the world.

Non-goals

Not the spell-crafting interaction itself (spell-crafting-interface) — the Spells tab is a placeholder until the cauldron exists.
Not account creation or persistence — next epic, deliberately excluded here.
Not the element content — names, properties and rarities belong to element-table.
Not the recipe engine, trading, or any server change (server-architecture, barter-marketplace).

Open design questions (prose for now — formalise only if they block tasks)

How much of an un-collected card is revealed — name? some properties? Currently: glyph and number only, everything else hidden. Kris was explicitly unsure (“maybe you see the name, and maybe even some properties”).
What the Spells tab shows before spell-crafting lands (currently a cauldron placeholder).
Whether the grid’s un-collected treatment should tease rarity (a legendary-shaped hole invites questing) or stay uniform.

Relevant docs

design-brief.md — the self-contained brief for the Claude Design session.
land-of-lor/pocs/game-shell/README.md — the shell, the shared card renderer/data contract, run and deploy instructions.
land-of-lor/docs/thought-specs/inventory-interface.md — Kris’s earlier inventory-tabs thinking (with Ben) that the HUD decision matches.
epics/element-table/overview.md — the keystone table this UI renders; the settled machinery/flavour, rarity and origin principles.
brand/design.md — the storybook-cover direction, palette and typography the brief inlines.

Status

4 done

Next: Nothing outstanding. Promoting the card editor onto the public site is a later, separate call once more elements are defined; element authoring itself is tracked as element-table/003.

Deliverables (1)

#9 — The start of the game — title screen, HUD, and your card collection (2026-08-11)

Tasks (4)

done (4)

game-interface/001 — Claude Design brief for the first interface pass (priority 1, estimate S )
game-interface/002 — Element-card renderer, seeded table data, and the card editor (priority 1, estimate M )
game-interface/003 — Game shell — title screen, HUD, Ingredients view over the live world, deployed (priority 1, estimate M , delivers #9)
game-interface/004 — Android build is missing the whole interface — shell is DOM-only, APK ships the bare 3D world (priority 1, estimate L )

Ask an agent about this epic

Also available as raw markdown.