@energy8platform/shell 0.6.6 → 0.7.1

package/src/ui/pixi/primitives/popover.ts

@@ -0,0 +1,163 @@
+import { Container, Graphics, Rectangle } from 'pixi.js';
+import { placePopover, popoverWidth, POPOVER, type Rect } from '@/core/popover';
+import type { PixiComponentContext, ShellLayer } from '../context';
+import { ScrollBox } from './scroll';
+import { FlexBox } from './flex';
+
+export interface PopoverOpts {
+  tag?: string;
+  /** The plate: drives x, y, maxH, below — screen coordinates, re-read on every layout (the bar
+   *  rebuilds often). Falls back to `pointer` when it resolves to null (no distinct plaque), and to
+   *  the centred, arrow-less layout when neither resolves. */
+  plate(): Rect | null;
+  /** The control the arrow points at (e.g. the burger) — drives arrowX only. Defaults to `plate`
+   *  (today's single-rect behaviour) when omitted. */
+  pointer?(): Rect | null;
+  /** Scale factor the card matches to the bar's own fit-scale (`BottomBar.fitScale()`), so its
+   *  typography/padding/row-heights carry the same visual weight the bar's chrome has. Defaults to 1. */
+  scale?(): number;
+  onClose(): void;
+  /** Build the card content for a given inner width (LOCAL/unscaled units — see `scale`). */
+  build(width: number): Container;
+}
+
+/** Light-dismiss popover: a transparent full-screen hit rect + a rounded card with an arrow.
+ *  No veil, no frosted snapshot — the game stays visible and unblurred behind it. */
+export class Popover extends Container implements ShellLayer {
+  readonly tag?: string;
+  readonly dismissLayer = new Graphics();
+  readonly card = new Container();
+  private bg = new Graphics();
+  private arrow = new Graphics();
+  private scroll: ScrollBox;
+  private host: PixiComponentContext;
+  private opts: PopoverOpts;
+  private _cardX = 0;
+  private _cardY = 0;
+  private _cardW = 0;
+  private _arrowX = -1;
+
+  constructor(host: PixiComponentContext, opts: PopoverOpts) {
+    super();
+    this.host = host;
+    this.opts = opts;
+    this.tag = opts.tag;
+    this.scroll = new ScrollBox(host.canvas);
+    this.card.addChild(this.bg, this.arrow, this.scroll);
+    this.addChild(this.dismissLayer, this.card);
+    this.dismissLayer.eventMode = 'static';
+    this.dismissLayer.on('pointertap', () => this.opts.onClose());
+    // Taps on the card must not fall through to the dismiss layer.
+    this.card.eventMode = 'static';
+    // `e` itself is undefined when a caller (or test) emits the event with no payload, so guard the
+    // property access, not just the call.
+    this.card.on('pointertap', (e?: { stopPropagation?: () => void }) => e?.stopPropagation?.());
+    this.resize(host.screenW, host.screenH);
+  }
+
+  get cardX(): number { return this._cardX; }
+  get cardY(): number { return this._cardY; }
+  get cardWidth(): number { return this._cardW; }
+  get arrowX(): number { return this._arrowX; }
+  get arrowVisible(): boolean { return this.arrow.visible; }
+
+  resize(w: number, h: number): void {
+    this.dismissLayer.clear();
+    this.dismissLayer.rect(0, 0, w, h).fill({ color: 0x000000, alpha: 0 });
+    this.dismissLayer.hitArea = new Rectangle(0, 0, w, h);
+
+    const s = this.opts.scale?.() ?? 1;
+    const pad = 8;
+    // Width is content-driven (spec: clamped to [220, min(320, surfaceWidth-16)]), so the real
+    // content has to be measured before we know the final width to lay it out at. Probe-build once
+    // at the SMALLEST allowed inner width purely to measure natural size, then throw that copy away
+    // and build the kept one at the resolved final width. Measured in LOCAL (unscaled) units, like
+    // every other Pixi size in this file — `s` only converts to screen units where placement needs
+    // it (the card carries the scale as a single transform, same as the DOM's card).
+    //
+    // The probe deliberately measures at the MINIMUM, not the maximum: a decorative row (the menu's
+    // separator) draws its divider line at exactly the width `build()` is called with — it has no
+    // content-driven size of its own, unlike every real row, which ignores that parameter and sizes
+    // from its icon/label/control regardless. Probing at the maximum would make that separator line
+    // alone measure near-maximum and dominate `naturalWidth`, pegging the card at ~maxW for every
+    // menu that has a separator — which the default menu always does. Probing at the minimum cannot
+    // distort the result the other way: content narrower than the probe still clamps to minW either
+    // way (nothing above changes), and content wider than the probe always wins the max() the layout
+    // takes over row widths, so real content still drives growth past minW correctly.
+    const probeW = POPOVER.minW - pad * 2;
+    const probe = this.opts.build(probeW);
+    const measured = probe instanceof FlexBox ? probe.measureSize().w : probe.getSize().width;
+    probe.destroy({ children: true });
+
+    // Resolve the ON-SCREEN width (screen units, clamped against the surface), then convert back to
+    // LOCAL for the actual content layout — mirrors the DOM's naturalW·s → resolvedW → style.width÷s.
+    const screenW = popoverWidth(w, (measured + pad * 2) * s);
+    const localW = s > 0 ? screenW / s : screenW;
+    const content = this.opts.build(localW - pad * 2);
+    if (content instanceof FlexBox) content.setLayoutSize(localW - pad * 2, undefined);
+    const contentH = content.getSize().height; // local units
+
+    // The plate falls back to the pointer when it can't be resolved (no distinct plaque), and to the
+    // centred/arrow-less layout when neither resolves — placePopover itself already defaults the
+    // ARROW to `pointer ?? plate`, so passing the pointer through unconditionally is enough there.
+    // A DEGENERATE (fully zero-sized) plate counts as unresolved too, matching the DOM renderer's
+    // rectOf(): `??` only falls through on null/undefined, so a real-but-{w:0,h:0} rect (e.g. read
+    // before the bar's first layout pass) would otherwise silently win over a perfectly good pointer.
+    const pointerRect = this.opts.pointer?.() ?? null;
+    const rawPlate = this.opts.plate();
+    const plateRect = rawPlate && !(rawPlate.w <= 0 && rawPlate.h <= 0) ? rawPlate : pointerRect;
+    const p = placePopover(plateRect, { w, h }, { w: screenW, h: (contentH + pad * 2) * s }, pointerRect);
+    const maxHLocal = s > 0 ? p.maxH / s : p.maxH;
+    const cardH = Math.min(contentH + pad * 2, maxHLocal); // local units
+
+    this.scroll.content.removeChildren().forEach((c) => c.destroy({ children: true }));
+    this.scroll.position.set(pad, pad);
+    this.scroll.setViewport(localW - pad * 2, cardH - pad * 2);
+    this.scroll.content.addChild(content);
+    this.scroll.refresh();
+
+    this.bg.clear();
+    this.bg.roundRect(0, 0, localW, cardH, 18);
+    this.bg.fill(this.host.tokens.plaqueDark);
+
+    // Arrow: a 14×7 triangle (local units — it lives inside the scaled card) on the edge that faces
+    // the plate.
+    this.arrow.clear();
+    this.arrow.visible = p.arrowX >= 0;
+    if (this.arrow.visible) {
+      const arrowXLocal = s > 0 ? p.arrowX / s : p.arrowX;
+      const edge = p.below ? 0 : cardH;      // the card edge the arrow sits on
+      const tip = p.below ? -7 : cardH + 7;  // the tip, pointing at the pointer (or the plate)
+      this.arrow.moveTo(arrowXLocal - 7, edge);
+      this.arrow.lineTo(arrowXLocal + 7, edge);
+      this.arrow.lineTo(arrowXLocal, tip);
+      this.arrow.fill(this.host.tokens.plaqueDark);
+    }
+
+    // The card carries the scale as ONE transform around its own (0,0) local origin — equivalent to
+    // the DOM's transform-origin:top left — so `p.x`/`p.y` (screen units) remain its visual top-left
+    // regardless of `s`, and every local size above (background rect, scroll viewport, arrow) scales
+    // with it automatically.
+    this.card.scale.set(s);
+    this.card.position.set(p.x, p.y);
+    this._cardX = p.x;
+    this._cardY = p.y;
+    this._cardW = screenW;
+    this._arrowX = p.arrowX;
+  }
+
+  /** Arrow keys scroll a long list; everything else (Escape included) goes to the controller. */
+  onKey(e: KeyboardEvent): boolean {
+    if (e.code === 'ArrowDown') { this.scroll.scrollBy(40); return true; }
+    if (e.code === 'ArrowUp') { this.scroll.scrollBy(-40); return true; }
+    return false;
+  }
+
+  fit(): void {
+    this.resize(this.host.screenW, this.host.screenH);
+  }
+
+  onRemove(): void {
+    this.scroll.destroy({ children: true });
+  }
+}

package/src/ui/pixi/primitives/scroll.ts

@@ -21,7 +21,8 @@ export class ScrollBox extends Container {
     this.canvas = canvas;
     this.addChild(this.content);
     // maskG is added to the scene only while scrolling (see refresh) — a leftover unused mask
-    // graphic renders as a white rect, and a masked container blocks pointer events to its children.
+    // graphic renders as a white rect. (Masking does NOT gate pointer events to the content, despite
+    // what an earlier version of this comment claimed — see the correction in refresh() below.)
     this.eventMode = 'static';
     this.on('pointerdown', this.onDown);
     this.on('globalpointermove', this.onMove);
@@ -55,10 +56,13 @@ export class ScrollBox extends Container {
     const b = this.content.getLocalBounds();
     const contentH = b.height + b.y; // content laid out from y≈0 downward
     this.maxScroll = Math.max(0, contentH - this.viewH);
-    // Only clip + grab pointer/drag when the content actually overflows: a masked container blocks
-    // pointer events to its children in Pixi v8, so when it fits we leave it unmasked and passive →
-    // interactive controls (settings sliders/buttons) work. Tall scrolling content (game info) that
-    // does get masked has no interactive children, so nothing is lost there.
+    // Only clip + grab pointer/drag when the content actually overflows. (An earlier version of this
+    // comment claimed a masked container blocks pointer events to its children in Pixi v8 — that's
+    // false: EventBoundary's hitPruneFn only prunes a point OUTSIDE the mask/hitArea, so interactive
+    // children stay reachable anywhere inside the visible viewport; see tests/pixi/bet-picker-fit.test.ts
+    // and tests/pixi/menu.test.ts, which hit-test an overflowing, masked list on purpose to prove it.
+    // We still only mask + grab the pointer when scrollable, since an unmasked, passive box is
+    // simpler and cheaper when there's nothing to clip or drag.)
     const scrollable = this.maxScroll > 0;
     if (scrollable) {
       this.addChild(this.maskG);

package/src/ui/html/components/Settings.ts

@@ -1,68 +0,0 @@
-import type { ShellHost } from '@/core/renderer';
-import type { VolumeKey } from '@/core/types';
-import { createOverlay } from '../primitives';
-import { icon } from '../icons';
-
-export function openSettingsModal(host: ShellHost): HTMLElement {
-  const { root, body } = createOverlay({ title: host.t('Settings'), onClose: () => host.actions.closeOverlay() });
-  root.dataset.ge = 'settings-modal';
-
-  // Sound on/off — backed by the shell's shared `soundOn` state so this toggle and the Shift+M
-  // hotkey stay in sync; `setSound` emits `settingChange({ key: 'sound' })` and refreshes the icon.
-  const sound = (() => {
-    const btn = document.createElement('button');
-    btn.className = 'ge-snd'; btn.dataset.ge = 'setting-sound';
-    btn.setAttribute('aria-label', host.t('Sound'));
-    const paint = (on: boolean) => {
-      btn.innerHTML = icon(on ? 'soundOn' : 'soundOff');
-      btn.classList.toggle('ge-active', on);
-      btn.setAttribute('aria-pressed', String(on));
-    };
-    paint(host.soundOn);
-    btn.addEventListener('click', () => host.setSound(!host.soundOn));
-    // Live-update the icon when sound changes from here OR via Shift+M (shell clears on close).
-    host.setSoundRefresh(paint);
-    const row = document.createElement('div'); row.className = 'ge-ov-row';
-    row.innerHTML = `<span class="ge-grow">${host.t('Sound')}</span>`; row.appendChild(btn);
-    return row;
-  })();
-  body.appendChild(sound);
-
-  // Volume sliders — full-width column rows with a live value readout. Positions are read from the
-  // shell's stored volumes (not hardcoded to 100%), so reopening the overlay reflects the last set
-  // value, and `host.setVolume()` from game code updates them live via the registered refreshers.
-  const updaters: Partial<Record<VolumeKey, (v: number) => void>> = {};
-  const slider = (key: VolumeKey, label: string) => {
-    const row = document.createElement('div'); row.className = 'ge-ov-row ge-col';
-    const head = document.createElement('div'); head.className = 'ge-row-head';
-    const val = document.createElement('span'); val.className = 'ge-val';
-    head.innerHTML = `<span>${label}</span>`; head.appendChild(val);
-    const input = document.createElement('input');
-    input.type = 'range'; input.min = '0'; input.max = '1'; input.step = '0.05';
-    input.className = 'ge-slider'; input.dataset.ge = `setting-${key}`;
-    const paint = (v: number) => { input.value = String(v); val.textContent = `${Math.round(v * 100)}%`; };
-    paint(host.getVolume(key));
-    input.addEventListener('input', () => {
-      val.textContent = `${Math.round(Number(input.value) * 100)}%`;
-      host.setVolume(key, Number(input.value));
-    });
-    updaters[key] = paint;
-    row.append(head, input);
-    return row;
-  };
-  body.appendChild(slider('master', host.t('Master volume')));
-  body.appendChild(slider('music', host.t('Music')));
-  body.appendChild(slider('sfx', host.t('SFX')));
-  // Live-update sliders when volume changes via host.setVolume (shell clears on close).
-  host.setVolumeRefresh((key, v) => updaters[key]?.(v));
-
-  // Game info — full-width row button that opens its own overlay
-  const gameInfo = document.createElement('button');
-  gameInfo.className = 'ge-ov-row'; gameInfo.dataset.ge = 'game-info-btn';
-  gameInfo.style.marginTop = '6px';
-  gameInfo.innerHTML = `<span style="width:22px;font-size:22px">${icon('info')}</span><span class="ge-grow">${host.t('Game info')}</span><span style="width:20px;font-size:20px;color:var(--shell-muted)">${icon('chevronRight')}</span>`;
-  gameInfo.addEventListener('click', () => { root.remove(); host.actions.openInfo(); });
-  body.appendChild(gameInfo);
-
-  return root;
-}

package/src/ui/pixi/components/Settings.ts

@@ -1,132 +0,0 @@
-import { Container, Text } from 'pixi.js';
-import type { VolumeKey } from '@/core/types';
-import type { PixiComponentContext, ShellLayer } from '../context';
-import { Overlay } from '../primitives/overlay';
-import { makeText } from '../text';
-import { makeIcon } from '../pixi-icon';
-import { FlexBox } from '../primitives/flex';
-import { Slider, Spacer } from '../primitives/controls';
-import { IconButton, attachHover } from '../primitives/widgets';
-
-/** Settings overlay — sound on/off, volume sliders, and a Game info link. */
-export function openSettings(host: PixiComponentContext): ShellLayer {
-  return new Overlay(host, {
-    tag: 'settings',
-    title: host.t('Settings'),
-    onClose: () => host.closeLayer(),
-    build: (w) => buildBody(host, w),
-  });
-}
-
-function buildBody(host: PixiComponentContext, width: number): Container {
-  const col = new FlexBox({ direction: 'column', align: 'stretch', gap: 10 });
-
-  // Sound on/off — backed by the shell's shared `soundOn` state so this toggle and the Shift+M
-  // hotkey stay in sync; `setSound` emits `settingChange({ key: 'sound' })` and refreshes the icon.
-  const soundOn0 = host.soundOn ?? true;
-  const speaker = new IconButton(soundOn0 ? 'soundOn' : 'soundOff', {
-    size: 36,
-    glyph: 24,
-    color: host.tokens.plaqueLabel,
-    hover: host.tokens.accent,
-    activeColor: '#ffffff',
-    active: soundOn0,
-    onTap: () => host.setSound?.(!(host.soundOn ?? true)),
-  });
-  // Live-update the speaker when sound changes from here OR via Shift+M (shell clears on close).
-  host.setSoundRefresh?.((on) => {
-    if (speaker.destroyed) return; // overlay torn down but refresher not yet cleared (push-over edge)
-    speaker.setIcon(on ? 'soundOn' : 'soundOff');
-    speaker.active = on;
-  });
-  col.add(glassRow(host, [textNode(host, host.t('Sound')), new Spacer(), speaker]));
-
-  // Volume sliders — positions read from the shell's stored volumes (stateful across opens); the
-  // registered refreshers let `host.setVolume()` from game code move the thumbs live.
-  const updaters: Partial<Record<VolumeKey, (v: number) => void>> = {};
-  col.add(sliderRow(host, width, 'master', host.t('Master volume'), updaters));
-  col.add(sliderRow(host, width, 'music', host.t('Music'), updaters));
-  col.add(sliderRow(host, width, 'sfx', host.t('SFX'), updaters));
-  host.setVolumeRefresh?.((key, v) => updaters[key]?.(v));
-
-  // Game info link
-  const infoIcon = makeIcon('info', 22, '#ffffff');
-  const infoLabel = textNode(host, host.t('Game info'));
-  const chevron = makeIcon('chevronRight', 20, host.tokens.muted);
-  const infoRow = glassRow(host, [infoIcon, infoLabel, new Spacer(), chevron], { button: true, onTap: () => host.actions.openInfo() });
-  col.add(infoRow);
-
-  return col;
-}
-
-function textNode(host: PixiComponentContext, text: string): Container {
-  return makeText(text, { size: 14, weight: '600', color: '#ffffff' });
-}
-
-/** A full-width glass row holding the given children (label/controls), align-centred. */
-function glassRow(host: PixiComponentContext, children: Container[], opts: { button?: boolean; onTap?: () => void } = {}): FlexBox {
-  const row = new FlexBox({
-    direction: 'row',
-    align: 'center',
-    gap: 12,
-    // .ge-ov-row { padding: clamp(11px,2.2vh,15px) 16px } — 15 at desktop; minHeight matches the
-    // DOM row's effective height (driven by the tallest child's line box, not just the em box).
-    padding: { top: 15, bottom: 15, left: 16, right: 16 },
-    minHeight: 60,
-    background: { fill: host.tokens.plaqueGlass, radius: 16 },
-  });
-  for (const c of children) row.add(c, c instanceof Spacer ? { grow: 1 } : {});
-  if (opts.button) {
-    row.setInteractive(true); // full-box hit area — hover + tap across the whole row, not just the icon/label
-    if (opts.onTap) row.on('pointertap', opts.onTap);
-    // hover: brighter glass + accent text (DOM button.ge-ov-row:hover)
-    const texts = children.filter((c): c is Text => c instanceof Text);
-    const orig = texts.map((t) => t.style.fill);
-    attachHover(
-      row,
-      () => {
-        row.setBgFill(host.tokens.plaqueGlassHover);
-        texts.forEach((t) => (t.style.fill = host.tokens.accent));
-      },
-      () => {
-        row.setBgFill(host.tokens.plaqueGlass);
-        texts.forEach((t, i) => (t.style.fill = orig[i]));
-      },
-    );
-  }
-  return row;
-}
-
-/** A column row: head (label + live % value) over a draggable slider. */
-function sliderRow(
-  host: PixiComponentContext,
-  bodyWidth: number,
-  key: VolumeKey,
-  label: string,
-  updaters: Partial<Record<VolumeKey, (v: number) => void>>,
-): FlexBox {
-  const row = new FlexBox({
-    direction: 'column',
-    align: 'stretch',
-    gap: 10,
-    padding: { top: 15, bottom: 15, left: 16, right: 16 },
-    background: { fill: host.tokens.plaqueGlass, radius: 16 },
-  });
-  const head = new FlexBox({ direction: 'row', align: 'center', justify: 'space-between' });
-  const initial = host.getVolume(key);
-  const valueText = makeText(`${Math.round(initial * 100)}%`, { size: 13, weight: '700', color: host.tokens.plaqueLabel });
-  head.add(makeText(label, { size: 14, weight: '600', color: '#ffffff' }));
-  head.add(new Spacer(), { grow: 1 });
-  head.add(valueText);
-  const slider = new Slider(host, initial, (v) => {
-    valueText.text = `${Math.round(v * 100)}%`;
-    host.setVolume(key, v);
-  });
-  updaters[key] = (v) => {
-    valueText.text = `${Math.round(v * 100)}%`;
-    slider.setValue(v);
-  };
-  row.add(head);
-  row.add(slider);
-  return row;
-}