35 lines
1.0 KiB
TypeScript
35 lines
1.0 KiB
TypeScript
const knownDirections = [2, 4, 8, 16, 32, 64, 128, 256, 512, 1024];
|
|
|
|
export async function displayLane(lane: Lane) {
|
|
const laneDiv = document.createElement("div");
|
|
laneDiv.className = "lane";
|
|
// Fetch all direction images from the bitmask
|
|
for (let i = 0; i < 10; i++) {
|
|
if (lane.directions & (1 << i)) {
|
|
const bit = 1 << i;
|
|
// Check if the bit is in the known directions
|
|
let img = "";
|
|
if (knownDirections.includes(bit)) {
|
|
img = await fetch(`/img/lanes/${bit}.svg`).then(res => res.text());
|
|
} else {
|
|
img = `<span>${bit}</span>`;
|
|
}
|
|
const isValid = lane.valid & bit;
|
|
const isActive = lane.active & bit;
|
|
// Create a DOM element
|
|
const laneImage = document.createElement("div");
|
|
laneImage.className = "lane-image";
|
|
laneImage.innerHTML = img;
|
|
// Add the class to the laneDiv
|
|
if (isValid) {
|
|
laneImage.classList.add("valid");
|
|
}
|
|
if (isActive) {
|
|
laneImage.classList.add("active");
|
|
}
|
|
// Add the lane image to the lane div
|
|
laneDiv.appendChild(laneImage);
|
|
}
|
|
}
|
|
return laneDiv;
|
|
} |