squishjs 1.0.6 → 1.0.8

package/README.md

@@ -1,119 +1,59 @@
-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.
+## Squish
+This repo contains the game library used by homegames-core and homegames-web to efficiently serialize & deserialize game data. 
 
-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.
+## squish/unsquish
+This is just serialization/deserialization. Conceptually similar to [protobufs](https://protobuf.dev/), squish contains schema definitions shared by the server and client that lets us transmit game data as efficiently as possible. 
 
-## 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
 ```
-{
-  filled: boolean
-  north: boolean
-  south: boolean
-  east: boolean
-  west: boolean
+const { squish, unsquish, Colors, GameNode, Shapes, ShapeUtils } = require('squish-1006');
+const node = new GameNode.Shape({
+  shapeType: Shapes.POLYGON,
+  fill: Colors.COLORS.RED,
+  coordinates2d: ShapeUtils.rectangle(20, 20, 10, 10)
+});
+
+const squished = squish(node);
+[
+  3,           0,            0,            53,
+  2,           43,           0,            11,
+  [Number: 0], [Number: 0],  [Number: 32], [Number: 61],
+  [Number: 3], [Number: 90], [Number: 63], [Number: 44],
+  44,          0,            3,            53,
+  0,           7,            255,          0,
+  0,           255,          55,           0,
+  4,           3,            52,           0,
+  23,          20,           0,            20,
+  0,           30,           0,            20,
+  0,           30,           0,            30,
+  0,           20,           0,            30,
+  0,           20,           0,            20,
+  0
+]
+
+const unsquished = unsquish(squished);
+Shape {
+  node: InternalGameNode {
+    id: [Number: 326103906344],
+    children: [],
+    color: undefined,
+    handleClick: undefined,
+    coordinates2d: [ [Array], [Array], [Array], [Array], [Array] ],
+    border: undefined,
+    fill: [ 255, 0, 0, 255 ],
+    text: undefined,
+    asset: undefined,
+    effects: null,
+    input: null,
+    listeners: Set(0) {},
+    playerIds: [],
+    subType: 3
+  },
+  id: [Number: 326103906344]
 }
 ```
-**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".
+## Game
+The `Game` class is a base class that allows external components (eg. a `Squisher`) to listen to state updates. All games in Homegames extend the `Game` class.
 
-**west** of true means from this place a player can move "west".
+## Versioning
+Homegames core & web use multiple versions of squish. This allows games using older versions of squish to remain compatible with newer versions of Homegames.

package/package.json

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

package/src/BaseNode.js

@@ -1,15 +1,15 @@
 const InternalGameNode = require('./InternalGameNode');
 
-const gameNode = (color, onClick, coordinates2d, border, fill, text, asset, playerIds, effects, input, subtype, id) => {
-    return new InternalGameNode(color, onClick, coordinates2d, border, fill, text, asset, playerIds, effects, input, subtype, id);
+const gameNode = (color, onClick, coordinates2d, border, fill, text, asset, playerIds, effects, input, subtype, id, onHover, offHover) => {
+    return new InternalGameNode(color, onClick, coordinates2d, border, fill, text, asset, playerIds, effects, input, subtype, id, onHover, offHover);
 };
 
 class BaseNode {
-    constructor({color, onClick, coordinates2d, border, fill, textInfo, assetInfo, playerIds, effects, input, subtype, node, id}) {
+    constructor({color, onClick, coordinates2d, border, fill, textInfo, assetInfo, playerIds, effects, input, subtype, node, id, onHover, offHover }) {
         if (node) {
             this.node = node;
         } else {
-            this.node = gameNode(color, onClick, coordinates2d, border, fill, textInfo, assetInfo, playerIds, effects, input, subtype, id);
+            this.node = gameNode(color, onClick, coordinates2d, border, fill, textInfo, assetInfo, playerIds, effects, input, subtype, id, onHover, offHover);
         }
 
         this.id = this.node.id;

package/src/GameNode.js

@@ -15,7 +15,7 @@ const subtypeToShapeType = {
 };
 
 class Shape extends BaseNode {
-    constructor({ color, onClick, shapeType, coordinates2d, border, fill, playerIds, effects, input, node, id }) {
+    constructor({ color, onClick, shapeType, coordinates2d, border, fill, playerIds, effects, input, node, id, onHover, offHover }) {
         if ((!coordinates2d || !shapeType) && !(node)) {
             throw new Error("Shape requires coordinates2d and shapeType");
         }
@@ -31,7 +31,9 @@ class Shape extends BaseNode {
             input,
             node,
             subtype: shapeTypeToSubtype[shapeType],
-            id
+            id,
+            onHover,
+            offHover
         });
     }
 
@@ -81,7 +83,7 @@ class Text extends BaseNode {
 }
 
 class Asset extends BaseNode {
-    constructor({ assetInfo, onClick, coordinates2d, playerIds, effects, node, id }) {
+    constructor({ assetInfo, onClick, coordinates2d, playerIds, effects, node, id, onHover, offHover }) {
         if (!assetInfo && !node) {
             throw new Error("Asset node requires assetInfo");
         }
@@ -94,7 +96,9 @@ class Asset extends BaseNode {
             effects,
             node,
             subtype: SUBTYPES.ASSET,
-            id
+            id,
+            onHover,
+            offHover
         });
     }
 

package/src/InternalGameNode.js

@@ -1,6 +1,7 @@
 class InternalGameNode {
-    constructor(color, onClick, coordinates2d, border, fill, text, asset, playerIds = [], effects = null, input = null, subType = null, id = null) {
-        this.id = id ? Number(id) : Math.floor(Math.random() * 999999999999);
+    constructor(color, onClick, coordinates2d, border, fill, text, asset, playerIds = [], effects = null, input = null, subType = null, id = null, onHover, offHover) {
+        // im about to hit the ye button
+        this.id = id ? Number(id) : Math.floor(Math.random() * 999999999);
         this.children = new Array();
         this.color = color;
         this.handleClick = onClick;
@@ -17,6 +18,8 @@ class InternalGameNode {
         }
         this.playerIds = playerIds || [];
         this.subType = subType;
+        this.onHover = onHover;
+        this.offHover = offHover;
     }
 
     addChild(node) {