{sections.map((section, index) => (

{index > 0 &&

} {section.choices.map((choice) => ( ))}

))}

); } ``` ### call-lobby/icons.tsx ```tsx /* * The lobby's icons: outlines on a 24-unit grid, drawn in the current colour. Each one is a still * drawing; a control that changes state shows another icon beside it rather than restyling one. */ import type { ReactNode, SVGProps } from 'react'; type IconProps = SVGProps; function Icon({ children, ...props }: IconProps & { children: ReactNode }) { return ( ); } export const MicIcon = (props: IconProps) => ( ); export const MicOffIcon = (props: IconProps) => ( ); export const CameraIcon = (props: IconProps) => ( ); export const CameraOffIcon = (props: IconProps) => ( ); export const ChevronIcon = (props: IconProps) => ( ); export const SpeakerIcon = (props: IconProps) => ( ); export const SpeakerOffIcon = (props: IconProps) => ( ); export const ShareIcon = (props: IconProps) => ( ); export const AddPersonIcon = (props: IconProps) => ( ); export const PlusIcon = (props: IconProps) => ( ); export const SettingsIcon = (props: IconProps) => ( ); export const ChatIcon = (props: IconProps) => ( ); export const LockIcon = (props: IconProps) => ( ); export const GlobeIcon = (props: IconProps) => ( ); export const ExpandIcon = (props: IconProps) => ( ); export const CollapseIcon = (props: IconProps) => ( ); export const CheckIcon = (props: IconProps) => ( ); /** * The dotted spinner: eight dots, one lit, the rest dimmer around the ring. Their colours are the * stylesheet's (.spin circle), so they follow the colour scheme. */ export const SpinnerDots = (props: IconProps) => ( ); ``` ### call-lobby/demo-pointer.tsx ```tsx 'use client'; import type { CSSProperties, Ref } from 'react'; /* * The demo's pointer, and the steps that move it. A demo is a script of awaited steps: wait, glide * the pointer onto a control, press it and call the component's own handler, as a click would. * Stopping the demo (the reader takes over, or it scrolls away) ends the step in progress at once: * its promise rejects, which ends the script right there, and the pointer fades out. * * The pointer is an HTML box around a still drawing: it glides by an animation the compositor * plays, and the press scales a box that keeps a transform at rest, so nothing it does needs a * layout. */ export type Point = { x: number; y: number }; export type Demo = { /** Resolves after `ms`. */ wait: (ms: number) => Promise; /** Glides the pointer onto `target`: its middle, or a point given as shares of its size. */ moveTo: (target: Element | null | undefined, at?: Point) => Promise; /** Glides the pointer to a point of the stage, as shares of its size. */ moveToStage: (at: Point) => Promise; /** Presses and lets go; `action` runs as the pointer goes down. */ press: (action: () => void) => Promise; }; /** What a stopped demo's pending step rejects with. */ class Stopped extends Error {} /** Where the arrow's tip is, in its 22 × 22 box: the point the pointer acts on. */ const TIP: Point = { x: 3.3, y: 2.2 }; const place = ({ x, y }: Point) => `translate(${x - TIP.x}px, ${y - TIP.y}px)`; /** Plays `script` with the pointer over `stage`; returns the function that stops it. */ export function runDemo( stage: HTMLElement, pointer: HTMLElement, script: (demo: Demo) => Promise, ): () => void { let alive = true; let flight: Animation | null = null; const timers = new Set(); const pending = new Set<() => void>(); // The pointer comes in from the lower right. let at: Point = { x: stage.offsetWidth * 0.86, y: stage.offsetHeight * 0.96 }; /** Settles like `promise`, or rejects as soon as the demo stops. */ const step = (promise: Promise) => new Promise((resolve, reject) => { if (!alive) return reject(new Stopped()); const cancel = () => reject(new Stopped()); pending.add(cancel); promise.then( () => { pending.delete(cancel); if (alive) resolve(); }, () => { pending.delete(cancel); reject(new Stopped()); }, ); }); const wait = (ms: number) => step( new Promise((resolve) => { const timer = window.setTimeout(() => { timers.delete(timer); resolve(); }, ms); timers.add(timer); }), ); /** Glides to `to`, in the stage's own px. */ const glide = (to: Point) => { const from = at; at = to; const dx = to.x - from.x; const dy = to.y - from.y; // A gentle curve, as a hand moves: the control point sits off the straight line. const bend = { x: (from.x + to.x) / 2 - dy * 0.16, y: (from.y + to.y) / 2 + dx * 0.16 }; const keyframes: Keyframe[] = []; for (let i = 0; i <= 12; i += 1) { const t = i / 12; const u = 1 - t; keyframes.push({ transform: place({ x: u * u * from.x + 2 * u * t * bend.x + t * t * to.x, y: u * u * from.y + 2 * u * t * bend.y + t * t * to.y, }), }); } flight?.cancel(); // Where it rests once the flight is over. pointer.style.transform = place(to); flight = pointer.animate(keyframes, { duration: Math.min(950, Math.max(380, Math.hypot(dx, dy) * 1.6)), easing: 'cubic-bezier(0.45, 0, 0.2, 1)', }); return step(flight.finished); }; const moveTo: Demo['moveTo'] = (target, share = { x: 0.5, y: 0.5 }) => { if (!target) return step(Promise.resolve()); const frame = stage.getBoundingClientRect(); // Screen px to the stage's own, should the stage sit in a scaled container. const scale = frame.width / stage.offsetWidth || 1; const box = target.getBoundingClientRect(); return glide({ x: (box.left + box.width * share.x - frame.left) / scale, y: (box.top + box.height * share.y - frame.top) / scale, }); }; const moveToStage: Demo['moveToStage'] = (share) => glide({ x: stage.offsetWidth * share.x, y: stage.offsetHeight * share.y }); const press: Demo['press'] = async (action) => { // The glyph dips towards its tip. const tap = pointer.firstElementChild?.animate( [ { transform: 'scale(1)' }, { transform: 'scale(0.82)', offset: 0.35 }, { transform: 'scale(1)' }, ], { duration: 280, easing: 'ease-in-out' }, ); await wait(95); action(); if (tap) await step(tap.finished); }; pointer.style.transform = place(at); pointer.style.opacity = '1'; script({ wait, moveTo, moveToStage, press }).catch((error: unknown) => { if (!(error instanceof Stopped)) throw error; }); return () => { if (!alive) return; alive = false; timers.forEach((timer) => window.clearTimeout(timer)); flight?.cancel(); pending.forEach((cancel) => cancel()); pointer.style.opacity = '0'; }; } /** The pointer's box: it moves, on a layer of its own. */ const POINTER: CSSProperties = { position: 'absolute', top: 0, left: 0, zIndex: 10, display: 'block', width: 22, height: 22, pointerEvents: 'none', opacity: 0, transition: 'opacity 0.3s ease', filter: 'drop-shadow(0 1px 1.5px rgb(0 0 0 / 0.35))', willChange: 'transform', }; /** Inside it, what dips towards the tip when the pointer presses. */ const PRESS: CSSProperties = { display: 'block', width: 22, height: 22, transform: 'scale(1)', transformOrigin: `${TIP.x}px ${TIP.y}px`, }; const DRAWING: CSSProperties = { display: 'block', width: 22, height: 22, overflow: 'visible' }; /** The arrow the demo moves around. It is decorative: the demo's effects show on the controls. */ export function DemoPointer({ ref }: { ref: Ref }) { return ( ); } ``` ### call-lobby/use-autoplay.ts ```tsx 'use client'; import { useCallback, useEffect, useRef, useState } from 'react'; /* * When a demo may play on its own: while part of it is on screen and the tab is visible, never * under reduced motion, and not while the reader is using it. `take()` hands it to the reader; it * takes back over `idle` ms after their last input. */ export function useAutoplay(idle = 6000) { const ref = useRef(null); const [visible, setVisible] = useState(false); const [reduced, setReduced] = useState(true); const [taken, setTaken] = useState(false); const timer = useRef(0); useEffect(() => { const element = ref.current; if (!element) return; let onScreen = false; const update = () => setVisible(onScreen && !document.hidden); const observer = new IntersectionObserver( ([entry]) => { onScreen = entry.isIntersecting; update(); }, { threshold: 0.3 }, ); observer.observe(element); document.addEventListener('visibilitychange', update); const motion = window.matchMedia('(prefers-reduced-motion: reduce)'); const readMotion = () => setReduced(motion.matches); readMotion(); motion.addEventListener('change', readMotion); return () => { observer.disconnect(); document.removeEventListener('visibilitychange', update); motion.removeEventListener('change', readMotion); }; }, []); const take = useCallback(() => { setTaken(true); window.clearTimeout(timer.current); timer.current = window.setTimeout(() => setTaken(false), idle); }, [idle]); useEffect(() => () => window.clearTimeout(timer.current), []); return { ref, take, visible, reduced, playing: visible && !reduced && !taken }; } ```