@open-slot-ui/core 0.4.2 → 0.5.0

package/dist/index.cjs

@@ -101,7 +101,9 @@ var defaultLayoutConfig = {
   refLandscape: [1920, 1080],
   refPortrait: [1080, 2337],
   portraitBelowAspect: 0.85,
-  breakpoints: { mobile: 480, tablet: 840 }
+  breakpoints: { mobile: 480, tablet: 840 },
+  // Bottom bar hugs the screen bottom; extra height opens above (reel area).
+  stageAnchor: [0.5, 1]
 };
 function breakpointFor(width, height, cfg) {
   const short = Math.min(Math.max(width, 1), Math.max(height, 1));
@@ -115,7 +117,11 @@ function computeScreen(width, height, cfg) {
   const orientation = w / h < cfg.portraitBelowAspect ? "portrait" : "landscape";
   const [rw, rh] = orientation === "portrait" ? cfg.refPortrait : cfg.refLandscape;
   const scale = Math.min(w / rw, h / rh);
-  return { width: w, height: h, orientation, breakpoint: breakpointFor(w, h, cfg), scale };
+  const sw = rw * scale;
+  const sh = rh * scale;
+  const [ax, ay] = cfg.stageAnchor ?? [0.5, 1];
+  const stage = { x: (w - sw) * ax, y: (h - sh) * ay, width: sw, height: sh };
+  return { width: w, height: h, orientation, breakpoint: breakpointFor(w, h, cfg), scale, stage };
 }
 
 // src/layout/anchor.ts
@@ -127,9 +133,10 @@ function anchorFactors(anchor) {
 function resolvePlacement(spec, screen) {
   const [ax, ay] = anchorFactors(spec.anchor);
   const [ox, oy] = spec.offset ?? [0, 0];
+  const st = screen.stage;
   return {
-    x: ax * screen.width + ox * screen.scale,
-    y: ay * screen.height + oy * screen.scale,
+    x: st.x + ax * st.width + ox * screen.scale,
+    y: st.y + ay * st.height + oy * screen.scale,
     scale: screen.scale * (spec.scale ?? 1),
     rotation: (spec.rotation ?? 0) * Math.PI / 180
   };
@@ -137,14 +144,21 @@ function resolvePlacement(spec, screen) {
 
 // src/layout/defaultLayouts.ts
 var landscapeDefaultLayouts = Object.freeze({
-  spin: { anchor: "bottom-center", offset: [0, -140], scale: 0.9 },
-  autoplay: { anchor: "bottom-center", offset: [-204, -112] },
-  turbo: { anchor: "bottom-center", offset: [204, -112] },
+  // Measured 1:1 from the Figma "Desk DEF" frame (1920×1080): spin ~0.95 of the base
+  // 220px coin, dropped to −124, autoplay/turbo flanking at ±204. (The homogeneous
+  // stage keeps this off the reels, so it no longer needs shrinking.)
+  spin: { anchor: "bottom-center", offset: [0, -124], scale: 0.95 },
+  autoplay: { anchor: "bottom-center", offset: [-204, -100] },
+  turbo: { anchor: "bottom-center", offset: [204, -100] },
   balance: { anchor: "bottom-left", offset: [135, -104], rotation: -5 },
   bet: { anchor: "bottom-right", offset: [-186, -104], rotation: 5 },
   "bet-plus": { anchor: "bottom-right", offset: [-120, -188], rotation: 5 },
   "bet-minus": { anchor: "bottom-right", offset: [-120, -104], rotation: 5 },
   bonus: { anchor: "bottom-center", offset: [740, -320] },
+  // Bonus "total win" readout — occupies the buy-feature corner; the renderer swaps
+  // the two so only one shows at a time (buy in base play, total-win in a bonus round).
+  // Right-anchored so a long localized caption grows LEFT and never clips the edge.
+  "total-win": { anchor: "bottom-right", offset: [-150, -300] },
   settings: { anchor: "bottom-center", offset: [-740, -320], rotation: -5 },
   mute: { anchor: "top-right", offset: [-122, 46] },
   fullscreen: { anchor: "top-right", offset: [-46, 46] },
@@ -159,6 +173,9 @@ var portraitDefaultLayouts = Object.freeze({
   autoplay: { anchor: "bottom-center", offset: [-258, -510], scale: 1.5 },
   turbo: { anchor: "bottom-center", offset: [258, -510], scale: 1.5 },
   bonus: { anchor: "bottom-center", offset: [-438, -480], scale: 1.3 },
+  // Figma "Mobile FS": the total-win sits on the LEFT at the spin's level (where the
+  // buy coin lives in base play), left-aligned + tilted −10° — NOT centred over spin.
+  "total-win": { anchor: "bottom-left", offset: [30, -520], rotation: -10 },
   settings: { anchor: "bottom-center", offset: [438, -480], scale: 1.5, rotation: -5 },
   "bet-minus": { anchor: "bottom-center", offset: [-105, -267], scale: 1.5 },
   "bet-plus": { anchor: "bottom-center", offset: [105, -267], scale: 1.5 },
@@ -864,6 +881,10 @@ var ReadoutControl = class extends Control {
   value = new Signal(0);
   /** Whether a `'duration'` readout is currently advancing. */
   running = new Signal(false);
+  /** Accent emphasis: the renderer tints the value in the theme accent while on — for
+   *  a MODIFIED readout (e.g. net position while a bet boost is active). Mirrors
+   *  {@link ValueDisplay.emphasized}. */
+  emphasized = new Signal(false);
   kind;
   label;
   decimals;
@@ -883,6 +904,10 @@ var ReadoutControl = class extends Control {
   set(v) {
     this.value.set(safeAmount(v, this.value.get()));
   }
+  /** Accent-tint the value ("this readout is modified"). Strict boolean. */
+  setEmphasis(on) {
+    this.emphasized.set(on === true);
+  }
   get() {
     return this.value.get();
   }
@@ -1409,6 +1434,7 @@ var openuiDefaults = {
   "openui.bet": "Bet",
   "openui.balance": "Balance",
   "openui.win": "Win",
+  "openui.totalWin": "Total Win",
   "openui.menu": "Menu",
   "openui.rules": "Rules",
   "openui.paytable": "Paytable",
@@ -1458,6 +1484,13 @@ var openuiSocialDefaults = {
   "openui.bet": "Play",
   "openui.balance": "Balance",
   "openui.win": "Prize",
+  "openui.totalWin": "Total Prize",
+  // "Paytable" (contains "pay") and "Insufficient funds" ("funds") are restricted in
+  // social mode → their compliant equivalents. The literal "Paytable" is overridden too
+  // because the menu SECTION heading uses it as its key (DEFAULT_MENU_TITLES).
+  "openui.paytable": "Prizes",
+  Paytable: "Prizes",
+  "openui.err.insufficient.title": "Insufficient balance",
   "openui.buyFeature.title": "Play bonus",
   "openui.buyFeature.message": "Play this bonus now?",
   "openui.err.insufficient.message": "You don't have enough balance for this play.",
@@ -1506,27 +1539,67 @@ function dictionary(messages, locale, socialMessages) {
 }
 
 // src/format/currency.ts
-var ZERO_DECIMAL = ["JPY", "KRW", "VND", "CLP", "ISK", "HUF", "TWD", "UGX", "XAF", "XOF", "PYG", "RWF"];
-var CRYPTO = { BTC: 8, ETH: 8, LTC: 8, BCH: 8, DOGE: 8, XRP: 6, SOL: 6, TRX: 6, USDT: 2, USDC: 2 };
 var CURRENCY_TABLE = Object.freeze({
-  ...Object.fromEntries(ZERO_DECIMAL.map((c) => [c, { decimals: 0 }])),
-  ...Object.fromEntries(Object.entries(CRYPTO).map(([c, d]) => [c, { decimals: d }])),
-  // Stake social currencies: Gold Coins + Stake Cash — shown as GC/SC, not fiat.
-  XGC: { decimals: 2, display: "GC", social: true },
-  XSC: { decimals: 2, display: "SC", social: true },
-  GC: { decimals: 2, display: "GC", social: true },
-  SC: { decimals: 2, display: "SC", social: true }
+  // ── fiat — symbol BEFORE the amount ──────────────────────────────────────────
+  USD: { symbol: "$", decimals: 2 },
+  CAD: { symbol: "CA$", decimals: 2 },
+  JPY: { symbol: "\xA5", decimals: 0 },
+  EUR: { symbol: "\u20AC", decimals: 2 },
+  RUB: { symbol: "\u20BD", decimals: 2 },
+  CNY: { symbol: "CN\xA5", decimals: 2 },
+  PHP: { symbol: "\u20B1", decimals: 2 },
+  INR: { symbol: "\u20B9", decimals: 2 },
+  IDR: { symbol: "Rp", decimals: 0 },
+  KRW: { symbol: "\u20A9", decimals: 0 },
+  BRL: { symbol: "R$", decimals: 2 },
+  MXN: { symbol: "MX$", decimals: 2 },
+  TRY: { symbol: "\u20BA", decimals: 2 },
+  GBP: { symbol: "\xA3", decimals: 2 },
+  // ── fiat — symbol AFTER the amount ───────────────────────────────────────────
+  DKK: { symbol: "kr", decimals: 2, symbolAfter: true },
+  PLN: { symbol: "z\u0142", decimals: 2, symbolAfter: true },
+  VND: { symbol: "\u20AB", decimals: 0, symbolAfter: true },
+  CLP: { symbol: "CLP", decimals: 0, symbolAfter: true },
+  ARS: { symbol: "ARS", decimals: 2, symbolAfter: true },
+  PEN: { symbol: "S/", decimals: 2, symbolAfter: true },
+  // ── crypto (8-dp, so sub-cent + high precision format correctly) ─────────────
+  BTC: { symbol: "\u20BF", decimals: 8 },
+  ETH: { symbol: "\u039E", decimals: 8 },
+  LTC: { symbol: "\u0141", decimals: 8 },
+  BCH: { symbol: "BCH", decimals: 8 },
+  DOGE: { symbol: "\xD0", decimals: 8 },
+  USDT: { symbol: "\u20AE", decimals: 2 },
+  USDC: { symbol: "USDC", decimals: 2 },
+  // ── Stake social coins — Gold Coins / Stake Cash (shown as GC / SC) ───────────
+  XGC: { symbol: "GC", decimals: 2, social: true },
+  XSC: { symbol: "SC", decimals: 2, social: true },
+  GC: { symbol: "GC", decimals: 2, social: true },
+  SC: { symbol: "SC", decimals: 2, social: true }
 });
 var upper = (code) => typeof code === "string" ? code.toUpperCase() : "";
 function isSocialCurrency(code) {
   return CURRENCY_TABLE[upper(code)]?.social === true;
 }
 function resolveCurrency(code, overrides = {}) {
-  const info = CURRENCY_TABLE[upper(code)] ?? { decimals: 2 };
+  const info = CURRENCY_TABLE[upper(code)];
+  if (!info) {
+    return {
+      code: overrides.code ?? code,
+      decimals: clampDecimals(overrides.decimals ?? 2),
+      position: overrides.position ?? "suffix",
+      separator: overrides.separator ?? ",",
+      decimalChar: overrides.decimalChar ?? ".",
+      ...overrides.symbol ? { symbol: overrides.symbol, display: overrides.display ?? "symbol" } : {}
+    };
+  }
   return {
-    code: overrides.code ?? info.display ?? code,
+    // Social coins carry their DISPLAY code (XGC → "GC", XSC → "SC"); fiat/crypto keep
+    // their ISO code (the symbol is what's actually rendered under `display:'symbol'`).
+    code: overrides.code ?? (info.social ? info.symbol : code),
+    symbol: overrides.symbol ?? info.symbol,
+    display: overrides.display ?? "symbol",
+    position: overrides.position ?? (info.symbolAfter ? "suffix" : "prefix"),
     decimals: clampDecimals(overrides.decimals ?? info.decimals),
-    position: overrides.position ?? "suffix",
     separator: overrides.separator ?? ",",
     decimalChar: overrides.decimalChar ?? "."
   };
@@ -1542,7 +1615,11 @@ function formatAmount(value, spec, opts = {}) {
   const body = frac ? `${grouped}${dot}${frac}` : grouped;
   const sign = n < 0 ? "-" : opts.signed ? "+" : "";
   const number = `${sign}${body}`;
-  return (spec.position ?? "suffix") === "prefix" ? `${spec.code} ${number}` : `${number} ${spec.code}`;
+  const symbolMode = spec.display === "symbol" && !!spec.symbol;
+  const affix = symbolMode ? spec.symbol : spec.code;
+  const prefix = (spec.position ?? "suffix") === "prefix";
+  const gap = symbolMode && prefix ? "" : " ";
+  return prefix ? `${affix}${gap}${number}` : `${number}${gap}${affix}`;
 }
 
 // src/OpenUI.ts
@@ -1604,6 +1681,9 @@ var OpenUI = class {
   spin;
   balance;
   bet;
+  /** Bonus "total win" readout — shown in the buy-feature slot during a bonus/free-
+   *  spins round (the renderer swaps it for the buy button). Same money logic as `bet`. */
+  totalWin;
   settingsButton;
   settingsPanel;
   musicSlider;
@@ -1652,6 +1732,13 @@ var OpenUI = class {
       currency: { code: "USD", decimals: 2 },
       initial: 1
     });
+    this.totalWin = new ValueDisplay({
+      id: "total-win",
+      label: "openui.totalWin",
+      layout: defaultLayout("total-win"),
+      currency: { code: "USD", decimals: 2 },
+      initial: 0
+    });
     this.settingsButton = new ButtonControl(
       { id: "settings", layout: defaultLayout("settings") },
       this.bus
@@ -1681,6 +1768,7 @@ var OpenUI = class {
       this.spin,
       this.balance,
       this.bet,
+      this.totalWin,
       this.settingsButton,
       this.settingsPanel,
       this.musicSlider,
@@ -2057,6 +2145,127 @@ function installResponsive(ui, responsive) {
   };
 }
 
+// src/spec/socialPhrases.ts
+var FORBIDDEN = [
+  { re: /\bpay\w*/i, term: "pay*", replacement: 'prize / award (e.g. "paytable" \u2192 "prizes")' },
+  { re: /\bpayout\w*/i, term: "payout", replacement: "award" },
+  { re: /\bbets?\b|\bbetting\b/i, term: "bet", replacement: "play" },
+  { re: /\bwager\w*/i, term: "wager", replacement: "play" },
+  { re: /\bgambl\w*/i, term: "gamble", replacement: "play" },
+  { re: /\bcash\w*/i, term: "cash", replacement: "coins" },
+  { re: /\bfunds?\b/i, term: "funds", replacement: "coins / balance" },
+  { re: /\bmoney\b/i, term: "money", replacement: "coins" },
+  { re: /\bdeposit\w*/i, term: "deposit", replacement: "purchase" },
+  { re: /\bwithdraw\w*/i, term: "withdraw", replacement: "redeem" },
+  { re: /\bcredits?\b/i, term: "credit", replacement: "coins / balance" },
+  { re: /\bwinnings?\b/i, term: "winnings", replacement: "prizes" },
+  { re: /\bjackpots?\b/i, term: "jackpot", replacement: "grand prize" },
+  { re: /\breal[-\s]?money\b/i, term: "real money", replacement: "coins" }
+];
+function findForbiddenPhrases(text) {
+  if (typeof text !== "string" || !text) return [];
+  const seen = /* @__PURE__ */ new Set();
+  const out = [];
+  for (const r of FORBIDDEN) {
+    if (r.re.test(text) && !seen.has(r.term)) {
+      seen.add(r.term);
+      out.push({ term: r.term, replacement: r.replacement });
+    }
+  }
+  return out;
+}
+function walkBlock(b, src, out) {
+  const add = (t, s = src) => {
+    if (typeof t === "string" && t) out.push({ source: s, text: t });
+  };
+  const anyB = b;
+  switch (b.kind) {
+    case "text":
+    case "heading":
+    case "subheading":
+    case "legal":
+      add(b.text);
+      break;
+    case "callout":
+      add(b.title);
+      add(b.text);
+      break;
+    case "media":
+      add(b.title);
+      add(b.text);
+      break;
+    case "slider":
+    case "toggle":
+    case "button":
+    case "select":
+    case "stepper":
+    case "value":
+      add(anyB.label);
+      add(anyB.hint);
+      break;
+    case "steps":
+      b.items.forEach((s, i) => add(s, `${src}.items[${i}]`));
+      break;
+    case "table":
+      (b.columns ?? []).forEach((c) => add(c));
+      b.rows.forEach((row) => row.forEach((c) => add(c)));
+      break;
+    case "paytable":
+      b.rows.forEach((r) => {
+        add(r.symbol);
+        add(r.payouts);
+      });
+      break;
+    case "cards":
+      b.items.forEach((it) => {
+        add(it.title);
+        add(it.text);
+      });
+      break;
+    case "stat-grid":
+      b.items.forEach((it) => {
+        add(it.label);
+        add(it.value);
+      });
+      break;
+    case "group":
+      add(b.title);
+      b.children.forEach((c, i) => walkBlock(c, `${src}.children[${i}]`, out));
+      break;
+  }
+}
+function collectSocialCopy(spec) {
+  const out = [];
+  const menu = spec.menu;
+  if (menu) {
+    const sections = [
+      ["settings", menu.settings],
+      ["paytable", menu.paytable],
+      ["rules", menu.rules]
+    ];
+    for (const [sec, blocks] of sections) (blocks ?? []).forEach((b, i) => walkBlock(b, `menu.${sec}[${i}]`, out));
+    if (menu.titles) {
+      for (const [k, v] of Object.entries(menu.titles)) if (v) out.push({ source: `menu.titles.${k}`, text: v });
+    }
+    if (menu.banner?.src) ;
+  }
+  (spec.rules ?? []).forEach((b, i) => walkBlock(b, `rules[${i}]`, out));
+  if (spec.game?.name) out.push({ source: "game.name", text: spec.game.name });
+  const en = spec.locale?.messages?.en;
+  if (en) {
+    for (const [k, v] of Object.entries(en)) if (typeof v === "string") out.push({ source: `locale.en[${JSON.stringify(k)}]`, text: v });
+  }
+  return out;
+}
+function checkSocialPhrases(spec) {
+  const issues = [];
+  for (const { source, text } of collectSocialCopy(spec)) {
+    const matches = findForbiddenPhrases(text);
+    if (matches.length) issues.push({ source, text, matches });
+  }
+  return issues;
+}
+
 // src/spec/createUI.ts
 function resolveTurboModes(modes) {
   if (Array.isArray(modes)) return modes.length ? modes : ["off", "on"];
@@ -2086,12 +2295,27 @@ function createUI(spec = {}, hooks = {}) {
     const cur = typeof spec.currency === "string" ? resolveCurrency(spec.currency) : spec.currency;
     ui.balance.setCurrency(cur);
     ui.bet.setCurrency(cur);
+    ui.totalWin.setCurrency(cur);
     ui.netPosition.setCurrency(cur);
   }
   if (spec.social) {
     if (typeof spec.social === "object") ui.setSocial(true, spec.social.coin);
     else ui.setSocial(true);
   }
+  if (spec.social || spec.jurisdiction?.socialCasino) {
+    const found = checkSocialPhrases(spec);
+    for (const issue of found) {
+      hooks.onDataIssue?.({
+        level: "warn",
+        path: issue.source,
+        code: "social-forbidden-phrase",
+        message: `Social mode restricted wording in "${issue.text}": ${issue.matches.map((m) => `\u201C${m.term}\u201D \u2192 ${m.replacement}`).join("; ")}`
+      });
+    }
+    if (found.length && typeof console !== "undefined") {
+      console.warn(`[open-ui] social mode: ${found.length} string(s) contain restricted phrases (see onDataIssue). First: ${found[0].source} \u2192 "${found[0].text}"`);
+    }
+  }
   if (typeof spec.rtp === "number") ui.rtp.set(spec.rtp);
   if (spec.game) ui.gameInfo = { name: spec.game.name, version: spec.game.version };
   if (spec.betLadder?.levels?.length) {
@@ -2354,10 +2578,12 @@ exports.buildBetLadder = buildBetLadder;
 exports.buildBlocks = buildBlocks;
 exports.buildPanel = buildPanel;
 exports.buttonBlocks = buttonBlocks;
+exports.checkSocialPhrases = checkSocialPhrases;
 exports.clampBet = clampBet;
 exports.clampDecimals = clampDecimals;
 exports.clampDigits = clampDigits;
 exports.clampMinDigits = clampMinDigits;
+exports.collectSocialCopy = collectSocialCopy;
 exports.composeMenu = composeMenu;
 exports.computeScreen = computeScreen;
 exports.createUI = createUI;
@@ -2371,6 +2597,7 @@ exports.displayDigits = displayDigits;
 exports.effect = effect;
 exports.errorBlocks = errorBlocks;
 exports.extendTheme = extendTheme;
+exports.findForbiddenPhrases = findForbiddenPhrases;
 exports.formatAmount = formatAmount;
 exports.installResponsive = installResponsive;
 exports.integerDigits = integerDigits;