Pub Quiz Platform — Remote app

Combined app document — Remote app


Status	Draft
App	Remote app
Generated	2026-05-13
Source of truth	`.claude/context/apps/remote.md`

The quizmaster controller — a phone-first app the host uses to drive the session from anywhere in the room. Pairs with a Host over the local network, sees a scaled-down mirror of the Host display, reads the per-slide host-notes, and issues control commands (advance, go-back, and in Alpha a richer set: jump-to-slide, trigger reveals, lock/unlock, scoring overrides). Runs on iPhone, Android phones, iPad, and Android tablets.

Overview

The Remote ships in MVP with a minimum viable controls feature set — discovery, pairing, mirror, host-notes, live state (scores, timer, slide index), and advance/go-back. The rich control command set is an Alpha goal and is layered onto the same pairing + transport.

The Remote is a one-to-one peer of the Host — only one paired Remote at a time in v1. Multi-Remote support (co-quizmasters) is a Stretch consideration.

For the cross-cutting requirements, scope, and platform list, see the project PRD.

User flows

Per-flow diagrams (lifecycle, discover + pair, paired live control) live on the dedicated flow page, each linked to its relevant UI mockups.

Full flow diagrams — App lifecycle · Discover + pair · Paired live control. Each flow links to the mockups it touches.
Surface inventory matrix — Every screen / control / notification with leads-to targets, phase tags, FR references.
Mockup launcher → — Browse every static mockup in one browser tab.

Architecture

A Unity project, sibling to Quiz.Host, Quiz.Client, and Quiz.Preview. Two top-level scenes — MainMenu (discovery + pairing: list visible Hosts, pair via manual confirm or QR, connect) and Play (render the mirrored Host canvas + host-notes + live state, send control commands). References com.quiz.shared-assets, com.quiz.runtime, com.quiz.core via UPM. See Per-App Scaffolding — Remote for the on-disk shape. Cross-cutting:

Architecture overview for the platform-level diagram.
Networking for Bonjour/mDNS discovery, pairing, and the control-message WebSocket family.

Design notes

The brand identity, palette, typography, and motion language are project-wide and live in the Design Specification. Remote-specific design notes (controller layout, portrait-locked orientation, mirror-view styling) are tagged *{remote}* in that document.

Build plan

The Remote's items are part of the single project Build Plan. Filter visually for remote — Remote-tagged work is concentrated in Remote app — minimum viable controls (MVP), Remote app — rich control commands (Alpha).

User flows — detail

Surface-to-surface navigation for the Remote. Each diagram is a Mermaid flowchart rendered inline. Authoring conventions and theme tokens live in .claude/skills/mermaid-diagrams/SKILL.md.

Surfaces in Remote surfaces. FR in Functional Requirements — Remote.

2. Discover + pair

Mockups: Discover · Pair method · Pair pending

%%{init: {"theme":"base","themeVariables":{"fontFamily":"Inter, system-ui, sans-serif","fontSize":"14px","primaryColor":"#FFFFFF","primaryBorderColor":"#FF009F","primaryTextColor":"#1F1933","secondaryColor":"#F0EBE3","secondaryBorderColor":"#16B2EB","secondaryTextColor":"#1F1933","tertiaryColor":"#F8F5F0","tertiaryBorderColor":"#5A536B","tertiaryTextColor":"#1F1933","lineColor":"#5A536B","edgeLabelBackground":"#F8F5F0","mainBkg":"#F8F5F0","clusterBkg":"#F0EBE3","clusterBorder":"#DDD5C8","titleColor":"#1F1933","nodeBorder":"#5A536B"},"flowchart":{"useMaxWidth":false,"htmlLabels":false,"curve":"basis","padding":20,"nodeSpacing":70,"rankSpacing":80}}}%% flowchart TB DIS[Discover\nBonjour-pulse + host list] DIS -->|Refresh| DIS DIS -->|⋯ menu| AM[App menu] AM --> AMS[Settings] --> AM AM --> AMA[About] --> AM DIS -->|select host| PM[Pair method picker\nScan QR · Enter code] PM --> QR[Scan QR\ncamera viewfinder] PM --> CD[Enter code\nQ7-3K9-FX] QR -->|scanned| PP[Pair pending\nwaiting on Host] CD -->|submit| RES{Code valid?} RES -->|yes| PP RES -->|no| BAD[Code didn't match] --> CD PP -->|host accepts| PAR[Paired · live control] PP -->|host rejects| REJ[Pair rejected] --> DIS PP -->|timeout| TO[Host didn't respond] --> DIS classDef decision fill:#FFF1DC,stroke:#FFA94D,stroke-width:2px,color:#1F1933 classDef terminal fill:#E8F5EC,stroke:#36D17B,stroke-width:2px,color:#1F1933,rx:14,ry:14 class RES decision class PAR terminal

3. Paired — live control

Mockups: Paired · Reconnecting

%%{init: {"theme":"base","themeVariables":{"fontFamily":"Inter, system-ui, sans-serif","fontSize":"14px","primaryColor":"#FFFFFF","primaryBorderColor":"#FF009F","primaryTextColor":"#1F1933","secondaryColor":"#F0EBE3","secondaryBorderColor":"#16B2EB","secondaryTextColor":"#1F1933","tertiaryColor":"#F8F5F0","tertiaryBorderColor":"#5A536B","tertiaryTextColor":"#1F1933","lineColor":"#5A536B","edgeLabelBackground":"#F8F5F0","mainBkg":"#F8F5F0","clusterBkg":"#F0EBE3","clusterBorder":"#DDD5C8","titleColor":"#1F1933","nodeBorder":"#5A536B"},"flowchart":{"useMaxWidth":false,"htmlLabels":false,"curve":"basis","padding":20,"nodeSpacing":70,"rankSpacing":80}}}%% flowchart TB PAR[Paired screen\nmirror + notes + HUD + nav] PAR -->|▸ Advance| PAR PAR -->|◂ Back| PAR PAR -->|swipe left| PAR PAR -->|swipe right| PAR PAR -->|tap mirror| FS[Fullscreen mirror] -->|tap to dismiss| PAR PAR -->|tap scores| SD[Scores detail] --> PAR PAR -->|Jump to slide… — Alpha| JTS[Slide picker] --> PAR PAR -->|Trigger reveal ▾ — Alpha| RM[Reveal menu] --> PAR PAR -->|Lock / Unlock input — Alpha| PAR PAR -->|+10s — Alpha| PAR PAR -->|Skip timer — Alpha| PAR PAR -->|Score overrides — Alpha| SO[Overrides panel] --> PAR PAR -->|⋯ menu| PMU[Paired menu] PMU --> UNP[Unpair] --> DIS[Discover] PMU --> PMS[Settings] --> PAR PMU --> PMA[About] --> PAR PAR -->|host disconnect| RB[Reconnecting banner] RB -->|reconnect| PAR RB -->|timeout| HG[Host gone] --> DIS classDef terminal fill:#E8F5EC,stroke:#36D17B,stroke-width:2px,color:#1F1933,rx:14,ry:14 class DIS terminal