squishjs 0.7.4 → 0.7.52

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "squishjs",
-  "version": "0.7.4",
+  "version": "0.7.52",
   "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/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);
@@ -91,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);
@@ -143,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);
@@ -176,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 = '';
@@ -204,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

@@ -1,5 +1,3 @@
-const assert = require('assert');
-
 const InternalGameNode = require("./InternalGameNode");
 const { CONSTRUCTOR_TO_TYPE, TYPE_TO_CONSTRUCTOR } = require('./node-types');
 const SUBTYPE_MAPPINGS = require('./subtype-mappings');
@@ -43,11 +41,15 @@ for (const key in squishSpec) {
 }
 
 const unsquish = (squished) => {
-    assert(squished[0] == 3);
+    if (squished[0] != 3) {
+        throw new Error('Squished[0] isnt 3.');
+    }
 
-    assert(squished.length === squished[1]);
+    if (squished.length !== squished[1] + squished[2] + squished[3]) {
+        throw new Error('Bad length value');
+    }
 
-    let squishedIndex = 3;
+    let squishedIndex = 5;
 
     let constructedInternalNode = new InternalGameNode();
 
@@ -72,7 +74,8 @@ const unsquish = (squished) => {
         squishedIndex += subFrameLength;
     }
 
-    const constructor = TYPE_TO_CONSTRUCTOR[squished[2]];
+    const constructor = TYPE_TO_CONSTRUCTOR[squished[4]];
+
     if (constructor) {
         return new constructor({ node: constructedInternalNode });
     } 
@@ -125,7 +128,14 @@ const squish = (entity, scale = null) => {
     }
 
     const squished = squishedPieces.flat();
-    return [3, squished.length + 3, nodeClassCode, ...squished];
+
+    // length + 5 bytes for what we're inserting here - 3 for length, one for type (3), one for class code
+    const totalLength = squished.length + 5;
+    const rightMost = Math.min(256, totalLength);
+    const middle = Math.min(256, Math.max(0, totalLength - 256));
+    const leftMost = Math.min(256, Math.max(0, totalLength - 512));
+
+    return [3, leftMost, middle, rightMost, nodeClassCode, ...squished];
 
 }
 

package/src/squishHelpers/text.js

@@ -151,4 +151,4 @@ const squishText = {
 module.exports = {
     TEXT_SUBTYPE,
     squishText
-};
+};

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));
 });
 
 
@@ -308,5 +309,29 @@ test("scaled asset node", () => {
     assert(asset.size.y === .85 * 20);
 });
 
+test("big big text", () => {
+    const gameNode = new GameNode.Text({
+        textInfo: {
+            text: 'I am going to write a whoooooole lot of text like more than 64 characters which is quite a bit. Not like a tweet long but still long, you know?',
+            x: 4,
+            y: 20,
+            size: 5,
+            align: 'center',
+            color: COLORS.RED
+        }
+    });
+
+    const xScale = .6;
+    const yScale = .5;
+
+    const scaledTextSize = 5 * hypLength(xScale, yScale);
+
+    const squishedScaledNode = squish(gameNode, {x: xScale, y: yScale});
+    const unsquishedNode = unsquish(squishedScaledNode).node;
 
+    assert(unsquishedNode.text.x.toFixed(2) === (4 * xScale + Math.round((1 - xScale) * 100) / 2).toFixed(2));
+    assert(unsquishedNode.text.y.toFixed(2) === (20 * yScale + Math.round((1 - yScale) * 100) / 2).toFixed(2));
+
+    assert(unsquishedNode.text.size.toFixed(2) === scaledTextSize.toFixed(2));
+});
 

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

package/testapp.html

@@ -1,26 +0,0 @@
-<!DOCTYPE HTML>
-<html>
-    <head>
-        <meta charset="UTF-8">
-        <title>Homegames</title>
-    </head>
-    <body>
-        <div>
-            <canvas id='tester-canvas'></canvas>
-        </div>
-    </body>
-    <script src="src/squish.js"></script>
-    <script src="render-tester.js"></script>
-    <style>
-
-        body { 
-            margin: 0;
-        }
-
-        canvas, body {
-            width: 100vw;
-            height: 100vh;
-        }
-
-    </style>
-</html>