Public website plan

This wiki is the developer and agent source of truth. Players get a separate site, apps/site, built from the same packages/game-data but filtered to public fields, plus a read-only live API for rankings and characters (ADR-022).

◆Pages

◆Never public

Art requests and prompts, the token ledger and task logs, budgets and the internal roadmap detail (the public Roadmap page shows only allow-listed milestone text), decisions/open questions, netcode and performance internals, server ports, admin tools, key minting, monster AI internals beyond what players see, proposed flags and unreleased content. A build step strips these with an explicit allow-list per data file — not a deny-list.

◆Data pipeline

1. packages/game-data → scripts/export-public.mjs writes apps/site/public-data/*.json with allow-listed fields only.
2. The site is a Next.js static export (same stack as the wiki) for the guide pages; rankings and armory hydrate from the read-only API with 60 s caching at the CDN.
3. The API (services/public-api, Rust) reads replicas only, rate-limits by IP, and never exposes email, IP or account ids.
4. A test fails the build if any exported file contains a non-allow-listed key (e.g. iconRequest, prompt, proposed).

◆Look

The same in-game UI kit as the Components page: bronze window frames, crest headers, glass popups, sprite buttons, the Zoe coin. Mobile-first, because most players will open it on a phone next to the game. Since the owner's overhaul request of 2026-10-05 the site wears the chronicle direction around that kit.

◆Design brief for the AI designer (go all out)

This site is one of the game's main storefronts: many players will judge Zoen by it before they ever play. Whoever builds it — an agent or a designer — should treat it as a premium, professional product launch site, not a docs site.

• Art direction: cinematic dark caravan fantasy — key art and gameplay up front, warm amber/bronze/jade palette, the in-game kit for every control so the site feels like the game. Full-bleed hero video (muted, poster first), parallax depth on key art, tasteful motion (≤ 300 ms ease, prefers-reduced-motion respected).
• Typography: the game's display face for headings, a highly readable text face; generous spacing; no walls of text — every section leads with an image, clip or interactive.
• Interactives are the hook: the skill and inventory playgrounds, the Atlas planner and event countdowns should feel like playing a small piece of the game, on desktop and phone.
• Conversion: one clear primary action per page ("Play in browser" / "Sign in with Google" / "Download"), store badges once the apps exist, Zoe pricing only on the shop page.
• Quality bar: Lighthouse ≥ 90 for performance, accessibility, best practices and SEO on mobile; LCP ≤ 2.5 s on 4G; images as responsive AVIF/WebP; video lazy-loaded; WCAG 2.2 AA contrast and keyboard paths.
• Share-ready: Open Graph/Twitter cards per build, item and event; share codes render a preview image.
• Localisation-ready: all strings in message files from the start (English first).
• Process: propose 2–3 visual directions as static mock-ups for the owner, then build the chosen one; every page ships with Playwright screenshots on desktop and Pixel 7 and a 10 s scroll-through clip for review.

◆Build order

1. Export script + allow-list test (no UI).
2. Visual direction mock-ups (2–3) → owner picks one.
3. Home, Showcase, public Roadmap, Event times (static data first, live countdowns).
4. Skill playground and Inventory playground (reuse the wiki components).
5. One-tap Google sign-in + Account + Redeem key (needed for the alpha; gateway M6).
6. Guide pages (builds, skills, items, world).
7. Caravan Ledger, Rankings and Armory once the API exists (after milestone M8).

◆Implementation (web platform, 2026-10-05)

Built as apps/site (Web platform, ADR-025) in direction A (cinematic caravan road; the owner can still swap in B or C).

• Pages: home; the game (/game, the 18 builds with share images, the world, how to play); news and patch notes; FAQ with search; status; public roadmap; media; community; download and play (capability check only, nothing playable is claimed); the closed-alpha sign-up with e-mail confirmation and unsubscribe; support (bug report with screenshots, ban review, account recovery, player report, contact); privacy, terms and cookies (drafts until a legal review); a 503 maintenance page.
• Data: game facts only from the allow-listed export (no proposed records, no tuning numbers); news, FAQ, status and settings from the database, refreshed the moment staff publish.
• No cookies. First-party, cookie-less analytics (daily hashed visitor id, Do Not Track / GPC respected).
• Forms work without JavaScript, have a honeypot and a minimum fill time, and are rate-limited per network.
• Checks: site e2e on desktop, tablet and phone with accessibility scans; a leak scan of the built site; Lighthouse on mobile: performance 91–99 and 100 for accessibility, best practices and SEO (the largest paint is still above the 2.5 s budget on the local server).
• Art: 25 site requests (hero wide and portrait, share frame, path emblems, boss splashes, scenes, devices…) are in the art queue; delivered files replace the current stand-ins automatically.
• Not built yet: steps 4, 5 and 7 of the build order (playgrounds, Google sign-in with account and key redemption, Ledger, rankings and armory), the skills and items guide pages, and the event-times page — they wait for the gateway (M6) or the owner's go-ahead.

◆Chronicle redesign (2026-10-05)

The owner asked for a high-end, game-like overhaul in the classic caravan theme with as much art and 3D as the site can carry (tasks WEB-OVERHAUL-20261005-01…04). Design read: a launch site for an action MMORPG, for PC and mobile ARPG players, in a cinematic caravan-chronicle language; ENERGY 3, RHYTHM 3, MOTION 3 (bold, varied, choreographed).

• Language (apps/site/styles/chronicle.css): the site reads as a traveller's chronicle in chapters (Roman numerals, engraved gold Cinzel capitals, silk-paper grain on lacquer ink, gilt frames with corner studs, chamfered plates). Palette: ink, bone text and engraved gold; jade is the one accent and marks actions only (HUD rule: gold buttons stay premium-only); cinnabar only for bosses and danger. Motif: the lantern-lit road (a gold thread with lantern nodes).
• Chrome: a header that floats over the art and turns into a lacquer bar on scroll, a colophon footer, a chapter rail on wide screens (lit lantern = chapter on screen), page heroes with breadcrumbs.
• Home, in ten chapters: title card · at a glance (counts computed from the public data) · I promises (scroll-told, sticky art) · II combat training ground (fires the real chains of three builds with their skill art, telegraph pulse, previz reel) · III character select (six path tabs, three builds each, the key art burns from one painting to the next) · IV the Amber Basin (3D diorama) · V bosses and the field guide · VI mounts and companions · VII spoils (item art in rarity slot frames with the in-game popup) · VIII together · IX roadmap road · X dispatches · the registry under a sky of lanterns (signing releases a burst).
• Effects, all progressive enhancement over real images (components/fx, lib/gl/core.ts):
  • hero: WebGL 2 parallax over the key art from a hand-authored depth matte (scripts/fx-maps.mjs), sun shafts, flickering painted lanterns, heat haze, GPU embers; it reuses the LCP image's URL, fades in after it, and only runs over the wide art (portrait screens get a portrait crop);
  • character select: a noise-front burn between key art paintings in the incoming build's palette colour;
  • basin: three.js (lazy-loaded on wide screens) displaces the painted map with a relief made from the world data (valleys at each area, ridges between, peaks on the misty ridge); pins stay HTML buttons projected onto the terrain;
  • lantern sky: instanced WebGL 2 lanterns drawn procedurally.
  • Guards: nothing runs under reduced motion, Save-Data or without WebGL 2; loops pause off screen and in hidden tabs; device pixel ratio is capped; canvases are aria-hidden and every control is a real button or link.
• Art pipeline (scripts/build-media.mjs): adds mounts (with alpha), companions, 120 icons (skills with art, orbs, gems, equipment, jewelry, the round HUD slot frame and the cone telegraph cropped from their sheets), the two effect maps and a portrait crop of the key art as the stand-in until the requested portrait art arrives.
• Inner pages: game overview, builds (painted tiles), build detail (combo medallions, the hotbar as the game HUD), world (explorer plus an area-by-area chronicle), how to play (the kit loading screen cycling the real tips), media (galleries with a keyboard lightbox), roadmap (a vertical road), alpha; every other page inherits the chrome.
• Performance rules learned here: Chrome does not count an image that fills the whole viewport as the largest paint (it treats it as background), and the hero now sits under the floating header, so the measured element on the home page is the wordmark: it is preloaded, and so is the hero (one art-directed preload per screen shape). Chapters below the first screen use content-visibility: auto (their CSS sprites wait until needed) and only first-screen art carries a blur placeholder (each one is about 0.8 KB of inline HTML). Lighthouse mobile after the redesign: all seven budget pages pass (home 92, largest paint 3.25 s on the local server; accessibility, best practices and SEO 100).
• Anti-slop gate (the owner pointed at the anti-slop filter): no invented numbers, quotes or testimonials; the counts on the site come from the data; concept art and previz keep their honesty labels; one accent colour; decorative loops stop after a few passes; new copy avoids em dashes and hype words.