squishjs 0.6.42 → 0.7.2

package/src/GameNode.js

@@ -1,110 +1,113 @@
-const listenable = require("./util/listenable");
-const InternalGameNode = require('./InternalGameNode');
 const Shapes = require('./Shapes');
+const SUBTYPES = require('./subtypes');
+const { gameNode, BaseNode } = require('./BaseNode');
 
-const gameNode = (color, onClick, coordinates2d, border, fill, text, asset, playerIds, effects, input) => {
-    const node = new InternalGameNode(color, onClick, coordinates2d, border, fill, text, asset, playerIds, effects, input);
-    return listenable(node, node.onStateChange.bind(node));
+const shapeTypeToSubtype = {
+    [Shapes.CIRCLE]: SUBTYPES.SHAPE_2D_CIRCLE,
+    [Shapes.POLYGON]: SUBTYPES.SHAPE_2D_POLYGON,
+    [Shapes.LINE]: SUBTYPES.SHAPE_2D_LINE
 };
 
-class Shape {
-    constructor({ color, onClick, shapeType, coordinates2d, border, fill, playerIds, effects, input }) {
-        if (!coordinates2d || !shapeType) {
-            throw new Error("Shape requires coordinates2d and shapeType");
-        }
-
-        this.node = gameNode(color, onClick, coordinates2d, border, fill, null, null, playerIds, effects, input);
-        this.id = this.node.id;
-    }
-
-    addChild(child) {
-        this.node.addChild(child);
-    }
+const subtypeToShapeType = {
+    [SUBTYPES.SHAPE_2D_CIRCLE]: Shapes.CIRCLE,
+    [SUBTYPES.SHAPE_2D_POLYGON]: Shapes.POLYGON,
+    [SUBTYPES.SHAPE_2D_LINE]: Shapes.LINE
+};
 
-    addChildren(...nodes) {
-        for (let nodeIndex = 0; nodeIndex < nodes.length; nodeIndex++) {
-            this.addChild(nodes[nodeIndex]);
+class Shape extends BaseNode {
+    constructor({ color, onClick, shapeType, coordinates2d, border, fill, playerIds, effects, input, node, id }) {
+        if ((!coordinates2d || !shapeType) && !(node)) {
+            throw new Error("Shape requires coordinates2d and shapeType");
         }
-    }
-
-    removeChild(nodeId) {
-        this.node.removeChild(nodeId);
-    }
 
-    addListener(listener) {
-        this.node.addListener(listener);
+        super({
+            color,
+            onClick,
+            coordinates2d,
+            border,
+            fill,
+            playerIds,
+            effects,
+            input,
+            node,
+            subtype: shapeTypeToSubtype[shapeType],
+            id
+        });
+    }
+
+    clone({ handleClick, input, id }) {
+        const _id = id || null;
+        return new Shape({
+            color: this.node.color,
+            onClick: handleClick,
+            shapeType: subtypeToShapeType[this.node.subType],
+            coordinates2d: this.node.coordinates2d,
+            border: this.node.border,
+            fill: this.node.fill,
+            playerIds: this.node.playerIds,
+            effects: this.node.effects,
+            input,
+            id: _id
+        });
     }
 
-    clearChildren(excludedNodeIds) {
-        this.node.clearChildren(excludedNodeIds);
-    }
 }
 
-class Text {
-    constructor({ textInfo, playerIds, input }) {
-        if (!textInfo) {
+class Text extends BaseNode {
+    constructor({ textInfo, playerIds, input, node, id }) {
+        if (!textInfo && !node) {
             throw new Error("Text node requires textInfo");
         }
 
-        this.node = gameNode(null, null, null, null, null, textInfo, null, playerIds, null, input);
-        this.id = this.node.id;
-    }
-
-    addChild(child) {
-        this.node.addChild(child);
-    }
-
-    addChildren(...nodes) {
-        for (let nodeIndex = 0; nodeIndex < nodes.length; nodeIndex++) {
-            this.addChild(nodes[nodeIndex]);
-        }
-    }
-
-    removeChild(nodeId) {
-        this.node.removeChild(nodeId);
+        super({
+            textInfo,
+            playerIds,
+            input,
+            node,
+            subtype: SUBTYPES.TEXT,
+            id
+        });
     }
 
-    addListener(listener) {
-        this.node.addListener(listener);
-    }
+    clone({ handleClick, input, id }) {
+        const _id = id || null;
 
-    clearChildren(excludedNodeIds) {
-        this.node.clearChildren(excludedNodeIds);
+        return new Text({
+            textInfo: Object.assign({}, this.node.text),
+            playerIds: this.playerIds?.slice(),
+            id: _id
+        });
     }
 }
 
-class Asset {
-    constructor({ assetInfo, onClick, coordinates2d, playerIds, effects }) {
-        if (!assetInfo) {
+class Asset extends BaseNode {
+    constructor({ assetInfo, onClick, coordinates2d, playerIds, effects, node, id }) {
+        if (!assetInfo && !node) {
             throw new Error("Asset node requires assetInfo");
         }
-        this.node = gameNode(null, onClick, coordinates2d, null, null, null, assetInfo, playerIds, effects);
-        this.id = this.node.id;
-    }
-
-    addChild(child) {
-        this.node.addChild(child);
-    }
-
-    addChildren(...nodes) {
-        for (let nodeIndex = 0; nodeIndex < nodes.length; nodeIndex++) {
-            this.addChild(nodes[nodeIndex]);
-        }
-    }
 
-    removeChild(nodeId) {
-        this.node.removeChild(nodeId);
+        super({
+            assetInfo,
+            onClick,
+            coordinates2d,
+            playerIds,
+            effects,
+            node,
+            subtype: SUBTYPES.ASSET,
+            id
+        });
     }
 
-    addListener(listener) {
-        this.node.addListener(listener);
-    }
+    clone({ handleClick, input, id }) {
+        const _id = id || null;
 
-    clearChildren(excludedNodeIds) {
-        this.node.clearChildren(excludedNodeIds);
+        return new Asset({
+            assetInfo: Object.assign({}, this.node.asset),
+            playerIds: this.playerIds?.slice(),
+            id: _id
+        });
     }
 
-
 }
 
 const GameNode = {

package/src/InternalGameNode.js

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

package/src/Squisher.js

@@ -0,0 +1,230 @@
+const ASSET_TYPE = 1;
+
+const { squish, unsquish } = require('./squish');
+
+const INVISIBLE_PLAYER_ID = 0;
+const DEFAULT_TICK_RATE = 60;
+
+class Squisher {
+    constructor({ game, scale, customBottomLayer, customTopLayer }) {
+        this.ids = new Set();
+
+        this.game = game;
+
+        this.customBottomLayer = customBottomLayer;
+        this.customTopLayer = customTopLayer;
+
+        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);
+        }
+    }
+
+    addListener(onEvent) {
+        const listener = {
+            onEvent,
+            remove: () => this.removeListener(listener)
+        };
+
+        this.listeners.add(listener);
+    }
+
+    removeListener(listener) {
+        this.listeners.remove(listener);
+    }
+
+    unsquish(node) {
+        return unsquish(node);
+    }
+
+    squish(layers, scale = null) {
+
+        if (!layers) {
+            return [];
+        }
+
+        let layerLength = layers.length;
+
+        let toSquish = [];
+
+        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);
+            toSquish.push(squishedLayer);
+        }
+        
+        for (const layerIndex in layers) {
+            const squishedLayer = [];
+            const layerInfo = layers[layerIndex];
+            
+            const layerScale = layerInfo.scale ? {
+                x: this.scale.x * layerInfo.scale.x,
+                y: this.scale.y * layerInfo.scale.y
+            } : this.scale;
+
+            this.squishHelper(layerInfo.root, squishedLayer, scale || layerScale, playerMap);
+            toSquish.push(squishedLayer);
+        }
+
+
+        if (this.customTopLayer) {
+            const squishedLayer = [];
+            this.squishHelper(this.customTopLayer.root, squishedLayer, this.customTopLayer.scale, playerMap);
+            toSquish.push(squishedLayer);
+        }
+
+        this.playerFrames = playerMap;
+
+        return toSquish.flat();
+    }
+
+    getPlayerFrame(playerId) {
+        return this.playerFrames[playerId];
+    }
+
+    squishHelper(node, squishedNodes, scale = {x: 1, y: 1}, playerMap = {}) {
+        if (!node.node.listeners.has(this)) {
+            node.addListener(this);
+        }
+
+        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);
+                })
+            }
+        }
+
+        for (let i = 0; i < node.node.children.length; i++) {
+            this.squishHelper(node.node.children[i], squishedNodes, scale, playerMap);
+        }
+
+    }
+
+    getJson() {
+        const layers = this.game.layers;
+        const jsonLayers = new Array(layers.length);
+        for (const layerIndex in layers) {
+            const layerInfo = layers[layerIndex];
+            const jsonLayer = layerInfo.root;
+            jsonLayers[layerIndex] = jsonLayer;
+        }
+
+        return JSON.stringify(jsonLayers);
+    }
+
+    initialize() {
+        return new Promise((resolve, reject) => {
+            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 initializeAssetBundle = () => new Promise((resolve, reject) => {
+                let assetBundleSize = 0;
+                let finishedCount = 0;
+                const totalCount = Object.keys(gameAssets).length;
+    
+                for (const key in gameAssets) {
+                    gameAssets[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++;
+                        }
+    
+                        const encodedLength = (buf.length + assetKeyLength).toString(36);
+                        
+                        const assetType = gameAssets[key].info.type === 'image' ? 1 : 2;
+    
+                        const encodedMaxLength = 10;
+                        let encodedLengthString = '';
+                        for (let i = 0; i < (encodedMaxLength - encodedLength.length); i++) {
+                            encodedLengthString += '0';
+                        }
+                        for (let j = encodedLength.length; j < encodedMaxLength; j++) {
+                            encodedLengthString +=  encodedLength.charAt(j - encodedLength.length);
+                        }
+                        const encodedLengthArray = new Array(encodedMaxLength);
+                        for (let i = 0; i < encodedMaxLength; i++) {
+                            encodedLengthArray[i] = encodedLength.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);
+                            for (let index = 0; index < assetBundleSize; index++) {
+                                for (const key in this.assets) {
+                                    for (let y = 0; y < this.assets[key].length; y++) {
+                                        newAssetBundle[index++] = this.assets[key][y];
+                                    }
+                                }
+                            }
+                            resolve(newAssetBundle); 
+                        }
+                    });
+                }
+            });
+
+            initializeAssetBundle().then((newAssetBundle) => {
+                this.assetBundle = newAssetBundle;
+                resolve();
+            });
+
+        });
+    }
+
+    handleStateChange(node, layerName) {
+        this.state = this.squish(this.game.getLayers());
+        this.broadcast();
+    }
+
+    broadcast() {
+        for (const listener of this.listeners) {
+            listener.onEvent(this.state);
+        }
+    }
+
+}
+
+module.exports = Squisher;

package/src/ViewableGame.js

@@ -0,0 +1,60 @@
+const { GameNode } = require('./GameNode');
+const Shapes = require('./Shapes');
+const ShapeUtils = require('./util/shapes');
+const Colors = require('./Colors');
+const Game = require('./Game');
+
+const makePlane = (s) => {
+        return new GameNode.Shape({
+            shapeType: Shapes.POLYGON,
+            coordinates2d: ShapeUtils.rectangle(0, 0, s, s)
+        });
+};
+
+class ViewableGame extends Game {
+    #plane;
+    #fakeRoot;
+    #planeSize;
+    constructor(planeSize) {
+        super();
+        this.#planeSize = planeSize;
+        this.#plane = makePlane(this.planeSize);
+
+        this.#fakeRoot = new GameNode.Shape({
+            shapeType: Shapes.POLYGON,
+            coordinates2d: ShapeUtils.rectangle(0, 0, 0, 0),
+            fill: Colors.COLORS.BLACK,
+        });
+
+        this.layers = [
+            {
+                root: this.#fakeRoot
+            }
+        ];
+    }
+
+    updatePlaneSize(s) {
+        this.#planeSize = s;
+        this.#plane.node.coordinates2d = ShapeUtils.rectangle(0, 0, s, s);
+    }
+
+    getLayers() {
+        return this.layers;
+    }
+
+    getPlane() {
+        return this.#plane;
+    }
+
+    getPlaneSize() {
+        return this.#planeSize;
+    }
+
+    getViewRoot() {
+        return this.#fakeRoot;
+    }
+
+}
+
+module.exports = ViewableGame;
+

package/src/node-types.js

@@ -0,0 +1,15 @@
+const { GameNode } = require('./GameNode');
+
+module.exports = {
+    CONSTRUCTOR_TO_TYPE: {
+        'Asset': 1,
+        'Shape': 2,
+        'Text': 3
+    },
+
+    TYPE_TO_CONSTRUCTOR: {
+        1: GameNode.Asset,
+        2: GameNode.Shape,
+        3: GameNode.Text
+    }
+};