squishjs 0.6.41 → 0.7.1

package/src/terrain/terrainFunctions.ts

@@ -0,0 +1,142 @@
+import { pointDef, boardInfo } from './defs';
+
+const placeTerrain = (board: boardInfo[][], { x, y }: pointDef, boardWidth: number, boardHeight: number, keyPoint: pointDef) => {
+    if (x < 0 || x >= boardWidth) {
+        return;
+    } else if (y < 0 || y >= boardHeight) {
+        return;
+    } else if ( x === keyPoint.x && y === keyPoint.y) {
+        return;
+    }
+
+    if (!board[x][y].filled) {
+        if (board[x][y].north) {
+            board[x][y - 1].south = false;
+        }
+        if (board[x][y].south) {
+            board[x][y + 1].north = false;
+        }
+        if (board[x][y].east) {
+            board[x + 1][y].west = false;
+        }
+        if (board[x][y].west) {
+            board[x - 1][y].east = false;
+        }
+        board[x][y].filled = true;
+        board[x][y].north = false;
+        board[x][y].south = false;
+        board[x][y].east = false;
+        board[x][y].west = false;
+    }
+}
+
+const square = (board: boardInfo[][], { x, y }: pointDef, boardWidth: number, boardHeight: number, keyPoint: pointDef) => {
+    const option = Math.floor(Math.random() * 4);
+    placeTerrain(board, { x, y }, boardWidth, boardHeight, keyPoint);
+    if (option === 0) {	// start point is top left
+        placeTerrain(board, { x: x + 1, y }, boardWidth, boardHeight, keyPoint);
+        placeTerrain(board, { x, y: y + 1 }, boardWidth, boardHeight, keyPoint);
+        placeTerrain(board, { x: x + 1, y: y + 1 }, boardWidth, boardHeight, keyPoint);
+    } else if (option === 1) { // start point is top right
+        placeTerrain(board, { x: x - 1, y }, boardWidth, boardHeight, keyPoint);
+        placeTerrain(board, { x, y: y + 1 }, boardWidth, boardHeight, keyPoint);
+        placeTerrain(board, { x: x - 1, y: y + 1 }, boardWidth, boardHeight, keyPoint);
+    } else if (option === 2) { // start point is bottom left
+        placeTerrain(board, { x, y: y - 1 }, boardWidth, boardHeight, keyPoint);
+        placeTerrain(board, { x: x + 1, y }, boardWidth, boardHeight, keyPoint);
+        placeTerrain(board, { x: x + 1, y: y - 1 }, boardWidth, boardHeight, keyPoint);
+    } else { // start point is bottom right
+        placeTerrain(board, { x, y: y - 1 }, boardWidth, boardHeight, keyPoint);
+        placeTerrain(board, { x: x - 1, y }, boardWidth, boardHeight, keyPoint);
+        placeTerrain(board, { x: x - 1, y: y - 1 }, boardWidth, boardHeight, keyPoint);
+    }
+};
+
+const line = (board: boardInfo[][], { x, y }: pointDef, boardWidth: number, boardHeight: number, keyPoint: pointDef) => {
+    const option = Math.floor(Math.random() * 4);
+    placeTerrain(board, { x, y }, boardWidth, boardHeight, keyPoint);
+    if (option === 0) {	// start point is top
+        placeTerrain(board, { x, y: y + 1}, boardWidth, boardHeight, keyPoint);
+        placeTerrain(board, { x, y: y + 2 }, boardWidth, boardHeight, keyPoint);
+        placeTerrain(board, { x, y: y + 3 }, boardWidth, boardHeight, keyPoint);
+    } else if (option === 1) { // start point is left
+        placeTerrain(board, { x: x + 1, y }, boardWidth, boardHeight, keyPoint);
+        placeTerrain(board, { x: x + 2, y }, boardWidth, boardHeight, keyPoint);
+        placeTerrain(board, { x: x + 3, y }, boardWidth, boardHeight, keyPoint);
+    } else if (option === 2) { // start point is right
+        placeTerrain(board, { x: x - 1, y }, boardWidth, boardHeight, keyPoint);
+        placeTerrain(board, { x: x - 2, y }, boardWidth, boardHeight, keyPoint);
+        placeTerrain(board, { x: x - 3, y }, boardWidth, boardHeight, keyPoint);
+    } else { // start point is bottom
+        placeTerrain(board, { x, y: y - 1 }, boardWidth, boardHeight, keyPoint);
+        placeTerrain(board, { x, y: y - 2 }, boardWidth, boardHeight, keyPoint);
+        placeTerrain(board, { x, y: y - 3 }, boardWidth, boardHeight, keyPoint);
+    }
+};
+
+const bentLine = (board: boardInfo[][], { x, y }: pointDef, boardWidth: number, boardHeight: number, keyPoint: pointDef) => {
+    const option = Math.floor(Math.random() * 4);
+    placeTerrain(board, { x, y }, boardWidth, boardHeight, keyPoint);
+    if (option === 0) {	// start point is top
+        placeTerrain(board, { x, y: y + 1 }, boardWidth, boardHeight, keyPoint);
+        placeTerrain(board, { x, y: y + 2 }, boardWidth, boardHeight, keyPoint);
+        placeTerrain(board, { x: x + 1, y: y + 2 }, boardWidth, boardHeight, keyPoint);
+    } else if (option === 1) { // start point is left
+        placeTerrain(board, { x: x + 1, y }, boardWidth, boardHeight, keyPoint);
+        placeTerrain(board, { x: x + 2, y }, boardWidth, boardHeight, keyPoint);
+        placeTerrain(board, { x: x + 2, y: y - 1 }, boardWidth, boardHeight, keyPoint);
+    } else if (option === 2) { // start point is right
+        placeTerrain(board, { x: x - 1, y }, boardWidth, boardHeight, keyPoint);
+        placeTerrain(board, { x: x - 2, y }, boardWidth, boardHeight, keyPoint);
+        placeTerrain(board, { x: x - 2, y: y + 1 }, boardWidth, boardHeight, keyPoint);
+    } else { // start point is bottom
+        placeTerrain(board, { x, y: y - 1 }, boardWidth, boardHeight, keyPoint);
+        placeTerrain(board, { x, y: y - 2 }, boardWidth, boardHeight, keyPoint);
+        placeTerrain(board, { x: x - 1, y: y - 2 }, boardWidth, boardHeight, keyPoint);
+    }
+};
+
+const zShape = (board: boardInfo[][], { x, y }: pointDef, boardWidth: number, boardHeight: number, keyPoint: pointDef) => {
+    const option = Math.floor(Math.random() * 4);
+    placeTerrain(board, { x, y }, boardWidth, boardHeight, keyPoint);
+    if (option === 0) {	// start point is top
+        placeTerrain(board, { x, y: y + 1 }, boardWidth, boardHeight, keyPoint);
+        placeTerrain(board, { x: x - 1, y: y + 1 }, boardWidth, boardHeight, keyPoint);
+        placeTerrain(board, { x: x - 1, y: y + 2 }, boardWidth, boardHeight, keyPoint);
+    } else if (option === 1) { // start point is left
+        placeTerrain(board, { x: x + 1, y }, boardWidth, boardHeight, keyPoint);
+        placeTerrain(board, { x: x + 1, y: y + 1 }, boardWidth, boardHeight, keyPoint);
+        placeTerrain(board, { x: x + 2, y: y + 1 }, boardWidth, boardHeight, keyPoint);
+    } else if (option === 2) { // start point is right
+        placeTerrain(board, { x: x - 1, y }, boardWidth, boardHeight, keyPoint);
+        placeTerrain(board, { x: x - 1, y: y + 1 }, boardWidth, boardHeight, keyPoint);
+        placeTerrain(board, { x: x - 2, y: y + 1 }, boardWidth, boardHeight, keyPoint);
+    } else { // start point is bottom
+        placeTerrain(board, { x, y: y - 1 }, boardWidth, boardHeight, keyPoint);
+        placeTerrain(board, { x: x - 1, y: y - 1 }, boardWidth, boardHeight, keyPoint);
+        placeTerrain(board, { x: x - 1, y: y - 2 }, boardWidth, boardHeight, keyPoint);
+    }
+};
+
+const terrainFunctions = [
+    square,
+    line,
+    bentLine,
+    zShape
+];
+
+export const getRandomTerrain = () => {
+    return terrainFunctions[Math.floor(Math.random() * terrainFunctions.length)];
+};
+
+export const getRandomStartPoint = (boardWidth: number, boardHeight: number, keyPoint: pointDef) => {
+    const startPoint = {
+        x: Math.floor(Math.random() * boardWidth),
+        y: Math.floor(Math.random() * boardHeight)
+    };
+    while (startPoint.x === keyPoint.x && startPoint.y === keyPoint.y) {
+        startPoint.x = Math.floor(Math.random() * boardWidth);
+        startPoint.y = Math.floor(Math.random() * boardHeight);
+    }
+    return startPoint;
+};

package/src/util/geometry.js

@@ -0,0 +1,45 @@
+const collisionHelper = (node, nodeToCheck, filter, collisions = []) => {
+    // assume rectangles for now
+
+    if (!filter || (filter(node) && node.node.id !== nodeToCheck.node.id)) {
+        // todo: clean this up its gross
+        // text does not have coordinates, so make a fake vertices array from the starting point of the text
+        const nodeText = node.node.text;
+        const vertices = node.node.coordinates2d || [
+            [nodeText.x, nodeText.y], 
+            [nodeText.x, nodeText.y],
+            [nodeText.x, nodeText.y],
+            [nodeText.x, nodeText.y],
+            [nodeText.x, nodeText.y]
+        ];
+        const verticesToCheck = nodeToCheck.node.coordinates2d;
+
+        const node1LeftX = vertices[0][0];
+        const node1RightX = vertices[1][0];
+        const node2LeftX = verticesToCheck[0][0];
+        const node2RightX = verticesToCheck[1][0];
+
+        const node1TopY = vertices[0][1];
+        const node1BottomY = vertices[2][1];
+        const node2TopY = verticesToCheck[0][1];
+        const node2BottomY = verticesToCheck[2][1];
+
+        const oneToTheLeft = node2RightX < node1LeftX || node1RightX < node2LeftX;
+        const oneBelow = node1TopY > node2BottomY || node2TopY > node1BottomY;
+        if (!(oneToTheLeft || oneBelow)) {
+            collisions.push(node);
+        }
+    }
+
+    for (const child in node.node.children) {
+        collisionHelper(node.node.children[child], nodeToCheck, filter, collisions);
+    }
+
+    return collisions;
+};
+
+const checkCollisions = (root, node, filter = null) => {
+    return collisionHelper(root, node, filter);
+};
+
+module.exports = { checkCollisions };

package/src/util/index.ts

@@ -0,0 +1,6 @@
+export const hypLength = (x: number, y: number) => Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2));
+
+// get the first 2 digits after the decimal
+export const getFractional = (number: number) => {
+    return Math.round(100 * (number - Math.floor(number)));
+};

package/src/util/listenable.ts

@@ -0,0 +1,20 @@
+import { gameNodeDef, internalGameNodeDef } from '../sharedDefs';
+export default (obj: internalGameNodeDef, onChange: () => void) => {
+    const handler = {
+        get(target: Object, property: PropertyKey, receiver: any) {
+            return Reflect.get(target, property, receiver);
+        },
+        defineProperty(target: Object, property: PropertyKey, descriptor: PropertyDescriptor) {
+            const change = Reflect.defineProperty(target, property, descriptor);
+            onChange && onChange();
+            return change;
+        },
+        deleteProperty(target: Object, property: PropertyKey) {
+            const change = Reflect.deleteProperty(target, property);
+            onChange && onChange();
+            return change;
+        }
+    };
+
+    return new Proxy(obj, handler);
+};

package/src/util/shapes.ts

@@ -0,0 +1,18 @@
+export const rectangle = (startX: number, startY: number, width: number, height: number) => {
+    return [
+        [startX, startY],
+        [startX + width, startY],
+        [startX + width, startY + height],
+        [startX, startY + height],
+        [startX, startY],
+    ];
+};
+
+export const triangle = (x1: number, y1: number, x2: number, y2: number, x3: number, y3: number) => {
+    return [
+        [x1, y1],
+        [x2, y2],
+        [x3, y3],
+        [x1, y1]
+    ];
+};

package/src/util/views.js

@@ -0,0 +1,108 @@
+const { GameNode } = require('../GameNode');
+const Shapes = require('../Shapes');
+const ShapeUtils = require('./shapes');
+const GeometryUtils = require('./geometry');
+const Colors = require('../Colors');
+
+const getView = (plane, view, playerIds, translation = {}) => {
+
+    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;
+    });
+
+    const convertedRoot = new GameNode.Shape({
+        shapeType: Shapes.POLYGON,
+        coordinates2d: ShapeUtils.rectangle(0, 0, 0, 0),
+        fill: Colors.COLORS.BLACK
+    });
+
+    const convertedNodes = [];
+
+    if (wouldBeCollisions.length > 0) {
+        wouldBeCollisions.forEach(node => {
+            let shouldInclude = true;
+
+            const translatedCoords = [];
+
+            // same hack as geometry utils
+            const vertices = node.node.coordinates2d || [
+                [node.node.text.x, node.node.text.y], 
+                [node.node.text.x, node.node.text.y], 
+                [node.node.text.x, node.node.text.y], 
+                [node.node.text.x, node.node.text.y],
+                [node.node.text.x, node.node.text.y]
+            ];
+
+            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);
+
+                const shouldTranslate = translation.filter ? translation.filter(node) : true;
+
+                if (shouldTranslate) {
+                    if (translation.x) {
+                        translatedX += translation.x;
+                    }
+
+                    if (translation.y) {
+                        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);
+
+                translatedX = xScale * translatedX;
+                translatedY = yScale * translatedY;
+
+                translatedCoords.push([translatedX, translatedY]);
+            }
+
+            if (shouldInclude) {
+                const copied = node.clone({handleClick: node.node.handleClick === null || node.node.handleClick === undefined ? null : node.node.handleClick});
+                
+                if (translatedCoords && translatedCoords.length) {
+                    if (copied.node.text) {
+                        copied.node.text.x = translatedCoords[0][0];
+                        copied.node.text.y = translatedCoords[0][1];
+                    } 
+                    if (translatedCoords.length) {
+                        copied.node.coordinates2d = translatedCoords;
+                    }
+                    if (copied.node.asset) {
+                        const firstPoint = copied.node.coordinates2d[0];
+                        const secondPoint = copied.node.coordinates2d[1];
+                        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;   
+                    }
+                } 
+                copied.node.playerIds = playerIds || [];
+                convertedNodes.push(copied);
+            }
+        });
+    }
+
+    convertedNodes.forEach(c => convertedRoot.addChild(c));
+
+    return convertedRoot;
+};
+
+module.exports = {
+    getView
+}

package/test/Layers.test.js

@@ -0,0 +1,63 @@
+const { COLORS } = require("../src/Colors");
+const assert = require("assert");
+const Squisher = require('../src/Squisher');
+const { squish, unsquish } = require('../src/squish');
+const { FakeGame, verifyArrayEquality, rectNode, polygonNode, circleNode } = require('./utils');
+
+test("two layers on a base - square over square", () => {
+    const base = rectNode({ x: 0, y: 0, width: 100, height: 100, fill: COLORS.RED });
+    const layerOne = rectNode({ x: 40, y: 40, width: 20, height: 20, fill: COLORS.BLUE });
+    const layerTwo = rectNode({ x: 45, y: 45, width: 10, height: 10, fill: COLORS.GREEN });
+
+    const game = new FakeGame([
+        {
+            root: base
+        },
+        {
+            root: layerOne
+        },
+        {
+            root: layerTwo
+        }
+    ]);
+
+    const squisher = new Squisher({ game });
+    
+    assert(squisher.state.length === 3);
+    verifyArrayEquality(squisher.state[0], squish(base));
+    verifyArrayEquality(squisher.state[1], squish(layerOne));
+    verifyArrayEquality(squisher.state[2], squish(layerTwo)); 
+});
+
+test("test layer with child added", () => {
+    const base = rectNode({ x: 0, y: 0, width: 100, height: 100, fill: COLORS.RED });
+    const layer = rectNode({ x: 40, y: 40, width: 20, height: 20, fill: COLORS.BLUE });
+
+    const game = new FakeGame([
+        {
+            root: base
+        },
+        {
+            root: layer
+        }
+    ]);
+
+    const squisher = new Squisher({ game });
+    
+    const initialState = Array.from(squisher.state);
+    assert(initialState.length === 2);
+    verifyArrayEquality(initialState[0], squish(base));
+    verifyArrayEquality(initialState[1], squish(layer));
+
+    const child = rectNode({ x: 50, y: 50, height: 25, width: 25, fill: COLORS.WHITE });
+
+    // adding a child should trigger an update in the squisher and result in a new state
+    layer.addChild(child);
+
+    const expectedLayerValue = [squish(layer), squish(child)].flat();
+    const stateWithChild = Array.from(squisher.state);
+    assert(stateWithChild.length === 3);
+    verifyArrayEquality(stateWithChild[0], squish(base));
+    verifyArrayEquality(stateWithChild[1], squish(layer));
+    verifyArrayEquality(stateWithChild[2], squish(child));
+});

package/test/Scale.test.js

@@ -0,0 +1,235 @@
+const { COLORS } = require("../src/Colors");
+const assert = require("assert");
+const Squisher = require('../src/Squisher');
+const { unsquish } = require('../src/squish');
+
+const { FakeGame, verifyArrayEquality, rectNode, textNode, polygonNode, circleNode, lineNode } = require('./utils');
+
+test("90% scale rectangles", () => {
+
+    /* 
+    * Red root taking up entirety of container. 
+    * Four child nodes, each of a different color taking up a quarter of the container.
+    * If displayed on a screen, red would not be visible since children cover 100% of the overall space
+    */
+
+    const root = rectNode({ x: 0, y: 0, width: 100, height: 100, fill: COLORS.RED });
+    const topLeftCorner = rectNode({ x: 0, y: 0, width: 50, height: 50, fill: COLORS.BLUE });
+    const topRightCorner = rectNode({ x: 50, y: 0, width: 50, height: 50, fill: COLORS.GREEN });    
+    const bottomRightCorner = rectNode({ x: 50, y: 50, width: 50, height: 50, fill: COLORS.BLACK });
+    const bottomLeftCorner = rectNode({ x: 0, y: 50, width: 50, height: 50, fill: COLORS.PURPLE});
+    
+    root.addChildren(topLeftCorner, topRightCorner, bottomRightCorner, bottomLeftCorner);
+
+    const game = new FakeGame([
+        {
+            root, 
+            scale: {
+                x: .9,
+                y: .9
+            }
+        }
+    ]);
+
+    const squisher = new Squisher({ game });
+    
+    const nodesToRender = squisher.squish(game.getLayers());
+
+    assert(nodesToRender.length == 5);
+    
+    const rootUnsquished = unsquish(nodesToRender[0]);
+    const topLeftUnsquished = unsquish(nodesToRender[1]);
+    const topRightUnsquished = unsquish(nodesToRender[2]);
+    const bottomRightUnsquished = unsquish(nodesToRender[3]);
+    const bottomLeftUnsquished = unsquish(nodesToRender[4]);
+
+    const rootCoords = rootUnsquished.node.coordinates2d;
+    const topLeftCoords = topLeftUnsquished.node.coordinates2d;
+    const topRightCoords = topRightUnsquished.node.coordinates2d;
+    const bottomRightCoords = bottomRightUnsquished.node.coordinates2d;
+    const bottomLeftCoords = bottomLeftUnsquished.node.coordinates2d;
+    
+
+    /* 
+    * Scaled 90% should mean centered with 5% margins
+    * Draw path starts at the top left, should match: 
+    * (5, 5), (95, 5), (95, 95), (5, 95), (5, 5)
+    */ 
+    verifyArrayEquality(rootCoords, [
+        [5, 5],
+        [95, 5],
+        [95, 95],
+        [5, 95],
+        [5, 5]
+    ]);
+
+    /*
+    * width is 45, since it was 50% of the container, now scaled down to 90% (0.9 * .5 == 0.45)
+    * same as height
+    */
+    verifyArrayEquality(topLeftCoords, [
+        [5, 5],
+        [50, 5],
+        [50, 50],
+        [5, 50],
+        [5, 5]
+    ]);
+    
+    verifyArrayEquality(topRightCoords, [
+        [50, 5],
+        [95, 5],
+        [95, 50],
+        [50, 50],
+        [50, 5]
+    ]);
+
+    verifyArrayEquality(bottomRightCoords, [
+        [50, 50],
+        [95, 50],
+        [95, 95],
+        [50, 95],
+        [50, 50]
+    ]);
+
+    verifyArrayEquality(bottomLeftCoords, [
+        [5, 50],
+        [50, 50],
+        [50, 95],
+        [5, 95],
+        [5, 50]
+    ]);
+});
+
+test("50% scale triangle", () => {
+
+    const root = polygonNode({coordinates: [20, 20, 30, 30, 10, 30, 20, 20], fill: COLORS.GREEN });
+    
+    const game = new FakeGame([
+        {
+            root,
+            scale: {
+                x: .5,
+                y: .5
+            }
+        } 
+    ]);
+
+    const squisher = new Squisher({ game });
+    
+    const nodesToRender = squisher.squish(game.getLayers());
+
+    assert(nodesToRender.length == 1);
+    
+    const rootUnsquished = unsquish(nodesToRender[0]);
+
+    const rootCoords = rootUnsquished.node.coordinates2d;
+
+    /*
+    * 50% scale means we're expecting half of the width & height, plus a margin of 25% on each edge of the container 
+    * (to account for the full 100% of the container)
+    */
+    verifyArrayEquality(rootCoords, [
+        [35, 35],
+        [40, 40],
+        [30, 40],
+        [35, 35]
+    ]);
+
+});
+
+test("75% scale circle", () => {
+
+    const root = circleNode({center: {x: 50, y: 50 }, radius: 10, fill: COLORS.PINK });
+    
+    const game = new FakeGame([ 
+        {
+            root,
+            scale: {
+                x: .75,
+                y: .75
+            }
+        } 
+    ]);
+
+    const squisher = new Squisher({ game });
+    const nodesToRender = squisher.squish(game.getLayers());
+    
+    assert(nodesToRender.length == 1);
+    
+    const rootUnsquished = unsquish(nodesToRender[0]);
+
+    const rootCoords = rootUnsquished.node.coordinates2d;
+
+    /*
+    * 50% scale means we're expecting half of the width & height, plus a margin of 25% on each edge of the container 
+    * (to account for the full 100% of the container)
+    */
+    verifyArrayEquality(rootCoords, [
+        50, 50, 7.5
+    ]);
+
+});
+
+test('ayy lmao', () => {
+
+    const root = rectNode({ x: 0, y: 0, width: 100, height: 100, fill: COLORS.RED });
+    const topLeftCorner = rectNode({ x: 0, y: 0, width: 50, height: 50, fill: COLORS.BLUE });
+    const topRightCorner = rectNode({ x: 50, y: 0, width: 50, height: 50, fill: COLORS.GREEN });    
+    const bottomRightCorner = rectNode({ x: 50, y: 50, width: 50, height: 50, fill: COLORS.BLACK });
+    const bottomLeftCorner = rectNode({ x: 0, y: 50, width: 50, height: 50, fill: COLORS.PURPLE});
+
+    const testTextNode = textNode({ text: 'ayy lmao', x: 75, y: 75, color: COLORS.WHITE, align: 'center' });
+    bottomRightCorner.addChild(testTextNode);
+    
+    root.addChildren(topLeftCorner, topRightCorner, bottomRightCorner, bottomLeftCorner);
+
+    const game = new FakeGame([
+        {
+            root, 
+            scale: {
+                x: 1,
+                y: 1
+            }
+        }
+    ]);
+
+    const squisher = new Squisher({ game });
+
+    const squishedLayers = squisher.state;
+
+});
+
+test("a line", () => {
+
+    const root = lineNode({coords: [[20, 20], [80, 80]], color: COLORS.ORANGE});
+    
+    const game = new FakeGame([ 
+        {
+            root,
+            scale: {
+                x: 1,
+                y: 1
+            }
+        } 
+    ]);
+
+    const squisher = new Squisher({ game });
+    const nodesToRender = squisher.squish(game.getLayers());
+    
+    assert(nodesToRender.length == 1);
+    
+    const rootUnsquished = unsquish(nodesToRender[0]);
+
+    const rootCoords = rootUnsquished.node.coordinates2d;
+
+    /*
+    * 50% scale means we're expecting half of the width & height, plus a margin of 25% on each edge of the container 
+    * (to account for the full 100% of the container)
+    */
+    verifyArrayEquality(rootCoords, [
+        [20, 20], [80, 80]
+    ]);
+
+});
+
+

package/test/Squisher.test.js

@@ -0,0 +1,49 @@
+const { COLORS } = require("../src/Colors");
+const assert = require("assert");
+const Squisher = require('../src/Squisher');
+const { unsquish } = require('../src/squish');
+
+const { FakeGame, verifyArrayEquality, rectNode, textNode, polygonNode, circleNode, lineNode } = require('./utils');
+
+test("squisher listener", () => {
+
+    const root = lineNode({coords: [[20, 20], [80, 80]], color: COLORS.ORANGE});
+    
+    const game = new FakeGame([ 
+        {
+            root,
+            scale: {
+                x: 1,
+                y: 1
+            }
+        } 
+    ]);
+
+    const squisher = new Squisher({ game });
+
+    let timesInvoked = 0;
+
+    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++;
+    });
+
+    assert(timesInvoked === 0);
+
+    root.node.color = COLORS.BLACK;
+
+    assert(timesInvoked === 1);
+
+    root.node.color = COLORS.GREEN;
+    assert(timesInvoked === 2);
+});
+
+