@open-slot-ui/core 0.2.3 → 0.3.0

package/dist/index.cjs

@@ -135,6 +135,48 @@ 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] },
+  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] },
+  settings: { anchor: "bottom-center", offset: [-740, -320], rotation: -5 },
+  mute: { anchor: "top-right", offset: [-122, 46] },
+  fullscreen: { anchor: "top-right", offset: [-46, 46] },
+  rtp: { anchor: "top-left", offset: [20, 18] },
+  "session-timer": { anchor: "top-left", offset: [20, 46] },
+  "net-position": { anchor: "top-left", offset: [20, 74] }
+});
+var portraitDefaultLayouts = Object.freeze({
+  // Mobile sizes run ~1.5× the desktop base (the Figma mobile frame draws the
+  // controls larger relative to its width) so the buttons read well on a phone.
+  spin: { anchor: "bottom-center", offset: [0, -510], scale: 1.35 },
+  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 },
+  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 },
+  mute: { anchor: "top-right", offset: [-159, 57], scale: 1.5 },
+  fullscreen: { anchor: "top-right", offset: [-57, 57], scale: 1.5 },
+  // Compliance readouts scale up ~2× on mobile with wider line spacing.
+  rtp: { anchor: "top-left", offset: [16, 16], scale: 2 },
+  "session-timer": { anchor: "top-left", offset: [16, 66], scale: 2 },
+  "net-position": { anchor: "top-left", offset: [16, 116], scale: 2 },
+  balance: { anchor: "bottom-left", offset: [36, -110], rotation: -5 },
+  bet: { anchor: "bottom-right", offset: [-36, -110], rotation: 5 }
+});
+function defaultLayout(id) {
+  const l = landscapeDefaultLayouts[id];
+  if (!l) return { anchor: "center" };
+  return { anchor: l.anchor, offset: l.offset ? [l.offset[0], l.offset[1]] : void 0, scale: l.scale, rotation: l.rotation };
+}
+
 // src/transition/Transition.ts
 var Squish = class {
   constructor(scale = 0.92, ms = 120) {
@@ -1585,24 +1627,24 @@ var OpenUI = class {
         this.bus.emit("localeChanged", loc);
       })
     );
-    this.spin = new SpinControl({ layout: { anchor: "bottom-center", offset: [0, -440] } }, this.bus);
+    this.spin = new SpinControl({ layout: defaultLayout("spin") }, this.bus);
     this.balance = new ValueDisplay({
       id: "balance",
       label: "openui.balance",
       // i18n key → localizes + swaps in social mode
-      layout: { anchor: "bottom-left", offset: [220, -96] },
+      layout: defaultLayout("balance"),
       currency: { code: "USD", decimals: 2 },
       initial: 1e3
     });
     this.bet = new ValueDisplay({
       id: "bet",
       label: "openui.bet",
-      layout: { anchor: "bottom-right", offset: [-220, -96] },
+      layout: defaultLayout("bet"),
       currency: { code: "USD", decimals: 2 },
       initial: 1
     });
     this.settingsButton = new ButtonControl(
-      { id: "settings", layout: { anchor: "bottom-center", offset: [400, -440] } },
+      { id: "settings", layout: defaultLayout("settings") },
       this.bus
     );
     this.settingsPanel = new PanelControl(
@@ -1611,20 +1653,20 @@ var OpenUI = class {
     );
     this.musicSlider = new SliderControl({ id: "music", label: "Music", layout: { anchor: "center" }, initial: 0.7 }, this.bus);
     this.sfxSlider = new SliderControl({ id: "sfx", label: "Sound", layout: { anchor: "center" }, initial: 0.5 }, this.bus);
-    this.bonusButton = new ButtonControl({ id: "bonus", layout: { anchor: "bottom-center", offset: [-400, -440] } }, this.bus);
+    this.bonusButton = new ButtonControl({ id: "bonus", layout: defaultLayout("bonus") }, this.bus);
     this.autoplay = new AutoplayControl(
-      { id: "autoplay", layout: { anchor: "bottom-center", offset: [-225, -440] }, options: [5, 10, 25, 50, 100, Infinity] },
+      { id: "autoplay", layout: defaultLayout("autoplay"), options: [5, 10, 25, 50, 100, Infinity] },
       this.bus
     );
-    this.turbo = new TurboControl({ id: "turbo", layout: { anchor: "bottom-center", offset: [225, -440] } }, this.bus);
-    this.betMinus = new ButtonControl({ id: "bet-minus", layout: { anchor: "bottom-center", offset: [-150, -270] } }, this.bus);
-    this.betPlus = new ButtonControl({ id: "bet-plus", layout: { anchor: "bottom-center", offset: [150, -270] } }, this.bus);
+    this.turbo = new TurboControl({ id: "turbo", layout: defaultLayout("turbo") }, this.bus);
+    this.betMinus = new ButtonControl({ id: "bet-minus", layout: defaultLayout("bet-minus") }, this.bus);
+    this.betPlus = new ButtonControl({ id: "bet-plus", layout: defaultLayout("bet-plus") }, this.bus);
     this.betStepper = new StepperControl({ id: "bet-stepper", layout: { anchor: "center" }, levels: [0.5, 1, 2, 5, 10, 20], index: 1 }, this.bus);
-    this.muteButton = new ButtonControl({ id: "mute", layout: { anchor: "top-right", offset: [-122, 46] } }, this.bus);
-    this.fullscreenButton = new ButtonControl({ id: "fullscreen", layout: { anchor: "top-right", offset: [-46, 46] } }, this.bus);
-    this.rtp = new ReadoutControl({ id: "rtp", kind: "percent", label: "RTP", layout: { anchor: "top-left", offset: [18, 18] } });
-    this.sessionTimer = new ReadoutControl({ id: "session-timer", kind: "duration", label: "Session Time", layout: { anchor: "top-left", offset: [18, 36] } });
-    this.netPosition = new ReadoutControl({ id: "net-position", kind: "currency", label: "Net", currency: { code: "USD", symbol: "$", display: "symbol", position: "prefix", decimals: 2 }, layout: { anchor: "top-left", offset: [18, 60] } });
+    this.muteButton = new ButtonControl({ id: "mute", layout: defaultLayout("mute") }, this.bus);
+    this.fullscreenButton = new ButtonControl({ id: "fullscreen", layout: defaultLayout("fullscreen") }, this.bus);
+    this.rtp = new ReadoutControl({ id: "rtp", kind: "percent", label: "RTP", layout: defaultLayout("rtp") });
+    this.sessionTimer = new ReadoutControl({ id: "session-timer", kind: "duration", label: "Session Time", layout: defaultLayout("session-timer") });
+    this.netPosition = new ReadoutControl({ id: "net-position", kind: "currency", label: "Net", currency: { code: "USD", symbol: "$", display: "symbol", position: "prefix", decimals: 2 }, layout: defaultLayout("net-position") });
     this.noticePanel = new PanelControl({ id: "notice-panel", variant: "modal", layout: { anchor: "center" } }, this.bus);
     for (const c of [
       this.spin,
@@ -2064,9 +2106,16 @@ function createUI(spec = {}, hooks = {}) {
     }
   }
   if (spec.jurisdiction) ui.applyJurisdiction(spec.jurisdiction);
-  if (spec.responsive) {
-    installResponsive(ui, spec.responsive);
-  }
+  const portraitControls = {};
+  for (const [id, layout] of Object.entries(portraitDefaultLayouts)) {
+    if (spec.controls?.[id]?.layout) continue;
+    portraitControls[id] = { layout };
+  }
+  Object.assign(portraitControls, spec.responsive?.portrait?.controls);
+  installResponsive(ui, {
+    ...spec.responsive,
+    portrait: { ...spec.responsive?.portrait, controls: portraitControls }
+  });
   if (spec.lockDuringSpin !== false) {
     let wasSpinning = false;
     ui.spin.state.subscribe((s) => {
@@ -2290,6 +2339,7 @@ exports.composeMenu = composeMenu;
 exports.computeScreen = computeScreen;
 exports.createUI = createUI;
 exports.defaultHudSpec = defaultHudSpec;
+exports.defaultLayout = defaultLayout;
 exports.defaultLayoutConfig = defaultLayoutConfig;
 exports.defaultTheme = defaultTheme;
 exports.defineUI = defineUI;
@@ -2303,8 +2353,10 @@ exports.installResponsive = installResponsive;
 exports.integerDigits = integerDigits;
 exports.isSafeColor = isSafeColor;
 exports.isSocialCurrency = isSocialCurrency;
+exports.landscapeDefaultLayouts = landscapeDefaultLayouts;
 exports.openuiDefaults = openuiDefaults;
 exports.openuiSocialDefaults = openuiSocialDefaults;
+exports.portraitDefaultLayouts = portraitDefaultLayouts;
 exports.resolveCurrency = resolveCurrency;
 exports.resolvePlacement = resolvePlacement;
 exports.resolveTheme = resolveTheme;