Samples

← Back to index

The repo ships ~30 sample pages under Assets/UI/ (each an .html + .css pair). They double as the corpus for the layout-vs-Chrome audit (SAMPLE_AUDIT.md) and the golden/perf calibration. They are game-UI themed — mostly a fictional RPG ("Halcyon"/"Ravenmoor") and a match-3 ("Sweet Cascade").

Many are real exercises of specific subsystems; the one-liners below note what each primarily stresses. Per-sample layout deviation vs. headless Chrome is tracked in SAMPLE_AUDIT.md at the repo root.

The packaged Phase One Demo (Samples~/PhaseOneDemo/, importable via Package Manager → Weva → Samples) is the end-to-end demo scene with controller binding and hot reload; the Assets/UI/ pages below are loose authoring samples.

Reference / playground

Sample	Exercises
`flex-playground.html`	Flexbox: nested columns, grow/shrink, cross-stretch reflow, auto margins.
`grid-playground.html`	Grid: templates, named areas, auto-placement, `align-content`, `min-height` floors.
`9slice-demo.html`	9-slice `<img>` and CSS `border-image` from sprite borders.
`inputtest.html`	Form controls + focus/keyboard nav (paired with `inputtest.unity`).
`randhtml.html`	The dev demo the golden tests + perf benches calibrate against — HUD / quest log / chat / map widgets in one page.
`weva-landing.html`	Marketing-style landing page (gradient text, code blocks, flex layout).

HUD / in-game overlays

Sample	Exercises
`hud.html`	Status bars (`%` widths), level ring, vitals — classic game HUD.
`combat-hud.html`	Centered ability bar, action-row positioning.
`match3.html` / `match3-endgame.html`	Match-3 board and level-complete screen; inline reward shells.
`story-bubble.html`	Dialogue bubble with `filter: drop-shadow` + `text-shadow`.
`dialogue.html` / `nook-dialogue.html`	NPC dialogue panels with portraits.

Screens / menus

Sample	Exercises
`menu.html`	Main-menu list (line-height / typography heavy).
`load-game.html`	Save-slot grid with rounded/elliptical corners.
`level-select.html`	Level map with rotated connector lines (transforms on inline elements).
`settings.html`	Settings form: toggles, sliders, sections.
`inventory.html`	Inventory grid inside a `100vh` flex container (grid height containment).
`vendor.html`	Trader stall: item grid with emoji glyphs.
`quests.html`	Quest log list.
`stats.html`	Character sheet with an aspect-ratio gear grid.
`episode-stats.html`	Run-summary stats with flex cross-stretch.
`leaderboard.html`	Season leaderboard table/rows.
`map.html`	World map with a footer travel-cost row.
`todo.html`	Minimal todo list (good first read).

Dashboards

Sample	Exercises
`stock-dashboard.html`	Dense flex→grid→flex chain (intrinsic-sizing stress).
`advanced-dashboard.html`	Multi-panel dashboard with `backdrop-filter` and height containment.

Notes

Several samples render with a uniform vertical offset vs. Chrome — that is the intentional Segoe-UI default-face divergence (font-drift in the audit), not a layout bug. See Text & Fonts.
Samples whose layout still diverges structurally are the ranked backlog in SAMPLE_AUDIT.md (grid height containment, message-bubble shrink-to-fit, inline transforms, etc.).

Next: Testing