gator/explorata
gator
/
explorata
1
0
Fork 0
Code Pull Requests Projects Releases 1 Activity

es6 class syntax

This commit is contained in:
Ali Gator 2022-12-30 13:05:11 +01:00
parent 0f31f2556c
commit 745c197f09
2 changed files with 65 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
src/modules/board.js
View File

@ -2,15 +2,17 @@ import { create2dState, create1dStateOneCell, create1dState } from "./core.js";
import { getRandomInt } from "./common.js";
function Board(width, height, grid = []) {
this.width = width;
this.height = height;
(this.cellProperties = {
size: 3,
liveColor: "#000000",
deadColor: "#F5F5F5",
}),
(this.grid = grid);
class Board {
constructor(width, height, grid = []) {
this.width = width;
this.height = height;
(this.cellProperties = {
size: 3,
liveColor: "#000000",
deadColor: "#F5F5F5",
}),
(this.grid = grid);
}
}
// create a first state, either a single living cell

108
src/modules/renderer.js
View File

@ -1,5 +1,59 @@
import { boardToPic, scaleToTargetSize } from "./picture.js";
class Renderer {
constructor() {
this.canvas = null;
this.workCanvas = null;
this.workCtx = null;
this.width = null;
this.height = null;
this.ctx = null;
this.refreshRate = 300;
}
// draws the board representation on the canvas
render(board) {
const d = board.cellProperties.size;
// bool to RGBA colors
const img = boardToPic(board);
this.ctx.clearRect(0, 0, this.width, this.height);
scaleAndApply(this.ctx, d, () => {
this.workCtx.putImageData(img, 0, 0);
this.ctx.drawImage(this.workCanvas, 0, 0, this.width, this.height);
});
}
// draw image on canvas
renderImage(image, ctx, tw, th) {
ctx.fillStyle = "black";
ctx.fillRect(0, 0, tw, th);
const dimensions = scaleToTargetSize(image.width, image.height, tw, th);
ctx.drawImage(
image,
Math.floor((tw - dimensions[0]) / 2),
Math.floor((th - dimensions[1]) / 2),
dimensions[0],
dimensions[1]
);
return ctx.getImageData(0, 0, tw, th);
}
// resize canvas and workcavas
resize(width, height) {
this.width = width;
this.height = height;
this.canvas.height = height;
this.canvas.width = width;
this.workCanvas.height = height;
this.workCanvas.width = width;
}
// clear any drawing from canvas
reset() {
this.ctx.clearRect(0, 0, this.width, this.height);
}
}
function scaleAndApply(context, ratio, callback) {
context.save();
// rescale
@ -10,58 +64,4 @@ function scaleAndApply(context, ratio, callback) {
context.restore();
}
// draws the board representation on the canvas
function render(board) {
const d = board.cellProperties.size;
// bool to RGBA colors
const img = boardToPic(board);
this.ctx.clearRect(0, 0, this.width, this.height);
scaleAndApply(this.ctx, d, () => {
this.workCtx.putImageData(img, 0, 0);
this.ctx.drawImage(this.workCanvas, 0, 0, this.width, this.height);
});
}
// draw image on canvas
function renderImage(image, ctx, tw, th) {
ctx.fillStyle = "black";
ctx.fillRect(0, 0, tw, th);
const dimensions = scaleToTargetSize(image.width, image.height, tw, th);
ctx.drawImage(
image,
Math.floor((tw - dimensions[0]) / 2),
Math.floor((th - dimensions[1]) / 2),
dimensions[0],
dimensions[1]
);
return ctx.getImageData(0, 0, tw, th);
}
function resize(width, height) {
this.width = width;
this.height = height;
this.canvas.height = height;
this.canvas.width = width;
this.workCanvas.height = height;
this.workCanvas.width = width;
}
function reset() {
this.ctx.clearRect(0, 0, this.width, this.height);
}
function Renderer() {
this.canvas = null;
this.workCanvas = null;
this.workCtx = null;
this.width = null;
this.height = null;
this.ctx = null;
this.refreshRate = 300;
this.render = render;
this.renderImage = renderImage;
this.reset = reset;
this.resize = resize;
}
export { Renderer };