grid class

2021-03-07 21:33:32 +01:00 · 2021-03-07 21:33:32 +01:00 · 85f056394f
parent ec9950c094
commit 85f056394f
5 changed files with 69 additions and 0 deletions
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,2 @@
 # Hide node dependencies directory
 node_modules
--- a/src/grid.js
+++ 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();
 }
--- a/src/index.html
+++ b/src/index.html
@ -0,0 +1,19 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css">
  <script src="grid.js"></script>
  <script src="main.js"></script>
  <title>Document</title>
 </head>
 <body>
  <canvas id="canvas-grid"></canvas>
 </body>
 </html>
--- a/src/main.js
+++ b/src/main.js
@ -0,0 +1,4 @@
 window.addEventListener('DOMContentLoaded', () => {
  const gridCanvas = document.getElementById('canvas-grid');
  const grid = new Grid(gridCanvas);
 });
--- a/src/styles.css
+++ b/src/styles.css
		`@ -0,0 +1,2 @@`
							`# Hide node dependencies directory`
							`node_modules`