@mpgd/cli 0.52.0 → 0.53.0

package/templates/notifications-overlay/common/src/platform/notifications.ts

@@ -0,0 +1,131 @@
+import { resolveNotificationTopicsForTarget, type NotificationTopicCatalog } from '@mpgd/catalog';
+import type { PlatformGateway } from '@mpgd/platform';
+import type { TargetConfiguredGateway } from '@mpgd/target-config';
+import type {
+  NotificationConsentRecord,
+  NotificationRuntime,
+  NotificationTopicDeclaration,
+} from '@mpgd/platform/notifications';
+
+import notificationTopicsJson from '../../notifications/topics.json';
+import { routeNotificationOpens, type NotificationOpenRoutes } from './notificationOpens';
+import {
+  createStarterNotificationSettings,
+  type StarterNotificationSettings,
+} from './notificationSettings';
+
+/**
+ * The game's notification topic catalog (`notifications/topics.json`), the
+ * one source for every target's provider, the Apps in Toss wrapper, the
+ * Devvit server, and the game backend (`MPGD_NOTIFICATIONS_CATALOG`).
+ * `pnpm validate:notifications` checks it with `notifications/deployment.json`.
+ *
+ * The starter topics' purposes follow the notifications RFC (open question 1):
+ * `daily-ready` and `streak-at-risk` are `requested` reminders the player
+ * turns on, `friend-challenge` is `service`, and `events` is the sample
+ * `advertising` topic, mapped to iOS only: an Android FCM push cannot carry
+ * the opt-out action the Korean rules require yet. A topic whose copy offers a reward, a benefit, or a
+ * promotion is advertising: declare it so, never `requested`.
+ */
+export const starterNotificationCatalog = notificationTopicsJson as NotificationTopicCatalog;
+
+/** The consent text version recorded with advertising and night consent; bump it when the text changes. */
+export const starterAdvertisingConsentTextVersion = '1';
+
+/** The topics this deployment target maps, each with its mapping, as providers read them. */
+export function starterNotificationTopics(configTarget: string): readonly NotificationTopicDeclaration[] {
+  try {
+    return resolveNotificationTopicsForTarget(starterNotificationCatalog, configTarget);
+  } catch (error) {
+    // A catalog that cannot be read turns notifications off, never the game.
+    console.error('[notifications] the topic catalog could not be read.', error);
+    return [];
+  }
+}
+
+/**
+ * The game backend's notifications surface the starter uses: the runtime
+ * (notifications RFC "Runtime"), which composes the target's provider with
+ * the backend that keeps consent records, endpoint registrations, server
+ * reminders, and notices; and the signed-in player's consent records (the
+ * game-services Worker's `GET /consent`), which the settings screen shows.
+ */
+export interface StarterNotificationBackend {
+  readonly runtime: NotificationRuntime;
+  listConsent(): Promise<readonly NotificationConsentRecord[]>;
+}
+
+/**
+ * The game's notifications backend.
+ *
+ * The kit does not ship that runtime's backend client yet: the game-services
+ * Worker's notification routes need a session from the identity side, which
+ * comes in a later kit release. Until then this returns `undefined`, and the
+ * notification settings screen asks only for the OS or host permission and
+ * shows no reminder, advertising, or night switch, because nothing could
+ * record them. Return your own runtime and consent reader here when your
+ * backend implements those routes.
+ */
+export function createStarterNotificationBackend(
+  _platform: PlatformGateway,
+): StarterNotificationBackend | undefined {
+  return undefined;
+}
+
+const backends = new WeakMap<PlatformGateway, StarterNotificationBackend | undefined>();
+/** Per gateway, for the process: agreements given on a host that gives no read. */
+const agreements = new WeakMap<PlatformGateway, Set<string>>();
+
+/** One backend per gateway: a runtime subscribes to its provider once, for the process. */
+function starterNotificationBackend(platform: PlatformGateway): StarterNotificationBackend | undefined {
+  if (!backends.has(platform)) {
+    backends.set(platform, createStarterNotificationBackend(platform));
+  }
+  return backends.get(platform);
+}
+
+/** The settings screen's model for this gateway and locale. */
+export function createStarterNotificationSettingsModel(
+  platform: TargetConfiguredGateway,
+  input: { readonly locale: string },
+): StarterNotificationSettings {
+  const requestUpgrade = platform.identity.requestUpgrade?.bind(platform.identity);
+  const backend = starterNotificationBackend(platform);
+  let agreed = agreements.get(platform);
+  if (agreed === undefined) {
+    agreed = new Set<string>();
+    agreements.set(platform, agreed);
+  }
+  return createStarterNotificationSettings({
+    provider: platform.notificationsV2,
+    runtime: backend?.runtime,
+    ...(backend === undefined ? {} : { listConsent: () => backend.listConsent() }),
+    topics: starterNotificationTopics(platform.configTarget),
+    ...(starterNotificationCatalog.notices === undefined
+      ? {}
+      : { noticeCopy: starterNotificationCatalog.notices.copy }),
+    defaultLocale: starterNotificationCatalog.defaultLocale,
+    consentTextVersion: starterAdvertisingConsentTextVersion,
+    agreedThisSession: agreed,
+    // Devvit: a logged-out player logs in before the opt-in (the gateway's loginPrompt).
+    ...(requestUpgrade === undefined
+      ? {}
+      : { requestLogin: () => requestUpgrade({ reason: 'notifications' }) }),
+    locale: input.locale,
+  });
+}
+
+/**
+ * The game's one listener for notification opens (see
+ * `routeNotificationOpens` in `notificationOpens.ts`), over the runtime when
+ * the game has one, else the provider. Returns the unsubscribe.
+ */
+export function subscribeStarterNotificationOpens(
+  platform: PlatformGateway,
+  routes: NotificationOpenRoutes,
+): () => void {
+  const source = starterNotificationBackend(platform)?.runtime ?? platform.notificationsV2;
+  return source === undefined ? () => undefined : routeNotificationOpens(source, routes);
+}
+
+export { starterNotificationSettingsRoute } from './notificationOpens';

package/templates/notifications-overlay/common/tools/validate-notifications.ts

@@ -0,0 +1,75 @@
+import { readFileSync } from 'node:fs';
+
+import { validateNotificationTopicCatalog } from '@mpgd/catalog';
+import {
+  assertNotificationDeployment,
+  notificationDeploymentPlaceholders,
+  referenceNotificationProviders,
+  referenceNotificationTargetProviders,
+  type NotificationDeployment,
+} from '@mpgd/platform/notifications';
+
+// Checks notifications/topics.json against the notifications v2 rules, the
+// providers each target enables (android and ios: FCM, ait: Apps in Toss,
+// reddit: Devvit), and notifications/deployment.json, the settings the game
+// backend takes as MPGD_NOTIFICATIONS_DEPLOYMENT. Run it before every
+// release: `pnpm validate:notifications`.
+
+const gameRoot = new URL('../', import.meta.url);
+
+function readJson(relative: string): unknown {
+  return JSON.parse(readFileSync(new URL(relative, gameRoot), 'utf8')) as unknown;
+}
+
+const problems: string[] = [];
+let deployment: NotificationDeployment | undefined;
+try {
+  // Placeholders are reported below, so the catalog is still checked against
+  // the deployment's rules in the same run.
+  deployment = assertNotificationDeployment(readJson('notifications/deployment.json'), {
+    allowPlaceholders: true,
+  });
+} catch (error) {
+  problems.push(
+    `notifications/deployment.json: ${error instanceof Error ? error.message : String(error)}`,
+  );
+}
+// Under the Korean rules every advertising push names its sender and their
+// phone number or address; the starter ships a placeholder contact. The game
+// backend refuses a placeholder too (`assertNotificationDeployment`), so a
+// Worker given this file would not start its notifications.
+for (const field of deployment === undefined
+  ? []
+  : notificationDeploymentPlaceholders(deployment)) {
+  problems.push(
+    field === 'advertisingSender.contact'
+      ? `notifications/deployment.json: replace the ${field} placeholder with the sender's real contact `
+        + '(a phone number or an address), which every advertising push carries.'
+      : `notifications/deployment.json: replace the ${field} placeholder with the real value.`,
+  );
+}
+const result = validateNotificationTopicCatalog(readJson('notifications/topics.json'), {
+  targetProviders: Object.fromEntries(
+    Object.entries(referenceNotificationTargetProviders).map(([target, provider]) => [
+      target,
+      referenceNotificationProviders[provider],
+    ]),
+  ),
+  ...(deployment === undefined ? {} : { deployment }),
+});
+// A refused deployment is reported above, not again as a missing one.
+problems.unshift(
+  ...result.issues
+    .filter((issue) => deployment !== undefined || !issue.path.startsWith('deployment.'))
+    .map((issue) => `${issue.path}: ${issue.message}`),
+);
+if (!result.valid || problems.length > 0) {
+  console.error(
+    `Notification settings are not ready:\n${problems.map((problem) => `- ${problem}`).join('\n')}`,
+  );
+  process.exitCode = 1;
+} else {
+  console.info(
+    `Notification topics: ${result.catalog.topics.length}; advertising rules: ${deployment?.advertisingRules ?? 'none'}.`,
+  );
+}

package/templates/notifications-overlay/lite/src/lite/notificationSettingsPanel.ts

@@ -0,0 +1,200 @@
+import {
+  starterNotificationLabelsFor,
+  type StarterNotificationSettings,
+  type StarterNotificationSettingsView,
+} from '../platform/notificationSettings';
+import {
+  createStarterNotificationSettingsModel,
+  subscribeStarterNotificationOpens,
+} from '../platform/notifications';
+import type { StarterContext } from '../runtime/gameContext';
+
+/**
+ * A minimal notification settings panel for the lite template: a button over
+ * the game opens a DOM panel with the OS or host permission, reminders, and
+ * the advertising and night consent (`notificationSettings.ts` holds the
+ * logic). Every change is a tap; no switch starts on. A notification open
+ * whose route is the settings screen (the advertising opt-out action, a
+ * consent notice) opens the panel too. Returns the disposer.
+ */
+export function mountNotificationSettingsPanel(mount: HTMLElement, context: StarterContext): () => void {
+  if (context.platform.notificationsV2 === undefined) {
+    // This target has no notifications: no button that opens an empty panel.
+    return () => undefined;
+  }
+  const text = starterNotificationLabelsFor(context.locale);
+  let settings: StarterNotificationSettings | undefined;
+  let busy = false;
+  const panel = document.createElement('div');
+  panel.setAttribute('role', 'dialog');
+  panel.setAttribute('aria-label', text.title);
+  panel.style.cssText = 'position:absolute;inset:8%;overflow:auto;padding:16px;'
+    + 'background:#0b1726;color:#d6dee8;font:14px system-ui,sans-serif;border-radius:12px;display:none;';
+  const openButton = document.createElement('button');
+  openButton.type = 'button';
+  openButton.textContent = text.title;
+  openButton.style.cssText = 'position:absolute;top:8px;right:8px;padding:8px 12px;';
+  // Taps on the panel stay out of the game's own tap handling.
+  for (const element of [panel, openButton]) {
+    element.addEventListener('pointerdown', (event) => event.stopPropagation());
+  }
+
+  const model = (): StarterNotificationSettings => {
+    settings ??= createStarterNotificationSettingsModel(context.platform, {
+      locale: context.locale,
+    });
+    return settings;
+  };
+  const apply = async (action: () => Promise<StarterNotificationSettingsView>): Promise<void> => {
+    if (busy) {
+      return;
+    }
+    busy = true;
+    try {
+      const view = await action();
+      // A panel closed or removed meanwhile shows nothing, so records nothing.
+      if (panel.style.display === 'none' || !panel.isConnected) {
+        return;
+      }
+      render(view);
+      if (view.notices.length > 0) {
+        // Recorded in the background: taps need not wait for it.
+        void model().recordNoticesShown();
+      }
+    } catch (error) {
+      // The model reports its own failures as messages; anything else is logged.
+      console.error('[notifications] settings panel failed.', error);
+    } finally {
+      busy = false;
+    }
+  };
+  const button = (label: string, run: () => Promise<StarterNotificationSettingsView>): HTMLButtonElement => {
+    const element = document.createElement('button');
+    element.type = 'button';
+    element.textContent = label;
+    element.style.display = 'block';
+    element.style.margin = '6px 0';
+    element.addEventListener('click', () => {
+      void apply(run);
+    });
+    return element;
+  };
+  const paragraph = (value: string): HTMLParagraphElement => {
+    const element = document.createElement('p');
+    element.textContent = value;
+    // Notices put their title and body on two lines.
+    element.style.whiteSpace = 'pre-line';
+    return element;
+  };
+  const render = (view: StarterNotificationSettingsView): void => {
+    const current = model();
+    const close = document.createElement('button');
+    close.type = 'button';
+    close.textContent = text.close;
+    close.addEventListener('click', () => {
+      panel.style.display = 'none';
+    });
+    const children: HTMLElement[] = [close];
+    if (!view.available) {
+      children.push(paragraph(view.message ?? text.unavailable));
+      panel.replaceChildren(...children);
+      return;
+    }
+    if (!view.permission.perTopic) {
+      children.push(
+        paragraph(view.permission.state === 'granted' ? text.permissionOn : text.permissionOff),
+      );
+      if (view.permission.canRequest) {
+        // Explain before the one-shot OS prompt; the prompt runs only from the tap below.
+        children.push(paragraph(text.explanation));
+        children.push(button(text.turnOn, () => current.turnOn()));
+      }
+      if (view.permission.canLogin) {
+        children.push(button(text.logIn, () => current.logIn()));
+      }
+      if (view.permission.canOpenSettings) {
+        children.push(button(text.openSettings, () => current.openSettings()));
+      }
+      if (view.permission.canRevoke) {
+        children.push(button(text.turnOff, () => current.turnOff()));
+      }
+    }
+    if (!view.recording && (view.reminders.length > 0 || view.advertising !== undefined)) {
+      // No switch without the player's records: it could not show or change the truth.
+      children.push(
+        paragraph(view.choices === 'unreadable' ? text.choicesUnreadable : text.notConnected),
+      );
+    } else if (view.reminders.length > 0) {
+      children.push(paragraph(text.reminders));
+      for (const reminder of view.reminders) {
+        children.push(
+          button(`${reminder.label}: ${reminder.enabled ? text.on : text.off}`, () =>
+            current.setReminder(reminder.topic, !reminder.enabled),
+          ),
+        );
+      }
+    }
+    if (view.agreements.length > 0) {
+      // Per-topic hosts (Apps in Toss): service messages the player agrees to
+      // one by one; the host's settings withdraw them.
+      children.push(paragraph(text.agreements));
+      for (const agreement of view.agreements) {
+        const state = agreement.state === 'granted' ? text.on : text.off;
+        children.push(
+          agreement.canRequest
+            ? button(`${agreement.label}: ${state} - ${text.agree}`, () =>
+                current.agree(agreement.topic),
+              )
+            : paragraph(`${agreement.label}: ${state}`),
+        );
+      }
+    }
+    if (view.recording && view.advertising !== undefined) {
+      const { granted, night, nightSelectable } = view.advertising;
+      children.push(
+        button(`${text.advertising}: ${granted ? text.on : text.off}`, () =>
+          current.setAdvertising({ advertising: !granted }),
+        ),
+      );
+      children.push(paragraph(text.advertisingHelp));
+      const nightSwitch = button(`${text.night}: ${night ? text.on : text.off}`, () =>
+        current.setAdvertising({ night: !night }),
+      );
+      // Night consent adds to advertising consent: not selectable without it.
+      nightSwitch.disabled = !nightSelectable;
+      children.push(nightSwitch);
+      if (!nightSelectable) {
+        children.push(paragraph(text.nightNeedsAdvertising));
+      }
+    }
+    if (view.notices.length > 0) {
+      children.push(paragraph(text.notices));
+      for (const notice of view.notices) {
+        children.push(paragraph(`${notice.title}\n${notice.body}`));
+      }
+    }
+    if (view.message !== undefined) {
+      children.push(paragraph(view.message));
+    }
+    panel.replaceChildren(...children);
+  };
+
+  const open = (): void => {
+    panel.style.display = 'block';
+    const current = model();
+    void apply(() => current.load());
+  };
+  openButton.addEventListener('click', open);
+  // The game's one listener for opens, which receives a cold-start open:
+  // route your other topics' opens in `other` here.
+  const unsubscribe = subscribeStarterNotificationOpens(context.platform, { settings: open });
+  if (getComputedStyle(mount).position === 'static') {
+    mount.style.position = 'relative';
+  }
+  mount.append(openButton, panel);
+  return () => {
+    unsubscribe();
+    openButton.remove();
+    panel.remove();
+  };
+}

package/templates/notifications-overlay/phaser/src/scenes/NotificationSettingsScene.ts

@@ -0,0 +1,282 @@
+import Phaser from 'phaser';
+
+import {
+  starterNotificationLabelsFor,
+  type StarterNotificationLabels,
+  type StarterNotificationSettings,
+  type StarterNotificationSettingsView,
+} from '../platform/notificationSettings';
+import {
+  createStarterNotificationSettingsModel,
+  subscribeStarterNotificationOpens,
+} from '../platform/notifications';
+import { starterContextKey, type StarterContext } from '../runtime/gameContext';
+
+export const notificationSettingsSceneKey = 'NotificationSettingsScene';
+
+const textStyle = { color: '#d6dee8', fontFamily: 'Arial, sans-serif', fontSize: '18px' } as const;
+const buttonStyle = { ...textStyle, color: '#5eead4' } as const;
+/** The list's viewport on the 960x540 game: below the title and the outcome strip, above Back. */
+const list = { top: 110, height: 370, width: 960 } as const;
+
+/**
+ * Routes notification opens: one whose route is the settings screen (the
+ * advertising opt-out action, a consent notice) shows the screen, after boot
+ * when the open started the game. Route your other topics' opens in `other`
+ * (see `subscribeStarterNotificationOpens`): this is the first subscriber,
+ * the one that receives a cold-start open. An open during play leaves the
+ * run; the play scene saves its checkpoint when it shuts down.
+ */
+export function routeNotificationSettingsOpens(game: Phaser.Game, context: StarterContext): void {
+  const activeKeys = (): string[] => game.scene.getScenes(true).map((scene) => scene.scene.key);
+  const show = (): void => {
+    for (const key of activeKeys()) {
+      if (key !== notificationSettingsSceneKey) {
+        game.scene.stop(key);
+      }
+    }
+    game.scene.start(notificationSettingsSceneKey);
+  };
+  let waiting = false;
+  const afterBoot = (): void => {
+    const active = activeKeys();
+    if (active.length === 0 || active.includes('BootScene')) {
+      return;
+    }
+    game.events.off('poststep', afterBoot);
+    waiting = false;
+    show();
+  };
+  const unsubscribe = subscribeStarterNotificationOpens(context.platform, {
+    settings: () => {
+      const active = activeKeys();
+      if (active.length > 0 && !active.includes('BootScene')) {
+        show();
+      } else if (!waiting) {
+        // Booting: show the screen once the first scene after boot runs.
+        waiting = true;
+        game.events.on('poststep', afterBoot);
+      }
+    },
+  });
+  game.events.once('destroy', () => {
+    unsubscribe();
+    game.events.off('poststep', afterBoot);
+  });
+}
+
+/**
+ * The game-rendered notification settings: the OS or host permission,
+ * reminder topics, and the advertising consent the Korean rules require
+ * before any advertising push (`notificationSettings.ts` holds the
+ * logic). Night consent covers advertising that arrives between 21:00 and
+ * 08:00 KST. Every change is a tap; no switch starts on. The list has a camera
+ * of its own, which clips it under WebGL and Canvas alike and keeps hidden
+ * rows from taking taps; it scrolls by dragging.
+ */
+export class NotificationSettingsScene extends Phaser.Scene {
+  private settings!: StarterNotificationSettings;
+  private labels!: StarterNotificationLabels;
+  private content!: Phaser.GameObjects.Container;
+  private listCamera!: Phaser.Cameras.Scene2D.Camera;
+  /** The last tap's outcome, in a strip that does not scroll. */
+  private outcome!: Phaser.GameObjects.Text;
+  private busy = false;
+  /** Each visit's token: a pending action from an earlier visit changes nothing. */
+  private visit = 0;
+
+  constructor() {
+    super(notificationSettingsSceneKey);
+  }
+
+  create(): void {
+    const rawContext = this.registry.get(starterContextKey);
+    if (rawContext === undefined || rawContext === null) {
+      throw new Error('Starter context is missing from Phaser registry.');
+    }
+    const context = rawContext as StarterContext;
+    this.visit += 1;
+    this.busy = false;
+    this.labels = starterNotificationLabelsFor(context.locale);
+    this.settings = createStarterNotificationSettingsModel(context.platform, {
+      locale: context.locale,
+    });
+    const title = this.add
+      .text(480, 40, this.labels.title, { ...textStyle, color: '#ffffff', fontSize: '30px' })
+      .setOrigin(0.5);
+    const back = this.button(480, 510, this.labels.back, () => {
+      this.scene.start('LobbyScene');
+    }).setOrigin(0.5);
+    this.outcome = this.add
+      .text(480, 88, '', { ...textStyle, color: '#f59e0b', fontSize: '16px' })
+      .setOrigin(0.5);
+    this.content = this.add.container(0, 0);
+    this.listCamera = this.cameras.add(0, list.top, list.width, list.height);
+    this.listCamera.ignore([title, back, this.outcome]);
+    this.cameras.main.ignore(this.content);
+    this.enableScroll();
+    const visit = this.visit;
+    void this.apply(visit, () => this.settings.load());
+  }
+
+  private enableScroll(): void {
+    let lastY: number | undefined;
+    this.input.on('pointerdown', (pointer: Phaser.Input.Pointer) => {
+      lastY = pointer.y;
+    });
+    this.input.on('pointerup', () => {
+      lastY = undefined;
+    });
+    this.input.on('pointermove', (pointer: Phaser.Input.Pointer) => {
+      if (lastY === undefined || !pointer.isDown) {
+        return;
+      }
+      this.scrollTo(this.listCamera.scrollY - (pointer.y - lastY));
+      lastY = pointer.y;
+    });
+  }
+
+  private scrollTo(scrollY: number): void {
+    const height = this.content.getBounds().height;
+    this.listCamera.scrollY = Phaser.Math.Clamp(scrollY, 0, Math.max(0, height - list.height));
+  }
+
+  private async apply(visit: number, action: () => Promise<StarterNotificationSettingsView>): Promise<void> {
+    if (this.busy) {
+      return;
+    }
+    this.busy = true;
+    try {
+      const view = await action();
+      if (visit !== this.visit || !this.sys.isActive()) {
+        return;
+      }
+      this.render(view);
+      if (view.notices.length > 0) {
+        // Recorded in the background: taps need not wait for it.
+        void this.settings.recordNoticesShown();
+      }
+    } catch (error) {
+      // The model reports its own failures as messages; anything else is logged.
+      console.error('[notifications] settings screen failed.', error);
+    } finally {
+      if (visit === this.visit) {
+        this.busy = false;
+      }
+    }
+  }
+
+  private render(view: StarterNotificationSettingsView): void {
+    const text = this.labels;
+    this.content.removeAll(true);
+    const visit = this.visit;
+    let y = 0;
+    const line = (value: string, style: Phaser.Types.GameObjects.Text.TextStyle = textStyle) => {
+      const object = this.add.text(60, y, value, { ...style, wordWrap: { width: 840 } });
+      this.content.add(object);
+      y += object.height + 10;
+    };
+    const action = (value: string, run: () => Promise<StarterNotificationSettingsView>) => {
+      const object = this.button(60, y, `[ ${value} ]`, () => {
+        void this.apply(visit, run);
+      });
+      this.content.add(object);
+      y += object.height + 8;
+    };
+
+    // The outcome of the last tap stays in view above the list, wherever it is scrolled.
+    this.outcome.setText(view.message ?? '');
+    if (!view.available) {
+      if (view.message === undefined) {
+        line(text.unavailable);
+      }
+      this.scrollTo(0);
+      return;
+    }
+    if (!view.permission.perTopic) {
+      line(view.permission.state === 'granted' ? text.permissionOn : text.permissionOff);
+      if (view.permission.canRequest) {
+        // Explain before the one-shot OS prompt; the prompt runs only from the tap below.
+        line(text.explanation, { ...textStyle, fontSize: '15px' });
+        action(text.turnOn, () => this.settings.turnOn());
+      }
+      if (view.permission.canLogin) {
+        action(text.logIn, () => this.settings.logIn());
+      }
+      if (view.permission.canOpenSettings) {
+        action(text.openSettings, () => this.settings.openSettings());
+      }
+      if (view.permission.canRevoke) {
+        action(text.turnOff, () => this.settings.turnOff());
+      }
+    }
+    if (!view.recording && (view.reminders.length > 0 || view.advertising !== undefined)) {
+      // No switch without the player's records: it could not show or change the truth.
+      line(view.choices === 'unreadable' ? text.choicesUnreadable : text.notConnected, {
+        ...textStyle,
+        fontSize: '15px',
+      });
+    } else if (view.reminders.length > 0) {
+      line(text.reminders, { ...textStyle, color: '#ffffff' });
+      for (const reminder of view.reminders) {
+        action(`${reminder.label}: ${reminder.enabled ? text.on : text.off}`, () =>
+          this.settings.setReminder(reminder.topic, !reminder.enabled),
+        );
+      }
+    }
+    if (view.agreements.length > 0) {
+      // Per-topic hosts (Apps in Toss): service messages the player agrees to
+      // one by one; the host's settings withdraw them.
+      line(text.agreements, { ...textStyle, color: '#ffffff' });
+      for (const agreement of view.agreements) {
+        const state = agreement.state === 'granted' ? text.on : text.off;
+        if (agreement.canRequest) {
+          action(`${agreement.label}: ${state} - ${text.agree}`, () =>
+            this.settings.agree(agreement.topic),
+          );
+        } else {
+          line(`${agreement.label}: ${state}`);
+        }
+      }
+    }
+    if (view.recording && view.advertising !== undefined) {
+      const { granted, night, nightSelectable } = view.advertising;
+      action(`${text.advertising}: ${granted ? text.on : text.off}`, () =>
+        this.settings.setAdvertising({ advertising: !granted }),
+      );
+      line(text.advertisingHelp, { ...textStyle, fontSize: '15px' });
+      if (nightSelectable) {
+        action(`${text.night}: ${night ? text.on : text.off}`, () =>
+          this.settings.setAdvertising({ night: !night }),
+        );
+      } else {
+        // Night consent adds to advertising consent: not selectable without it.
+        line(`${text.night}: ${text.off}\n${text.nightNeedsAdvertising}`, {
+          ...textStyle,
+          color: '#7b8794',
+        });
+      }
+    }
+    if (view.notices.length > 0) {
+      line(text.notices, { ...textStyle, color: '#ffffff' });
+      for (const notice of view.notices) {
+        line(`${notice.title}\n${notice.body}`, { ...textStyle, fontSize: '15px' });
+      }
+    }
+    // Keep the scroll position across a re-render, within the new height.
+    this.scrollTo(this.listCamera.scrollY);
+  }
+
+  private button(x: number, y: number, value: string, onTap: () => void): Phaser.GameObjects.Text {
+    return this.add
+      .text(x, y, value, buttonStyle)
+      .setPadding(0, 8, 24, 8)
+      .setInteractive({ useHandCursor: true })
+      // A drag that scrolls the list and ends on a button is not a tap.
+      .on('pointerup', (pointer: Phaser.Input.Pointer) => {
+        if (pointer.getDistance() < 12) {
+          onTap();
+        }
+      });
+  }
+}