You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
362 lines
11 KiB
362 lines
11 KiB
//===== Constructor
|
|
|
|
const Grid = function() {
|
|
this.colors = {};
|
|
this.obstacles = {};
|
|
this.robots = [];
|
|
this.walls = [];
|
|
|
|
this.squaresPerSide = 20;
|
|
this.squareSideLength = 0;
|
|
|
|
document.addEventListener('L-stack', this.msgStack.bind(this));
|
|
|
|
document.addEventListener('G-robots', this.msgRobots.bind(this));
|
|
document.addEventListener('G-walls', this.msgWalls.bind(this));
|
|
|
|
window.addEventListener('resize', this.debounce(this.onResize.bind(this), 500));
|
|
|
|
this.onResize();
|
|
};
|
|
|
|
//===== UI drawing
|
|
|
|
Grid.prototype.drawSquares = function() {
|
|
const grid = document.getElementById('content-grid');
|
|
grid.querySelectorAll('.content-square').forEach(el => el.parentNode.removeChild(el));
|
|
|
|
const s = this.squareSideLength;
|
|
|
|
for (let i = 0; i < this.squaresPerSide; i++) {
|
|
for (let j = 0; j < this.squaresPerSide; j++) {
|
|
|
|
const square = document.createElement('div');
|
|
square.className = 'content-square';
|
|
|
|
square.style.height = `${s}px`;
|
|
square.style.width = `${s}px`;
|
|
|
|
square.style.left = `${i * s}px`;
|
|
square.style.top = `${j * s}px`;
|
|
|
|
grid.appendChild(square);
|
|
}
|
|
}
|
|
};
|
|
|
|
Grid.prototype.drawWalls = function() {
|
|
const grid = document.getElementById('content-grid');
|
|
grid.querySelectorAll('.content-wall-x').forEach(el => el.parentNode.removeChild(el));
|
|
grid.querySelectorAll('.content-wall-y').forEach(el => el.parentNode.removeChild(el));
|
|
|
|
const s = this.squareSideLength;
|
|
|
|
this.walls.forEach(edge => {
|
|
const [i1, j1, i2, j2] = edge.split('-');
|
|
|
|
const wall = document.createElement('div');
|
|
wall.title = edge;
|
|
|
|
wall.style.left = `${i1 * s}px`;
|
|
wall.style.top = `${j1 * s}px`;
|
|
|
|
if (i1 === i2) {
|
|
wall.className = 'content-wall-y';
|
|
wall.style.height = this.squareSideLength + 'px';
|
|
} else {
|
|
wall.className = 'content-wall-x';
|
|
wall.style.width = this.squareSideLength + 'px';
|
|
}
|
|
|
|
grid.appendChild(wall)
|
|
});
|
|
};
|
|
|
|
Grid.prototype.drawRobots = function() {
|
|
const grid = document.getElementById('content-grid');
|
|
grid.querySelectorAll('.content-robot').forEach(el => el.parentNode.removeChild(el));
|
|
|
|
const s = this.squareSideLength;
|
|
|
|
this.robots.forEach(({ id, i, j }) => {
|
|
const color = this.colors[id];
|
|
|
|
const robot = document.createElement('div');
|
|
robot.className = 'content-robot';
|
|
|
|
robot.style.background = `radial-gradient(circle at ${s/3}px ${s/3}px, ${color} 10%, #000)`;
|
|
robot.style.borderRadius = (s / 2) + 'px';
|
|
|
|
robot.style.height = s + 'px';
|
|
robot.style.width = s + 'px';
|
|
|
|
robot.style.left = `${i * s}px`;
|
|
robot.style.top = `${j * s}px`;
|
|
|
|
grid.appendChild(robot);
|
|
});
|
|
};
|
|
|
|
Grid.prototype.drawArrows = function() {
|
|
const grid = document.getElementById('content-grid');
|
|
grid.querySelectorAll('.content-arrows').forEach(el => el.parentNode.removeChild(el));
|
|
|
|
const s = this.squareSideLength;
|
|
|
|
this.robots.forEach(({ id, i, j }) => {
|
|
const arrows = document.createElement('div');
|
|
arrows.id = `arrows-${id}`;
|
|
arrows.className = 'content-arrows';
|
|
|
|
arrows.dataset.i = i;
|
|
arrows.dataset.j = j;
|
|
arrows.dataset.id = id;
|
|
|
|
arrows.style.left = `${i * s - s}px`;
|
|
arrows.style.top = `${j * s - s}px`;
|
|
|
|
const up = this.drawArrow({ direction: 'up', label: '▲', left: (s * 1.25), top: (s * 0.5) });
|
|
const down = this.drawArrow({ direction: 'down', label: '▼', left: (s * 1.25), top: (s * 2) });
|
|
const left = this.drawArrow({ direction: 'left', label: '◀', left: (s * 0.5), top: (s * 1.25) });
|
|
const right = this.drawArrow({ direction: 'right', label: '▶', left: (s * 2), top: (s * 1.25) });
|
|
|
|
arrows.appendChild(up);
|
|
arrows.appendChild(down);
|
|
arrows.appendChild(left);
|
|
arrows.appendChild(right);
|
|
|
|
grid.appendChild(arrows);
|
|
});
|
|
};
|
|
|
|
Grid.prototype.drawArrow = function({ direction, label, left, top, parentId }) {
|
|
const s = this.squareSideLength / 2;
|
|
|
|
const arrow = document.createElement('div');
|
|
arrow.className = 'content-arrow';
|
|
arrow.innerHTML = label;
|
|
|
|
arrow.style.left = left + 'px';
|
|
arrow.style.top = top + 'px';
|
|
arrow.style.lineHeight = s + 'px';
|
|
arrow.style.height = s + 'px';
|
|
arrow.style.width = s + 'px';
|
|
|
|
arrow.dataset.direction = direction;
|
|
arrow.dataset.parent = parentId;
|
|
|
|
arrow.addEventListener('click', this.onArrowClick.bind(this));
|
|
|
|
return arrow;
|
|
};
|
|
|
|
//===== Obstacle logic
|
|
// i and j are notations for the grid of squares.
|
|
// x and y are notations for absolute pixels.
|
|
//
|
|
// "Obstacles" is a lookup table. Values irrelevant. Keys are obstacles.
|
|
// Edge obstacle key: i1-j1-i2-j2
|
|
// Robot obstacle key: i-j
|
|
|
|
Grid.prototype.updateObstacles = function() {
|
|
this.obstacles = {};
|
|
|
|
this.walls.forEach(edge => { this.obstacles[edge] = true; });
|
|
|
|
this.robots.forEach(({ i, j }) => { this.obstacles[`${i}-${j}`] = true; });
|
|
};
|
|
|
|
Grid.prototype.updateArrowVisibilities = function() {
|
|
this.robots.forEach(({ id, i, j }) => {
|
|
const ijR = `${i + 1}-${j}`;
|
|
const ijL = `${i - 1}-${j}`;
|
|
const ijU = `${i}-${j - 1}`;
|
|
const ijD = `${i}-${j + 1}`;
|
|
|
|
const edgeR = `${i + 1}-${j}-${i + 1}-${j + 1}`;
|
|
const edgeL = `${i}-${j}-${i}-${j + 1}`;
|
|
const edgeU = `${i}-${j}-${i + 1}-${j}`;
|
|
const edgeD = `${i}-${j + 1}-${i + 1}-${j + 1}`;
|
|
|
|
const arrows = document.getElementById(`arrows-${id}`);
|
|
arrows.querySelector("[data-direction='right']").style.display = (this.obstacles[ijR] || this.obstacles[edgeR] || i === (this.squaresPerSide - 1)) ? 'none' : 'block';
|
|
arrows.querySelector("[data-direction='left']").style.display = (this.obstacles[ijL] || this.obstacles[edgeL] || i === 0) ? 'none' : 'block';
|
|
arrows.querySelector("[data-direction='up']").style.display = (this.obstacles[ijU] || this.obstacles[edgeU] || j === 0) ? 'none' : 'block';
|
|
arrows.querySelector("[data-direction='down']").style.display = (this.obstacles[ijD] || this.obstacles[edgeD] || j === (this.squaresPerSide - 1)) ? 'none' : 'block';
|
|
});
|
|
};
|
|
|
|
Grid.prototype.findNextObstacle = function({ direction, i, j }) {
|
|
const sps = this.squaresPerSide;
|
|
const obstacles = this.obstacles;
|
|
|
|
switch (direction) {
|
|
case 'right':
|
|
for (let ii = i + 1; ii < sps; ii++) {
|
|
const edge = `${ii + 1}-${j}-${ii + 1}-${j + 1}`;
|
|
const ij = `${ii + 1}-${j}`;
|
|
|
|
if (obstacles[ij] || obstacles[edge] || ii === (sps - 1)) {
|
|
return { i: ii, j };
|
|
}
|
|
}
|
|
break;
|
|
case 'left':
|
|
for (let ii = i - 1; ii >= 0; ii--) {
|
|
const edge = `${ii}-${j}-${ii}-${j + 1}`;
|
|
const ij = `${ii - 1}-${j}`;
|
|
|
|
if (obstacles[ij] || obstacles[edge] || ii === 0) {
|
|
return { i: ii, j };
|
|
}
|
|
}
|
|
break;
|
|
|
|
case 'up':
|
|
for (let jj = j - 1; jj >= 0; jj--) {
|
|
const edge = `${i}-${jj}-${i + 1}-${jj}`;
|
|
const ij = `${i}-${jj - 1}`;
|
|
|
|
if (obstacles[ij] || obstacles[edge] || jj === 0) {
|
|
return { i, j: jj };
|
|
}
|
|
}
|
|
break;
|
|
|
|
case 'down':
|
|
for (let jj = j + 1; jj < sps; jj++) {
|
|
const edge = `${i}-${jj + 1}-${i + 1}-${jj + 1}`;
|
|
const ij = `${i}-${jj + 1}`;
|
|
|
|
if (obstacles[ij] || obstacles[edge] || jj === (sps - 1)) {
|
|
return { i, j: jj };
|
|
}
|
|
}
|
|
break;
|
|
}
|
|
|
|
throw Error("Could not find next obstacle, no direction found. ", direction, i, j);
|
|
};
|
|
|
|
//===== DOM event handlers
|
|
|
|
Grid.prototype.onArrowClick = function(evt) {
|
|
const parent = evt.currentTarget.parentNode;
|
|
const direction = evt.currentTarget.dataset.direction;
|
|
|
|
const id = parent.dataset.id;
|
|
const i1 = parent.dataset.i;
|
|
const j1 = parent.dataset.j;
|
|
|
|
const { i, j } = this.findNextObstacle({ direction, i: i1 * 1, j: j1 * 1 });
|
|
|
|
const evtMove = new CustomEvent('L-arrow', { detail: { id, i, j } });
|
|
document.dispatchEvent(evtMove);
|
|
};
|
|
|
|
Grid.prototype.onResize = function() {
|
|
const controlBounds = document.getElementById('controls-container').getBoundingClientRect();
|
|
const contentBounds = document.getElementById('content-container').getBoundingClientRect();
|
|
const grid = document.getElementById('content-grid');
|
|
|
|
const h = contentBounds.height - 40;
|
|
const w = contentBounds.width - controlBounds.right - 40;
|
|
const min = Math.min(h, w);
|
|
this.squaresPerSide = 20;
|
|
|
|
// Centering
|
|
const offsetX = (min === h) ? ((w - min) / 2) : 0;
|
|
const offsetY = (min === h) ? 0 : ((h - min) / 2);
|
|
|
|
this.squareSideLength = Math.floor(min / this.squaresPerSide);
|
|
|
|
// Origin (top left)
|
|
const x0 = controlBounds.left + controlBounds.width + 40 + offsetX;
|
|
const y0 = contentBounds.top + 40 + offsetY;
|
|
|
|
grid.style.left = `${x0}px`;
|
|
grid.style.top = `${y0}px`;
|
|
|
|
this.drawSquares();
|
|
this.drawWalls();
|
|
this.drawRobots();
|
|
this.drawArrows();
|
|
|
|
this.updateArrowVisibilities();
|
|
};
|
|
|
|
Grid.prototype.debounce = function(fn, ms) {
|
|
let timer = null;
|
|
|
|
return () => {
|
|
clearTimeout(timer);
|
|
timer = setTimeout(fn, ms);
|
|
}
|
|
};
|
|
|
|
//===== Message handlers
|
|
|
|
Grid.prototype.msgStack = function(evt) {
|
|
const latestPositions = evt.detail.reduce((acc, { id, i, j }) => {
|
|
acc[id] = { id, i, j };
|
|
return acc;
|
|
}, {});
|
|
|
|
this.robots = Object.values(latestPositions);
|
|
|
|
this.drawRobots();
|
|
this.drawArrows();
|
|
|
|
this.updateObstacles();
|
|
this.updateArrowVisibilities();
|
|
};
|
|
|
|
Grid.prototype.msgWalls = function(evt) {
|
|
this.walls = evt.detail.body;
|
|
|
|
this.drawWalls();
|
|
|
|
this.updateObstacles();
|
|
this.updateArrowVisibilities();
|
|
};
|
|
|
|
Grid.prototype.msgRobots = function(evt) {
|
|
// Do not assign position or redraw here: movements are fully managed using the stack.
|
|
this.colors = evt.detail.body.reduce((acc, { color, id }) => {
|
|
acc[id] = color;
|
|
return acc;
|
|
}, {});
|
|
};
|
|
|
|
|
|
//============ THE TRASH BIN OF HISTORY
|
|
// Content.prototype.drawRobot = function({ id, i, j }) {
|
|
// const robot = document.getElementById(`robot-${id}`);
|
|
// const arrows = document.getElementById(`arrows-${id}`);
|
|
|
|
// const { x, y } = this.ijToXy({ i, j });
|
|
// const s = this.squares.sideLength;
|
|
|
|
// robot.style.display = 'block';
|
|
// robot.style.left = x + 'px';
|
|
// robot.style.top = y + 'px';
|
|
// robot.dataset.i = i;
|
|
// robot.dataset.j = j;
|
|
|
|
// this.robots[`${i}-${j}`] = id;
|
|
|
|
// arrows.style.display = 'block';
|
|
// arrows.style.left = (x - s) + 'px';
|
|
// arrows.style.top = (y - s) + 'px';
|
|
// };
|
|
|
|
// Content.prototype.ijToXy = function({ i, j }) {
|
|
// if ((i !== 0 && !i) || (j !== 0 && !j)) {
|
|
// return
|
|
// }
|
|
|
|
// return {
|
|
// x: this.squares.x0 + i * this.squares.sideLength,
|
|
// y: this.squares.y0 + j * this.squares.sideLength
|
|
// }
|
|
// };
|