Added TypeScript definitions

asdf/Container.js

@@ -1,47 +1,23 @@
-/**
- * Container class
- */
 class Container {
   constructor() {
     this.pos = { x: 0, y: 0 };
     this.children = [];
   }
 
-  /**
-   * Adds child to container
-   * @param {*} child Child to add
-   * @returns {any} Added child
-   */
   add(child) {
     this.children.push(child);
     return child;
   }
 
-  /**
-   * Removes child from container
-   * @param {*} child Child to remove
-   * @returns {any} Removed child
-   */
   remove(child) {
     this.children = this.children.filter(c => c !== child);
     return child;
   }
 
-  /**
-   * Preforms a function on all children
-   * @param {function} f Function to preform on children
-   * @returns {any} Function altered array
-   */
   map(f) {
     return this.children.map(f);
   }
 
-  /**
-   * Updates all children when called
-   * @param {number} dt Delta time 
-   * @param {number} t Total time
-   * @returns {boolean} Returns if the child is dead or not
-   */
   update(dt, t) {
     this.children = this.children.filter(child => {
       if (child.update) {

asdf/Game.js

@@ -4,17 +4,7 @@ import CanvasRenderer from "./renderer/CanvasRenderer.js";
 const STEP = 1 / 60;
 const FRAME_MAX = 5 * STEP;
 
-/**
- * Game class
- */
 class Game {
-    /**
-     * Set the games parameters
-     * @param {number} w Width of canvas
-     * @param {number} h Height of canvas
-     * @param {boolean} pixelated Turns canvas smoothening on or off
-     * @param {String} [parent="#board"] HTML id of element to push the canvas element too
-     */
     constructor(w, h, pixelated, parent = "#board") {
         this.w = w;
         this.h = h;
@@ -28,10 +18,6 @@ class Game {
         this.scene = new Container();
     }
 
-    /**
-     * Start game loop
-     * @param {Function} gameUpdate Function to run next to scene updates such as debug logging, etc.
-     */
     run(gameUpdate = () => { }) {
         let dt = 0;
         let last = 0;

asdf/Sprite.js

@@ -1,11 +1,4 @@
-/**
- * Sprite class
- */
 class Sprite {
-  /**
-   * Draw sprite on canvas
-   * @param {*} texture Sprite image
-   */
   constructor(texture) {
     this.texture = texture;
     this.pos = { x: 0, y: 0 };

asdf/SpriteSheetXML.js

@@ -1,29 +1,9 @@
-
-/**
- * SpriteSheetXML - Reads XML files to get texture data
- * 
- * **XML format must be:**
- * 
- *   <TextureAlias imagePath="">
- * 
- *       <SubTexture x="" y="" width="" height=""></SubTexture>
- *       ...
- *   </TextureAlias>
- */
 class SpriteSheetXML {
-    /**
-     * Set url of XML file
-     * @param {String} url Url to XML file
-     */
     constructor(url) {
         this.array = [];
         this.fetchXMLtoArray(url);
     }
 
-    /**
-     * Fetch XML file and put contents in a JS array
-     * @param {String} url Url to XML file
-     */
     fetchXMLtoArray(url) {
         var xhr = new XMLHttpRequest();
         xhr.open('GET', url, false);
@@ -46,12 +26,6 @@ class SpriteSheetXML {
         }
     }
 
-    /**
-     * Find index of XML element with attribute == value
-     * @param {String} attribute XML element attribute
-     * @param {String} value Value of XML element attribute
-     * @returns {number} Index of XML element
-     */
     findIndex(attribute, value) {
         for (let index = 0; index < this.array.length; index++) {
             const element = this.array[index];

asdf/Text.js

@@ -1,12 +1,4 @@
-/**
- * Text class
- */
 class Text {
-  /**
-   * Prints styled text on canvas 
-   * @param {String} text Text to print
-   * @param {String} style Styles to apply to text
-   */
   constructor(text = "", style = {}) {
     this.pos = { x: 0, y: 0 };
     this.text = text;

asdf/Texture.js

@@ -1,11 +1,4 @@
-/**
- * Texture class
- */
 class Texture {
-  /**
-   * Sets url of source image and creates an instance of Image()
-   * @param {*} url 
-   */
   constructor(url) {
     this.img = new Image();
     this.img.src = url;

asdf/TileMap.js

@@ -1,19 +1,7 @@
 import Container from "./Container.js";
 import TileSprite from "./TileSprite.js";
 
-/**
- * Tilemap class
- */
 class TileMap extends Container {
-  /**
-   * Draws array of tiles from unindexed spritesheet
-   * @param {[ { x: number, y: number} ]} tiles Array of x and y values of the source tile on an unindexed Spritesheet
-   * @param {number} mapW Amount of tiles over the width of the map
-   * @param {number} mapH Amount of tiles over the height of the map
-   * @param {number} tileW Width of source tile(s) in pixels
-   * @param {number} tileH Height of source tile(s) in pixels
-   * @param {*} texture Texture instance of source image file
-   */
   constructor(tiles, mapW, mapH, tileW, tileH, texture) {
     super();
     this.mapW = mapW;

asdf/TileMapXML.js

@@ -1,18 +1,7 @@
 import Container from "./Container.js";
 import TileSpriteXML from "./TileSpriteXML.js";
 
-/**
- * TileMapXML class
- */
 class TileMapXML extends Container {
-    /**
-     * Draws array of tiles from XML indexed spritesheet
-     * @param {number[]} tiles Array of XML indexes
-     * @param {*} mapW Amount of tiles over the width of the map
-     * @param {*} mapH Amount of tiles over the height of the map
-     * @param {*} texture Texture instance of source image file
-     * @param {*} xml SpriteSheetXML instance of source xml file
-     */
     constructor(tiles, mapW, mapH, texture, xml) {
         super(texture);
         this.mapW = mapW;

asdf/TileSprite.js

@@ -1,14 +1,6 @@
 import Sprite from "./Sprite.js";
-/**
+
- * TileSprite class
- */
 class TileSprite extends Sprite {
-    /**
-     * Creates sprite instance from unindexed spritesheet
-     * @param {*} texture Instance of Texture with source image
-     * @param {number} w Width of sprite on source image
-     * @param {number} h Height of spirte on source image
-     */
     constructor(texture, w, h) {
         super(texture);
         this.tileW = w;

asdf/TileSpriteXML.js

@@ -1,15 +1,6 @@
 import Sprite from "./Sprite.js";
 
-/**
- * TileSpriteXML class
- */
 class TileSpriteXML extends Sprite {
-    /**
-     * Creates sprite instance from XML indexed spritesheet
-     * @param {*} texture Instance of Texture with source image
-     * @param {*} xml Instance of SpriteSheetXML with xml index
-     * @param {number} index Index of XML element
-     */
     constructor(texture, xml, index) {
         super(texture);
         var src = xml.array[index];

asdf/controls/KeyControls.js

@@ -1,10 +1,6 @@
-/**
+
- * KeyControls class
- */
 class KeyControls {
-  /**
+  
-   * Listens for keypresses and prevents default actions
-   */
   constructor() {
     this.keys = {};
     // Bind event handlers
@@ -19,21 +15,11 @@ class KeyControls {
     }, false);
   }
 
-  /**
-   * Returns value of action key (spacebar)
-   * @returns {boolean} Key value
-   */
   get action() {
     // Spacebar
     return this.keys[32];
   }
 
-  /**
-   * Returns -1 on Arrow Left or A
-   * 
-   * Returns 1 on Arrow Right or D
-   * @returns {number} Key Value
-   */
   get x() {
     // Arrow Left or A (WASD)
     if (this.keys[37] || this.keys[65]) {
@@ -46,12 +32,6 @@ class KeyControls {
     return 0;
   }
 
-  /**
-    * Returns -1 on Arrow Up or W
-    * 
-    * Returns 1 on Arrow Down or S
-    * @returns {number} Key value
-    */
   get y() {
     // Arrow Up or W (WASD)
     if (this.keys[38] || this.keys[87]) {
@@ -64,12 +44,7 @@ class KeyControls {
     return 0;
   }
 
-  /**
+  
-   * Read or write value of any key
-   * @param {number} key Keycode for targetted key
-   * @param {*} [value] Value to set to key
-   * @return {*} Value of key
-   */
   key(key, value) {
     if (value !== undefined) {
       this.keys[key] = value;
@@ -77,9 +52,6 @@ class KeyControls {
     return this.keys[key];
   }
 
-  /**
-   * Resets default value to all keys
-   */
   reset() {
     for (let key in this.keys) {
       this.keys[key] = false;

asdf/controls/MouseControls.js

@@ -1,11 +1,4 @@
-/**
- * MouseControls class
- */
 class MouseControls {
-  /**
-   * Sets container element where handlers will listen
-   * @param {*} [container] Container element, defaults to document.body
-   */
   constructor(container) {
     this.el = container || document.body;
     // State
@@ -19,10 +12,6 @@ class MouseControls {
     document.addEventListener('mouseup', this.up.bind(this), false);
   }
 
-  /**
-   * Recalculates mouse position based on the position of the container
-   * @param {{ clientX: number, clientY: number}} param0 Native mouse event x and y values
-   */
   mousePosFromEvent({ clientX, clientY }) {
     const { el, pos } = this;
     const rect = el.getBoundingClientRect();
@@ -32,36 +21,21 @@ class MouseControls {
     pos.y = (clientY - rect.top) * yr;
   }
 
-  /**
-   * Calls mousePosFromEvent() on mouse move
-   * @param {*} e Event
-   */
   move(e) {
     this.mousePosFromEvent(e);
   }
 
-  /**
-   * Handles mouseDown event and calls mousePosFromEvent() to determine the exact pixel
-   * @param {*} e Event
-   */
   down(e) {
     this.isDown = true;
     this.pressed = true;
     this.mousePosFromEvent(e);
   }
 
-  /**
-   * Handles mouseUp event and calls mousePosFromEvent() to determine the exact pixel
-   * @param {*} e Event
-   */
   up() {
     this.isDown = false;
     this.released = true;
   }
 
-  /**
-   * Resets pressed and released values to make sure they are only true on a press or release
-   */
   update() {
     this.released = false;
     this.pressed = false;

asdf/index.d.ts

@@ -0,0 +1,414 @@
+export as namespace asdf;
+
+type Coordinates = {x: number, y: number};
+
+/**
+ * TileSpriteXML class
+ */
+export class TileSpriteXML extends Sprite {
+
+  width: number;
+  height: number;
+  imgPos: Coordinates;
+
+  /**
+   * Creates sprite instance from XML indexed spritesheet
+   * @param texture Instance of Texture with source image
+   * @param xml Instance of SpriteSheetXML with xml index
+   * @param index Index of XML element
+   */
+  constructor(texture: Texture, xml: SpriteSheetXML, index: number);
+}
+
+/**
+ * TileMapXML class
+ */
+export class TileMapXML extends Container<TileSpriteXML> {
+
+  mapW: number;
+  mapH: number;
+  tileW: number;
+  tileH: number;
+  w: number;
+  h: number;
+
+  children: TileSpriteXML[];
+
+  /**
+   * Draws array of tiles from XML indexed spritesheet
+   * @param tiles Array of XML indexes
+   * @param mapW Amount of tiles over the width of the map
+   * @param mapH Amount of tiles over the height of the map
+   * @param texture Texture instance of source image file
+   * @param xml SpriteSheetXML instance of source xml file
+   */
+  constructor(tiles: number[], mapW: number, mapH: number, texture: Texture, xml: SpriteSheetXML)
+}
+
+/**
+ * TileSprite class
+ */
+export class TileSprite extends Sprite {
+
+  tileW: number;
+  tileH: number;
+  frame: Coordinates;
+
+  /**
+   * Creates sprite instance from unindexed spritesheet
+   * @param texture Instance of Texture with source image
+   * @param w Width of sprite on source image
+   * @param h Height of spirte on source image
+   */
+  constructor(texture: Texture, w: number, h: number);
+}
+
+/**
+ * Tilemap class
+ */
+export class TileMap extends Container<TileSprite> {
+
+  mapW: number;
+  mapH: number;
+  tileW: number;
+  tileH: number;
+  w: number;
+  h: number;
+
+  children: TileSprite[];
+
+  /**
+   * Draws array of tiles from unindexed spritesheet
+   * @param tiles Array of x and y values of the source tile on an unindexed Spritesheet
+   * @param mapW Amount of tiles over the width of the map
+   * @param mapH Amount of tiles over the height of the map
+   * @param tileW Width of source tile(s) in pixels
+   * @param tileH Height of source tile(s) in pixels
+   * @param texture Texture instance of source image file
+   */
+  constructor(tiles: Coordinates[], mapW: number, mapH: number, tileW: number, tileH: number, texture: Texture);
+}
+
+/**
+ * Texture class
+ */
+export class Texture {
+
+  img: HTMLImageElement;
+
+  /**
+   * Sets url of source image and creates an instance of Image()
+   * @param url 
+   */
+  constructor(url: string);
+}
+
+/**
+ * Text class
+ */
+export class Text {
+
+  pos: Coordinates;
+  text: string;
+  visible: boolean;
+  update?: (dt?: number, t?: number) => void;
+  style: {
+    font?: string,
+    fill?: string | CanvasGradient | CanvasPattern,
+    align?: CanvasTextAlign
+  };
+
+    /**
+   * Prints styled text on canvas 
+   * @param text Text to print
+   * @param style Styles to apply to text
+   */
+  constructor(text: string, style: {});
+}
+
+/**
+ * SpriteSheetXML - Reads XML files to get texture data
+ * 
+ * **XML format must be:**
+ * 
+ *   <TextureAlias imagePath="">
+ * 
+ *       <SubTexture x="" y="" width="" height=""></SubTexture>
+ *       ...
+ *   </TextureAlias>
+ */
+export class SpriteSheetXML {
+
+  array: {
+    name: string,
+    x: number,
+    y: number,
+    width: number,
+    height: number
+  }[];
+
+  /**
+   * Set url of XML file
+   * @param url Url to XML file
+   */
+  constructor(url: string);
+
+  /**
+   * Fetch XML file and put contents in a JS array
+   * @param url Url to XML file
+   */
+  fetchXMLtoArray(url: string): void;
+
+  /**
+   * Find index of XML element with attribute == value
+   * @param attribute XML element attribute
+   * @param value Value of XML element attribute
+   * @returns Index of XML element
+   */
+  findIndex(attribute: string, value: string): number;
+}
+
+/**
+ * Sprite class
+ */
+export class Sprite {
+  texture: Texture;
+  pos: Coordinates;
+  anchor: Coordinates;
+  scale: Coordinates;
+  pivot: Coordinates;
+  visible: boolean;
+  rotation: number;
+  dead: boolean;
+
+  update?: (dt?: number, t?: number) => void;
+
+  /**
+   * Draw sprite on canvas
+   * @param texture Sprite image
+   */
+  constructor(texture: Texture);
+}
+
+/**
+ * Game class
+ */
+export class Game {
+  w: number;
+  h: number;
+  renderer: CanvasRenderer;
+  scene: Container<unknown>;
+
+  /**
+   * Set the games parameters
+   * @param w Width of canvas
+   * @param h Height of canvas
+   * @param pixelated Turns canvas smoothening on or off
+   * @param parent HTML id of element to push the canvas element too. Default is set to "#board".
+   */
+  constructor(w: number, h: number, pixelated: boolean, parent?: string);
+
+  /**
+   * Start game loop
+   * @param gameUpdate Function to run next to scene updates such as debug logging, etc.
+   */
+  run(gameUpdate: (dt?: number, t?: number) => void): void;
+}
+
+/**
+ * Container class
+ */
+export class Container<T> {
+  pos: {x: number, y: number};
+  children: T[];
+
+  constructor();
+
+  /**
+   * Adds child to container
+   * @param child Child to add
+   * @returns Added child
+   */
+  add(child: T): T;
+
+  /**
+   * Removes child from container
+   * @param child Child to remove
+   * @returns Removed child
+   */
+  remove(child: T): T;
+
+  /**
+   * Preforms a function on all children
+   * @param f Function to preform on children
+   * @returns Function altered array
+   */
+  map(f: (value: T, index: number, array: T[]) => any): any[];
+
+  /**
+   * Updates all children when called
+   * @param dt Delta time 
+   * @param t Total time
+   * @returns Returns if the child is dead or not
+   */
+  update(dt: number, t: number): boolean;
+}
+
+/**
+ * MouseControls class
+ */
+export class MouseControls {
+
+  el: HTMLElement;
+  pos: Coordinates;
+  isDown: boolean;
+  pressed: boolean;
+  released: boolean;
+
+  /**
+   * Sets container element where handlers will listen
+   * @param container Container element, defaults to document.body
+   */
+  constructor(container?: HTMLElement);
+
+  /**
+   * Recalculates mouse position based on the position of the container
+   * @param ClientXandY Native mouse event x and y values
+   */
+  mousePosFromEvent({clientX, clientY}: {clientX: number, clientY: number}): void;
+
+  /**
+   * Calls mousePosFromEvent() on mouse move
+   * @param e Event
+   */
+  move(e: MouseEvent): void;
+
+  /**
+   * Handles mouseDown event and calls mousePosFromEvent() to determine the exact pixel
+   * @param e Event
+   */
+  down(e: MouseEvent): void;
+
+  /**
+   * Handles mouseUp event and calls mousePosFromEvent() to determine the exact pixel
+   * @param e Event
+   */
+  up(e: MouseEvent): void;
+
+  /**
+   * Resets pressed and released values to make sure they are only true on a press or release
+   */
+  update(): void;
+}
+
+/**
+ * KeyControls class
+ */
+export class KeyControls {
+
+  keys: {
+    [key: number]: boolean
+  }
+
+  /**
+   * Listens for keypresses and prevents default actions
+   */
+  constructor();
+
+  /**
+   * Returns value of action key (spacebar)
+   * @returns Key value
+   */
+  get action(): boolean;
+
+  /**
+   * Returns -1 on Arrow Left or A
+   * 
+   * Returns 1 on Arrow Right or D
+   * @returns Key Value
+   */
+  get x(): -1 | 0 | 1
+
+  /**
+    * Returns -1 on Arrow Up or W
+    * 
+    * Returns 1 on Arrow Down or S
+    * @returns Key value
+    */
+  get y(): -1 | 0 | 1
+
+  /**
+   * Read or write value of any key
+   * @param key Keycode for targetted key
+   * @param value Value to set to key
+   * @return Value of key
+   */
+  key(key: number, value: boolean): boolean;
+
+  /**
+   * Resets default value to all keys
+   */
+  reset(): void;
+}
+
+/**
+ * CanvasRenderer class
+ */
+export class CanvasRenderer {
+
+  w: number;
+  h: number;
+  view: HTMLCanvasElement;
+  ctx: CanvasRenderingContext2D
+
+  /**
+   * Renderer for CanvasJS, defines width and height for the canvas element
+   * @param w Width for canvas element
+   * @param h Height for canvas element
+   */
+  constructor(w: number, h: number)
+
+  /**
+   * Turns off image smoothening on the canvas element
+   */
+  setPixelated(): void
+
+  /**
+   * Render all children on the canvas element
+   * @param container Containing element of the canvas element 
+   * @param clear Defines if the canvas element needs to be cleared for the next render. Default is set to true.
+   */
+  render(container: Container<unknown>, clear?: boolean): void
+}
+
+export namespace math {
+  /**
+ * Returns random integer between min and max
+ * @param min Minimum value 
+ * @param max Maximum value
+ * @returns Random integer
+ */
+  export function rand(min: number, max: number): number;
+
+  /**
+   * Returns random float between min and max
+   * @param min Minimum value 
+   * @param max Maximum value
+   * @returns Random value
+   */
+  export function randf(min: number, max: number): number;
+
+  /**
+   * Returns random item from items array
+   * @param items Array of anything
+   * @returns Item from items array
+   */
+  export function randOneFrom<T>(items: T[]): T;
+
+  /**
+   * Returns true one out of max times
+   * @param max Maximum value. Default is set to 2
+   * @returns Outcome
+   */
+  export function randOneIn(max?: number): boolean;
+}

asdf/renderer/CanvasRenderer.js

@@ -1,12 +1,6 @@
-/**
+
- * CanvasRenderer class
- */
 class CanvasRenderer {
-  /**
+  
-   * Renderer for CanvasJS, defines width and height for the canvas element
-   * @param {*} w Width for canvas element
-   * @param {*} h Height for canvas element
-   */
   constructor(w, h) {
     const canvas = document.createElement("canvas");
     this.w = canvas.width = w;
@@ -16,9 +10,6 @@ class CanvasRenderer {
     this.ctx.textBaseLine = "top";
   }
 
-  /**
-   * Turns off image smoothening on the canvas element
-   */
   setPixelated() {
     this.ctx['imageSmoothingEnabled'] = false;       /* standard */
     this.ctx['mozImageSmoothingEnabled'] = false;    /* Firefox */
@@ -27,12 +18,6 @@ class CanvasRenderer {
     this.ctx['msImageSmoothingEnabled'] = false;     /* IE */
   }
 
-
-  /**
-   * Render all children on the canvas element
-   * @param {*} container Containing element of the canvas element 
-   * @param {boolean} [clear=true] Defines if the canvas element needs to be cleared for the next render
-   */
   render(container, clear = true) {
     const { ctx } = this;
     function renderRec(container) {

asdf/utilities/math.js

@@ -1,19 +1,7 @@
-/**
- * Returns random integer between min and max
- * @param {number} min Minimum value 
- * @param {number} max Maximum value
- * @returns {number} Random integer
- */
 function rand(min, max) {
   return Math.floor(randf(min, max));
 }
 
-/**
- * Returns random float between min and max
- * @param {number} min Minimum value 
- * @param {number} max Maximum value
- * @returns {number} Random value
- */
 function randf(min, max) {
   if (max == null) {
     max = min || 1;
@@ -22,20 +10,10 @@ function randf(min, max) {
   return Math.random() * (max - min) + min;
 }
 
-/**
- * Returns random item from items array
- * @param {*[]} items Array of anything
- * @returns {any} Item from items array
- */
 function randOneFrom(items) {
   return items[rand(items.length)];
 }
 
-/**
- * Returns true one out of max times
- * @param {number} [max=2] Maximum value
- * @returns {boolean} Outcome
- */
 function randOneIn(max = 2) {
   return rand(0, max) === 0;
 }