diff --git a/asdf/Container.js b/asdf/Container.js index a6e6af5..a1d90cd 100644 --- a/asdf/Container.js +++ b/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) { diff --git a/asdf/Game.js b/asdf/Game.js index d2b6376..d441542 100644 --- a/asdf/Game.js +++ b/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; diff --git a/asdf/Sprite.js b/asdf/Sprite.js index 9926838..1a0b06b 100644 --- a/asdf/Sprite.js +++ b/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 }; diff --git a/asdf/SpriteSheetXML.js b/asdf/SpriteSheetXML.js index 922f9e2..64ef6b7 100644 --- a/asdf/SpriteSheetXML.js +++ b/asdf/SpriteSheetXML.js @@ -1,29 +1,9 @@ - -/** - * SpriteSheetXML - Reads XML files to get texture data - * - * **XML format must be:** - * - * - * - * - * ... - * - */ 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]; diff --git a/asdf/Text.js b/asdf/Text.js index 18d96c2..de3fddb 100644 --- a/asdf/Text.js +++ b/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; diff --git a/asdf/Texture.js b/asdf/Texture.js index eef2e41..eb70fbe 100644 --- a/asdf/Texture.js +++ b/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; diff --git a/asdf/TileMap.js b/asdf/TileMap.js index bb6b86e..ec60783 100644 --- a/asdf/TileMap.js +++ b/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; diff --git a/asdf/TileMapXML.js b/asdf/TileMapXML.js index 8c19afb..f77f928 100644 --- a/asdf/TileMapXML.js +++ b/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; diff --git a/asdf/TileSprite.js b/asdf/TileSprite.js index 65a69d7..4065663 100644 --- a/asdf/TileSprite.js +++ b/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; diff --git a/asdf/TileSpriteXML.js b/asdf/TileSpriteXML.js index 5ceb12f..1727bb2 100644 --- a/asdf/TileSpriteXML.js +++ b/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]; diff --git a/asdf/controls/KeyControls.js b/asdf/controls/KeyControls.js index 8a4f3d6..36b3969 100644 --- a/asdf/controls/KeyControls.js +++ b/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; diff --git a/asdf/controls/MouseControls.js b/asdf/controls/MouseControls.js index 52e2f75..a085cd5 100644 --- a/asdf/controls/MouseControls.js +++ b/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; diff --git a/asdf/index.d.ts b/asdf/index.d.ts new file mode 100644 index 0000000..7f7991f --- /dev/null +++ b/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 { + + 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 { + + 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:** + * + * + * + * + * ... + * + */ +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; + + /** + * 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 { + 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, 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(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; +} \ No newline at end of file diff --git a/asdf/renderer/CanvasRenderer.js b/asdf/renderer/CanvasRenderer.js index ed64bb5..11f4811 100644 --- a/asdf/renderer/CanvasRenderer.js +++ b/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) { diff --git a/asdf/utilities/math.js b/asdf/utilities/math.js index 199fa70..6b96652 100644 --- a/asdf/utilities/math.js +++ b/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; }