@umicat/three-sdk 0.13.0 → 0.15.0

package/dist/GameAudio.js

@@ -230,6 +230,19 @@ export class GameAudio {
         const ctx = this.ctx;
         if (this.muted)
             return;
+        // The music may still be waiting for a gesture even though the context is
+        // not. `start()` is the only other place that starts it, and it early-exits
+        // when the context is ALREADY running — which is what happens in a
+        // cross-origin iframe, where the context comes up running and the first
+        // `play()` therefore never takes the unlock path. Measured: a game
+        // embedded that way had a live context, decoded buffers, working effects
+        // and no music at all, because `startMusic()` had never been reached.
+        //
+        // `play()` is the right place for the second attempt: it is called from
+        // inside a real gesture (a button, a move), which is exactly the
+        // permission an element needs, and `startMusic` is idempotent.
+        if (this.ready && this.musicName && !this.musicEl)
+            this.startMusic();
         if (!this.ready || !ctx || !this.master) {
             // Not "drop it": this is the unlocking gesture, and the sound it asked
             // for is the one the player is waiting to hear. `start()` plays it.

package/dist/Input3D.js

@@ -409,10 +409,9 @@ export class Input3D {
             transform: 'translate(-50%, -50%)', pointerEvents: 'none',
         });
         pad.appendChild(knob);
-        // ONE cluster holds every button, laid out by flexbox, because the bug this
-        // replaces was two buttons independently choosing "bottom right" and
-        // landing on top of each other. Jump sits at the corner where it always
-        // was; actions stack to its left and wrap upward.
+        // ONE cluster holds every button, because the bug this replaces was two of
+        // them independently choosing "bottom right" and landing on top of each
+        // other. What it does with them is `layOnArc` below.
         const cluster = document.createElement('div');
         Object.assign(cluster.style, {
             position: 'absolute', right: '6vmin', bottom: '7vmin',
@@ -420,6 +419,53 @@ export class Input3D {
             flexWrap: 'wrap-reverse', justifyContent: 'flex-start',
             gap: '3vmin', maxWidth: '52vmin', pointerEvents: 'none',
         });
+        /**
+         * Put the buttons on the arc a THUMB actually sweeps.
+         *
+         * They were a wrapping flex row, which is how they ended up in a straight
+         * line across the bottom of the screen the moment a game had exactly two —
+         * the third button had been the only thing forcing a wrap, so removing it
+         * silently changed the layout of the two that were left. A row is also the
+         * wrong shape regardless: a thumb is hinged at the bottom corner and moves
+         * on an arc around it, so buttons at the same HEIGHT are at different
+         * reaches, and the far one is the one that gets missed.
+         *
+         * So: a quarter circle centred on the corner. Index 0 sits low and to the
+         * left, and each one after it steps up and in toward the edge, every one of
+         * them the same distance from the thumb's hinge.
+         *
+         * The radius is DERIVED, not chosen: neighbours must be at least a button
+         * apart along the chord, so a wider sweep — which is what more buttons
+         * need — pushes the arc out. Past three the radius it asks for has the
+         * buttons halfway up the screen, so the old wrapping row is kept for that
+         * case rather than pretending an arc still fits.
+         */
+        const layOnArc = (els) => {
+            const S = 20; // vmin — the button size, below
+            const [A0, A1] = [16, 74]; // degrees, the comfortable sweep
+            if (els.length > 3)
+                return; // the flex row stays as it is
+            const step = els.length > 1 ? (A1 - A0) / (els.length - 1) : 0;
+            // Chord between neighbours = 2R·sin(step/2), and it may not be smaller
+            // than a button plus a little air.
+            const need = els.length > 1 ? (S * 1.12) / (2 * Math.sin((step * Math.PI) / 360)) : S * 1.3;
+            const R = Math.max(S * 1.3, need);
+            cluster.style.display = 'block';
+            cluster.style.width = '0';
+            cluster.style.height = '0';
+            els.forEach((el, i) => {
+                const t = ((A0 + step * i) * Math.PI) / 180;
+                // From the corner, in vmin, then back off by half a button so the
+                // ARC passes through each button's middle rather than its corner.
+                const dx = (R * Math.cos(t)).toFixed(2);
+                const dy = (R * Math.sin(t)).toFixed(2);
+                Object.assign(el.style, {
+                    position: 'absolute',
+                    right: `calc(${dx}vmin - min(${S / 2}vmin, 60px))`,
+                    bottom: `calc(${dy}vmin - min(${S / 2}vmin, 60px))`,
+                });
+            });
+        };
         /** Returns the button; its glyph, if it has one, is left in `glyph`. */
         let glyph = null;
         const makeButton = (label, icon) => {
@@ -480,11 +526,13 @@ export class Input3D {
             ...this.actions.map((a) => ({ id: a.id, label: a.label ?? a.id.slice(0, 1).toUpperCase(), icon: a.icon })),
         ];
         let jumpBtn = null;
+        const made = [];
         for (const b of buttons) {
             const el = makeButton(b.label, b.icon);
             if (glyph)
                 this.glyphs.set(b.id, glyph);
             cluster.append(el);
+            made.push(el);
             // Jump is the platform's own: its press is read through `get jump()`
             // rather than through the action latch, so it is wired below instead.
             if (b.id === 'jump')
@@ -492,6 +540,7 @@ export class Input3D {
             else
                 this.wireButton(el, b.id);
         }
+        layOnArc(made);
         root.append(zone, lookZone, pad, cluster);
         container.appendChild(root);
         this.root = root;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umicat/three-sdk",
-  "version": "0.13.0",
+  "version": "0.15.0",
   "description": "Three.js runtime for Umicat games: the scene3d design format, its loader with physics, a kinematic character controller, and the Umicat platform via @umicat/platform-sdk.",
   "type": "module",
   "main": "dist/index.js",