squishjs 1.3.9 → 1.4.1

package/.claude/settings.local.json

@@ -2,7 +2,8 @@
   "permissions": {
     "allow": [
       "Read(//Users/josephgarcia/homegames/homegames-client/**)",
-      "Read(//Users/josephgarcia/homegames/homegames-web/**)"
+      "Read(//Users/josephgarcia/homegames/homegames-web/**)",
+      "Read(//Users/josephgarcia/homegames/homegamesio/**)"
     ]
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "squishjs",
-  "version": "1.3.9",
+  "version": "1.4.1",
   "description": "squish & unsquish stuff",
   "scripts": {
     "test": "node testRunner.js"

package/src/Squisher.js

@@ -111,6 +111,18 @@ class Squisher {
         return this.initialize();
     }
 
+    // Whether an audio node should be withheld from a player who has muted
+    // sound. Non-audio nodes (and unregistered assets) are never withheld.
+    // Applied consistently in both the player-scoped and broadcast paths.
+    _isAudioMutedFor(node, playerId) {
+        if (!node.node.asset) return false;
+        const assetKey = Object.keys(node.node.asset)[0];
+        const assetInfo = this.gameAssets && this.gameAssets[assetKey] && this.gameAssets[assetKey].info;
+        if (!assetInfo || assetInfo.type !== 'audio') return false;
+        const sound = this.playerSettings[playerId] && this.playerSettings[playerId].SOUND;
+        return !!(sound && sound.enabled === false);
+    }
+
     squishHelper(node, squishedNodes, scale = {x: 1, y: 1}, playerMap = {}, playerIdFilter = new Set()) {
         if (!node.node.listeners.has(this)) {
             node.addListener(this);
@@ -128,10 +140,12 @@ class Squisher {
             for (let playerId of playerIdFilter) {
                 if (!playerMap[playerId]) {
                     playerMap[Number(playerId)] = [];
-                } 
+                }
 
                 if (node.node.playerIds.length === 0 || node.node.playerIds.findIndex(i => Number(i) === Number(playerId)) >= 0) {
-                    playerMap[playerId].push(squished);
+                    if (!this._isAudioMutedFor(node, playerId)) {
+                        playerMap[playerId].push(squished);
+                    }
                 } else {
                     playerIdsToRemove.add(playerId);
                 }
@@ -144,13 +158,7 @@ class Squisher {
                 if (!playerMap[playerId]) {
                     playerMap[Number(playerId)] = [];
                 }
-                if (node.node.asset) {
-                    const assetInfo = this.gameAssets[Object.keys(node.node.asset)[0]]?.info;
-                    if (assetInfo.type === 'audio' && this.playerSettings[playerId]?.SOUND && !this.playerSettings[playerId].SOUND.enabled) {
-                    } else {
-                        playerMap[playerId].push(squished);
-                    }
-                } else {
+                if (!this._isAudioMutedFor(node, playerId)) {
                     playerMap[playerId].push(squished);
                 }
             })

package/src/squishHelpers/coordinates2d.js

@@ -3,6 +3,17 @@ const subtypes = require('../subtypes');
 
 const COORDINATES_2D_SUBTYPE = 52;
 
+// The wire format packs each coordinate's integer part into a single unsigned
+// byte, so any value outside [0, 255] wraps on transport — e.g. a vertex at
+// -1.4 floors to -2, which becomes byte 254 and unsquishes to ~254.6. For a
+// shape with some on-screen vertices that turns the whole polygon into a
+// screen-spanning smear. Coordinates are only meaningful inside the 0–100
+// plane; clamp to the byte-safe range so off-plane geometry pins near the edge
+// instead of exploding. Values 100–255 are preserved so content can still slide
+// off the right/bottom edge cleanly.
+const BYTE_MAX = 255;
+const clampCoord = (v) => (v < 0 ? 0 : (v > BYTE_MAX ? BYTE_MAX : v));
+
 const squishHelper = (scale, coord) => {
 	const scaledCenter = scale * coord;
 	const removedSpaceCenter = Math.round(100 * (1 - scale));
@@ -17,11 +28,11 @@ const squishCoordinates2d = {
 
 		if (node.subType == subtypes.SHAPE_2D_CIRCLE) {
 			if (scale) {
-				const shiftedCenterX = squishHelper(scale.x, originalCoords[0])
+				const shiftedCenterX = clampCoord(squishHelper(scale.x, originalCoords[0]))
 				squished[0] = shiftedCenterX;
 				squished[1] = getFractional(shiftedCenterX);
 
-				const shiftedCenterY = squishHelper(scale.y, originalCoords[1])
+				const shiftedCenterY = clampCoord(squishHelper(scale.y, originalCoords[1]))
 				squished[2] = shiftedCenterY;
 				squished[3] = getFractional(shiftedCenterY);
 
@@ -36,11 +47,11 @@ const squishCoordinates2d = {
 				squished[4] = Math.floor(diagonal);
 				squished[5] = getFractional(diagonal);
 			} else {
-				const centerX = originalCoords[0];
+				const centerX = clampCoord(originalCoords[0]);
 				squished[0] =  Math.floor(centerX);
 				squished[1] = getFractional(centerX);
 
-				const centerY = originalCoords[1];
+				const centerY = clampCoord(originalCoords[1]);
 				squished[2] = Math.floor(centerY);
 				squished[3] = getFractional(centerY);
 
@@ -57,14 +68,15 @@ const squishCoordinates2d = {
 
 					const removedSpace = Math.round(100 * (1 - scaleValue));
 
-					const shifted = scaled + (removedSpace / 2);
+					const shifted = clampCoord(scaled + (removedSpace / 2));
 
 					squished[2 * i] = shifted;
 					squished[(2 * i) + 1] = getFractional(shifted);
 
 				} else {
-					squished[2 * i] = Math.floor(originalCoords[i]);
-					squished[(2 * i) + 1] = Math.round(100 * (originalCoords[i] - Math.floor(originalCoords[i])));
+					const coord = clampCoord(originalCoords[i]);
+					squished[2 * i] = Math.floor(coord);
+					squished[(2 * i) + 1] = Math.round(100 * (coord - Math.floor(coord)));
 				}
 			}
 		}

package/src/util/views.js

@@ -23,6 +23,10 @@ const getView = (plane, view, playerIds, translation = {}, scale = {}) => {
             let shouldInclude = true;
 
             const translatedCoords = [];
+            // Same vertices as translatedCoords but WITHOUT the [0,100] viewport
+            // clamp. Needed for asset crop math: to know how much of an image
+            // falls outside the viewport we need its true (unclamped) extent.
+            const rawTranslatedCoords = [];
 
             // same hack as geometry utils
             const vertices = node.node.coordinates2d || [
@@ -70,10 +74,33 @@ const getView = (plane, view, playerIds, translation = {}, scale = {}) => {
                 }
 
                 translatedCoords.push([translatedX, translatedY]);
+
+                // Unclamped transform of the same vertex (scale + translation,
+                // but no clamp to [0,100]). Used only for asset crop below.
+                let rawX = (scale.x || 1) * (x - view.x);
+                let rawY = (scale.y || 1) * (y - view.y);
+
+                if (shouldTranslate) {
+                    if (translation.x) {
+                        rawX += translation.x;
+                    }
+                    if (translation.y) {
+                        rawY += translation.y;
+                    }
+                }
+
+                rawTranslatedCoords.push([rawX, rawY]);
             }
 
             if (shouldInclude) {
-                const copied = node.clone({handleClick: node.node.handleClick === null || node.node.handleClick === undefined ? null : node.node.handleClick});
+                const copied = node.clone({
+                    handleClick: node.node.handleClick === null || node.node.handleClick === undefined ? null : node.node.handleClick,
+                    // Preserve the source node's id so each view-clone keeps a
+                    // stable id across frames. Without this, clone() assigns a
+                    // fresh random id every frame, so the client's hover logic
+                    // sees the node "change" every frame and spams onhover/offhover.
+                    id: node.node.id
+                });
                 
                 if (translatedCoords && translatedCoords.length) {
                     if (copied.node.text) {
@@ -89,10 +116,35 @@ const getView = (plane, view, playerIds, translation = {}, scale = {}) => {
                         const thirdPoint = copied.node.coordinates2d[2];
                         const width = secondPoint[0] - firstPoint[0];
                         const height = thirdPoint[1] - secondPoint[1];
-                        Object.values(copied.node.asset)[0].pos.x = firstPoint[0];
-                        Object.values(copied.node.asset)[0].pos.y = firstPoint[1];
-                        Object.values(copied.node.asset)[0].size.x = width;
-                        Object.values(copied.node.asset)[0].size.y = height;   
+
+                        const assetObj = Object.values(copied.node.asset)[0];
+
+                        // pos/size = the clamped, on-screen visible box.
+                        assetObj.pos.x = firstPoint[0];
+                        assetObj.pos.y = firstPoint[1];
+                        assetObj.size.x = width;
+                        assetObj.size.y = height;
+
+                        // Crop the source image to the portion clipped by the
+                        // viewport. Without this the renderer squashes the whole
+                        // image into the (smaller) visible box instead of cutting
+                        // off the off-screen part. Using the unclamped corners we
+                        // measure how much of the image fell outside [0,100] on
+                        // each edge, as a percentage of the image's full span.
+                        const rawFirst = rawTranslatedCoords[0]; // top-left
+                        const rawThird = rawTranslatedCoords[2]; // bottom-right
+                        const fullWidth = rawThird[0] - rawFirst[0];
+                        const fullHeight = rawThird[1] - rawFirst[1];
+
+                        if (fullWidth > 0) {
+                            assetObj.cropLeft = Math.max(0, (0 - rawFirst[0]) / fullWidth) * 100;
+                            assetObj.cropRight = Math.max(0, (rawThird[0] - 100) / fullWidth) * 100;
+                        }
+
+                        if (fullHeight > 0) {
+                            assetObj.cropTop = Math.max(0, (0 - rawFirst[1]) / fullHeight) * 100;
+                            assetObj.cropBottom = Math.max(0, (rawThird[1] - 100) / fullHeight) * 100;
+                        }
                     }
                 } 
                 copied.node.playerIds = playerIds || [];

package/test/Squisher.test.js

@@ -4,6 +4,9 @@ const Squisher = require('../src/Squisher');
 const { unsquish } = require('../src/squish');
 
 const { FakeGame, verifyArrayEquality, rectNode, textNode, polygonNode, circleNode, lineNode } = require('./utils');
+const { GameNode } = require('../src/GameNode');
+const Shapes = require('../src/Shapes');
+const ShapeUtils = require('../src/util/shapes');
 
 test("squisher listener coalesces state changes", () => {
 
@@ -50,4 +53,63 @@ test("squisher listener coalesces state changes", () => {
     assert(timesInvoked === 1);
 });
 
+test("squisher does not crash on an asset node with an unregistered key", () => {
+    // Reproduces the mid-upload case: a GameNode.Asset referencing a key that
+    // isn't in gameAssets yet. Must not throw while building per-player frames.
+    const root = rectNode({ x: 0, y: 0, width: 100, height: 100 });
+
+    const scoped = new GameNode.Shape({
+        shapeType: Shapes.POLYGON,
+        coordinates2d: ShapeUtils.rectangle(0, 0, 10, 10),
+        fill: COLORS.RED,
+        playerIds: [1]
+    });
+
+    const assetNode = new GameNode.Asset({
+        coordinates2d: ShapeUtils.rectangle(0, 0, 10, 10),
+        assetInfo: { 'unregistered-key': { pos: { x: 2, y: 2 }, size: { x: 5, y: 5 } } }
+    });
+
+    root.addChild(scoped);
+    root.addChild(assetNode);
+
+    const game = new FakeGame([{ root, scale: { x: 1, y: 1 } }]);
+    const squisher = new Squisher({ game });
+
+    squisher.squish(game.getLayers()); // must not throw
+    const frame = squisher.getPlayerFrame(1);
+    // Unregistered asset is treated as non-audio, so it's still delivered.
+    assert(frame && frame.length >= 1);
+});
+
+test("squisher withholds muted audio from a player-scoped subtree", () => {
+    const root = new GameNode.Shape({
+        shapeType: Shapes.POLYGON,
+        coordinates2d: ShapeUtils.rectangle(0, 0, 100, 100),
+        fill: COLORS.WHITE,
+        playerIds: [1]
+    });
+
+    const audioNode = new GameNode.Asset({
+        coordinates2d: ShapeUtils.rectangle(0, 0, 10, 10),
+        assetInfo: { 'song': { pos: { x: 0, y: 0 }, size: { x: 1, y: 1 } } }
+    });
+    root.addChild(audioNode);
+
+    const game = new FakeGame([{ root, scale: { x: 1, y: 1 } }]);
+    const squisher = new Squisher({ game });
+    squisher.gameAssets = { song: { info: { type: 'audio' } } };
+
+    // Sound on (default): the audio node reaches player 1.
+    squisher.squish(game.getLayers());
+    const withSound = squisher.getPlayerFrame(1).length;
+
+    // Mute player 1: the audio node is withheld even though it's player-scoped.
+    squisher.updatePlayerSettings(1, { SOUND: { enabled: false } });
+    squisher.squish(game.getLayers());
+    const muted = squisher.getPlayerFrame(1).length;
+
+    assert(muted === withSound - 1);
+});
+