squishjs 1.3.7 → 1.3.9

package/.claude/settings.local.json

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

package/package.json

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

package/src/Asset.js

@@ -1,4 +1,8 @@
 const path = require('path');
+const https = require('https');
+const http = require('http');
+const fs = require('fs');
+const crypto = require('crypto');
 const { getAppDataPath } = require('./utils');
 
 // assets is the old stuff, save it for backward compatibility
@@ -20,14 +24,6 @@ class Asset {
         if (data) {
             this.data = data;
         }
-
-        // this is dumb. was trying something but made it dumb.
-        this.https = require('https');
-        this.http = require('http');
-        this.fs = require('fs');
-        this.crypto = require('crypto');
-        this.path = require('path');
-        this.process = require('process');
     }
 
     getConfigValue(key, _default = undefined) {
@@ -62,9 +58,9 @@ class Asset {
         let _config = {};
         
         for (let i = 0; i < options.length; i++) {
-            if (this.fs.existsSync(`${options[i]}/config.json`)) {
+            if (fs.existsSync(`${options[i]}/config.json`)) {
                 console.log(`Using config at ${options[i]}`);
-                _config = JSON.parse(this.fs.readFileSync(`${options[i]}/config.json`));
+                _config = JSON.parse(fs.readFileSync(`${options[i]}/config.json`));
                 break;
             }
         }
@@ -76,7 +72,7 @@ class Asset {
 
 
     getHash(str) {
-        const shasum = this.crypto.createHash('sha1');
+        const shasum = crypto.createHash('sha1');
         shasum.update(str);
         return shasum.digest('hex');
     };
@@ -98,7 +94,7 @@ class Asset {
                 return resolve(true);
             }
             const fileLocation = this.getFileLocation(this.info.id);
-            this.fs.exists(fileLocation, (exists) => {
+            fs.exists(fileLocation, (exists) => {
                 resolve(exists && fileLocation);
             });
         });
@@ -124,8 +120,8 @@ class Asset {
     
     download(force) {
         const HG_ASSET_PATH = path.join(getAppDataPath(), 'asset-cache');
-        if (!this.fs.existsSync(HG_ASSET_PATH)) {
-            this.fs.mkdirSync(HG_ASSET_PATH);
+        if (!fs.existsSync(HG_ASSET_PATH)) {
+            fs.mkdirSync(HG_ASSET_PATH);
         }
         return new Promise((resolve, reject) => {
             this.existsLocally().then(fileLocation => {
@@ -150,7 +146,7 @@ class Asset {
                 resolve(this.data);
             } else {
                 this.download().then(fileLocation => {
-                    this.fs.readFile(fileLocation, (err, buf) => {
+                    fs.readFile(fileLocation, (err, buf) => {
                         if (err) {
                             reject(err);
                         } else {
@@ -164,13 +160,13 @@ class Asset {
         }); 
     }
     
-    doDownload(assetId, path) {
+    doDownload(assetId, assetPath) {
         return new Promise((resolve, reject) => {
             const fileHash = this.getHash(assetId);
-            const filePath = `${path}/${fileHash}`;
+            const filePath = `${assetPath}/${fileHash}`;
 
-            const writeStream = this.fs.createWriteStream(filePath);
-            const getModule = ASSET_URL.startsWith('https') ? this.https : this.http;
+            const writeStream = fs.createWriteStream(filePath);
+            const getModule = ASSET_URL.startsWith('https') ? https : http;
 
             writeStream.on('close', () => {
                 resolve(filePath);

package/src/Squisher.js

@@ -11,7 +11,7 @@ class Squisher {
 
         this.game = game;
         this.gameMetadata = game.constructor.metadata && game.constructor.metadata();
-        this.assets = {};
+        this._assetBufferCache = {};
         this.playerSettings = {};
 
         this.customBottomLayer = customBottomLayer;
@@ -23,6 +23,13 @@ class Squisher {
         this.playerFrames = {};
 
         this.listeners = new Set();
+        // Coalescing: a single tick often mutates many nodes, each firing
+        // onStateChange. Instead of re-squishing the whole tree + broadcasting
+        // per mutation, we mark dirty and flush once at the end of the event
+        // loop turn. Consumers that need the current state synchronously (e.g.
+        // sending an initial frame to a player who just joined) call flush().
+        this._dirty = false;
+        this._flushScheduled = false;
         this.scale = scale || {x: 1, y: 1};
         this.state = this.squish(this.game.getLayers());
 
@@ -97,6 +104,10 @@ class Squisher {
     }
 
     handleNewAsset(key, asset) {
+        // Invalidate just this key so initialize() re-fetches only its data
+        if (this._assetBufferCache) {
+            delete this._assetBufferCache[key];
+        }
         return this.initialize();
     }
 
@@ -169,9 +180,6 @@ class Squisher {
 
     initialize() {
         return new Promise((resolve, reject) => {
-            
-
-                const assets = Object.assign({}, this.assets || {});
 
                 const gameMetadata = this.game.constructor.metadata && this.game.constructor.metadata();
 
@@ -190,65 +198,84 @@ class Squisher {
                     Object.assign(gameAssets, this.game.getAssets());
                 }
 
-                const allAssets = Object.assign(assets, gameAssets);
+                const assetTypeMap = {
+                    'image': 1,
+                    'audio': 2,
+                    'font': 3
+                };
 
-                let assetBundleSize = 0;
-                let finishedCount = 0;
-                const totalCount = Object.keys(allAssets).length;
+                const assetKeys = Object.keys(gameAssets);
+                const totalCount = assetKeys.length;
 
                 if (totalCount === 0) {
-                    this.assetBundle = [];
-                    resolve([]);
+                    this.assetBundle = Buffer.alloc(0);
+                    resolve(this.assetBundle);
                     return;
                 }
-    
-                for (const key in allAssets) {
-                    allAssets[key].getData().then(buf => {
-                        const assetKeyLength = 32;
-                        let keyIndex = 0;
-                        const assetKeyArray = new Array(32);
-                        while (keyIndex < assetKeyLength && keyIndex < key.length) {
-                            assetKeyArray[keyIndex] = key.charCodeAt(keyIndex);
-                            keyIndex++;
+
+                if (!this._assetBufferCache) {
+                    this._assetBufferCache = {};
+                }
+
+                let finishedCount = 0;
+                const perAssetBuffers = new Array(totalCount);
+
+                for (let idx = 0; idx < totalCount; idx++) {
+                    const key = assetKeys[idx];
+
+                    // If we already have a packed buffer for this key, reuse it
+                    if (this._assetBufferCache[key]) {
+                        perAssetBuffers[idx] = this._assetBufferCache[key];
+                        finishedCount += 1;
+                        if (finishedCount === totalCount) {
+                            this.assetBundle = Buffer.concat(perAssetBuffers);
+                            resolve(this.assetBundle);
                         }
-    
-                        const encodedLength = (buf.length + assetKeyLength).toString(36);
-                        
-                        const assetTypeMap = {
-                            'image': 1,
-                            'audio': 2,
-                            'font': 3
-                        };
-   
-                        const assetType = assetTypeMap[allAssets[key].info.type];
-    
+                        continue;
+                    }
+
+                    gameAssets[key].getData().then(buf => {
+                        const assetKeyLength = 32;
                         const encodedMaxLength = 10;
-                        let encodedLengthString = '';
-                        for (let i = 0; i < (encodedMaxLength - encodedLength.length); i++) {
-                            encodedLengthString += '0';
+
+                        const headerLength = 2 + encodedMaxLength + assetKeyLength;
+                        const assetBuf = Buffer.alloc(headerLength + buf.length);
+
+                        assetBuf[0] = ASSET_TYPE;
+                        assetBuf[1] = assetTypeMap[gameAssets[key].info.type];
+
+                        // Encode the length (data + key length) as base-36, left-padded
+                        const encodedLength = (buf.length + assetKeyLength).toString(36);
+                        const padLen = encodedMaxLength - encodedLength.length;
+                        for (let i = 0; i < padLen; i++) {
+                            assetBuf[2 + i] = 48; // '0' charCode
                         }
-                        for (let j = encodedLength.length; j < encodedMaxLength; j++) {
-                            encodedLengthString +=  encodedLength.charAt(j - encodedLength.length);
+                        for (let i = 0; i < encodedLength.length; i++) {
+                            assetBuf[2 + padLen + i] = encodedLength.charCodeAt(i);
                         }
-                        const encodedLengthArray = new Array(encodedMaxLength);
-                        for (let i = 0; i < encodedMaxLength; i++) {
-                            encodedLengthArray[i] = encodedLength.charCodeAt(i);
+
+                        // Write asset key (up to 32 chars, rest stays 0)
+                        const keyWriteLen = Math.min(assetKeyLength, key.length);
+                        for (let i = 0; i < keyWriteLen; i++) {
+                            assetBuf[2 + encodedMaxLength + i] = key.charCodeAt(i);
                         }
-    
-                        this.assets[key] = [ASSET_TYPE, assetType, ...encodedLengthArray, ...assetKeyArray, ...buf];
-                        assetBundleSize += this.assets[key].length;
-                        finishedCount += 1;
 
-                        if (finishedCount == totalCount) {
-                            const newAssetBundle = new Array(assetBundleSize);
-                            let index = 0;
-                            for (const key in this.assets) {
-                                for (let y = 0; y < this.assets[key].length; y++) {
-                                    newAssetBundle[index++] = this.assets[key][y];
-                                }
+                        // Copy the raw asset data
+                        if (Buffer.isBuffer(buf)) {
+                            buf.copy(assetBuf, headerLength);
+                        } else {
+                            for (let i = 0; i < buf.length; i++) {
+                                assetBuf[headerLength + i] = buf[i];
                             }
-                            this.assetBundle = newAssetBundle;
-                            resolve(newAssetBundle);
+                        }
+
+                        this._assetBufferCache[key] = assetBuf;
+                        perAssetBuffers[idx] = assetBuf;
+                        finishedCount += 1;
+
+                        if (finishedCount === totalCount) {
+                            this.assetBundle = Buffer.concat(perAssetBuffers);
+                            resolve(this.assetBundle);
                         }
                     }).catch(err => {
                         console.error('Unable to get asset data for key ' + key);
@@ -261,10 +288,25 @@ class Squisher {
     }
 
     handleStateChange(node, layerName) {
-        if (this.listeners.size > 0) {
-            this.state = this.squish(this.game.getLayers());
-            this.broadcast();
-        }
+        if (this.listeners.size === 0) return;
+        this._dirty = true;
+        if (this._flushScheduled) return;
+        this._flushScheduled = true;
+        const schedule = (typeof setImmediate === 'function')
+            ? setImmediate
+            : (fn) => setTimeout(fn, 0);
+        schedule(() => this.flush());
+    }
+
+    // Squish + broadcast any pending state changes synchronously. Safe to call
+    // when nothing is pending (no-op). Coalesces a burst of mutations into a
+    // single squish + single broadcast carrying the latest state.
+    flush() {
+        this._flushScheduled = false;
+        if (!this._dirty) return;
+        this._dirty = false;
+        this.state = this.squish(this.game.getLayers());
+        this.broadcast();
     }
 
     broadcast() {

package/src/squishHelpers/asset.js

@@ -6,7 +6,7 @@ const squishAsset = {
 	type: ASSET_SUBTYPE,
 	squish: (a, scale) => {
 		const assetKey = Object.keys(a)[0];
-		const squishedAssets = new Array(10 + assetKey.length);
+		const squishedAssets = new Array(18 + assetKey.length);
 
 		const asset = a[assetKey];
 
@@ -18,6 +18,15 @@ const squishAsset = {
 
 		const startTimeSecond = asset.startTime || 0;
 
+		// Crop values are percentages (0-100) of the source image, expressed as
+		// the amount removed from each edge. They sample a sub-region of the
+		// source and are independent of layer scale (which affects pos/size, i.e.
+		// where the cropped region lands on screen). Default to 0 (no crop).
+		const cropLeft = asset.cropLeft || 0;
+		const cropTop = asset.cropTop || 0;
+		const cropRight = asset.cropRight || 0;
+		const cropBottom = asset.cropBottom || 0;
+
 		squishedAssets[0] = Math.floor(posX);
 		squishedAssets[1] = getFractional(posX);
 
@@ -33,8 +42,20 @@ const squishAsset = {
 		squishedAssets[8] = Math.floor(startTimeSecond);
 		squishedAssets[9] = getFractional(startTimeSecond);
 
+		squishedAssets[10] = Math.floor(cropLeft);
+		squishedAssets[11] = getFractional(cropLeft);
+
+		squishedAssets[12] = Math.floor(cropTop);
+		squishedAssets[13] = getFractional(cropTop);
+
+		squishedAssets[14] = Math.floor(cropRight);
+		squishedAssets[15] = getFractional(cropRight);
+
+		squishedAssets[16] = Math.floor(cropBottom);
+		squishedAssets[17] = getFractional(cropBottom);
+
 		for (let i = 0; i < assetKey.length; i++) {
-			squishedAssets[10 + i] = assetKey.codePointAt(i);
+			squishedAssets[18 + i] = assetKey.codePointAt(i);
 		}
 
 		return squishedAssets;
@@ -48,7 +69,12 @@ const squishAsset = {
 
 		const startTime = squished[8] + squished[9] / 100;
 
-		const assetKey = String.fromCodePoint.apply(null, squished.slice(10));
+		const cropLeft = squished[10] + squished[11] / 100;
+		const cropTop = squished[12] + squished[13] / 100;
+		const cropRight = squished[14] + squished[15] / 100;
+		const cropBottom = squished[16] + squished[17] / 100;
+
+		const assetKey = String.fromCodePoint.apply(null, squished.slice(18));
 
 		return {
 			[assetKey]: {
@@ -60,7 +86,11 @@ const squishAsset = {
 					x: assetSizeX,
 					y: assetSizeY
 				},
-				startTime
+				startTime,
+				cropLeft,
+				cropTop,
+				cropRight,
+				cropBottom
 			}
 		}
 	}
@@ -69,4 +99,4 @@ const squishAsset = {
 module.exports = {
     ASSET_SUBTYPE,
     squishAsset
-};
+};

package/test/Layers.test.js

@@ -56,6 +56,8 @@ test("test layer with child added", () => {
 
     // adding a child should trigger an update in the squisher and result in a new state
     layer.addChild(child);
+    // state changes are coalesced; flush to materialize them synchronously
+    squisher.flush();
 
     const expectedLayerValue = [squish(layer), squish(child)].flat();
     const stateWithChild = Array.from(squisher.state);

package/test/Squisher.test.js

@@ -5,48 +5,49 @@ const { unsquish } = require('../src/squish');
 
 const { FakeGame, verifyArrayEquality, rectNode, textNode, polygonNode, circleNode, lineNode } = require('./utils');
 
-test("squisher listener", () => {
+test("squisher listener coalesces state changes", () => {
 
     const root = lineNode({coords: [[20, 20], [80, 80]], color: COLORS.ORANGE});
-    
-    const game = new FakeGame([ 
+
+    const game = new FakeGame([
         {
             root,
             scale: {
                 x: 1,
                 y: 1
             }
-        } 
+        }
     ]);
 
     const squisher = new Squisher({ game });
 
     let timesInvoked = 0;
+    let lastState = null;
 
     squisher.addListener((newSquishedState) => {
-        if (timesInvoked === 0) {
-            assert(newSquishedState.length == 1);
-            const updatedRoot = unsquish(newSquishedState[0]);
-            verifyArrayEquality(updatedRoot.node.color, COLORS.BLACK);
-        } else if (timesInvoked === 1) {
-            assert(newSquishedState.length == 1);
-            const updatedRoot = unsquish(newSquishedState[0]);
-            verifyArrayEquality(updatedRoot.node.color, COLORS.GREEN);
-        }
         timesInvoked++;
+        lastState = newSquishedState;
     });
 
     assert(timesInvoked === 0);
 
+    // A burst of mutations in the same turn is deferred — nothing broadcast yet.
     root.node.color = COLORS.BLACK;
     root.node.onStateChange();
-
-    assert(timesInvoked === 1);
-
     root.node.color = COLORS.GREEN;
     root.node.onStateChange();
 
-    assert(timesInvoked === 2);
+    assert(timesInvoked === 0);
+
+    // flush() coalesces the burst into a single broadcast with the final state.
+    squisher.flush();
+    assert(timesInvoked === 1);
+    assert(lastState.length == 1);
+    verifyArrayEquality(unsquish(lastState[0]).node.color, COLORS.GREEN);
+
+    // flush() with nothing pending is a no-op.
+    squisher.flush();
+    assert(timesInvoked === 1);
 });
 
 

package/test/main.test.js

@@ -435,6 +435,7 @@ test("Simple shape with updates", () => {
     base.update({
         fill: COLORS.BLUE
     });
+    squisher.flush();
 
     const state2 = Array.from(squisher.state);
     verifyArrayEquality(unsquish(state2[0]).node.fill, COLORS.BLUE);
@@ -442,6 +443,7 @@ test("Simple shape with updates", () => {
     base.update({
         fill: COLORS.GREEN
     });
+    squisher.flush();
 
     const state3 = Array.from(squisher.state);
     verifyArrayEquality(unsquish(state3[0]).node.fill, COLORS.GREEN);