diff --git a/src/index.html b/src/index.html index dbe3262..1b8c633 100644 --- a/src/index.html +++ b/src/index.html @@ -194,7 +194,7 @@
-
+
@@ -226,7 +226,7 @@
-
+
i
diff --git a/src/modules/products.js b/src/modules/products.js index 722b53d..c5d8939 100644 --- a/src/modules/products.js +++ b/src/modules/products.js @@ -1,7 +1,6 @@ class Products { - constructor(canvas){ - + constructor(canvas) { this.gridProducts = [ ['a','', 'c', 'd', '', 'f', 'g', '', 'i'], ['a','', 'c', 'd', '', 'f', 'g', '', 'i'], @@ -25,29 +24,19 @@ class Products { ['a','', 'c', 'd', '', 'f', 'g', '', 'i'], ['a','', 'c', 'd', '', 'f', 'g', '', 'i'] ]; - this.gridProductsAmount = [ - ['a','', 'c', 'd', '', 'f', 'g', '', 'i'], - ['a','', 'c', 'd', '', 'f', 'g', '', 'i'], - ['a','', 'c', 'd', '', 'f', 'g', '', 'i'], - ['a','', 'c', 'd', '', 'f', 'g', '', 'i'], - ['a','', 'c', 'd', '', 'f', 'g', '', 'i'], - ['a','', 'c', 'd', '', 'f', 'g', '', 'i'], - ['a','', 'c', 'd', '', 'f', 'g', '', 'i'], - ['a','', 'c', 'd', '', 'f', 'g', '', 'i'], - ['a','', 'c', 'd', '', 'f', 'g', '', 'i'], - ['a','', 'c', 'd', '', 'f', 'g', '', 'i'], - ['a','', 'c', 'd', '', 'f', 'g', '', 'i'], - ['a','', 'c', 'd', '', 'f', 'g', '', 'i'], - ['a','', 'c', 'd', '', 'f', 'g', '', 'i'], - ['a','', 'c', 'd', '', 'f', 'g', '', 'i'], - ['a','', 'c', 'd', '', 'f', 'g', '', 'i'], - ['a','', 'c', 'd', '', 'f', 'g', '', 'i'], - ['a','', 'c', 'd', '', 'f', 'g', '', 'i'], - ['a','', 'c', 'd', '', 'f', 'g', '', 'i'], - ['a','', 'c', 'd', '', 'f', 'g', '', 'i'], - ['a','', 'c', 'd', '', 'f', 'g', '', 'i'], - ['a','', 'c', 'd', '', 'f', 'g', '', 'i'] - ]; + + this.gridProductsAmount = [] + for (let i = 0; i < 20; ++i) { + const current = [] + for (let j = 0; j < 9; ++j) { + if (j % 3 != 1) + current.push(50); + else + current.push(''); + } + this.gridProductsAmount.push(current); + } + this.ctx = canvas.getContext('2d'); this.setCanvasSize(canvas); this.update(); @@ -64,30 +53,28 @@ class Products { 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); + let v = this.drawValue(x, y); this.product(x * 100, y * 100, v, x, y); } } } } - value (x,y){ + drawValue(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); + let number = this.gridProductsAmount[x][y]; + this.ctx.fillText(number, (x * 100) + 10, (y * 100) + 90); return number; } - product(x, y, v, productsKey, productsValue){ + product(x, y, v, productsKey, productsValue) { let fontSize = 40; this.ctx.font = `${fontSize}px Montserrat`; this.ctx.textAlign = "center"; @@ -104,14 +91,15 @@ class Products { 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); } - + + getProductAt(x, y) { + return { + item: this.gridProducts[x][y], + count: this.gridProductsAmount[x][y] + } + } } \ No newline at end of file diff --git a/src/styles.css b/src/styles.css index 080f135..7d1af0a 100644 --- a/src/styles.css +++ b/src/styles.css @@ -109,5 +109,10 @@ main { grid-template-rows: repeat(9, 9fr); justify-items: center; align-items: center; + + display: none; } +#products i { + font-size: 20px; +}