squishjs 0.7.2 → 0.7.5

package/package.json

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

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);
@@ -80,7 +79,7 @@ class Squisher {
         }
 
 
-        if (this.customTopLayer) {
+        if (this.customTopLayer) {            
             const squishedLayer = [];
             this.squishHelper(this.customTopLayer.root, squishedLayer, this.customTopLayer.scale, playerMap);
             toSquish.push(squishedLayer);
@@ -95,7 +94,13 @@ class Squisher {
         return this.playerFrames[playerId];
     }
 
-    squishHelper(node, squishedNodes, scale = {x: 1, y: 1}, playerMap = {}) {
+    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);
         }
@@ -103,24 +108,32 @@ class Squisher {
         const squished = squish(node, scale);
         squishedNodes.push(squished);
 
-        if (playerMap) {
-            if (node.node.playerIds && node.node.playerIds.length) {
-                node.node.playerIds.forEach(playerId => {
-                    if (playerMap[playerId]) {
-                        playerMap[playerId].push(squished);
-                    } else {
-                        console.warn(`Node references unknown player ID: ${playerId}`);
-                    }
-                });
-            } else {
-                Object.keys(playerMap).forEach(playerId => {
-                    playerMap[playerId].push(squished);
-                })
+        if (node.node.playerIds && node.node.playerIds.length > 0) {
+            node.node.playerIds.forEach(pId => playerIdFilter.add(pId));
+        }
+
+        if (playerIdFilter.size > 0) {
+            for (let playerId of playerIdFilter) {
+                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);
+            })
         }
 
         for (let i = 0; i < node.node.children.length; i++) {
-            this.squishHelper(node.node.children[i], squishedNodes, scale, playerMap);
+            // make a new set so child calls within a single generation arent 
+            // modifying the same filter set
+            const pathFilter = new Set(playerIdFilter);
+            this.squishHelper(node.node.children[i], squishedNodes, scale, playerMap, pathFilter);
         }
 
     }
@@ -139,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);
@@ -172,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 = '';
@@ -200,16 +218,11 @@ class Squisher {
                                     }
                                 }
                             }
-                            resolve(newAssetBundle); 
+                            this.assetBundle = newAssetBundle;
+                            resolve(newAssetBundle);
                         }
                     });
                 }
-            });
-
-            initializeAssetBundle().then((newAssetBundle) => {
-                this.assetBundle = newAssetBundle;
-                resolve();
-            });
 
         });
     }

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);
-};

package/render-tester.js

@@ -1,120 +0,0 @@
-console.log('ytoooo');
-
-const canvas = document.getElementById('tester-canvas');
-
-const ctx = canvas.getContext('2d');
-
-const scaleCoordinate = ({ x, y }) => {
-    const xPercentage = x / 100;
-    const yPercentage = y / 100;
-    
-    return {
-        scaledX: xPercentage * canvas.width,
-        scaledY: yPercentage * canvas.height
-    }
-};
-
-
-let thingToRender = [
-  [
-     3, 36,  2, 43, 3,   0, 44, 2,  52,
-    22,  5,  0,  5, 0,  95,  0, 5,   0,
-    95,  0, 95,  0, 5,   0, 95, 0,   5,
-     0,  5,  0, 53, 6, 255,  0, 0, 255
-  ],
-  [
-     3, 36,  2, 43, 3,  1, 44,   2,  52,
-    22,  5,  0,  5, 0, 50,  0,   5,   0,
-    50,  0, 50,  0, 5,  0, 50,   0,   5,
-     0,  5,  0, 53, 6,  0,  0, 255, 255
-  ],
-  [
-     3, 36,  2, 43,  3,  2,  44, 2,  52,
-    22, 50,  0,  5,  0, 95,   0, 5,   0,
-    95,  0, 50,  0, 50,  0,  50, 0,  50,
-     0,  5,  0, 53,  6,  0, 255, 0, 255
-  ],
-  [
-     3, 36,  2, 43,  3,  3, 44,  2,  52,
-    22, 50,  0, 50,  0, 95,  0, 50,   0,
-    95,  0, 95,  0, 50,  0, 95,  0,  50,
-     0, 50,  0, 53,  6,  0,  0,  0, 255
-  ],
-  [
-     3, 36,  2, 43, 3,   4,  44,   2,  52,
-    22,  5,  0, 50, 0,  50,   0,  50,   0,
-    50,  0, 95,  0, 5,   0,  95,   0,   5,
-     0, 50,  0, 53, 6, 255, 255, 255, 255
-  ]
-];
-
-const drawMarker = ({ x, y, horizontal }) => {
-    const { scaledX, scaledY } = scaleCoordinate({ x, y });
-
-    if (horizontal) {
-        const lineWidth = .015 * canvas.width;
-        ctx.beginPath();
-        ctx.moveTo(scaledX, scaledY);
-        ctx.lineTo(scaledX + lineWidth, scaledY);
-        ctx.stroke();
-    } else {
-        // line is 1.5% of height
-        const lineHeight = .015 * canvas.height;
-        ctx.beginPath();
-        ctx.moveTo(scaledX, scaledY);
-        ctx.lineTo(scaledX, scaledY + lineHeight);
-        ctx.stroke();
-    }
-};
-
-const drawMarkers = () => {
-    const horizontalPoints = [
-        [0, 10], 
-        [0, 20], 
-        [0, 30], 
-        [0, 40], 
-        [0, 50], 
-        [0, 60], 
-        [0, 70], 
-        [0, 80], 
-        [0, 90]
-    ];
-
-    const verticalPoints = [
-        [10, 0], 
-        [20, 0], 
-        [30, 0], 
-        [40, 0], 
-        [50, 0], 
-        [60, 0], 
-        [70, 0], 
-        [80, 0], 
-        [90, 0]
-    ];
-
-    verticalPoints.forEach(coord => {
-        drawMarker({x: coord[0], y: coord[1], horizontal: false });
-    });
-
-    horizontalPoints.forEach(coord => {
-        drawMarker({x: coord[0], y: coord[1], horizontal: true });
-    });
-
-};
-
-const drawThing = () => {
-
-};
-
-const draw = () => {
-    canvas.width = window.innerWidth;
-    canvas.height = window.innerHeight;
-
-    ctx.clearRect(0, 0, canvas.width, canvas.height);
-    drawMarkers();
-    drawThing();
-};
-
-draw();
-
-window.addEventListener('resize', draw);

package/test/StateUpdates.js

@@ -1,10 +0,0 @@
-const { COLORS } = require("../src/Colors");
-const assert = require("assert");
-const Squisher = require('../src/Squisher');
-const { unsquish } = require('../src/squish');
-
-const { FakeGame, verifyArrayEquality, rectNode, polygonNode, circleNode } = require('./utils');
-
-test("two layers - square over square", () => {
-    console.log("two layers - one square over another");
-});