Przygotowanie protytypu

src/grid.js

@@ -1,6 +1,7 @@
 const Grid = function(canvas) {
   let grid = [[]];
   let ctx;
+  let storages = []
 
   this.setCanvasSize = (canvas) => {
     canvas.width = 2000;
@@ -27,15 +28,21 @@ const Grid = function(canvas) {
     }
   }
 
-  this.neonRect = (x, y, w, h) => {
-    this.ctx.globalCompositeOperation = 'lighter';
-    this.ctx.shadowColor = "#fff";
+  this.neonRect = (x, y, w, h, clr = '#fff', lw = 5) => {
+    this.ctx.globalCompositeOperation = 'darker';
+    this.ctx.shadowColor = clr;
     this.ctx.shadowBlur = 10;
-    this.ctx.strokeStyle= "#fff";
-    this.ctx.lineWidth = 5;
+    this.ctx.strokeStyle= clr;
+    this.ctx.lineWidth = lw;
     this.ctx.strokeRect(x, y, w, h);
   }
 
+  this.addStorageCenter = (x, y) => {
+    this.neonRect(x * 100, y * 100, 100, 100, '#ff0000', 10);
+  }
+
+  this.getStorageCenters = () => storages
+
   this.ctx = canvas.getContext('2d');
   this.setCanvasSize(canvas);
   this.processGrid();

src/main.js

@@ -1,4 +1,5 @@
 window.addEventListener('DOMContentLoaded', () => {
   const gridCanvas = document.getElementById('canvas-grid');
   const grid = new Grid(gridCanvas);
+  grid.addStorageCenter(9, 0);
 });