diff --git a/README.md b/README.md index 3439c51..7e9ea3b 100644 --- a/README.md +++ b/README.md @@ -21,7 +21,7 @@ Somewhere in `html>head`: ``` -Somewhere in JS code`: +Somewhere in JS code: ```js const params = { cols: 400, // matrix size: 400x400 @@ -39,7 +39,7 @@ function play() { function playGame() { if (!gameStarted) return; - game.calcGeneration(); + game.liveOut(); window.requestAnimationFrame(playGame) } diff --git a/dist/game-of-life.cjs.js b/dist/game-of-life.cjs.js index 18de756..27fd6a2 100644 --- a/dist/game-of-life.cjs.js +++ b/dist/game-of-life.cjs.js @@ -5,12 +5,21 @@ Object.defineProperty(exports, '__esModule', { value: true }); var Game = /** @class */ (function () { function Game(elementId, options) { this.options = options; - this.canvas = new Canvas(elementId, this.options); - this.matrix = []; - this.randomize(); + this.canvas = new Canvas(elementId, { + rows: this.options.rows, + cols: this.options.cols, + color: this.options.color, + }); + if (this.options.seed) { + this.matrix = this.options.seed; + } + else { + this.matrix = []; + this.randomize(); + } this.canvas.draw(this.matrix); } - Game.prototype.calcGeneration = function () { + Game.prototype.liveOut = function () { var newGeneration = JSON.parse(JSON.stringify(this.matrix)); for (var i = 0; i < this.options.cols; i++) { for (var j = 0; j < this.options.rows; j++) { @@ -23,13 +32,13 @@ var Game = /** @class */ (function () { } this.matrix = newGeneration; this.canvas.draw(newGeneration); + return newGeneration; }; Game.prototype.randomize = function () { for (var i = 0; i < this.options.cols; i++) { for (var j = 0; j < this.options.rows; j++) { if (!this.matrix[i]) this.matrix[i] = Array(this.options.cols); - //if (!this.matrix[i][j]) this.matrix[i][j] = this.matrix[i][j] = Math.random() >= 0.5 ? 1 : 0; } } diff --git a/dist/game-of-life.esm.js b/dist/game-of-life.esm.js index 5a2ab7a..9167940 100644 --- a/dist/game-of-life.esm.js +++ b/dist/game-of-life.esm.js @@ -1,12 +1,21 @@ var Game = /** @class */ (function () { function Game(elementId, options) { this.options = options; - this.canvas = new Canvas(elementId, this.options); - this.matrix = []; - this.randomize(); + this.canvas = new Canvas(elementId, { + rows: this.options.rows, + cols: this.options.cols, + color: this.options.color, + }); + if (this.options.seed) { + this.matrix = this.options.seed; + } + else { + this.matrix = []; + this.randomize(); + } this.canvas.draw(this.matrix); } - Game.prototype.calcGeneration = function () { + Game.prototype.liveOut = function () { var newGeneration = JSON.parse(JSON.stringify(this.matrix)); for (var i = 0; i < this.options.cols; i++) { for (var j = 0; j < this.options.rows; j++) { @@ -19,13 +28,13 @@ var Game = /** @class */ (function () { } this.matrix = newGeneration; this.canvas.draw(newGeneration); + return newGeneration; }; Game.prototype.randomize = function () { for (var i = 0; i < this.options.cols; i++) { for (var j = 0; j < this.options.rows; j++) { if (!this.matrix[i]) this.matrix[i] = Array(this.options.cols); - //if (!this.matrix[i][j]) this.matrix[i][j] = this.matrix[i][j] = Math.random() >= 0.5 ? 1 : 0; } } diff --git a/dist/game-of-life.umd.js b/dist/game-of-life.umd.js index 130493d..3587b08 100644 --- a/dist/game-of-life.umd.js +++ b/dist/game-of-life.umd.js @@ -1 +1 @@ -!function(t,o){"object"==typeof exports&&"undefined"!=typeof module?o(exports):"function"==typeof define&&define.amd?define(["exports"],o):o((t=t||self).GameOfLife={})}(this,function(t){"use strict";var o=(i.prototype.calcGeneration=function(){for(var t=JSON.parse(JSON.stringify(this.matrix)),o=0;o=s.options.cols&&(t=0),o<0&&(o=s.options.rows-1),o>=s.options.rows&&(o=0),s.matrix[t][o]}var s=this;return[i(t-1,o-1),i(t,o-1),i(t+1,o-1),i(t-1,o),i(t+1,o),i(t-1,o+1),i(t,o+1),i(t+1,o+1)].reduce(function(t,o){return t+o},0)},i);function i(t,o){this.options=o,this.canvas=new s(t,this.options),this.matrix=[],this.randomize(),this.canvas.draw(this.matrix)}var s=(r.prototype.draw=function(t){if(!this.ctx)throw new Error("Can't get 2d context of canvas");var o=parseInt(this.canvas.getAttribute("width")||"100",10),i=parseInt(this.canvas.getAttribute("height")||"100",10);this.ctx.clearRect(0,0,o,i);var s=o/this.options.cols,r=i/this.options.rows;this.ctx.strokeStyle=this.ctx.fillStyle=this.options.color?this.options.color:"#d0b3d1";for(var n=0;n=s.options.cols&&(t=0),o<0&&(o=s.options.rows-1),o>=s.options.rows&&(o=0),s.matrix[t][o]}var s=this;return[i(t-1,o-1),i(t,o-1),i(t+1,o-1),i(t-1,o),i(t+1,o),i(t-1,o+1),i(t,o+1),i(t+1,o+1)].reduce(function(t,o){return t+o},0)},i);function i(t,o){this.options=o,this.canvas=new s(t,{rows:this.options.rows,cols:this.options.cols,color:this.options.color}),this.options.seed?this.matrix=this.options.seed:(this.matrix=[],this.randomize()),this.canvas.draw(this.matrix)}var s=(r.prototype.draw=function(t){if(!this.ctx)throw new Error("Can't get 2d context of canvas");var o=parseInt(this.canvas.getAttribute("width")||"100",10),i=parseInt(this.canvas.getAttribute("height")||"100",10);this.ctx.clearRect(0,0,o,i);var s=o/this.options.cols,r=i/this.options.rows;this.ctx.strokeStyle=this.ctx.fillStyle=this.options.color?this.options.color:"#d0b3d1";for(var n=0;n; +} +export interface ICanvasOptions { rows: number; cols: number; color?: string; @@ -8,7 +12,7 @@ export declare class Game { private canvas; private matrix; constructor(elementId: string, options: IGameOptions); - calcGeneration(): void; + liveOut(): Array; private randomize; private calcNeighbours; } diff --git a/dist/index.html b/dist/index.html index 5373007..d6525b5 100644 --- a/dist/index.html +++ b/dist/index.html @@ -48,7 +48,7 @@ function playGame() { if (!gameStarted) return; - game.calcGeneration(); + game.liveOut(); window.requestAnimationFrame(playGame) } diff --git a/package.json b/package.json index 789ddb3..5287596 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "game-of-life", - "version": "1.0.0", + "version": "1.0.1", "main": "dist/game-of-life.cjs.js", "module": "dist/game-of-life.esm.js", "author": "mrfrac ", diff --git a/src/index.ts b/src/index.ts index cbba497..edf17b9 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,4 +1,10 @@ -export interface IGameOptions { +export type CellType = 0 | 1; + +export interface IGameOptions extends ICanvasOptions { + seed?: Array +} + +export interface ICanvasOptions { rows: number; cols: number; color?: string; @@ -7,20 +13,28 @@ export interface IGameOptions { export class Game { private options: IGameOptions; private canvas: Canvas; - private matrix: number[][]; + private matrix: Array; public constructor(elementId: string, options: IGameOptions) { this.options = options; - this.canvas = new Canvas(elementId, this.options); - this.matrix = []; - - this.randomize(); + this.canvas = new Canvas(elementId, { + rows: this.options.rows, + cols: this.options.cols, + color: this.options.color, + }); + + if (this.options.seed) { + this.matrix = this.options.seed; + } else { + this.matrix = []; + this.randomize(); + } this.canvas.draw(this.matrix); } - calcGeneration(): void { - const newGeneration: number[][] = JSON.parse(JSON.stringify(this.matrix)); + public liveOut(): Array { + const newGeneration: Array = JSON.parse(JSON.stringify(this.matrix)); for (let i = 0; i < this.options.cols; i++) { for (let j = 0; j < this.options.rows; j++) { @@ -32,13 +46,13 @@ export class Game { this.matrix = newGeneration; this.canvas.draw(newGeneration) + return newGeneration; } private randomize(): void { for (let i = 0; i < this.options.cols; i++) { for (let j = 0; j < this.options.rows; j++) { if (!this.matrix[i]) this.matrix[i] = Array(this.options.cols); - //if (!this.matrix[i][j]) this.matrix[i][j] = this.matrix[i][j] = Math.random() >= 0.5 ? 1 : 0; } } @@ -64,10 +78,10 @@ export class Game { class Canvas { private canvas: HTMLCanvasElement; - private options: IGameOptions; + private options: ICanvasOptions; private ctx: CanvasRenderingContext2D | null; - public constructor(elementId: string, options: IGameOptions) { + public constructor(elementId: string, options: ICanvasOptions) { this.canvas = document.getElementById(elementId) as HTMLCanvasElement; this.options = options; this.ctx = this.canvas.getContext("2d");