@energy8platform/shell 0.2.0

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

@@ -0,0 +1,227 @@
+import { Container, Graphics, Rectangle, Text } from 'pixi.js';
+import type { PixiComponentContext, ShellLayer } from '../context';
+import { contrastText } from '@/core/colors';
+import { makeIcon } from '../pixi-icon';
+import { makeText } from '../text';
+import { attachHover, attachPress } from './widgets';
+import { FlexBox, roundedPath } from './flex';
+
+/** Fraction of the frame a card modal may occupy (GameShell.MODAL_FIT). */
+const MODAL_FIT = 0.86;
+
+export interface CardAction {
+  label: string;
+  /** 'accent' (filled accent), 'ghost' (glass), or an explicit CSS colour. */
+  kind: 'accent' | 'ghost' | string;
+  onTap: () => void;
+  /** accent colour for the 'accent' kind (defaults to shell accent / card accent). */
+  accent?: string;
+  disabled?: boolean;
+}
+
+export interface CardOpts {
+  title: string;
+  accent?: string;
+  closable?: boolean;
+  /** unused for now — backdrop blur is approximated by the veil tint. */
+  blur?: number;
+  onClose?: () => void;
+  tag?: string;
+  /** Max card width in em (default 28). The bet picker uses 44em to fit 6 chips/row. */
+  maxEm?: number;
+}
+
+/** A centred card on a frosted backdrop: accent title heading, vertical body, full-bleed footer
+ *  buttons (corners clipped by the card silhouette), and an overlay ✕ pinned to the screen corner.
+ *  Shared by the buy-bonus confirm, the bet/autoplay pickers, the generic + replay modals. */
+export class CardModal extends Container implements ShellLayer {
+  readonly tag?: string;
+  readonly body: FlexBox;
+  private host: PixiComponentContext;
+  private opts: CardOpts;
+  private veil = new Graphics();
+  private cardRoot = new Container();
+  private bg = new Graphics();
+  private actionsRow = new Container();
+  private actionsH = 0;
+  private closeBtn?: Container;
+  private em: number;
+  private cardW: number;
+  private cardH = 0;
+  private accent: string;
+
+  constructor(host: PixiComponentContext, opts: CardOpts) {
+    super();
+    this.host = host;
+    this.opts = opts;
+    this.tag = opts.tag;
+    this.accent = opts.accent ?? host.tokens.accent;
+    this.em = clampEm(host.screenW, host.screenH);
+    this.cardW = Math.min((opts.maxEm ?? 28) * this.em, host.screenW * 0.86);
+
+    this.body = new FlexBox({
+      direction: 'column',
+      align: 'center',
+      gap: 1.05 * this.em,
+      padding: 1.2 * this.em,
+    });
+    const title = makeText(opts.title, {
+      size: 1.2 * this.em,
+      weight: '800',
+      color: this.accent,
+      letterSpacing: 1.2 * this.em * 0.04,
+      upper: true,
+      align: 'center',
+      wrapWidth: this.cardW - 2.4 * this.em,
+    });
+    this.body.add(title);
+
+    this.veil.eventMode = 'static';
+    // No mask on cardRoot: a masked container blocks pointer events to its children (chips/buttons
+    // wouldn't hover). The only thing that needs clipping is the full-bleed action buttons' bottom
+    // corners, which we round directly (setActions) — the body content never reaches the corners.
+    this.cardRoot.addChild(this.bg, this.body, this.actionsRow);
+    this.addChild(this.veil, this.cardRoot);
+
+    if (opts.closable !== false && opts.onClose) this.addClose(opts.onClose);
+  }
+
+  get emSize(): number {
+    return this.em;
+  }
+  get cardWidth(): number {
+    return this.cardW;
+  }
+  get cardAccent(): string {
+    return this.accent;
+  }
+
+  /** Full-bleed footer buttons, flush to the card's bottom edge. */
+  setActions(actions: CardAction[]): void {
+    this.actionsRow.removeChildren().forEach((c) => c.destroy({ children: true }));
+    if (!actions.length) return;
+    const each = this.cardW / actions.length;
+    const h = 3.1 * this.em;
+    const r = 1.3 * this.em; // card corner radius — only the outermost buttons round at the bottom
+    actions.forEach((a, i) => {
+      const btn = this.makeButton(a, each, h, i === 0 ? r : 0, i === actions.length - 1 ? r : 0);
+      btn.position.set(i * each, 0);
+      this.actionsRow.addChild(btn);
+    });
+    this.actionsH = h;
+  }
+
+  private makeButton(a: CardAction, w: number, h: number, blRadius: number, brRadius: number): Container {
+    const root = new Container();
+    const fill =
+      a.kind === 'accent' ? (a.accent ?? this.accent) : a.kind === 'ghost' ? this.host.tokens.plaqueGlassHover : a.kind;
+    const ink = a.kind === 'ghost' ? '#ffffff' : a.kind === 'accent' ? '#ffffff' : contrastText(fill);
+    const bg = new Graphics();
+    const draw = (hover: boolean): void => {
+      bg.clear();
+      roundedPath(bg, 0, 0, w, h, [0, 0, brRadius, blRadius]); // square top (flush to body), rounded bottom
+      bg.fill(a.disabled ? '#8d939e' : fill);
+      if (hover && !a.disabled) {
+        roundedPath(bg, 0, 0, w, h, [0, 0, brRadius, blRadius]);
+        bg.fill({ color: '#ffffff', alpha: 0.12 }); // ≈ filter:brightness(1.08), a touch stronger
+      }
+    };
+    draw(false);
+    const label = makeText(a.label, {
+      size: this.em,
+      weight: '800',
+      color: a.disabled ? '#3a3f47' : ink,
+      letterSpacing: this.em * 0.04,
+      upper: true,
+      align: 'center',
+    });
+    label.anchor.set(0.5);
+    label.position.set(w / 2, h / 2);
+    root.addChild(bg, label);
+    if (!a.disabled) {
+      root.eventMode = 'static';
+      root.cursor = 'pointer';
+      root.hitArea = new Rectangle(0, 0, w, h);
+      attachHover(root, () => draw(true), () => draw(false));
+      root.on('pointertap', () => a.onTap());
+    }
+    return root;
+  }
+
+  private addClose(onClose: () => void): void {
+    const size = 36;
+    const root = new Container();
+    const bg = new Graphics();
+    const draw = (hover: boolean): void => {
+      bg.clear();
+      bg.circle(size / 2, size / 2, size / 2);
+      bg.fill(hover ? this.host.tokens.plaqueGlass : this.host.tokens.plaqueDark);
+    };
+    draw(false);
+    const glyph = makeIcon('close', 20, '#ffffff');
+    glyph.position.set((size - 20) / 2, (size - 20) / 2);
+    root.addChild(bg, glyph);
+    root.eventMode = 'static';
+    root.cursor = 'pointer';
+    root.hitArea = new Rectangle(0, 0, size, size);
+    attachHover(root, () => {
+      draw(true);
+      glyph.setColor(this.host.tokens.accent);
+    }, () => {
+      draw(false);
+      glyph.setColor('#ffffff');
+    });
+    attachPress(root, 0.92, onClose);
+    this.closeBtn = root;
+    this.addChild(root); // pinned to the screen corner, not the card
+  }
+
+  /** Measure body + actions, draw the card background/mask, then place everything. Call once
+   *  after the body content and actions are set. */
+  build(): void {
+    this.body.setLayoutSize(this.cardW, undefined);
+    const bodyH = this.body.outerHeight;
+    this.cardH = bodyH + this.actionsH;
+
+    this.bg.clear();
+    this.bg.roundRect(0, 0, this.cardW, this.cardH, 1.3 * this.em);
+    this.bg.fill(this.host.tokens.plaqueSolid);
+
+    this.body.position.set(0, 0);
+    this.actionsRow.position.set(0, bodyH);
+
+    this.resize(this.host.screenW, this.host.screenH);
+  }
+
+  resize(w: number, h: number): void {
+    this.veil.clear();
+    this.veil.rect(0, 0, w, h);
+    this.veil.fill(this.host.tokens.backdrop);
+    this.veil.hitArea = new Rectangle(0, 0, w, h);
+    this.recentre(w, h);
+    this.fit();
+  }
+
+  private recentre(w: number, h: number): void {
+    this.cardRoot.position.set((w - this.cardW) / 2, (h - this.cardH) / 2);
+    if (this.closeBtn) this.closeBtn.position.set(w - 36 - 12, 12);
+  }
+
+  /** Scale the card down to fit a short/narrow popout (GameShell.fitSheet). */
+  fit(): void {
+    const availW = this.host.screenW;
+    const availH = this.host.screenH;
+    if (this.cardW <= 0 || this.cardH <= 0) return;
+    const s = Math.min(1, (availW * MODAL_FIT) / this.cardW, (availH * MODAL_FIT) / this.cardH);
+    this.cardRoot.scale.set(s < 0.999 ? s : 1);
+    // keep the scaled card centred
+    const sw = this.cardW * this.cardRoot.scale.x;
+    const sh = this.cardH * this.cardRoot.scale.y;
+    this.cardRoot.position.set((availW - sw) / 2, (availH - sh) / 2);
+  }
+}
+
+/** Card font-size knob — clamp(11px, 2cqmin, 15px) of the shell root. */
+function clampEm(w: number, h: number): number {
+  return Math.max(11, Math.min(15, Math.min(w, h) * 0.02));
+}

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

@@ -0,0 +1,243 @@
+import { Container, Graphics, Rectangle, Text, type FederatedPointerEvent } from 'pixi.js';
+import type { PixiComponentContext } from '../context';
+import { makeText } from '../text';
+import { FlexBox, type Sizable } from './flex';
+import { attachHover } from './widgets';
+
+// Overlay/modal content primitives — section plaques, full-width glass rows, chips, sliders,
+// wrapped paragraphs. Each mirrors a CSS class from the DOM shell (.ge-gi-sec, .ge-ov-row,
+// .ge-chip, .ge-slider …).
+
+/** Wrapped body text — `.ge-gi-sec p` / `.ge-gi-win-desc` etc. */
+export function paragraph(
+  host: PixiComponentContext,
+  text: string,
+  width: number,
+  opts: { size?: number; color?: string } = {},
+): Text {
+  return makeText(text, {
+    size: opts.size ?? 15,
+    weight: '400',
+    color: opts.color ?? 'rgba(255,255,255,.88)',
+    wrapWidth: width,
+    lineHeight: (opts.size ?? 15) * 1.6,
+  });
+}
+
+/** A zero-size flex child that grows to push siblings apart (CSS `flex:1` spacer). */
+export class Spacer extends Container implements Sizable {
+  private w = 0;
+  setLayoutSize(w: number | undefined): void {
+    if (w != null) this.w = w;
+  }
+  measureSize(): { w: number; h: number } {
+    return { w: this.w, h: 0 };
+  }
+}
+
+/** A titled glass-plaque section — `.ge-gi-sec`. Stretch to the body width; add content via `.add`. */
+export function section(host: PixiComponentContext, title?: string): FlexBox {
+  const sec = new FlexBox({
+    direction: 'column',
+    align: 'start',
+    gap: 12,
+    padding: { top: 16, bottom: 16, left: 18, right: 18 },
+    background: { fill: host.tokens.plaqueGlass, radius: 16 },
+  });
+  if (title) {
+    sec.add(
+      makeText(title, {
+        size: 11,
+        weight: '700',
+        color: host.tokens.plaqueLabel,
+        letterSpacing: 11 * 0.14,
+        upper: true,
+      }),
+    );
+  }
+  return sec;
+}
+
+/** A full-width glass row — `.ge-ov-row`. `button` adds hover (glass-hover bg + accent label). */
+export class GlassRow extends Container implements Sizable {
+  private host: PixiComponentContext;
+  private bg = new Graphics();
+  private content = new Container();
+  private w = 0;
+  private h: number;
+  private padX = 16;
+  private isButton: boolean;
+  private hoverLabels: Text[] = [];
+
+  constructor(host: PixiComponentContext, opts: { height?: number; button?: boolean; onTap?: () => void } = {}) {
+    super();
+    this.host = host;
+    this.h = opts.height ?? 46;
+    this.isButton = !!opts.button;
+    this.addChild(this.bg, this.content);
+    if (opts.button) {
+      this.eventMode = 'static';
+      this.cursor = 'pointer';
+      attachHover(this, () => this.paint(true), () => this.paint(false));
+      if (opts.onTap) this.on('pointertap', opts.onTap);
+    }
+    this.paint(false);
+  }
+
+  /** Register a label to recolour to accent on hover (button rows). */
+  addContent(node: Container, accentOnHover?: Text): this {
+    this.content.addChild(node);
+    if (accentOnHover) this.hoverLabels.push(accentOnHover);
+    return this;
+  }
+
+  private paint(hover: boolean): void {
+    this.bg.clear();
+    this.bg.roundRect(0, 0, this.w || 1, this.h, 16);
+    this.bg.fill(hover && this.isButton ? this.host.tokens.plaqueGlassHover : this.host.tokens.plaqueGlass);
+    for (const l of this.hoverLabels) l.style.fill = hover ? this.host.tokens.accent : '#ffffff';
+  }
+
+  setLayoutSize(w: number | undefined): void {
+    if (w != null) this.w = w;
+    this.paint(false);
+    this.hitArea = new Rectangle(0, 0, this.w, this.h);
+  }
+  measureSize(): { w: number; h: number } {
+    return { w: this.w, h: this.h };
+  }
+  get innerWidth(): number {
+    return this.w - this.padX * 2;
+  }
+  get rowHeight(): number {
+    return this.h;
+  }
+  get pad(): number {
+    return this.padX;
+  }
+}
+
+/** Draggable volume slider — `.ge-slider` (accent fill + white thumb). */
+export class Slider extends Container implements Sizable {
+  private host: PixiComponentContext;
+  private track = new Graphics();
+  private fill = new Graphics();
+  private thumb = new Graphics();
+  private w = 0;
+  private _value: number;
+  private onInput: (v: number) => void;
+
+  constructor(host: PixiComponentContext, value: number, onInput: (v: number) => void) {
+    super();
+    this.host = host;
+    this._value = value;
+    this.onInput = onInput;
+    this.addChild(this.track, this.fill, this.thumb);
+    this.eventMode = 'static';
+    this.cursor = 'pointer';
+    this.on('pointerdown', this.onDown);
+    this.on('globalpointermove', this.onMove);
+    // release over the slider (pointerup) OR anywhere else after a press on it (pointerupoutside)
+    this.on('pointerup', this.endDrag);
+    this.on('pointerupoutside', this.endDrag);
+  }
+
+  private dragging = false;
+  private onDown = (e: FederatedPointerEvent): void => {
+    this.dragging = true;
+    this.setFromX(this.toLocal(e.global).x);
+  };
+  private onMove = (e: FederatedPointerEvent): void => {
+    if (!this.dragging) return;
+    this.setFromX(this.toLocal(e.global).x);
+  };
+  private endDrag = (): void => {
+    this.dragging = false;
+  };
+
+  // Thumb radius — the thumb travels within [R, w−R] so it never overhangs the track ends (like a
+  // native range input), giving even left/right padding instead of poking past the right edge.
+  private static R = 9;
+
+  private setFromX(x: number): void {
+    const usable = this.w - 2 * Slider.R;
+    const v = Math.max(0, Math.min(1, usable > 0 ? (x - Slider.R) / usable : 0));
+    this._value = v;
+    this.draw();
+    this.onInput(v);
+  }
+
+  private draw(): void {
+    const h = 24;
+    const cy = h / 2;
+    const tr = 6; // track thickness (thicker, closer to the DOM accent-color range)
+    const r = Slider.R;
+    const cx = r + this._value * Math.max(0, this.w - 2 * r); // thumb centre, kept within the track
+    this.track.clear();
+    this.track.roundRect(0, cy - tr / 2, this.w, tr, tr / 2).fill(this.host.tokens.track);
+    this.fill.clear();
+    this.fill.roundRect(0, cy - tr / 2, cx, tr, tr / 2).fill(this.host.tokens.accent);
+    this.thumb.clear();
+    this.thumb.circle(cx, cy, r).fill('#ffffff');
+    this.hitArea = new Rectangle(0, 0, this.w, h);
+  }
+
+  setLayoutSize(w: number | undefined): void {
+    if (w != null) this.w = w;
+    this.draw();
+  }
+  measureSize(): { w: number; h: number } {
+    return { w: this.w, h: 24 };
+  }
+}
+
+/** Picker chip — `.ge-chip`. Selected = accent bg + accent border. */
+export class Chip extends Container implements Sizable {
+  readonly id: string;
+  private host: PixiComponentContext;
+  private bg = new Graphics();
+  private labelText: Text;
+  private _on: boolean;
+  private w = 0;
+  private h = 0;
+  private em: number;
+
+  constructor(host: PixiComponentContext, id: string, label: string, selected: boolean, em: number, onTap: (id: string) => void) {
+    super();
+    this.id = id;
+    this.host = host;
+    this._on = selected;
+    this.em = em;
+    this.labelText = makeText(label, { size: em, weight: '700', color: '#ffffff', align: 'center' });
+    this.addChild(this.bg, this.labelText);
+    this.eventMode = 'static';
+    this.cursor = 'pointer';
+    this.on('pointertap', () => onTap(id));
+    attachHover(this, () => this.paint(true), () => this.paint(false));
+  }
+
+  setSelected(v: boolean): void {
+    this._on = v;
+    this.paint(false);
+  }
+
+  private paint(hover: boolean): void {
+    const t = this.host.tokens;
+    this.bg.clear();
+    this.bg.roundRect(0, 0, this.w, this.h, 0.8 * this.em);
+    this.bg.fill(this._on ? t.accent : hover ? t.plaqueGlassHover : 'rgba(255,255,255,.04)');
+    this.bg.stroke({ color: this._on ? t.accent : t.plaqueLine, width: 1 });
+    this.labelText.position.set((this.w - this.labelText.width) / 2, (this.h - this.labelText.height) / 2);
+  }
+
+  setLayoutSize(w: number | undefined, h: number | undefined): void {
+    if (w != null) this.w = w;
+    // height from content (padding .8em vertical) unless imposed
+    this.h = h ?? this.labelText.height + 1.6 * this.em;
+    this.paint(false);
+    this.hitArea = new Rectangle(0, 0, this.w, this.h);
+  }
+  measureSize(): { w: number; h: number } {
+    return { w: this.w || this.labelText.width + 1.1 * this.em, h: this.h || this.labelText.height + 1.6 * this.em };
+  }
+}