products

src/modules/products.js

@@ -0,0 +1,94 @@
+class Products {
+    
+  constructor(canvas){
+        
+    this.gridProducts = [
+                          ['a','b', 'c', 'd', 'e', 'f', 'g', 'h', 'i'],
+                          ['a','b', 'c', 'd', 'e', 'f', 'g', 'h', 'i'],
+                          ['a','b', 'c', 'd', 'e', 'f', 'g', 'h', 'i'],
+                          ['a','b', 'c', 'd', 'e', 'f', 'g', 'h', 'i'],
+                          ['a','b', 'c', 'd', 'e', 'f', 'g', 'h', 'i'],
+                          ['a','b', 'c', 'd', 'e', 'f', 'g', 'h', 'i'],
+                          ['a','b', 'c', 'd', 'e', 'f', 'g', 'h', 'i'],
+                          ['a','b', 'c', 'd', 'e', 'f', 'g', 'h', 'i'],
+                          ['a','b', 'c', 'd', 'e', 'f', 'g', 'h', 'i'],
+                          ['a','b', 'c', 'd', 'e', 'f', 'g', 'h', 'i'],
+                          ['a','b', 'c', 'd', 'e', 'f', 'g', 'h', 'i'],
+                          ['a','b', 'c', 'd', 'e', 'f', 'g', 'h', 'i'],
+                          ['a','b', 'c', 'd', 'e', 'f', 'g', 'h', 'i'],
+                          ['a','b', 'c', 'd', 'e', 'f', 'g', 'h', 'i'],
+                          ['a','b', 'c', 'd', 'e', 'f', 'g', 'h', 'i'],
+                          ['a','b', 'c', 'd', 'e', 'f', 'g', 'h', 'i'],
+                          ['a','b', 'c', 'd', 'e', 'f', 'g', 'h', 'i'],
+                          ['a','b', 'c', 'd', 'e', 'f', 'g', 'h', 'i'],
+                          ['a','b', 'c', 'd', 'e', 'f', 'g', 'h', 'i'],
+                          ['a','b', 'c', 'd', 'e', 'f', 'g', 'h', 'i'],
+                          ['a','b', 'c', 'd', 'e', 'f', 'g', 'h', 'i']
+                        ];
+    this.ctx = canvas.getContext('2d');
+    this.setCanvasSize(canvas);
+    this.update();
+
+  }
+
+  setCanvasSize (canvas) {
+    canvas.width = 2000;
+    canvas.height = 900;
+  } 
+
+  update(){
+    this.clearCanvas();
+    this.drawProducts();
+  }
+
+
+
+  drawProducts () {
+    for (let [x, line] of Grid.instance.grid.entries()) {
+      for (let [y, type] of line.entries()) {
+        if (type === GRID_FIELD_TYPE.SHELF) {
+          let v =this.value(x * 100, y * 100);
+          this.product(x * 100, y * 100, v, x, y);     
+        }
+      }
+    }
+  }
+
+  value (x,y){
+    let fontSize = 20;
+    this.ctx.font = `${fontSize}px Montserrat`;
+    this.ctx.textAlign = "left";
+    this.ctx.fillStyle = 'white';
+    let number =  Math.floor(Math.random() * (50 - 0 + 1)) + 0;
+    this.ctx.fillText(number, x+10, y+90);
+    return number;
+  }
+
+  product(x, y, v, productsKey, productsValue){
+    let fontSize = 40;
+    this.ctx.font = `${fontSize}px Montserrat`;
+    this.ctx.textAlign = "center";
+    if (v <= 10){
+      this.ctx.fillStyle = '#ff0000'; 
+    }
+    else if(v <= 25){
+      this.ctx.fillStyle = '#ffe700'; 
+    }
+    else {
+      this.ctx.fillStyle = '#74ee15'; 
+    }
+    let productsColumn = this.gridProducts[productsKey];
+    let prdct = productsColumn[productsValue];
+    this.ctx.fillText(prdct, x+50, y+60);
+  }
+  
+  
+  changeValue(xFirst, yFirst, xSecond, ySecond){
+
+  }
+
+  clearCanvas() {
+    this.ctx.clearRect(0, 0, 2000, 900);
+  }
+ 
+}