psi/src/view/products.js

function filterReduce2D(array, reducer, filter, init) {
	let result = init;

	for (let row of array)
		for (let element of row)
			if (filter(element))
				result = reducer(result, element);

	return result;
}

class Products {
  static instance

  constructor(canvas) {
    const { random, floor } = Math

    this.gridProducts = []
    this.gridProductsAmount = []
		this.min = 50;

    for (let i = 0; i < 20; ++i) {
      const gridProductsColumn = []
      const gridProductsAmountColumn = []

      for (let j = 0; j < 9; ++j) {
        if (j % 3 !== 1 && (i+1) % 7 !== 0) {
          gridProductsColumn.push(Product.RANDOM_FROM_REGISTRY());
					const amount = floor(random() * 51);
          gridProductsAmountColumn.push(amount);
					this.min = this.min > amount ? amount : this.min;
        } else {
          gridProductsColumn.push('');
          gridProductsAmountColumn.push('');
        }
      }

      this.gridProducts.push(gridProductsColumn);
      this.gridProductsAmount.push(gridProductsAmountColumn);
    }

    this.ctx = canvas.getContext('2d');
    this.setCanvasSize(canvas);
    this.update();

    Products.instance = this
  }

  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.drawValue(x, y);
          this.product(x * 100, y * 100, v, x, y);
        }
      }
    }
  }

  drawValue(x, y) {
    let fontSize = 20;
    this.ctx.font = `${fontSize}px Montserrat`;
    this.ctx.textAlign = "left";
    this.ctx.fillStyle = 'white';
    let number = this.gridProductsAmount[x][y];
    this.ctx.fillText(number, (x * 100) + 10, (y * 100) + 90);
    return number;
  }

  product(x, y, v, productsKey, productsValue) {
    let fontSize = 40;
    this.ctx.font = `900 ${fontSize}px "Font Awesome 5 Free"`;
    this.ctx.textAlign = "center";

    // make color of icon on white -> red spectrum, where
    //   white - full shelf
    //   red   - empty shelf
    const t = Math.cbrt
		v = (v - this.min) / (50 - this.min);
    let color = Math.floor(t(v) * 255).toString(16)
    if (color.length == 1)
      color = "0" + color
    this.ctx.fillStyle = `#ff${color}${color}`;

    let productsColumn = this.gridProducts[productsKey];
    let prdct = productsColumn[productsValue];
    this.ctx.font = '900 40px "Font Awesome 5 Free"';
    this.ctx.textAlign = 'center';
    this.ctx.fillText(prdct.icon, x+50, y+60);
  }

  clearCanvas() {
    this.ctx.clearRect(0, 0, 2000, 900);
  }

  getProductAt(x, y) {
    return {
      item: this.gridProducts[x][y],
      count: this.gridProductsAmount[x][y]
    }
  }

  /**
   *
   * @param {(product: Product, amount: number, i: number, j: number, end: () => bool) => bool} filter
   * @returns
   */
  filter(filter) {
    const list = []
    for (let i = 0; i < 20; ++i) {
      for (let j = 0; j < 9; ++j) {
        let mustEnd = false
        let end = (val = false) => (mustEnd = true, val)
        const product = this.gridProducts[i][j]
        const amount = this.gridProductsAmount[i][j]

        if (typeof(product) !== 'string'
        && filter(product, amount, i, j, end)) {
          list.push({ product, amount: Number(amount), x: i, y: j })
        }

        if (mustEnd)
          return list
      }
    }
    return list
  }

  /**
   * @param {Product} incomingProduct
   * @param {number} incomingAmount
   * @returns {{product: Product; amount: number} | null } Old shelf content
   */
  exchange(x, y, incomingProduct, incomingAmount) {
    const product = this.gridProducts[x][y];
    const amount = this.gridProductsAmount[x][y];
    this.gridProducts[x][y] = incomingProduct;
    this.gridProductsAmount[x][y] = incomingAmount;

		this.min = filterReduce2D(this.gridProductsAmount, (p, c) => Math.min(p, c),
			x => typeof x === 'number', 50);

    this.clearCanvas();
    this.drawProducts();
    return { product, amount };
  }

  /**
   * @param {Product} incomingProduct
   * @param {number} incomingAmount
   * @returns {{product: Product; amount: number} | null } Old shelf content or leftover
   */
  interact(x, y, incomingProduct, incomingAmount) {
    const { max, min } = Math
    const amount = this.gridProductsAmount[x][y]
    if (this.gridProducts[x][y].equals(incomingProduct) && amount < 50) {
      this.gridProductsAmount[x][y] = min(incomingAmount, 50)
      return { product: incomingProduct, amount: max(0, (amount + incomingAmount) - 50) }
    }
    return this.exchange(x, y, incomingProduct, incomingAmount)
  }

  getJobRequest() {
    const maybeProduct = this.filter((_product, amount, _i, _j, end) => amount < 50).sort((a, b) => {
			return a.amount - b.amount
		})
    return maybeProduct.length === 0 ? null : maybeProduct[0]
  }

  findAvailableLocationsFor(product) {
    return this.filter((p, amount) => product.equals(p) && amount < 50)
  }
}