squishjs 0.6.43 → 0.7.1

package/.github/workflows/node.js.yml

@@ -16,7 +16,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [12.x, 14.x]
+        node-version: [14.x, 16.x]
 
     steps:
     - uses: actions/checkout@v2

package/LICENSE.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021 Joseph Garcia
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,45 +1,119 @@
+Squish is a way to utility package for [Homegames-core](https://github.com/homegamesio/homegames-core) and [Homegames-web](https://github.com/homegamesio/homegames-web). It contains several utilities and the class definitions for the entities most important to running Homegames.
+
+Below the term `First Class` is used to describe several functions and variables. This means those values should be treated as immutable, and in the case of functions are called automatically.
+
+## Exported Features
+* squish
+* unsquish
+* gameNode
+* GameNode
+* Colors
+* Game
+* Shapes
+* ShapeUtils
+* terrainGenerator
+
+## squish
+squish is a first class function that is used to compress the information of the game down to a set of integers. This compresses the data required to rendering down.
+
+## unsquish
+unsquish is a first class function that is used to uncompress squished entities. This uncompresses the data that was squished down for more easy manipulation and usage.
+
+## gameNode
+gameNode is the most foundational component to Homegames. The contents of a game is made up of a set of gameNodes that define entities, and display logic. Wrapped in a listener it contains the following:
+* id :- a first calss numeric identification number. It is unique in a Game.
+* color :- Defines the display color of the gameNode. See **Colors**
+* handleClick :- a function that defines what happens if a user clicks on the gameNode. The function passed in will automatically be called, and will pass the player who clicked as the argument.
+* coordinates2d :- an array of coordinates in a two dimensional plane that defines the vertices of the gameNode. It is recommened that **ShapeUtils** is used
+* border :- a number that defines the thickness of the border on the gameNode
+* fill :- Defines the color that fills the gameNode. See **Colors**
+* text :- Defines the text (if any) that will be displayed by the gameNode. It has the form
+  * text :- The text to be displayed;
+  * x :- The x-position of the top-left corner of the text. This is relative to the entire screen
+  * y :- The y-position of the top-left corner of the text. This is relative to the entire screen
+  * size :- The font size of the text
+  * align :- 'left' | 'center' | 'right'
+  * color :- The Color of the text, see **Colors**
+* asset :- Defines an asset (image, video, etc) to be displayed by the gameNode. Takes the form:
+  * assetInfo :- The information for the display of the asset.
+  * onClick :- a function that defines what happens if a user clicks on the asset. The function passed in will automatically be called, and will pass the player who clicked as the argument.
+  * coordinates2d :- an array of coordinates in a two dimensional plane that defines the vertices of the gameNode. It is recommened that **ShapeUtils** is used
+  * playerIds :- An array of player identification numbers. Defining who can see this asset.
+* effects :- Defines any additional effects applied to the gameNode.
+* input :- Defines whether the gameNode should accept an input or not. Takes the form:
+  * type :- 'text' | 'file'
+  * oninput :- A function that will be called with the inputting player's identification number and the data of the input.  (player: number, data: any) => void;
+* playerIds :- An array of player identification numbers, that defines which players can see and interact with the gameNode.
+* listeners :- The set of listeners attached to the gameNode.
+* _animation :- An interval or timeout that can be used to modify the gameNode, such as lightening the color over time to give it a fade in, or darkening the color over time to give it a fade out.
+* onStateChange :- A first class function that will notify listeners of a state change.
+* addListener :- A first class function that will attach an additional listener to the gameNode.
+
+## GameNode
+A helpful wrapper and the recommended way of generatin a gameNode. It gives you the following:
+* Asset :- Generates a gameNode with an asset attached to it
+  * Example Call: `Asset(onClick: (player) => console.log(player), coordinates2d: [[0, 1], [2, 1], [2, 3], [0, 3], [0, 1]], assetInfo: { myAsset: { pos: { x: 0, y: 1 }, size: {  x: 2, y: 3 }}}, playerIds: [2])`
+  * This will generate an asset based on `myAsset` and on clicking on the asset the asset will log out the clicking player.
+* Shape :- Generates a generic two dimenstional gameNode
+  * Example Call: `Shape({ color: COLORS.CANDY_RED, onClick: (player) => console.log(player), shapeType: Shapes.POLYGON, coordinates2d: [[0, 1], [2, 1], [2, 3], [0, 3], [0, 1]], border: 2, fill: COLORS.CANDY_RED, playerIds: [2], null, null })`
+  * This will generate a rectangle of color COLORS.CANDY_RED, visible to player of identification number 2, and onClick will log out the player clicking.
+* Text :- Generates a gameNode with text attached to it.
+  * Example Call: `Text({ textInfo: { text: "My Text", color: COLORS.CANDY_RED, align: 'center',  x: 2, y: 3, size: 1 }, playerIds: [2] })`
+  * This will generate a gameNode with texting starting at the (2, 3) position, visible to player of identification number 2. The Text will be centered and CANDY_RED, and will be "My Text".
+
+## Colors
+Colors is a utility for using shared homegames RGBA values. Colors is exported as an object with two keys: COLORS & randomColor.
+
+**COLORS** is an object that takes the form of: `string -> RGBA Array`. For example we can GET the RBGA value for Homegames CANDY_RED (RGBA of [246, 84, 106, 255]) by doing the following `COLORS.CANDY_RED`. Thus COLORS serves as a map between strings and in-built colors.
+
+**randomColor** is a function that takes the form: `string[] => RGBA array`. It is a function to get a random RGBA from the set of RGBA that Homegames provides. It can take in array of strings that limits the options, allowing for the exclusion of certain RGBA values from returning. For example we can call this function like `randomColor(["CANDY_RED"])` which would return an RGBA array from the set of COLORS while preventing CANDY_RED from being a possible return value.
+
+
+## Game
+Game is the base class definition for a game in Homegames. Most games will extend the definition to Game, and leverage most or all of its internal logic. Game holds the following Member Variables:
+* players :- Object of the form `player id -> player object`
+* timeouts :- Array of NodeJS.Timeout that holds the timeout triggered logic for the Game
+* intervals :- Array of NodeJS.Timeout  that holds the interval triggered logic for the Game
+* listeners :- the list of all listeners on this Game.
+* root :- The base GameNode of this game, for which all other GameNodes are children
+
+Game also holds the following Instance Functions
+* _hgAddPlayer :- This is a first class function, and is used to add a player to the Game's `players` value.
+* _hgRemovePlayer :- This is a first class function, and is used to remmove a player from the Game's `players` value.
+* addStateListener :- This is a first class function, and is used to add a listener to the Game's `listeners` value.
+* removeStateListener :- This is a first class function, and is used to remove a listener from the Game's `listeners` value.
+* getRoot :- This is a function and returns the Game's `root` value. An example call would be: `getRoot()`. It is expected that this function is overwritten in the extending class's definition.
+* setTimeout :- This is a function, and is used to add a timeout to the Game's `timeouts` value. It takes in two arguments a function to be called at the end of the timer, and how long the timer should be. An example call would be: `setTimeout( () => console.log("Welcome to Homegames"), 200)`
+* setInterval :- This is a function, and is used to add an interval to the Game's `intervals` value. It takes in two arguments a function to be called at the end of the timer, and how long the timer should be. An example call would be: `intervals(() => console.log("Welcome to Homegames"), 200)`
+* close :- This is a first class function, and is used to clear all `timeouts` and `intervals` from the Game, as the Game instance is spun down.
+
+## Shapes
+Shapes is functionally an enum of the types of shapes Homegames supports.
+
+## ShapeUtils
+ShapeUtils is a utility for building shapes for use in GameNodes. ShapeUtils is exported as an object with two keys rectangle & triangle.
+
+**rectangle** is a function that takes the form `(startX, startY, width, height) => the rectangle's coordinate set`. Thus rectangle creates an array from the starting x position, the starting y position, the width, and the height that defines the vertices of the rectangle. An example call would be: `rectangle(0, 1, 2, 3)` which would create a rectangle with the top-left corner at (0,1), and bottom-right corner at (2, 4).
+
+**triangle** is a function that takes the form `(x1, y1, x2, y2, x3, y3) => the triangle's coordinate set`. Thus triangle creates an array from provided vertex pairings. An example call would be `triangle(0, 1, 2, 3, 4, 5)` which would create a triangle with vertices at (0, 1), (2, 3), (4, 5).
+
+## terrainGenerator
+terrainGenerator is a utility function that generates a "board" from the provided information. This "board" functions as a map, defining regions of the board that are randomly marked to be "filled". This can be used to procedurally generate fields of play with parts of the map unaccessible to players. The "board" is guaranteed that all un-filled points are contiguous. An example call would be: `terrainGenerator({ x: 50, y: 100 }, { x: 2, y: 3 }, 5)`. This would generate board of area 50 * 100. The "filled" regions would be of area 2 * 3, and a maximum of 5 such "filled" regions will be placed. The outcome of this would be two-dimensionl area, where each element has the form
 ```
-> const { GameNode, Shapes, Colors, ShapeUtils, squish, unsquish } = require('squishjs');
-> 
-> const redSquare = new GameNode.Shape({
-...     fill: Colors.COLORS.RED,
-...     coordinates2d: ShapeUtils.rectangle(20, 20, 60, 60),
-...     shapeType: Shapes.POLYGON
-... });
-> 
-> const squished = squish(redSquare.node);
-> const unsquished = unsquish(squished);
->
-> squished
-[
-   3,  35,  43,   3,   0,
-  44,   2,  52,  22,  20,
-   0,  20,   0,  80,   0,
-  20,   0,  80,   0,  80,
-   0,  20,   0,  80,   0,
-  20,   0,  20,   0,  53,
-   6, 255,   0,   0, 255
-]
->
-> unsquished
-InternalGameNode {
-  id: 0,
-  children: [],
-  color: undefined,
-  handleClick: undefined,
-  coordinates2d: [
-    20, 20, 80,
-    20, 80, 80,
-    20, 80, 20,
-    20
-  ],
-  border: undefined,
-  fill: [ 255, 0, 0, 255 ],
-  text: undefined,
-  asset: undefined,
-  effects: null,
-  input: null,
-  listeners: Set {},
-  playerIds: []
+{
+  filled: boolean
+  north: boolean
+  south: boolean
+  east: boolean
+  west: boolean
 }
 ```
+**filled** of true means this place can be marked as inaccessible to players
+
+**north** of true means from this place a player can move "north".
+
+**south** of true means from this place a player can move "south".
+
+**east** of true means from this place a player can move "east".
+
+**west** of true means from this place a player can move "west".

package/index.js

@@ -3,18 +3,28 @@ const { gameNode, GameNode } = require('./src/GameNode');
 const InternalGameNode = require('./src/InternalGameNode');
 const Colors = require('./src/Colors');
 const Game = require('./src/Game');
+const ViewableGame = require('./src/ViewableGame');
 const Shapes = require('./src/Shapes');
 const shapeUtils = require('./src/util/shapes');
+const viewUtils = require('./src/util/views');
 const { terrainGenerator } = require('./src/terrain');
+const subtypes = require('./src/subtypes');
+const Squisher = require('./src/Squisher');
+const GeometryUtils = require('./src/util/geometry');
 
 module.exports = {
     squish,
     unsquish,
     gameNode,
+    subtypes,
     Game,
+    ViewableGame,
     GameNode,
     Colors,
     Shapes,
+    Squisher,
     ShapeUtils: shapeUtils,
-    TerrainGenerator: terrainGenerator
+    ViewUtils: viewUtils,
+    TerrainGenerator: terrainGenerator,
+    GeometryUtils
 };

package/oldsvgexport.js

@@ -0,0 +1,89 @@
+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/package.json

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

package/render-tester.js

@@ -0,0 +1,120 @@
+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/src/BaseNode.js

@@ -0,0 +1,101 @@
+const listenable = require("./util/listenable");
+const InternalGameNode = require('./InternalGameNode');
+
+const gameNode = (color, onClick, coordinates2d, border, fill, text, asset, playerIds, effects, input, subtype, id) => {
+    const node = new InternalGameNode(color, onClick, coordinates2d, border, fill, text, asset, playerIds, effects, input, subtype, id);
+    return listenable(node, node.onStateChange.bind(node));
+};
+
+class BaseNode {
+    constructor({color, onClick, coordinates2d, border, fill, textInfo, assetInfo, playerIds, effects, input, subtype, node, id}) {
+        if (node) {
+            this.node = node;
+        } else {
+            this.node = gameNode(color, onClick, coordinates2d, border, fill, textInfo, assetInfo, playerIds, effects, input, subtype, id);
+        }
+
+        this.id = this.node.id;
+    }
+
+    showFor(playerId) {
+        const playerIdIndex = this.node.playerIds.indexOf(playerId);
+        const zeroIndex = this.node.playerIds.indexOf(0);
+
+        if (zeroIndex >= 0) {
+            const newPlayerIds = this.node.playerIds;
+            newPlayerIds.splice(zeroIndex, 1);
+            this.node.playerIds = newPlayerIds;
+        }
+        if (playerIdIndex < 0) {
+            const newPlayerIds = this.node.playerIds;
+            newPlayerIds.push(playerId);
+            this.node.playerIds = newPlayerIds;
+        }
+    }
+
+    hideFor(playerId) {
+        const playerIdIndex = this.node.playerIds.indexOf(playerId);
+        if (playerIdIndex >= 0) {
+            let newPlayerIds = this.node.playerIds;
+            newPlayerIds.splice(playerIdIndex, 1);
+            if (newPlayerIds.length == 0) {
+                newPlayerIds = [0];
+            }
+            this.node.playerIds = newPlayerIds;
+        }
+    }
+
+    addChild(child) {
+        this.node.addChild(child);
+    }
+
+    addChildren(...nodes) {
+        for (let nodeIndex = 0; nodeIndex < nodes.length; nodeIndex++) {
+            this.addChild(nodes[nodeIndex]);
+        }
+    }
+
+    getChildren() {
+        return this.node.children;
+    }
+
+    removeChild(nodeId) {
+        this.node.removeChild(nodeId);
+    }
+
+    addListener(listener) {
+        this.node.addListener(listener);
+    }
+
+    findChild(id) {
+        return this.#findChildHelper(id, this);
+    }
+
+    #findChildHelper(nodeId, node, found = null) {
+        if (node.node.id === nodeId) {
+            found = node;
+        }
+
+        for (const i in node.node.children) {
+            if (found) {
+                return found
+            }
+            found = this.#findChildHelper(nodeId, node.node.children[i], found);
+        }
+
+        return found;
+    }
+
+
+    clearChildren(excludedNodeIds) {
+        this.node.clearChildren(excludedNodeIds);
+    }
+
+
+    clone() {
+        throw new Error("Clone not implemented");
+    }
+}
+
+
+module.exports = {gameNode, BaseNode};

package/src/Game.js

@@ -1,8 +1,8 @@
 class Game {
     constructor() {
         this.players = {};
+        this.spectators = {};
         this.listeners = new Set();
-        this.root = null;
         this.intervals = [];
         this.timeouts = [];
     }
@@ -23,8 +23,20 @@ class Game {
         this.listeners.remove(listener);
     }
 
-    getRoot() {
-        return this.root;
+    findNode(id) {
+        let found = null;
+        
+        if (this.getLayers) {
+            const layers = this.getLayers();
+            for (let layerIndex in layers) {
+                found = layers[layerIndex].root.findChild(id);
+                if (found) {
+                    break;
+                }
+            }
+        }
+
+        return found;
     }
 
     setInterval(fun, interval) {