homegames-client 0.2.1 → 0.2.2

package/src/renderer.js

@@ -37,6 +37,12 @@ class Renderer {
         this.thingIndices = [];
 
         let i = 0;
+        // A native canvas ignores shadowColor = null, strokeStyle = null and
+        // lineWidth = 0. Avoid those no-op assignments, and only reset the two
+        // states that actually change. Start unknown because an embed may use
+        // the context between frames (or resizing may reset it).
+        let shadowBlurReset = false;
+        let globalAlphaReset = false;
 
         while (buf && i < buf.length) {
             const frameType = buf[i];
@@ -44,7 +50,11 @@ class Renderer {
 
             let thing;
             try {
-                thing = unsquish(buf.slice(i, i + frameSize)).node;
+                // Decoders read the node bytes synchronously. A typed view
+                // avoids copying every node of every snapshot before decode;
+                // ordinary arrays remain supported by existing embeds.
+                thing = unsquish(typeof buf.subarray === 'function'
+                    ? buf.subarray(i, i + frameSize) : buf.slice(i, i + frameSize)).node;
             } catch (e) {
                 i += frameSize;
                 continue;
@@ -85,10 +95,16 @@ class Renderer {
                 if (thing.effects && thing.effects.shadow) {
                     const sc = thing.effects.shadow.color;
                     ctx.shadowColor = 'rgba(' + sc[0] + ',' + sc[1] + ',' + sc[2] + ',' + sc[3] + ')';
-                    if (thing.effects.shadow.blur) ctx.shadowBlur = thing.effects.shadow.blur;
+                    if (thing.effects.shadow.blur) {
+                        ctx.shadowBlur = thing.effects.shadow.blur;
+                        shadowBlurReset = false;
+                    }
                 }
 
-                if (thing.color) ctx.globalAlpha = thing.color[3] / 255;
+                if (thing.color) {
+                    ctx.globalAlpha = thing.color[3] / 255;
+                    globalAlphaReset = false;
+                }
 
                 if (thing.fill !== null && thing.fill !== undefined) {
                     ctx.fillStyle = 'rgba(' + thing.fill[0] + ',' + thing.fill[1] + ',' + thing.fill[2] + ',' + thing.fill[3] + ')';
@@ -110,15 +126,16 @@ class Renderer {
                 if (thing.fill !== undefined && thing.fill !== null) ctx.fill();
                 if (thing.border !== undefined && thing.border !== null) ctx.stroke();
 
-                ctx.shadowColor = null;
-                ctx.shadowBlur = 0;
-                ctx.lineWidth = 0;
-                ctx.strokeStyle = null;
+                if (!shadowBlurReset) {
+                    ctx.shadowBlur = 0;
+                    shadowBlurReset = true;
+                }
             }
 
             // --- Text ---
             if (thing.text) {
                 ctx.globalAlpha = thing.text.color[3] / 255;
+                globalAlphaReset = false;
                 ctx.fillStyle = 'rgba(' + thing.text.color[0] + ',' + thing.text.color[1] + ',' + thing.text.color[2] + ',' + thing.text.color[3] + ')';
                 const maxTextSize = Math.floor(canvas.width);
                 const fontSize = (thing.text.size / 100) * maxTextSize;
@@ -178,7 +195,10 @@ class Renderer {
                         if (thing.effects && thing.effects.shadow) {
                             const sc = thing.effects.shadow.color;
                             ctx.shadowColor = 'rgba(' + sc[0] + ',' + sc[1] + ',' + sc[2] + ',' + sc[3] + ')';
-                            if (thing.effects.shadow.blur) ctx.shadowBlur = thing.effects.shadow.blur;
+                            if (thing.effects.shadow.blur) {
+                                ctx.shadowBlur = thing.effects.shadow.blur;
+                                shadowBlurReset = false;
+                            }
                         }
 
                         const dx = (asset.pos.x / 100) * canvas.width;
@@ -227,11 +247,14 @@ class Renderer {
             }
 
             i += frameSize;
-            ctx.shadowColor = null;
-            ctx.shadowBlur = 0;
-            ctx.lineWidth = 0;
-            ctx.strokeStyle = null;
-            ctx.globalAlpha = 1;
+            if (!shadowBlurReset) {
+                ctx.shadowBlur = 0;
+                shadowBlurReset = true;
+            }
+            if (!globalAlphaReset) {
+                ctx.globalAlpha = 1;
+                globalAlphaReset = true;
+            }
         }
 
         for (const [id, player] of this.videos) {

package/src/session-frame-styles.js

@@ -8,7 +8,7 @@ module.exports = () => {
         style.textContent = `
             .hg-session-frame, .hg-share-dialog { font:14px/1.4 system-ui,-apple-system,BlinkMacSystemFont,sans-serif; color:#f6f6ee; }
             .hg-session-frame *, .hg-share-dialog * { box-sizing:border-box; }
-            .hg-session-frame { width:100%; height:100%; display:flex; flex-direction:column; background:#101211; container-type:inline-size; }
+            .hg-session-frame { width:100%; height:100%; position:relative; overflow:hidden; background:#000; container-type:inline-size; }
             .hg-session-game { flex:1; min-height:0; width:100%; position:relative; overflow:hidden; display:flex; align-items:center; background:#000; }
             .hg-share-dialog button { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px; padding:0 18px; border:1px solid #4a5049; border-radius:10px; background:transparent; color:#f6f6ee; font:600 14px/1.2 system-ui,sans-serif; cursor:pointer; }
             .hg-share-dialog .hg-share-copy { background:#fff78e; color:#22261e; }

package/src/squish-map.js

@@ -4,9 +4,10 @@
 // dependency. Requires must stay static so webpack can bundle them.
 
 const squishMap = {
-    '150': require('squish-150')
+    '150': require('squish-150'),
+    '151': require('squish-151')
 };
 
-const DEFAULT_VERSION = '150';
+const DEFAULT_VERSION = '151';
 
 module.exports = { squishMap, DEFAULT_VERSION };