> For the complete documentation index, see [llms.txt](https://ai-os-and-trend-finder.gitbook.io/ai-os-and-trend-finder-docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://ai-os-and-trend-finder.gitbook.io/ai-os-and-trend-finder-docs/.spec_system/archive/phases/phase_30/session_09_content_polish_and_mobile.md). # Session 09: Content Polish And Mobile **Session ID**: `phase30-session09-content-polish-and-mobile` **Status**: Complete **Estimated Tasks**: \~12-25 **Estimated Duration**: 2-4 hours *** ## Objective Polish presentation, controls, compact assets, audio choice, and mobile usability while preserving build and media constraints. *** ## Scope ### In Scope (MVP) * Expand reviewed compact sprite atlases and add sound effects only if Web Audio API or no-audio tradeoffs are settled. * Add seed sharing, mobile layout, pointer-first controls, and viewport-specific framing. * Improve run feedback, reward presentation, combat readability, and status indicators. * Validate asset sizes, atlas consistency, animation clarity, contrast, and reduced-motion behavior. ### Out of Scope * Large asset packs, unreviewed third-party art, and baked gameplay text in sprites. * Audio wrapper dependencies beyond direct Web Audio API. *** ## Prerequisites * [x] Session 07 playable slice. * [x] Any Session 08 content affecting UI or controls. *** ## Deliverables 1. Polished compact visual and optional audio layer for the playable game. 2. Mobile and pointer-first Playwright coverage. 3. Updated asset provenance and media-policy notes for any expanded art/audio. *** ## Reference Code (`EXAMPLES/`) * **Pointer-first / drag controls (mobile)** -- `EXAMPLES/frogue/src/fae/engine.cljs` wires `pointerdown`/`pointermove`/ `pointerup`(+`pointerupoutside`) via `drag-event`, converts taps to world coords with `click-coords` (`getLocalPosition`), and sets an interactive `hitArea` in `add-stage-on-click-event`. A direct model for pointer-first input. `input.cljs` shows the keyboard-to-event dispatch table to mirror for remapping. * **Viewport framing / crisp scaling** -- `EXAMPLES/Rotten-Soup/src/assets/js/game/GameDisplay.js` `rescale(ratio)` scales `app.stage` to fit the viewport, and `SCALE_MODE = NEAREST` keeps the 32x32 atlas sharp at integer zoom -- relevant to viewport-specific framing and atlas/animation clarity (in v8, set nearest scaling per-texture). * **Audio -- cautionary contrast, not a model** -- `EXAMPLES/frogue/src/fae/sound.cljs` is built on the **`@pixi/sound`** wrapper (`js/PIXI.sound`: `register!`/preload, `play!` loop, `toggle-mute!` -> `muteAll`, music-with-intro). This session forbids audio wrapper deps beyond the direct **Web Audio API**, so treat it as the dependency to avoid -- borrow only the behaviors (preload, loop, global mute, intro-then-loop) and implement them against Web Audio directly. ## Locked Visual Assets (`visual-assets.md`) This polish session validates against the locked spec rather than restyling it: * **Acceptance checklist + Acceptance criteria**: the doc's "Acceptance Checklist" (distinct silhouettes; clean alpha, no chroma fringe; no baked text; animation frames must not resize/shift the tile footprint; compact, stably named atlases; per-asset under the media limit) is the rubric for "atlas consistency, animation clarity, contrast." * **Contrast/palette**: validate readability against the locked palette semantics (cyan currency, green health, orange/red hostile, magenta/acid hazard) on the dark AI OS shell -- the doc warns against collapsing into a one-hue blue/slate UI. * **Mobile/portrait framing**: the E2E baseline gives concrete portrait slots (e.g. 390x844 -> \~11x20 tiles at 32px). Portrait should show **fewer columns without changing source art**; use the committed `frame_*` UI-atlas pieces (corners/edges/panel) to reframe the HUD responsively. * **HUD/pip sizes**: 16x16 icons shown at 32px; 8x8 pips shown at 16px; reuse `pip_health_{full,empty}`, `pip_shield`, `pip_danger` for status indicators. * **Audio caveat reinforced**: the doc does not introduce an audio dependency; combined with the Session 09 rule, any SFX stays on direct Web Audio API (see the Reference Code note on frogue's `@pixi/sound` as the thing to avoid). ## Success Criteria * [x] Desktop and mobile Play routes frame the canvas and surrounding controls without overlap or hidden critical actions. * [x] Asset-size checks pass for committed runtime media. * [x] Optional audio, if added, respects preferences and does not add unnecessary dependency or bundle weight. --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter: ``` GET https://ai-os-and-trend-finder.gitbook.io/ai-os-and-trend-finder-docs/.spec_system/archive/phases/phase_30/session_09_content_polish_and_mobile.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.