homegames-client 0.1.1 → 0.1.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "homegames-client",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "Embeddable browser client for Homegames",
   "main": "src/index.js",
   "browser": "dist/homegames-client.js",
@@ -13,8 +13,8 @@
   "license": "GPL-3.0",
   "dependencies": {
     "buffer": "^6.0.3",
-    "homegames-common": "1.7.1",
-    "homepad": "0.2.0",
+    "homegames-common": "1.7.2",
+    "homepad": "0.2.1",
     "qrcode-generator": "^2.0.4",
     "squish-142": "npm:squishjs@1.4.2",
     "squish-143": "npm:squishjs@1.4.3",

package/src/game-loader.js

@@ -57,6 +57,15 @@ const loadGameClass = ({ files, entryPoint }) => {
         moduleCache[path] = module;
 
         const source = normalized[path];
+        if (path.endsWith('.json')) {
+            try {
+                module.exports = JSON.parse(source);
+                return module.exports;
+            } catch (err) {
+                delete moduleCache[path];
+                throw new Error('Invalid JSON module ' + path + ': ' + err.message);
+            }
+        }
         const fn = new Function('module', 'exports', 'require', '__filename', '__dirname', source);
         try {
             fn(module, module.exports, requireShim, path, dir);

package/src/game-view.js

@@ -11,7 +11,13 @@ class GameView {
         container.innerHTML = '';
         Object.assign(container.style, { position: 'relative', overflow: 'hidden', background: '#000' });
         this.canvas = document.createElement('canvas');
-        Object.assign(this.canvas.style, { display: 'block', margin: '0 auto', cursor: 'default' });
+        Object.assign(this.canvas.style, {
+            display: 'block', margin: '0 auto', cursor: 'default',
+            // Keep iOS tap highlights and long-press selection off the game surface.
+            webkitTapHighlightColor: 'transparent',
+            webkitTouchCallout: 'none',
+            webkitUserSelect: 'none', userSelect: 'none',
+        });
         this.cursor = null;
         this.cursorOverride = null;
         this._cursorRaster = null;

package/src/index.js

@@ -111,7 +111,7 @@ class HomegamesClient {
                     onVisibility: this._shareOptions.room ? visibility => this._getRtcHost().setVisibility(visibility) : null,
                     onOpen: () => this._localSession?.inputHandler?.detach(),
                     onClose: () => this._localSession?.inputHandler?.attach(),
-                } : null, { onExports: () => this.viewExports(),
+                } : null, { author: game.author, onExports: () => this.viewExports(),
                     onOpen: () => this.setInputEnabled(false), onClose: () => this.setInputEnabled(true) });
                 this._configureToolbar(chrome.toolbar);
                 return chrome;

package/src/input.js

@@ -106,6 +106,7 @@ class InputHandler {
             this._pressClickSent = false;
             this.mousePos = this._hasPointerLock() ? this._canvasCenter() : [e.clientX, e.clientY];
             this._lastClientPos = this.mousePos.slice();
+            this._pressOrigin = this.mousePos.slice();
             this.assetManager.unlockAudio();
             const captureGesture = this._canCapturePointer() && !this.spectating &&
                 e.target === this.canvas && e.button === 0 && !e.sourceCapabilities?.firesTouchEvents &&
@@ -178,6 +179,11 @@ class InputHandler {
                 return;
             }
             e.preventDefault();
+            // Claiming a canvas touch suppresses the synthesized mouse click
+            // that would normally focus an embedded game. Treat this direct
+            // gesture as input focus so the first tap can reach the game too.
+            // Page-control touches return above; blur still releases input.
+            this._focused = true;
             this._touchActive = true;
             clearTimeout(this.clickStopper); this.clickStopper = null;
             this.assetManager.liveMedia?.hold('pointer');
@@ -185,6 +191,7 @@ class InputHandler {
             this._pressClickSent = false;
             this.mousePos = [e.touches[0].clientX + window.scrollX, e.touches[0].clientY + window.scrollY];
             this._lastClientPos = [e.touches[0].clientX, e.touches[0].clientY];
+            this._pressOrigin = this.mousePos.slice();
             this.assetManager.unlockAudio();
         };
 
@@ -229,7 +236,7 @@ class InputHandler {
             // report the release at the last known position so the server can
             // close out the press (drag-end / offClick).
             if (this.mouseDown && this._lastClientPos) {
-                this._sendMouseUp(this._lastClientPos[0], this._lastClientPos[1]);
+                this._sendMouseUp(this._lastClientPos[0], this._lastClientPos[1], true);
             }
             this.mouseDown = false;
         };
@@ -408,8 +415,7 @@ class InputHandler {
         //   click contract those games' interactions were built on.
         if (this.mouseDown && !this.clickStopper) {
             if (!this._pressClickSent) {
-                this._pressClickSent = true;
-                this._handleClick(clickInfo, true);
+                this._sendPendingClick(clickInfo);
             } else if (this._hasPointerLock()) {
                 // Captured presses fire once; relative look is sent separately.
             } else if (this._usesSingleClickContract()) {
@@ -476,7 +482,7 @@ class InputHandler {
     _releasePointerPress() {
         this._pointerLockOnRelease = false;
         this.assetManager.liveMedia?.release('pointer');
-        if (this.mouseDown && this._lastClientPos) this._sendMouseUp(...this._lastClientPos);
+        if (this.mouseDown && this._lastClientPos) this._sendMouseUp(...this._lastClientPos, true);
         this.mouseDown = false;
         this._pressClickSent = false;
         this.mousePos = null;
@@ -524,7 +530,7 @@ class InputHandler {
             event.key === 'Escape' || event.key === 'Shift';
     }
 
-    _sendMouseUp(clientX, clientY) {
+    _sendMouseUp(clientX, clientY, cancelled = false) {
         const rect = this.canvas.getBoundingClientRect();
         const clickX = (clientX - rect.left) / rect.width * 100;
         const clickY = (clientY - rect.top) / rect.height * 100;
@@ -533,7 +539,16 @@ class InputHandler {
         // (drag-end / offClick), even ones that finish outside the canvas.
         const x = Math.min(99.99, Math.max(0, clickX));
         const y = Math.min(99.99, Math.max(0, clickY));
-        this.send(JSON.stringify({ type: 'mouseup', data: { x, y } }));
+        // Preserve the last movement even when the whole drag happened between
+        // animation frames or inside the 30ms repeat throttle.
+        const origin = this._pressOrigin;
+        if (!cancelled && origin && this._pressClickSent && !this._hasPointerLock() &&
+            (Math.abs(clientX - origin[0]) > .5 || Math.abs(clientY - origin[1]) > .5)) {
+            this._sendMouseMove(clientX, clientY);
+        }
+        this._pressOrigin = null;
+        // End the press on blur/touchcancel without committing a drag-and-drop.
+        this.send(JSON.stringify({ type: 'mouseup', data: { x, y, ...(cancelled ? { cancelled: true } : {}) } }));
     }
 
     // Whether the game's squish version uses the single-click contract
@@ -572,7 +587,15 @@ class InputHandler {
     _sendPendingClick(clickInfo) {
         if (!this.mouseDown || this._pressClickSent || this.spectating || !this._focused) return;
         this._pressClickSent = true;
+        // A pointer can move before the first animation frame. Its press still
+        // belongs to the original object, not whichever object it moved over.
+        const latest = this.mousePos;
+        if (this._pressOrigin) {
+            this.mousePos = this._pressOrigin.slice();
+            clickInfo = this._canClick(this.mousePos[0], this.mousePos[1]);
+        }
         this._handleClick(clickInfo, true);
+        if (this._attached) this.mousePos = latest;
     }
 
     _promptTextInput(nodeId) {

package/src/local-game-chrome.js

@@ -7,7 +7,7 @@ const createLocalChrome = (containerId, title, onHome, share = null, options = {
     container.innerHTML = '';
     const releaseStyles = useFrameStyles();
     const frame = document.createElement('div'); frame.className = 'hg-session-frame';
-    const toolbar = createPlayerToolbar(window, { title, home: onHome, status: options.status || 'Playing locally',
+    const toolbar = createPlayerToolbar(window, { title, author: options.author, home: onHome, status: options.status || 'Playing locally',
         onOpen: options.onOpen || share?.onOpen, onClose: options.onClose || share?.onClose });
     toolbar.bar.classList.add('hg-session-bar');
     if (options.onExports) toolbar.setAction('exports', { label: 'View exports', run: options.onExports });

package/src/local-game-loader.js

@@ -15,6 +15,7 @@ const loadLocalGame = async ({ manifestUrl, gameKey, versionId, baseUrl } = {},
     }
     return {
         name: manifest.name,
+        author: manifest.author || manifest.createdBy,
         multiplayer: manifest.multiplayer === true,
         files: manifest.files,
         entryPoint: manifest.entryPoint,

package/src/portable-project.js

@@ -9,6 +9,8 @@ const saves = require('homegames-common/portable-saves');
 const portableClient = require('homegames-common/portable-client');
 
 module.exports = {
+    ...require('homegames-common/studio-debug'),
+    ...require('homegames-common/studio-handoff'),
     create: files => project.createProject(files, options),
     importArchive: bytes => project.importArchive(bytes, options),
     exportArchive: project.exportArchive,
@@ -36,5 +38,6 @@ module.exports = {
     readHtmlArchive: html.readHtmlArchive,
     htmlBytesLimit: html.htmlBytesLimit,
     checkSyntax: project.checkSyntax,
+    thumbnailPath: project.thumbnailPath,
     prepareTrustedLocalGame: (value, settings) => prepareTrustedLocalGame(value, squishMap, settings),
 };