squishjs 0.7.3 → 0.7.51

package/package.json

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

package/src/BaseNode.js

@@ -68,10 +68,10 @@ class BaseNode {
     }
 
     findChild(id) {
-        return this.#findChildHelper(id, this);
+        return this.findChildHelper(id, this);
     }
 
-    #findChildHelper(nodeId, node, found = null) {
+    findChildHelper(nodeId, node, found = null) {
         if (node.node.id === nodeId) {
             found = node;
         }
@@ -80,7 +80,7 @@ class BaseNode {
             if (found) {
                 return found
             }
-            found = this.#findChildHelper(nodeId, node.node.children[i], found);
+            found = this.findChildHelper(nodeId, node.node.children[i], found);
         }
 
         return found;

package/src/Game.js

@@ -1,18 +1,9 @@
 class Game {
     constructor() {
-        this.players = {};
-        this.spectators = {};
         this.listeners = new Set();
         this.intervals = [];
         this.timeouts = [];
-    }
-
-    _hgAddPlayer(player) {
-        this.players[player.id] = player;
-    }
-
-    _hgRemovePlayer(playerId) {
-        delete this.players[playerId];
+        this.playerInfoMap = {};
     }
 
     addStateListener(listener) {

package/src/GameNode.js

@@ -36,7 +36,7 @@ class Shape extends BaseNode {
     }
 
     clone({ handleClick, input, id }) {
-        const _id = id || null;
+        const _id = Number(id) || null;
         return new Shape({
             color: this.node.color,
             onClick: handleClick,

package/src/InternalGameNode.js

@@ -2,7 +2,7 @@ let _id = 0;
 
 class InternalGameNode {
     constructor(color, onClick, coordinates2d, border, fill, text, asset, playerIds = [], effects = null, input = null, subType = null, id = null) {
-        this.id = id ? Number(id) : _id++;
+        this.id = id ? Number(id) : Number(_id++);
         this.children = new Array();
         this.color = color;
         this.handleClick = onClick;

package/src/Squisher.js

@@ -6,21 +6,24 @@ const INVISIBLE_PLAYER_ID = 0;
 const DEFAULT_TICK_RATE = 60;
 
 class Squisher {
-    constructor({ game, scale, customBottomLayer, customTopLayer }) {
+    constructor({ game, scale, customBottomLayer, customTopLayer, onAssetUpdate }) {
         this.ids = new Set();
 
         this.game = game;
+        this.assets = {};
 
         this.customBottomLayer = customBottomLayer;
         this.customTopLayer = customTopLayer;
 
+        this.initialize();
+        this.onAssetUpdate = onAssetUpdate;
+
         this.playerFrames = {};
 
         this.listeners = new Set();
         this.scale = scale || {x: 1, y: 1};
         this.state = this.squish(this.game.getLayers());
-        // this.spectatorState = this.game.getSpectatorLayers ? this.squish(this.game.getSpectatorLayers()) : [];
-        this.assets = {};
+
         if (this.game.tick) {
             const tickRate = this.gameMetadata && this.gameMetadata.tickRate ? this.gameMetadata.tickRate : DEFAULT_TICK_RATE;
             setInterval(this.game.tick.bind(this.game), 1000 / tickRate);
@@ -45,7 +48,7 @@ class Squisher {
     }
 
     squish(layers, scale = null) {
-
+        
         if (!layers) {
             return [];
         }
@@ -56,10 +59,6 @@ class Squisher {
 
         const playerMap = {};
 
-        Object.keys(this.game.players).forEach(playerId => {
-            playerMap[Number(playerId)] = [];
-        });
-
         if (this.customBottomLayer) {
             const squishedLayer = [];
             this.squishHelper(this.customBottomLayer.root, squishedLayer, this.customBottomLayer.scale, playerMap);
@@ -95,6 +94,12 @@ class Squisher {
         return this.playerFrames[playerId];
     }
 
+    handleNewAsset(key, asset) {
+        return new Promise((resolve, reject) => {
+            this.initialize().then(resolve);
+        });
+    }
+
     squishHelper(node, squishedNodes, scale = {x: 1, y: 1}, playerMap = {}, playerIdFilter = new Set()) {
         if (!node.node.listeners.has(this)) {
             node.addListener(this);
@@ -109,14 +114,17 @@ class Squisher {
 
         if (playerIdFilter.size > 0) {
             for (let playerId of playerIdFilter) {
-                    if (playerMap[playerId]) {
-                        playerMap[playerId].push(squished);
-                    } else {
-                        console.warn(`Node references unknown player ID: ${playerId}`);
-                    }
-                }
+                if (!playerMap[playerId]) {
+                    playerMap[Number(playerId)] = [];
+                } 
+
+                playerMap[playerId].push(squished);
+            }
         } else {
             Object.keys(playerMap).forEach(playerId => {
+                if (!playerMap[playerId]) {
+                    playerMap[Number(playerId)] = [];
+                }
                 playerMap[playerId].push(squished);
             })
         }
@@ -144,29 +152,34 @@ class Squisher {
 
     initialize() {
         return new Promise((resolve, reject) => {
-            const gameMetadata = this.game.constructor.metadata && this.game.constructor.metadata();
+            
 
-            const gameAssets = gameMetadata && gameMetadata.assets ? gameMetadata.assets : {};
+                const assets = Object.assign({}, this.assets || {});
 
-            if (this.customBottomLayer && this.customBottomLayer.assets) {
-                Object.assign(gameAssets, this.customBottomLayer.assets);
-            }
-            
-            if (this.customTopLayer && this.customTopLayer.assets) {
-                Object.assign(gameAssets, this.customTopLayer.assets);
-            }
+                const gameMetadata = this.game.constructor.metadata && this.game.constructor.metadata();
+
+                const gameAssets = gameMetadata && gameMetadata.assets ? gameMetadata.assets : {};
+
+                if (this.customBottomLayer && this.customBottomLayer.assets) {
+                    Object.assign(gameAssets, this.customBottomLayer.assets);
+                }
+                
+                if (this.customTopLayer && this.customTopLayer.assets) {
+                    Object.assign(gameAssets, this.customTopLayer.assets);
+                }
+
+                if (this.game.getAssets && this.game.getAssets()) {
+                    Object.assign(gameAssets, this.game.getAssets());
+                }
+
+                const allAssets = Object.assign(assets, gameAssets);
 
-            if (this.game.getAssets && this.game.getAssets()) {
-                Object.assign(gameAssets, this.game.getAssets());
-            }
-            
-            const initializeAssetBundle = () => new Promise((resolve, reject) => {
                 let assetBundleSize = 0;
                 let finishedCount = 0;
-                const totalCount = Object.keys(gameAssets).length;
+                const totalCount = Object.keys(allAssets).length;
     
-                for (const key in gameAssets) {
-                    gameAssets[key].getData().then(buf => {
+                for (const key in allAssets) {
+                    allAssets[key].getData().then(buf => {
                         const assetKeyLength = 32;
                         let keyIndex = 0;
                         const assetKeyArray = new Array(32);
@@ -177,7 +190,7 @@ class Squisher {
     
                         const encodedLength = (buf.length + assetKeyLength).toString(36);
                         
-                        const assetType = gameAssets[key].info.type === 'image' ? 1 : 2;
+                        const assetType = allAssets[key].info.type === 'image' ? 1 : 2;
     
                         const encodedMaxLength = 10;
                         let encodedLengthString = '';
@@ -205,16 +218,11 @@ class Squisher {
                                     }
                                 }
                             }
-                            resolve(newAssetBundle); 
+                            this.assetBundle = newAssetBundle;
+                            resolve(newAssetBundle);
                         }
                     });
                 }
-            });
-
-            initializeAssetBundle().then((newAssetBundle) => {
-                this.assetBundle = newAssetBundle;
-                resolve();
-            });
 
         });
     }

package/src/ViewableGame.js

@@ -12,15 +12,12 @@ const makePlane = (s) => {
 };
 
 class ViewableGame extends Game {
-    #plane;
-    #fakeRoot;
-    #planeSize;
     constructor(planeSize) {
         super();
-        this.#planeSize = planeSize;
-        this.#plane = makePlane(this.planeSize);
+        this.planeSize = planeSize;
+        this.plane = makePlane(this.planeSize);
 
-        this.#fakeRoot = new GameNode.Shape({
+        this.fakeRoot = new GameNode.Shape({
             shapeType: Shapes.POLYGON,
             coordinates2d: ShapeUtils.rectangle(0, 0, 0, 0),
             fill: Colors.COLORS.BLACK,
@@ -28,14 +25,14 @@ class ViewableGame extends Game {
 
         this.layers = [
             {
-                root: this.#fakeRoot
+                root: this.fakeRoot
             }
         ];
     }
 
     updatePlaneSize(s) {
-        this.#planeSize = s;
-        this.#plane.node.coordinates2d = ShapeUtils.rectangle(0, 0, s, s);
+        this.planeSize = s;
+        this.plane.node.coordinates2d = ShapeUtils.rectangle(0, 0, s, s);
     }
 
     getLayers() {
@@ -43,15 +40,15 @@ class ViewableGame extends Game {
     }
 
     getPlane() {
-        return this.#plane;
+        return this.plane;
     }
 
     getPlaneSize() {
-        return this.#planeSize;
+        return this.planeSize;
     }
 
     getViewRoot() {
-        return this.#fakeRoot;
+        return this.fakeRoot;
     }
 
 }

package/src/squish.js

@@ -73,7 +73,13 @@ const unsquish = (squished) => {
     }
 
     const constructor = TYPE_TO_CONSTRUCTOR[squished[2]];
-    return new constructor({ node: constructedInternalNode });
+    if (constructor) {
+        return new constructor({ node: constructedInternalNode });
+    } 
+
+    return {
+        node: constructedInternalNode
+    }
 }
 
 // When squishing, we need to make sure that properties that other properties depend on are inserted first.

package/src/squishHelpers/asset.js

@@ -1,4 +1,4 @@
-const { getFractional } = require('../util')
+const { getFractional } = require('../util');
 
 const ASSET_SUBTYPE = 48;
 
@@ -6,7 +6,7 @@ const squishAsset = {
 	type: ASSET_SUBTYPE,
 	squish: (a, scale) => {
 		const assetKey = Object.keys(a)[0];
-		const squishedAssets = new Array(8 + assetKey.length);
+		const squishedAssets = new Array(10 + assetKey.length);
 
 		const asset = a[assetKey];
 
@@ -16,6 +16,8 @@ const squishAsset = {
 		const sizeX = scale ? scale.x * asset.size.x : asset.size.x;
 		const sizeY = scale ? scale.y * asset.size.y : asset.size.y;
 
+		const startTimeSecond = asset.startTime || 0;
+
 		squishedAssets[0] = Math.floor(posX);
 		squishedAssets[1] = getFractional(posX);
 
@@ -28,8 +30,11 @@ const squishAsset = {
 		squishedAssets[6] = Math.floor(sizeY);
 		squishedAssets[7] = getFractional(sizeY);
 
+		squishedAssets[8] = Math.floor(startTimeSecond);
+		squishedAssets[9] = getFractional(startTimeSecond);
+
 		for (let i = 0; i < assetKey.length; i++) {
-			squishedAssets[8 + i] = assetKey.codePointAt(i);
+			squishedAssets[10 + i] = assetKey.codePointAt(i);
 		}
 
 		return squishedAssets;
@@ -41,7 +46,10 @@ const squishAsset = {
 		const assetSizeX = squished[4] + squished[5] / 100;
 		const assetSizeY = squished[6] + squished[7] / 100;
 
-		const assetKey = String.fromCodePoint.apply(null, squished.slice(8));
+		const startTime = squished[8] + squished[9] / 100;
+
+		const assetKey = String.fromCodePoint.apply(null, squished.slice(10));
+
 		return {
 			[assetKey]: {
 				pos: {
@@ -51,7 +59,8 @@ const squishAsset = {
 				size: {
 					x: assetSizeX,
 					y: assetSizeY
-				}
+				},
+				startTime
 			}
 		}
 	}

package/src/squishHelpers/id.js

@@ -3,10 +3,43 @@ const ID_SUBTYPE = 43;
 const squishId = {
 	type: ID_SUBTYPE,
 	squish: (i) => {
-		return [i];
+		// max val: 10 000 000 000 000 000 (ten quadrillion)
+		const idStr = i.toString();
+		let strChunks = [];
+		if (idStr.length > 2) {
+			let j;
+			for (j = 0; j + 2 <= idStr.length; j += 2) {
+				strChunks.push(idStr.substring(j, j + 2));
+			}
+
+			if (j == idStr.length - 1) {
+				strChunks.push(idStr.substring(j, j + 2));
+			}
+		} else {
+			if (idStr.length === 1) {
+				strChunks.push('0' + idStr);
+			} else {
+				strChunks.push(idStr);
+			}
+		}
+
+		if (strChunks.length < 8) {
+			while (strChunks.length < 8) {
+				strChunks = ["00", ...strChunks];
+			}
+		}
+
+		return strChunks.map(c => new Number(c));
 	},
 	unsquish: (arr) => {
-		return arr[0];
+		// build up from right to left then parse
+		let str = '';
+		for (let i = arr.length - 1; i >= 0; i--) {
+			const val = arr[i];
+			str = val + str
+		}
+
+		return new Number(str);
 	}
 }
 

package/src/util/views.js

@@ -4,7 +4,7 @@ const ShapeUtils = require('./shapes');
 const GeometryUtils = require('./geometry');
 const Colors = require('../Colors');
 
-const getView = (plane, view, playerIds, translation = {}) => {
+const getView = (plane, view, playerIds, translation = {}, scale = {}) => {
 
     const wouldBeCollisions = GeometryUtils.checkCollisions(plane, {node: {coordinates2d: ShapeUtils.rectangle(view.x, view.y, view.w, view.h)}}, (node) => {
         return node.node.id !== plane.node.id;
@@ -35,11 +35,15 @@ const getView = (plane, view, playerIds, translation = {}) => {
 
             for (let coorPairIndex in vertices) {
                 const coordPair = vertices[coorPairIndex];
+
                 const x = coordPair[0];
                 const y = coordPair[1];
                 let translatedX = Math.max(Math.min(x - view.x, 100), 0);
                 let translatedY = Math.max(Math.min(y - view.y, 100), 0);
 
+                translatedX = (scale.x || 1) * translatedX;
+                translatedY = (scale.y || 1) * translatedY;
+
                 const shouldTranslate = translation.filter ? translation.filter(node) : true;
 
                 if (shouldTranslate) {
@@ -51,20 +55,19 @@ const getView = (plane, view, playerIds, translation = {}) => {
                         translatedY += translation.y;
                     }
 
-                    if (translatedX < 0 || translatedX > 100) {
-                        shouldInclude = false;
-                    }
-
-                    if (translatedY < 0 || translatedY > 100) {
-                        shouldInclude = false;
-                    }
                 }
 
-                const xScale = 1//100 / (view.w || 100);
-                const yScale = 1//100 / (view.h || 100);
+                if (translatedX < 0) {
+                    translatedX = 0;
+                } else if (translatedX > 100) {
+                    translatedX = 100;
+                } 
 
-                translatedX = xScale * translatedX;
-                translatedY = yScale * translatedY;
+                if (translatedY < 0) {
+                    translatedY = 0;
+                } else if (translatedY > 100) {
+                    translatedY = 100;
+                }
 
                 translatedCoords.push([translatedX, translatedY]);
             }

package/test/main.test.js

@@ -48,6 +48,8 @@ const compareSquished = (preSquish, unsquished) => {
                         assert(preSquish[key][k] === unsquished[key][k]);
                     }
                 }
+            } else if (key === 'id') {
+                assert(Number(preSquish[key]) === Number(unsquished[key]));
             } else {
                 assert(preSquish[key] === unsquished[key]);
             }
@@ -120,14 +122,13 @@ test("Text node with unicode", () => {
             color: COLORS.BLACK
         }
     });
-    console.log("123:")
-    const squishedNode = new Uint8ClampedArray(squish(gameNode.node));
+    const squishedNode = new Uint8ClampedArray(squish(gameNode));
     const unsquishedNode = unsquish(squishedNode);
     compareSquished(squishedNode.node, unsquishedNode);
-    assert(unsquishedNode.text.text.length === 6);
-    assert([...unsquishedNode.text.text].length === 3);
-    assert(unsquishedNode.text.text.codePointAt(0) === '💯'.codePointAt(0));
-    assert(unsquishedNode.text.text.codePointAt(4) === '💯'.codePointAt(0));
+    assert(unsquishedNode.node.text.text.length === 6);
+    assert([...unsquishedNode.node.text.text].length === 3);
+    assert(unsquishedNode.node.text.text.codePointAt(0) === '💯'.codePointAt(0));
+    assert(unsquishedNode.node.text.text.codePointAt(4) === '💯'.codePointAt(0));
 });
 
 

package/test/utils.js

@@ -31,7 +31,7 @@ const verifyArrayEquality = (actual, expected) => {
         if (expected[i].length && actual[i].length) {
             verifyArrayEquality(expected[i], actual[i]);
         } else {
-            assert(expected[i] === actual[i]);
+            assert(expected[i] - actual[i] === 0);
         }
     }
 };

package/oldsvgexport.js

@@ -1,89 +0,0 @@
-const fs = require('fs');
-const { unsquish } = require('../src/squish');
-const subtypes = require('../src/subtypes');
-
-
-const svgText = (gameNode, container) => {
-    const fill = gameNode.node.text.color;
-    const align = gameNode.node.text.align;
-    
-    let svgAlign;
-    if (align === 'left') {
-        svgAlign = 'end';
-    }
-    if (align === 'center') {
-        svgAlign = 'middle';
-    }
-    if (align === 'right') {
-        svgAlign = 'start';
-    }
-
-    const fillString = `rgba(${fill[0]}, ${fill[1]}, ${fill[2]}, ${fill[3]})`
-
-    return `<text text-anchor="${svgAlign}" x="${scaleX(gameNode.node.text.x, container.x)}" y="${scaleX(gameNode.node.text.y, container.y)}" fill="${fillString}">${gameNode.node.text.text}</text>`;
-}
-
-const svgPolygon = (gameNode, container) => {
-    const coordPairs = gameNode.node.coordinates2d;
-    const fill = gameNode.node.fill;
-
-    const fillString = `rgba(${fill[0]}, ${fill[1]}, ${fill[2]}, ${fill[3]})`
-
-    const scaledCoords = coordPairs.map(coordPair => {
-        return [scaleX(coordPair[0], container.x), scaleY(coordPair[1], container.y)];
-    });
-
-    return `<polygon points="${scaledCoords.join(' ')}"
-              fill="${fillString}" stroke="black" />`;
-};
-
-const scaleX = (x, containerWidth) => {
-    const widthPercentage = x / 100;
-    return widthPercentage * containerWidth;
-};
-
-const scaleY = (y, containerHeight) => {
-    const heightPercentage = y / 100;
-    return heightPercentage * containerHeight;
-};
-
-const svgHelper = (gameNode, container) => {
-
-    if (gameNode.node.subType === subtypes.SHAPE_2D_POLYGON) {
-        console.log('sdfdsfdsf');
-        return svgPolygon(gameNode, container);
-    } else if (gameNode.node.subType === subtypes.SHAPE_2D_LINE) {
-        // svgString += svgPolygon(gameNode);
-    } else if (gameNode.node.subType === subtypes.SHAPE_2D_CIRCLE) {
-        // svgString += svgPolygon(gameNode);
-    } else if (gameNode.node.subType === subtypes.ASSET) {
-        // svgString += svgPolygon(gameNode);
-    } else if (gameNode.node.subType === subtypes.TEXT) {
-        console.log('yooooo his dgjdf top of the morning');
-        return svgText(gameNode, container);
-    }
-
-    // for (let i = 0; i < gameNode.node.children.length; i++) {
-    //     svgHelper(gameNode.node.children[i], container, svgString);
-    // }
-
-    // return svgString;
-};
-
-module.exports = (squishedLayers, outFile) => {
-    const pageWidth = 600;
-    const pageHeight = 600;
-    let svgString = `<svg height="${pageHeight}" width="${pageWidth}" xmlns="http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink">`;
-            // <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
-        // </svg>`;
-    const container = { x: pageWidth, y: pageHeight };
-    squishedLayers.forEach(squishedNode => {
-        console.log('squished node');
-        console.log(squishedNode);
-        const node = unsquish(squishedNode);
-        svgString += svgHelper(node, container);
-    });
-
-    svgString += `</svg>`
-    fs.writeFileSync(outFile, svgString);
-};