dust/js/grid.js

export default function Grid() {
    this.points = {};
    this.gridSize = 5;
};

Grid.prototype.getKey = function({ x, y, type }) {
    const gridX = x - x % this.gridSize;
    const gridY = y - y % this.gridSize;

    return `${gridX}-${gridY}-${type}`;
}

Grid.prototype.setPoint = function({ x, y, type }, value) {
    this.points[this.getKey({ x, y, type })] = value;
};

Grid.prototype.getPoint = function({ x, y, type }) {
    return this.points[this.getKey({ x, y, type })];
}

Grid.prototype.deletePoint = function({ x, y, type }) {
    delete this.points[this.getKey({ x, y, type })];
};

Grid.prototype.setArea = function({ x, y, w, h, type }, container) {
    for (let i = x; i <= (x + w); i += this.gridSize) {
        for (let j = y; j <= (y + h); j += this.gridSize) {
            this.setPoint({ x: i, y: j, type }, true);
        }
    }

    const div = document.createElement('div');
    div.className = 'hazard';
    div.style.left = `${x}px`;
    div.style.top = `${y}px`;
    div.style.height = `${h}px`;
    div.style.width = `${w}px`;
    container.appendChild(div);

    for (let i = x; i <= (x + w); i += this.gridSize) {
        for (let j = y; j <= (y + h); j += this.gridSize) {
            const dot = document.createElement('dot');
            dot.className = 'hazard-dot';
            dot.style.left = `${i - x}px`;
            dot.style.top = `${j - y}px`;
            div.appendChild(dot);
        }
    }
};