ricochet/client/board.js

const Board = function({ parent, squares }) {
    this.parent = parent;
    this.squares = squares;
    
    this.blockers = {};
    this.listeners = {};

    this.drawSquares();
    this.resetBlockers();
};

Board.prototype.resetBlockers = function() {
    this.blockers = {
        negativeI: null,
        negativeJ: null,
        positiveI: null,
        positiveJ: null
    };
};

Board.prototype.drawRobots = function(robots) {
    robots.forEach(({ color, i, j }) => {
        const { x, y } = this.squares.ijToXy({ i, j });
        const s = this.squares.sideLength;
        const id = color.replace('#', '').toUpperCase();

        const robot = document.createElement('div');
        robot.className = 'content-robot';
        robot.style.background = color;
        robot.style.borderRadius = (s / 2) + 'px';
        robot.style.height = s + 'px';
        robot.style.width = s + 'px';
        robot.style.left = x + 'px';
        robot.style.top = y + 'px';
        robot.id = id

        // Find if a robot is on a square: document.querySelector('[data-robot=i-j]')
        robot.dataset.robot = `${i}-${j}`;

        const shadow = document.createElement('div');
        shadow.className = 'content-shadow';
        shadow.style.background = color;
        shadow.style.borderRadius = (s / 2) + 'px';
        shadow.style.height = s + 'px';
        shadow.style.width = s + 'px';
        shadow.style.left = x + 'px';
        shadow.style.top = y + 'px';
        shadow.dataset.parentRobot = id;

        this.parent.appendChild(robot);
        this.parent.appendChild(shadow);

        shadow.addEventListener('mousedown', this.onRobotDragStart.bind(this));
    });
};

Board.prototype.drawSquares = function() {
    for (let i = 0; i < this.squares.perSide; i++) {
        for (let j = 0; j < this.squares.perSide; j++) {
            // All squares are absolutely positioned relative to the viewport.
            const { x, y } = this.squares.ijToXy({ i, j });

            const square = document.createElement('div');
            square.className = 'content-square';
            square.style.height = this.squares.sideLength + 'px';
            square.style.width = this.squares.sideLength + 'px';
            square.style.left = x + 'px';
            square.style.top = y + 'px';

            this.parent.appendChild(square);
        }
    }
};

Board.prototype.drawWalls = function(edges) {
    edges.forEach(edge => {
        const id = `wall-${edge}`;

        if (document.getElementById(id)) {
            return;
        }

        const [i1, j1, i2, j2] = edge.split('-');

        console.log(edge)

        const wall = document.createElement('div');
        wall.id = id;
        wall.title = edge;

        const { x, y } = this.squares.ijToXy({ i: i1, j: j1 });
        wall.style.left = x + 'px';
        wall.style.top = y + 'px';

        // Find if edge has a wall: document.querySelector('[data-wall=i1-j1-i2-j2]')
        wall.dataset.wall = edge;

        if (i1 === i2) {
            wall.className = 'content-wall-y';
            wall.style.height = this.squares.sideLength + 'px';
        } else {
            wall.className = 'content-wall-x';
            wall.style.width = this.squares.sideLength + 'px';
        }

        this.parent.appendChild(wall)
    })
};

Board.prototype.getBlockers = function({ i1, j1, i2, j2 }) {
    // const upperEdge = `${i1}-${j1}-${i2}-${j2}`;
    // const lowerEdge = `${i1}-${j1}-${i2}-${j2}`;

    if (i1 === i2 && j1 < j2) {
        

    } else if (i1 === i2 && j1 > j2) {
        

    } else if (j1 === j2 && i1 <= i2) {
        this.blockers.positiveI && console.log(this.blockers.positiveI.i, i1)

        if (this.blockers.positiveI && this.blockers.positiveI.i <= i1) {
            return this.blockers.positiveI.blockage;
        }

        const rightEdge = `${i1 + 1}-${j1}-${i1 + 1}-${j1 + 1}`;

        const wall = document.querySelector(`[data-wall='${rightEdge}']`);

        if (wall) {
            this.blockers.positiveI = { i: i1 + 1, blockage: wall };
            return wall;
        }
    } else {
        // const leftEdge = `${i1}-${j1}-${i2}-${j2}`;
        // console.log("Left edge: ", leftEdge)
    }

    return null;
};

Board.prototype.onRobotDragStart = function(evt) {
    evt.stopPropagation();
    evt.preventDefault();

    this.listeners.onRobotDragStop = this.onRobotDragStop.bind(this);
    this.listeners.onRobotDrag = this.onRobotDrag.bind(this, evt.currentTarget);

    document.body.addEventListener('mouseup', this.listeners.onRobotDragStop);
    document.body.addEventListener('mousemove', this.listeners.onRobotDrag);

    const { x, y } = this.squares.ijToXy(this.squares.xyToIj(evt));

    evt.currentTarget.style.left = x + 'px';
    evt.currentTarget.style.top = y + 'px';
};

Board.prototype.onRobotDrag = function(dragTarget, evt) {
    const { i: i1, j: j1 } = this.squares.xyToIj({ x: evt.x - evt.movementX, y: evt.y - evt.movementY });
    const { i: i2, j: j2 } = this.squares.xyToIj({ x: evt.x, y: evt.y });

    const blockage = this.getBlockers({ i1, j1, i2, j2 });
    // console.warn(blockers)

    if (blockage) {
        console.log(blockage)
        console.log("NOPE")
        // this.onRobotDragStop(); works but i don't like it
        return;
    }
    
    const { x, y } = this.squares.ijToXy({ i: i2, j: j2 });

    dragTarget.style.left = x + 'px';
    dragTarget.style.top = y + 'px';
};

Board.prototype.onRobotDragStop = function(_) {
    this.resetBlockers();

    document.body.removeEventListener('mouseup', this.listeners.onRobotDragStop);
    document.body.removeEventListener('mousemove', this.listeners.onRobotDrag);
};