@umicat/three-sdk 0.8.3 → 0.8.4

package/dist/Input3D.d.ts

@@ -55,6 +55,17 @@ export interface Input3DOptions {
     /** Radians of camera rotation per screen-width dragged. Same number governs
      *  touch drags and desktop right-drags, so there is one knob to turn. */
     lookSensitivity?: number;
+    /**
+     * How much of the top of the screen the move and look zones leave alone.
+     *
+     * A HUD lives at the top — score, hearts, a mute button — and the zones are
+     * full-screen and sit ABOVE the game's DOM, so without this every button up
+     * there is unreachable on a phone while looking perfectly fine. Nobody
+     * drives a thumbstick from the top edge, so the trade is free.
+     *
+     * A CSS length; the default is `max(64px, 12%)`.
+     */
+    controlsTopInset?: string;
 }
 /**
  * Movement and jump, from a keyboard or a thumb, behind one interface.
@@ -82,6 +93,7 @@ export declare class Input3D {
     private actions;
     private stickMode;
     private wantLook;
+    private topInset;
     private lookSens;
     private readonly lookDelta;
     private enabled;

package/dist/Input3D.js

@@ -69,6 +69,7 @@ export class Input3D {
         this.actions = [];
         this.stickMode = 'floating';
         this.wantLook = true;
+        this.topInset = 'max(64px, 12%)';
         this.lookSens = 4.6;
         this.lookDelta = { x: 0, y: 0 };
         this.enabled = true;
@@ -88,6 +89,7 @@ export class Input3D {
         this.actions = opts.actions ?? [];
         this.stickMode = opts.stick ?? 'floating';
         this.wantLook = opts.look ?? true;
+        this.topInset = opts.controlsTopInset ?? 'max(64px, 12%)';
         this.lookSens = opts.lookSensitivity ?? 4.6;
         if (this.wantLook && typeof document !== 'undefined') {
             this.mountMouseLook(opts.container?.ownerDocument ?? document);
@@ -314,7 +316,7 @@ export class Input3D {
         // anything. It deliberately stops short of the buttons on the right.
         const zone = document.createElement('div');
         Object.assign(zone.style, {
-            position: 'absolute', left: '0', top: '0', width: '50%', height: '100%',
+            position: 'absolute', left: '0', top: this.topInset, width: '50%', bottom: '0',
             pointerEvents: floating ? 'auto' : 'none',
         });
         Object.assign(zone.style, NO_SELECTION);
@@ -323,7 +325,7 @@ export class Input3D {
         // can be the whole right half rather than an awkward cut-out around them.
         const lookZone = document.createElement('div');
         Object.assign(lookZone.style, {
-            position: 'absolute', right: '0', top: '0', width: '50%', height: '100%',
+            position: 'absolute', right: '0', top: this.topInset, width: '50%', bottom: '0',
             pointerEvents: this.wantLook ? 'auto' : 'none',
         });
         Object.assign(lookZone.style, NO_SELECTION);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umicat/three-sdk",
-  "version": "0.8.3",
+  "version": "0.8.4",
   "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",