homegames-client 0.2.0 → 0.2.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "homegames-client",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "description": "Embeddable browser client for Homegames",
   "main": "src/index.js",
   "browser": "dist/homegames-client.js",
@@ -13,10 +13,11 @@
   "license": "MIT",
   "dependencies": {
     "buffer": "^6.0.3",
-    "homegames-common": "1.7.3",
+    "homegames-common": "1.7.5",
     "homepad": "0.2.1",
     "qrcode-generator": "^2.0.4",
-    "squish-150": "npm:squishjs@1.5.0"
+    "squish-150": "npm:squishjs@1.5.0",
+    "squish-151": "npm:squishjs@1.5.1"
   },
   "devDependencies": {
     "webpack": "^5.65.0",

package/src/game-view.js

@@ -6,17 +6,21 @@ const InputHandler = require('./input');
 // sessions own game state and feed frames into this view. Extra Studio views
 // borrow the primary asset store, and therefore must not dispose that store.
 class GameView {
-    constructor({ container, assetManager, send, gamepad, onAssetReady }) {
+    constructor({ container, assetManager, send, gamepad, onAssetReady, onLayout, onResize }) {
         this.container = container;
+        this.onLayout = onLayout;
+        this.onResize = onResize;
         container.innerHTML = '';
-        Object.assign(container.style, { position: 'relative', overflow: 'hidden', background: '#000' });
+        Object.assign(container.style, { position: container.style.position || 'relative', overflow: 'hidden', background: '#000' });
         this.canvas = document.createElement('canvas');
+        this.canvas.tabIndex = -1;
         Object.assign(this.canvas.style, {
-            display: 'block', margin: '0 auto', cursor: 'default',
+            display: 'block', position: 'absolute', margin: '0', cursor: 'default',
             // Keep iOS tap highlights and long-press selection off the game surface.
             webkitTapHighlightColor: 'transparent',
             webkitTouchCallout: 'none',
             webkitUserSelect: 'none', userSelect: 'none',
+            touchAction: 'none',
         });
         this.cursor = null;
         this.cursorOverride = null;
@@ -29,6 +33,14 @@ class GameView {
         this.inputHandler = new InputHandler(this.canvas, send,
             () => this.renderer.thingIndices, this.assetManager, gamepad);
         this.inputHandler.attach();
+        // Embedders can resize a preview or reserve space for its Homegames
+        // button without resizing the browser window.
+        if (window.ResizeObserver) {
+            this._resizeObserver = new window.ResizeObserver(() => {
+                if (this.aspectRatio && !this.destroyed) this.resize(this.aspectRatio);
+            });
+            this._resizeObserver.observe(container);
+        }
     }
 
     // Cursor selection belongs to the session/player, independently of hover.
@@ -104,22 +116,41 @@ class GameView {
     }
 
     resize(aspectRatio) {
+        if (this.destroyed || !Number.isFinite(aspectRatio?.x) || !Number.isFinite(aspectRatio?.y)
+            || aspectRatio.x <= 0 || aspectRatio.y <= 0) return;
+        const aspectChanged = this.aspectRatio?.x !== aspectRatio.x || this.aspectRatio?.y !== aspectRatio.y;
+        this.aspectRatio = { x: aspectRatio.x, y: aspectRatio.y };
+        // The frame owns the available viewport; settle its placement before
+        // fitting the canvas. An iframe host receives the same ratio through
+        // onLayout and will resize this container when its frame changes.
+        const toolbar = this.container.homegamesToolbar
+            || this.container.closest?.('.hg-session-frame')?.querySelector?.('.hg-session-bar')?.homegamesToolbar;
+        toolbar?.setAspectRatio?.(this.aspectRatio);
+        if (aspectChanged) this.onLayout?.({ ...this.aspectRatio });
+        if (this.destroyed) return;
         const maxWidth = this.container.clientWidth || window.innerWidth;
         const maxHeight = this.container.clientHeight || window.innerHeight;
         const fitHeight = maxWidth * aspectRatio.y / aspectRatio.x <= maxHeight;
         const width = fitHeight ? maxWidth : Math.floor(maxHeight * aspectRatio.x / aspectRatio.y);
         const height = fitHeight ? Math.floor(maxWidth * aspectRatio.y / aspectRatio.x) : maxHeight;
-        this.canvas.width = width * 2;
-        this.canvas.height = height * 2;
+        const changed = this.canvas.width !== width * 2 || this.canvas.height !== height * 2;
+        if (changed) {
+            this.canvas.width = width * 2;
+            this.canvas.height = height * 2;
+        }
         this.canvas.style.width = width + 'px';
         this.canvas.style.height = height + 'px';
+        this.canvas.style.left = Math.floor((maxWidth - width) / 2) + 'px';
+        this.canvas.style.top = Math.floor((maxHeight - height) / 2) + 'px';
         this.inputHandler.clientWidth = width;
         this.inputHandler.clientHeight = height;
+        if (changed) this.onResize?.();
     }
 
     destroy() {
         if (this.destroyed) return;
         this.destroyed = true;
+        this._resizeObserver?.disconnect();
         this.cursor = null;
         this.cursorOverride = null;
         this._cursorRaster = null;

package/src/index.js

@@ -3,6 +3,7 @@ const SessionController = require('./session-controller');
 const createLocalChrome = require('./local-game-chrome');
 const { loadLocalGame, loadHomeGame } = require('./local-game-loader');
 const { GameView, FrameLoop, getClientInfo } = require('./game-view');
+const createPlayerSharing = require('./player-sharing');
 /**
  * HomegamesClient — Embeddable game client for Homegames.
  *
@@ -38,6 +39,8 @@ class HomegamesClient {
      * @param {function} [opts.onReady] — callback(playerId) when session is ready
      * @param {function} [opts.onClose] — callback when WebSocket closes
      * @param {function} [opts.onError] — callback(error) on error
+     * @param {function} [opts.onAspectRatio] — callback({ x, y }) when the game
+     *        aspect ratio changes, for an embedding player's frame.
      * @param {boolean} [opts.spectating] — connect as spectator (default false)
      * @param {object} [opts.requestedGame] — { gameId, versionId } to request
      * @param {function} [opts.onLocalPlayRedirect] — callback({ gameKey, versionId })
@@ -62,8 +65,20 @@ class HomegamesClient {
         this.transportFactory = opts.transport || null;
         this.transport = null;
         this.onReady = opts.onReady || (() => {});
-        this.onClose = opts.onClose || (() => {});
-        this.onError = opts.onError || (() => {});
+        this.onClose = () => {
+            // A failed join often emits error and then close. Keep the useful
+            // failure reason (and any host-supplied recovery instructions).
+            if (!this._connectionFailed) this._setFrameStatus('Disconnected from the game.', { attention: true });
+            opts.onClose?.();
+        };
+        this.onError = error => {
+            this._connectionFailed = true;
+            this._setFrameStatus(error?.message || 'Unable to connect to the game.', { attention: true });
+            opts.onError?.(error);
+        };
+        this.onAspectRatio = opts.onAspectRatio || (() => {});
+        this.onSharingStatus = opts.onSharingStatus || (() => {});
+        this._toolbarSharingLink = mode => this.getSharingLink(mode);
         this.onSaveData = opts.onSaveData || (() => {});
         this.onLocalPlayRedirect = opts.onLocalPlayRedirect || null;
         this.spectating = opts.spectating || false;
@@ -75,6 +90,7 @@ class HomegamesClient {
         this.saveStore = opts.saveStore || createSaveStore();
 
         this.platform = opts.platform;
+        this._defaultShareOptions = opts.share && typeof opts.share === 'object' ? opts.share : null;
         this._playerProfile = require('homegames-common/player-identity').profile(window);
         this.playerName = opts.playerName === undefined ? this._playerProfile.get() : this._playerProfile.set(opts.playerName);
         this.showChrome = opts.chrome !== false;
@@ -106,7 +122,7 @@ class HomegamesClient {
                 if (!this.showChrome) return { containerId: this.containerId, dispose() {} };
                 const chrome = createLocalChrome(this.containerId, game.name || game.gameKey,
                 opts.localHome === false ? null : typeof opts.localHome === 'string' ? opts.localHome : () => this.exitLocalGame(), this._shareOptions ? {
-                    getLink: () => this._getRtcHost().share(),
+                    getSharingLink: this._toolbarSharingLink,
                     private: this._shareOptions.visibility !== 'public',
                     onVisibility: this._shareOptions.room ? visibility => this._getRtcHost().setVisibility(visibility) : null,
                     onOpen: () => this._localSession?.inputHandler?.detach(),
@@ -119,13 +135,10 @@ class HomegamesClient {
             createLocal: game => new LocalSession({ ...game,
                 playerName: this.playerName,
                 gamepad: this.gamepadOptions, platform: opts.platform, saveStore: this.saveStore,
+                onAspectRatio: this.onAspectRatio,
                 onSaveData: this.onSaveData, onError: this.onError, onReady: id => {
                     const solo = this._localSession?.maxPlayers === 1;
-                    if (this._shareOptions) this._localChrome?.toolbar?.setAction('share', {
-                        label: solo ? 'Invite (solo)' : 'Invite', disabled: solo,
-                        title: solo ? 'This is a solo game. Use Share a copy to send it to a friend.' : 'Invite friends to play',
-                        run: () => this.showShare(),
-                    });
+                    this._configureSharing(this._localChrome?.toolbar);
                     this.onReady(id);
                     if (this._shareOptions?.autoStart && !solo) {
                         this._getRtcHost().share().catch(err => this._localChrome?.setStatus?.(`Not available to join: ${err.message}. Use Invite to retry.`));
@@ -141,6 +154,7 @@ class HomegamesClient {
      */
     start() { this._sessions.start(); }
     stop() {
+        this.disposeSharing();
         this._shareDialog?.dispose(); this._shareDialog = null;
         if (!this._switchingManual) { this._manualPairing?.dispose(); this._manualPairing = null; }
         this._sessions.stop();
@@ -208,9 +222,56 @@ class HomegamesClient {
         throw new Error('This session is not available to share');
     }
 
+    // Both the direct menu and an opaque iframe host use the same invitation
+    // and copy provider. Keep copy invitations valid while this game is open.
+    getSharingLink(mode) {
+        if (!this._localSession && !this.view) return Promise.reject(new Error('The game is still loading. Try again once it is ready.'));
+        if (!this._playerSharing) this._playerSharing = createPlayerSharing({
+            ...this._shareOptions,
+            getInvitation: () => this.getShareLink(),
+            getProject: async () => (await this.requestGameCopy()).project,
+            onStatus: (text, sharingMode = 'copy') => {
+                this._playerToolbar()?.setSharingStatus?.(text, sharingMode);
+                this.onSharingStatus(text, sharingMode);
+            },
+        });
+        return this._playerSharing.getLink(mode);
+    }
+
+    disposeSharing() {
+        this._playerSharing?.dispose();
+        this._playerSharing = null;
+    }
+
+    _configureSharing(toolbar) {
+        if (!toolbar) return;
+        if (!this._shareOptions && !this.transport?.getShareLink) {
+            toolbar.setSharing?.(null);
+            return;
+        }
+        toolbar.setSharing({
+            multiplayer: this._localSession?.maxPlayers !== 1,
+            getLink: this._toolbarSharingLink,
+        });
+    }
+
     setInputEnabled(enabled) {
         const input = this._localSession?.inputHandler || this.inputHandler;
-        if (enabled) input?.attach(); else input?.detach();
+        if (enabled) {
+            input?.attach();
+            // Native dialogs restore focus to their launch button. Return it
+            // to the game so keyboard play resumes immediately as well.
+            input?.canvas.focus?.({ preventScroll: true });
+        } else input?.detach();
+    }
+
+    _playerToolbar() {
+        return this._sessions?.chrome?.toolbar || this._remoteChrome?.toolbar
+            || this.container?.closest?.('.hg-session-frame')?.querySelector?.('.hg-session-bar')?.homegamesToolbar;
+    }
+
+    _setFrameStatus(text, details) {
+        this._playerToolbar()?.setStatus(text, details);
     }
 
     getPlayerName() { return this.playerName; }
@@ -248,6 +309,8 @@ class HomegamesClient {
     get rendering() { return this._loop.running; }
 
     _startRemote() {
+        this._connectionFailed = false;
+        this._shareOptions = this._defaultShareOptions;
         let container = document.getElementById(this.containerId);
         if (!container) {
             this.onError(new Error('Container element not found: #' + this.containerId));
@@ -268,6 +331,11 @@ class HomegamesClient {
             container, send: msg => this._send(msg),
             gamepad: this.gamepadOptions,
             onAssetReady: () => { this._frameDirty = true; this.view?.refreshCursor(); },
+            onLayout: aspectRatio => {
+                this.platform?.setState?.({ aspectRatio });
+                this.onAspectRatio(aspectRatio);
+            },
+            onResize: () => { this._frameDirty = true; },
         });
 
         // --- Handle resize ---
@@ -308,6 +376,8 @@ class HomegamesClient {
      * Disconnect and clean up everything.
      */
     _stopRemote() {
+        this._playerToolbar()?.setSharing?.(null);
+        this.disposeSharing();
         this._exportsViewer?.close();
         this.platform?.closeExports?.();
         this._removeExportsButton?.(); this._removeExportsButton = null;
@@ -460,6 +530,9 @@ class HomegamesClient {
     // -----------------------------------------------------------------------
 
     _reconnect(newWsUrl) {
+        this._playerToolbar()?.setSharing?.(null);
+        this.disposeSharing();
+        this._connectionFailed = false;
         this._exportsViewer?.close(); this.platform?.closeExports?.();
         this._projectTransfer?.close(); this._projectTransfer = null;
         this.wsUrl = newWsUrl;
@@ -685,6 +758,9 @@ class HomegamesClient {
         }
 
         this._initCanvas();
+        this._connectionFailed = false;
+        this._setFrameStatus('Connected game', { attention: false });
+        this._configureSharing(this._playerToolbar());
         this.onReady(this.playerId);
     }
 
@@ -753,6 +829,7 @@ HomegamesClient.createRtcTransport = createRtcTransport;
 HomegamesClient.readInvitation = readInvitation;
 HomegamesClient.RtcHost = RtcHost;
 HomegamesClient.createShareDialog = require('./share-dialog');
+HomegamesClient.createPlayerSharing = createPlayerSharing;
 HomegamesClient.GameCopies = require('./rtc-copy');
 HomegamesClient.createSessionFrame = createLocalChrome;
 HomegamesClient.createPlayerToolbar = require('homegames-common/player-toolbar').createPlayerToolbar;

package/src/input.js

@@ -37,6 +37,8 @@ class InputHandler {
         this.mouseDown = false;
         this.mousePos = null;
         this._pressClickSent = false;
+        this._touchActive = false;
+        this._lastTouchTime = -Infinity;
         this.squishVersion = null;  // set by the session once known (init message / local metadata)
         this._lastClientPos = null;
         this.keysDown = {};
@@ -95,6 +97,7 @@ class InputHandler {
         document.removeEventListener('pointerlockerror', h.pointerlockerror);
 
         h.mousedown = (e) => {
+            if (this._isTouchMouseEvent(e)) return;
             this._pointerLockOnRelease = false;
             if (this._isControlEvent(e)) return;
             // A new physical press must not be swallowed by the previous
@@ -128,6 +131,7 @@ class InputHandler {
         };
 
         h.mouseup = (e) => {
+            if (this._isTouchMouseEvent(e)) return;
             this.assetManager.liveMedia?.release('pointer');
             this.mousePos = this._hasPointerLock() ? this._canvasCenter() : [e.clientX, e.clientY];
             this._lastClientPos = this.mousePos.slice();
@@ -145,6 +149,7 @@ class InputHandler {
         };
 
         h.mousemove = (e) => {
+            if (this._isTouchMouseEvent(e)) return;
             if (this._hasPointerLock()) {
                 if (this.mouseDown && e.buttons === 0) this._releasePointerPress();
                 if (Number.isFinite(e.movementX) && Number.isFinite(e.movementY)) {
@@ -183,8 +188,16 @@ class InputHandler {
             // 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.
+            // preventDefault also suppresses native focus transfer. Move DOM
+            // focus into the canvas so a later keyboard press cannot activate
+            // the embedding toolbar's previously focused button.
+            if (typeof this.canvas.focus === 'function') {
+                if (this.canvas.tabIndex < 0) this.canvas.tabIndex = -1;
+                this.canvas.focus({ preventScroll: true });
+            }
             this._focused = true;
             this._touchActive = true;
+            this._lastTouchTime = Date.now();
             clearTimeout(this.clickStopper); this.clickStopper = null;
             this.assetManager.liveMedia?.hold('pointer');
             this.mouseDown = true;
@@ -196,16 +209,23 @@ class InputHandler {
         };
 
         h.touchmove = (e) => {
+            if (!this._touchActive) return;
             e.preventDefault();
+            this._lastTouchTime = Date.now();
             this.mouseDown = true;
             this.mousePos = [e.touches[0].clientX + window.scrollX, e.touches[0].clientY + window.scrollY];
             this._lastClientPos = [e.touches[0].clientX, e.touches[0].clientY];
         };
 
         h.touchend = (e) => {
-            this.assetManager.liveMedia?.release('pointer');
             // Releases of touches we never claimed (page UI taps) aren't ours
             if (!this._touchActive) return;
+            this.assetManager.liveMedia?.release('pointer');
+            this._lastTouchTime = Date.now();
+            // Cancel compatibility mouse events at release as well as start.
+            // Keep this listener non-passive; native file pickers still open
+            // synchronously below, within the touchend activation gesture.
+            if (e.cancelable !== false) e.preventDefault?.();
             // touches is empty by touchend; the lifted finger is in changedTouches.
             const touch = e.changedTouches && e.changedTouches[0];
             if (touch) {
@@ -228,9 +248,12 @@ class InputHandler {
                 this._sendMouseUp(touch.clientX, touch.clientY);
             }
             this.mouseDown = false;
+            this._touchActive = false;
         };
 
         h.touchcancel = () => {
+            if (!this._touchActive) return;
+            this._lastTouchTime = Date.now();
             this.assetManager.liveMedia?.release('pointer');
             // Touch was taken over by the OS (gesture, notification shade) —
             // report the release at the last known position so the server can
@@ -239,6 +262,7 @@ class InputHandler {
                 this._sendMouseUp(this._lastClientPos[0], this._lastClientPos[1], true);
             }
             this.mouseDown = false;
+            this._touchActive = false;
         };
 
         h.keydown = (e) => {
@@ -341,7 +365,7 @@ class InputHandler {
         document.addEventListener('pointerlockerror', h.pointerlockerror);
         window.addEventListener('touchstart', h.touchstart, { passive: false });
         this.canvas.addEventListener('touchmove', h.touchmove, { passive: false });
-        window.addEventListener('touchend', h.touchend);
+        window.addEventListener('touchend', h.touchend, { passive: false });
         window.addEventListener('touchcancel', h.touchcancel);
         document.addEventListener('keydown', h.keydown);
         document.addEventListener('keyup', h.keyup);
@@ -484,6 +508,7 @@ class InputHandler {
         this.assetManager.liveMedia?.release('pointer');
         if (this.mouseDown && this._lastClientPos) this._sendMouseUp(...this._lastClientPos, true);
         this.mouseDown = false;
+        this._touchActive = false;
         this._pressClickSent = false;
         this.mousePos = null;
         this._lastClientPos = null;
@@ -523,6 +548,19 @@ class InputHandler {
         return !!event.target?.closest?.('button, a, input, select, textarea, [contenteditable="true"]');
     }
 
+    _isTouchMouseEvent(event) {
+        // One touch is already one game press. Some mobile browsers also
+        // deliver compatibility mouse events on release, toggling buttons a
+        // second time. Safari does not expose sourceCapabilities, so retain a
+        // short, canvas-only fallback after our own touch gestures. Explicit
+        // physical mouse input and the embedding page's controls stay usable.
+        const fromTouch = event.sourceCapabilities?.firesTouchEvents;
+        if (fromTouch === true) return true;
+        if (fromTouch === false) return false;
+        return event.target === this.canvas &&
+            (this._touchActive || Date.now() - this._lastTouchTime < 800);
+    }
+
     _keyMatters(event) {
         return (event.key.length === 1 && event.key >= ' ' && event.key <= 'z') ||
             (event.keyCode >= 36 && event.keyCode <= 40) ||
@@ -713,13 +751,11 @@ class InputHandler {
         inputEl.click();
     }
 
-    _translateX(x) {
-        const rect = this.canvas.getBoundingClientRect();
+    _translateX(x, rect = this.canvas.getBoundingClientRect()) {
         return (x * rect.width / 100) + rect.left;
     }
 
-    _translateY(y) {
-        const rect = this.canvas.getBoundingClientRect();
+    _translateY(y, rect = this.canvas.getBoundingClientRect()) {
         return (y * rect.height / 100) + rect.top;
     }
 
@@ -732,10 +768,16 @@ class InputHandler {
         const rect = this.canvas.getBoundingClientRect();
         if (x < rect.left || x > rect.right || y < rect.top || y > rect.bottom) return { isClickable, isHoverable, action, nodeId };
 
+        // One geometry read covers the whole hit test, including every polygon
+        // vertex. Keep pixel-space arithmetic and drawing-order occlusion.
         const thingIndices = this.getThingIndices();
 
-        for (const chunkIndex in thingIndices) {
+        // The last containing node wins, including non-interactive shapes
+        // that occlude controls. Search from the top so obscured lower nodes
+        // need no geometry work once the same winner has been found.
+        for (let chunkIndex = thingIndices.length - 1; chunkIndex >= 0; chunkIndex--) {
             const chunk = thingIndices[chunkIndex];
+            if (!chunk) continue;
             let vertices = chunk[3];
             if (!vertices || !vertices.length) continue;
 
@@ -750,14 +792,14 @@ class InputHandler {
 
             // Point-in-polygon
             let inside = false;
-            let minX = this._translateX(vertices[0][0]);
+            let minX = this._translateX(vertices[0][0], rect);
             let maxX = minX;
-            let minY = this._translateY(vertices[0][1]);
+            let minY = this._translateY(vertices[0][1], rect);
             let maxY = minY;
 
             for (let i = 1; i < vertices.length; i++) {
-                const vx = this._translateX(vertices[i][0]);
-                const vy = this._translateY(vertices[i][1]);
+                const vx = this._translateX(vertices[i][0], rect);
+                const vy = this._translateY(vertices[i][1], rect);
                 if (vx < minX) minX = vx;
                 if (vx > maxX) maxX = vx;
                 if (vy < minY) minY = vy;
@@ -767,10 +809,10 @@ class InputHandler {
             if (!(x < minX || x > maxX || y < minY || y > maxY)) {
                 let i = 0, j = vertices.length - 1;
                 for (; i < vertices.length; j = i++) {
-                    const yi = this._translateY(vertices[i][1]);
-                    const yj = this._translateY(vertices[j][1]);
-                    const xi = this._translateX(vertices[i][0]);
-                    const xj = this._translateX(vertices[j][0]);
+                    const yi = this._translateY(vertices[i][1], rect);
+                    const yj = this._translateY(vertices[j][1], rect);
+                    const xi = this._translateX(vertices[i][0], rect);
+                    const xj = this._translateX(vertices[j][0], rect);
                     if ((yi > y) !== (yj > y) && x < (xj - xi) * (y - yi) / (yj - yi) + xi) {
                         inside = !inside;
                     }
@@ -782,6 +824,7 @@ class InputHandler {
                 action = chunk[1];
                 nodeId = chunk[2];
                 isHoverable = !!chunk[4];
+                break;
             }
         }
 

package/src/local-game-chrome.js

@@ -14,10 +14,20 @@ const createLocalChrome = (containerId, title, onHome, share = null, options = {
     const gameArea = document.createElement('div'); gameArea.className = 'hg-session-game';
     gameArea.id = `${containerId}-hg-local-area`;
     frame.append(toolbar.bar, gameArea); container.append(frame);
-    let dialog;
+    gameArea.homegamesToolbar = toolbar;
+    toolbar.setGameArea(gameArea, frame);
+    let sharing;
     if (share) {
-        dialog = require('./share-dialog')({ container: frame, ...share });
-        toolbar.setAction('share', { label: 'Invite', run: () => dialog.show() });
+        if (!share.getSharingLink) sharing = require('./player-sharing')({
+            ...share, getInvitation: share.getLink,
+            onStatus: (text, mode) => toolbar.setSharingStatus(text, mode),
+        });
+        toolbar.setSharing({
+            multiplayer: share.multiplayer !== false,
+            copy: !!(share.getSharingLink || share.getProject),
+            getLink: share.getSharingLink || (mode => sharing.getLink(mode)),
+            dispose: sharing ? () => sharing.dispose() : undefined,
+        });
         if (share.onVisibility) {
             let privateGame = share.private;
             const update = () => toolbar.setAction('privacy', { label: privateGame ? 'Make session public' : 'Make session private', run: async () => {
@@ -27,8 +37,8 @@ const createLocalChrome = (containerId, title, onHome, share = null, options = {
     }
     let disposed = false;
     return { bar: toolbar.bar, toolbar, gameArea, containerId: gameArea.id,
-        setStatus: text => toolbar.setStatus(text),
-        dispose() { if (disposed) return; disposed = true; dialog?.dispose(); toolbar.dispose(); frame.remove(); releaseStyles(); },
+        setStatus: (text, details) => toolbar.setStatus(text, details),
+        dispose() { if (disposed) return; disposed = true; sharing?.dispose(); toolbar.dispose(); frame.remove(); releaseStyles(); },
     };
 };
 createLocalChrome.addExportsButton = (bar, onExports) => {

package/src/local-session.js

@@ -86,6 +86,7 @@ class LocalSession {
         this.assetPackets = this.assetBundle ? splitAssetBundle(this.assetBundle) : [];
         this.onReady = opts.onReady || (() => {});
         this.onError = opts.onError || (() => {});
+        this.onAspectRatio = opts.onAspectRatio || (() => {});
         this.gameKey = opts.gameKey || null;
         this.versionId = opts.versionId || DEFAULT_VERSION_ID;
         this.onSaveData = opts.onSaveData || null;
@@ -472,6 +473,15 @@ class LocalSession {
                 dispatcher.handleMessage(msg);
             },
             onAssetReady: () => this._invalidateFrames(),
+            onLayout: aspectRatio => {
+                if (playerId !== this.playerId) return;
+                this.platform?.setState?.({ aspectRatio });
+                this.onAspectRatio(aspectRatio);
+            },
+            onResize: () => {
+                this._invalidateFrames();
+                if (this._inspectBuf) this._paintInspectedFrame();
+            },
         });
         this.players.push({ playerId, info: { name: playerName }, settings: { SOUND: true }, view, dispatcher, cursor: null, currentBuf: null, frameDirty: true });
         if (playerId === this.playerId) {

package/src/player-sharing.js

@@ -0,0 +1,78 @@
+'use strict';
+const qrcode = require('qrcode-generator');
+
+// One provider belongs to one running client. A copy invitation remains useful
+// after the menu closes, so its transfer host lives until the client stops.
+module.exports = function createPlayerSharing({ getInvitation, getProject, onStatus = () => {}, ...settings }) {
+    let closed = false, generation = 0, copyHost, copyPending;
+    const pending = new Set();
+    const stopped = () => new Error('Sharing has stopped. Reopen the game to share it.');
+    const closeCopy = () => {
+        generation++;
+        copyHost?.close(); copyHost = null; copyPending = null;
+    };
+    function copyLink() {
+        if (copyHost?.closed) closeCopy();
+        if (copyPending) return copyPending;
+        const current = generation;
+        const started = Promise.resolve().then(async () => {
+            if (typeof getProject !== 'function') throw new Error('Sharing a copy is not available in this player.');
+            const project = await getProject();
+            if (closed || generation !== current) throw stopped();
+            const { CopyHost } = require('./rtc-copy');
+            const host = new CopyHost(project, {
+                ...settings,
+                onStatus: text => {
+                    if (!closed && generation === current) {
+                        try { onStatus(text, 'copy'); } catch (_) {}
+                    }
+                },
+            });
+            copyHost = host;
+            const link = await host.share();
+            if (closed || generation !== current) { host.close(); throw stopped(); }
+            return link;
+        });
+        copyPending = started.catch(error => {
+            if (generation === current) closeCopy();
+            throw error;
+        });
+        return copyPending;
+    }
+    return {
+        getLink(mode) {
+            if (closed) return Promise.reject(stopped());
+            if (!['session', 'copy'].includes(mode)) return Promise.reject(new Error('Unknown sharing option'));
+            return new Promise((resolve, reject) => {
+                const entry = { reject, timer: null }; pending.add(entry);
+                const finish = (error, value) => {
+                    if (!pending.delete(entry)) return;
+                    clearTimeout(entry.timer); error ? reject(error) : resolve(value);
+                };
+                entry.timer = setTimeout(() => {
+                    if (mode === 'copy') closeCopy();
+                    finish(new Error('Creating an invitation timed out. Check your connection and try again.'));
+                }, 30000);
+                Promise.resolve().then(() => {
+                    if (mode === 'copy') return copyLink();
+                    if (typeof getInvitation !== 'function') throw new Error('This session is not available to join.');
+                    return getInvitation();
+                }).then(url => {
+                    if (closed) throw stopped();
+                    if (typeof url !== 'string' || url.length > 4096 || !/^https?:\/\//.test(url)) throw new Error('Invalid invitation link');
+                    const code = qrcode(0, 'M'); code.addData(url); code.make();
+                    const size = code.getModuleCount();
+                    const qr = Array.from({ length: size }, (_, row) =>
+                        Array.from({ length: size }, (_, col) => code.isDark(row, col) ? '1' : '0').join(''));
+                    finish(null, { url, qr });
+                }).catch(error => finish(error));
+            });
+        },
+        dispose() {
+            if (closed) return;
+            closed = true; closeCopy();
+            for (const entry of pending) { clearTimeout(entry.timer); entry.reject(stopped()); }
+            pending.clear();
+        },
+    };
+};

package/src/portable-project.js

@@ -20,6 +20,7 @@ module.exports = {
     buildIsolatedHtml: html.buildIsolatedHtml,
     runtimeDocument: html.runtimeDocument,
     createFrame: html.createFrame,
+    attachArchiveHost: html.attachArchiveHost,
     attachSaveHost: saves.attachSaveHost,
     attachPlayerHost: (window, frame, settings) => {
         const savesHost = saves.attachSaveHost(window, frame, settings);