From 85f056394fbfbf54deb257f1b44e62c14082be49 Mon Sep 17 00:00:00 2001 From: Marcin Czerniak Date: Sun, 7 Mar 2021 21:33:32 +0100 Subject: [PATCH] grid class --- .gitignore | 2 ++ src/grid.js | 44 ++++++++++++++++++++++++++++++++++++++++++++ src/index.html | 19 +++++++++++++++++++ src/main.js | 4 ++++ src/styles.css | 0 5 files changed, 69 insertions(+) create mode 100644 .gitignore create mode 100644 src/grid.js create mode 100644 src/index.html create mode 100644 src/main.js create mode 100644 src/styles.css diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..471b461 --- /dev/null +++ b/.gitignore @@ -0,0 +1,2 @@ +# Hide node dependencies directory +node_modules \ No newline at end of file diff --git a/src/grid.js b/src/grid.js new file mode 100644 index 0000000..78cb453 --- /dev/null +++ b/src/grid.js @@ -0,0 +1,44 @@ +const Grid = function(canvas) { + let grid = [[]]; + let ctx; + + this.setCanvasSize = (canvas) => { + canvas.width = 2000; + canvas.height = 900; + } + + this.processGrid = () => { + const fact = (a, value = 1) => Array(a).fill(value, 0, a); + const cartesian = (arr1, arr2) => arr1.map(a => (a && arr2) || fact(arr2.length, 0)); + + this.grid = cartesian( + [...fact(6), 0, ...fact(6), 0, ...fact(6)], + [...fact(1), 0, ...fact(2), 0, ...fact(2), 0, ...fact(1)] + ); + } + + this.drawGrid = () => { + for (let [x, line] of this.grid.entries()) { + for (let [y, shouldRender] of line.entries()) { + if (shouldRender) { + this.neonRect(x * 100, y * 100, 100, 100); + } + } + } + } + + this.neonRect = (x, y, w, h) => { + this.ctx.globalCompositeOperation = 'lighter'; + this.ctx.shadowColor = "#fff"; + this.ctx.shadowBlur = 10; + this.ctx.strokeStyle= "#fff"; + this.ctx.lineWidth = 5; + this.ctx.strokeRect(x, y, w, h); + } + + this.ctx = canvas.getContext('2d'); + this.setCanvasSize(canvas); + this.processGrid(); + this.drawGrid(); +} + diff --git a/src/index.html b/src/index.html new file mode 100644 index 0000000..f727066 --- /dev/null +++ b/src/index.html @@ -0,0 +1,19 @@ + + + + + + + + + + + + Document + + + + + + + \ No newline at end of file diff --git a/src/main.js b/src/main.js new file mode 100644 index 0000000..1c3219c --- /dev/null +++ b/src/main.js @@ -0,0 +1,4 @@ +window.addEventListener('DOMContentLoaded', () => { + const gridCanvas = document.getElementById('canvas-grid'); + const grid = new Grid(gridCanvas); +}); \ No newline at end of file diff --git a/src/styles.css b/src/styles.css new file mode 100644 index 0000000..e69de29