feat: Shelves

src/img/shelves/FRIDGE.svg

@@ -0,0 +1,16 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100">
+  <g id="FRIDGE" transform="translate(330)">
+    <g id="Rectangle_1" data-name="Rectangle 1" transform="translate(-330)" fill="#00f8ff" stroke="#fff" stroke-width="3" opacity="0.05">
+      <rect width="100" height="100" stroke="none"/>
+      <rect x="1.5" y="1.5" width="97" height="97" fill="none"/>
+    </g>
+    <g id="Group_1" data-name="Group 1" opacity="0.26">
+      <path id="Path_1" data-name="Path 1" d="M-291.832,0l-30.122,97.125h35.735L-254.952,0Z" transform="translate(0 1.489)" fill="#fff"/>
+      <path id="Path_2" data-name="Path 2" d="M-291.832,0l-30.122,97.125h12.5L-278.191,0Z" transform="translate(45 1.489)" fill="#fff"/>
+    </g>
+    <g id="Rectangle_2" data-name="Rectangle 2" transform="translate(-330)" fill="none" stroke="#fff" stroke-width="4">
+      <rect width="100" height="100" stroke="none"/>
+      <rect x="2" y="2" width="96" height="96" fill="none"/>
+    </g>
+  </g>
+</svg>

src/img/shelves/SHELF_FRIDGE.svg

@@ -0,0 +1,16 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100">
+  <g id="SHELF_FRIDGE" transform="translate(330)">
+    <g id="Rectangle_1" data-name="Rectangle 1" transform="translate(-330)" fill="#cef4f5" stroke="#fff" stroke-width="3" opacity="0.2">
+      <rect width="100" height="100" stroke="none"/>
+      <rect x="1.5" y="1.5" width="97" height="97" fill="none"/>
+    </g>
+    <g id="Group_1" data-name="Group 1" opacity="0">
+      <path id="Path_1" data-name="Path 1" d="M-291.832,0l-30.122,97.125h35.735L-254.952,0Z" transform="translate(0 1.489)" fill="#fff"/>
+      <path id="Path_2" data-name="Path 2" d="M-291.832,0l-30.122,97.125h12.5L-278.191,0Z" transform="translate(45 1.489)" fill="#fff"/>
+    </g>
+    <g id="Rectangle_2" data-name="Rectangle 2" transform="translate(-330)" fill="none" stroke="#fff" stroke-width="4">
+      <rect width="100" height="100" stroke="none"/>
+      <rect x="2" y="2" width="96" height="96" fill="none"/>
+    </g>
+  </g>
+</svg>

src/index.html

@@ -19,6 +19,7 @@
   <script src="utilities.js"></script>
   <script src="logic/product.js"></script>
   <script src="logic/time.js"></script>
+  <script src="logic/shelf.js"></script>
 
   <script src="view/floor.js"></script>
   <script src="view/grid.js"></script>

src/logic/shelf.js

@@ -0,0 +1,28 @@
+const SHELF_TYPE = Object.freeze({
+  FRIDGE: 'FRIDGE',
+  BREAD_SHELF: 'BREAD_SHELF',
+  FURNITURE_SHELF: 'FURNITURE_SHELF',
+  SEASONAL_SHELF: 'SEASONAL_SHELF',
+  MEDICINE_SHELF: 'MEDICINE_SHELF',
+  BASKET_FOR_BALLS: 'BASKET_FOR_BALLS',
+  SPORT_CLOTHES_SHELF: 'SPORT_CLOTHES_SHELF',
+  UNIVERSAL_SHELF: 'UNIVERSAL_SHELF',
+  UNIVERSAL_FOOD_SHELF: 'UNIVERSAL_FOOD_SHELF',
+});
+
+class Shelf {
+  /**
+   * 
+   * @param {SHELF_TYPE} type 
+   * @param {string} icon 
+   */
+  constructor(type) {
+    this.type = type;
+  }
+
+  static random() {
+    return new Shelf(
+      SHELF_TYPE[Object.keys(SHELF_TYPE)[Math.floor(Object.keys(SHELF_TYPE).length * Math.random())]]
+    )
+  } 
+}

src/view/agentController.js

@@ -236,8 +236,6 @@ class AgentController {
     this.roundRect(-(w / 2), -(h / 2), w, h);
 
     // Eyes
-    // this.roundRect(10 - (w / 2), 10 - (h / 2), w / 4, h / 4);
-    // this.roundRect(80 - (3 * w / 4), 10 - (h / 2), w / 4, h / 4);
     this.ctx.fillStyle = 'red';
     this.ctx.fillRect(-(w/2) + 20, (-h/2) - 10, w - 40, 10);
 

src/view/grid.js

@@ -1,7 +1,7 @@
 const GRID_FIELD_TYPE = Object.freeze({
-  PATH: 0,
+  PATH: 'PATH',
-  SHELF: 1,
+  SHELF: 'SHELF',
-  STORAGE: 2
+  STORAGE: 'STORAGE'
 });
 
 class Grid {
@@ -9,6 +9,7 @@ class Grid {
 
   constructor(canvas) {
     this.grid = [[]];
+    this.shelves = [[]];
     this.ctx;
 
     this.ctx = canvas.getContext('2d');
@@ -26,6 +27,10 @@ class Grid {
     return this.grid;
   }
 
+  getShelves () {
+    return this.shelves;
+  }
+
   setCanvasSize (canvas) {
     canvas.width = 2000;
     canvas.height = 900;
@@ -33,7 +38,7 @@ class Grid {
 
   processGrid () {
     const fact = (a, value = GRID_FIELD_TYPE.SHELF) => Array(a).fill(value, 0, a);
-    const cartesian = (arr1, arr2) => arr1.map(a => (a && arr2) || fact(arr2.length, 0));
+    const cartesian = (arr1, arr2) => arr1.map(a => (a != GRID_FIELD_TYPE.PATH && arr2) || fact(arr2.length, GRID_FIELD_TYPE.PATH));
     
     this.grid = cartesian(
       [...fact(6), GRID_FIELD_TYPE.PATH, ...fact(6), GRID_FIELD_TYPE.PATH, ...fact(6)],
@@ -44,13 +49,22 @@ class Grid {
     for (let i = 0; i < 20; i++) {
       this.grid[i] = [...this.grid[i], lastLine[i]];
     }
+
+    this.shelves = new Array(20).fill(0).map(e => new Array(9));
+    for (let [x, line] of this.grid.entries()) {
+      for (let [y, type] of line.entries()) {
+        if (type === GRID_FIELD_TYPE.SHELF) {
+          this.shelves[x][y] = Shelf.random();
+        }
+      }
+    }
   }
 
   drawShelfs () {
     for (let [x, line] of this.grid.entries()) {
       for (let [y, type] of line.entries()) {
         if (type === GRID_FIELD_TYPE.SHELF) {
-          this.shelf(x * 100, y * 100, 100, 100);
+          this.shelf(this.shelves[x][y], x * 100, y * 100, 100, 100);
         }
       }
     }
@@ -115,11 +129,20 @@ class Grid {
     this.ctx.fillText("STORE", x + (w/2), y + (h/2) + 15);
   }
 
-  shelf (x, y, w, h) {
+  shelf (shelf, x, y, w, h) {
     this.ctx.strokeStyle = '#ffffff';
     this.ctx.lineWidth = 5;
     this.ctx.strokeRect(x, y, w, h);
     this.drawFixIfOnEdge(x, y, w, h);
+
+    if (shelf.type == SHELF_TYPE.FRIDGE) {
+      var img = new Image();
+      img.src = "img/shelves/FRIDGE.svg";
+      img.onload = () => {
+        this.ctx.drawImage(img, x, y, w, h);
+      }
+    }
+    
   }
 
   storage (x, y, w, h, hasTop, hasRight, hasBottom, hasLeft) {