99 lines
4.0 KiB
JavaScript
99 lines
4.0 KiB
JavaScript
"use strict";
|
|
|
|
function getMembersRow(x, y, w=1236) {
|
|
const r = 1236 / w;
|
|
x *= r;
|
|
y *= r;
|
|
if (x <= 12 || x > 346) return -1;
|
|
const row = Math.floor((y - 113) / 20.5);
|
|
return (row >= 0 && row < 5) ? row : -1;
|
|
}
|
|
|
|
function getDeliveriesRow(x, y, w=1136) {
|
|
const r = 1136 / w;
|
|
x *= r;
|
|
y *= r;
|
|
if (x <= 12 || x > 395) return -1;
|
|
const row = Math.floor((y - 120) / 20.5);
|
|
return (row >= 0 && row < 2) ? row : -1;
|
|
}
|
|
|
|
function getDeliveryPartsRow(x, y, w=1136) {
|
|
const r = 1136 / w;
|
|
x *= r;
|
|
y *= r;
|
|
if (x <= 424 || x > 753) return [-1, -1];
|
|
const win = document.getElementsByClassName("window")[1];
|
|
const idx = Array.prototype.indexOf.call(win.children, win.getElementsByClassName("selected")[0]);
|
|
const len = {1: 2, 2: 2, 3: 3, 4: 3, 5: 3}[idx] ?? 0;
|
|
const row = Math.floor((y - 319) / 20);
|
|
return [{0: 0, 1: 1, 2: 1, 3: 2, 4: 2, 5: 2}[idx], len === 0 ? -1 : (row >= 0 && row < len) ? row : -1];
|
|
}
|
|
|
|
document.addEventListener("DOMContentLoaded", () => {
|
|
const windows = document.getElementsByClassName("window");
|
|
|
|
const w1 = windows[0];
|
|
const canvas1 = w1.getElementsByTagName("canvas")[0];
|
|
const ctx1 = canvas1.getContext("2d");
|
|
w1.addEventListener("mousemove", (evt) => {
|
|
ctx1.clearRect(0, 0, canvas1.width, canvas1.height);
|
|
const row = getMembersRow(evt.offsetX, evt.offsetY, evt.target.clientWidth);
|
|
if (row === -1) return;
|
|
ctx1.fillStyle = "#0078d740";
|
|
ctx1.fillRect(12, 113 + 20.5 * row, 334, 20.5);
|
|
});
|
|
w1.addEventListener("click", (evt) => {
|
|
const row = getMembersRow(evt.offsetX, evt.offsetY, evt.target.clientWidth);
|
|
for (const img of w1.getElementsByTagName("img")) img.classList.remove("selected");
|
|
w1.getElementsByTagName("img")[row + 1].classList.add("selected");
|
|
});
|
|
|
|
const w2 = windows[1];
|
|
const canvas2 = w2.getElementsByTagName("canvas")[0];
|
|
const ctx2 = canvas2.getContext("2d");
|
|
w2.addEventListener("mousemove", (evt) => {
|
|
ctx2.clearRect(0, 0, canvas2.width, canvas2.height);
|
|
const row = getDeliveriesRow(evt.offsetX, evt.offsetY, evt.target.clientWidth);
|
|
const partRow = getDeliveryPartsRow(evt.offsetX, evt.offsetY, evt.target.clientWidth)[1];
|
|
if (row !== -1) {
|
|
ctx2.fillStyle = "#0078d740";
|
|
ctx2.fillRect(12, 120 + 20.5 * row, 383, 20.5);
|
|
} else if (partRow !== -1) {
|
|
ctx2.fillStyle = "#0078d740";
|
|
ctx2.fillRect(424, 319 + 20 * partRow, 329, 20);
|
|
}
|
|
});
|
|
w2.addEventListener("click", (evt) => {
|
|
const row = getDeliveriesRow(evt.offsetX, evt.offsetY, evt.target.clientWidth);
|
|
const partRow = getDeliveryPartsRow(evt.offsetX, evt.offsetY, evt.target.clientWidth);
|
|
if (row !== -1 || partRow[1] !== -1) {
|
|
const idx = row !== -1 ? row * 2 + 1 : (partRow[0] - 1) * 2 + partRow[1] + 1;
|
|
for (const img of w2.getElementsByTagName("img")) img.classList.remove("selected");
|
|
w2.getElementsByTagName("img")[idx].classList.add("selected");
|
|
} else {
|
|
for (const img of w2.getElementsByTagName("img")) img.classList.remove("selected");
|
|
w2.getElementsByTagName("img")[0].classList.add("selected");
|
|
}
|
|
});
|
|
});
|
|
|
|
document.addEventListener("keydown", (evt) => {
|
|
const act = document.activeElement;
|
|
if (!act.classList.contains("window")) return;
|
|
let el = null;
|
|
if (evt.key === "ArrowUp" || evt.key === "ArrowLeft") {
|
|
el = act.getElementsByClassName("selected")[0].previousElementSibling;
|
|
evt.stopImmediatePropagation();
|
|
evt.preventDefault();
|
|
} else if (evt.key === "ArrowDown" || evt.key === "ArrowRight") {
|
|
el = act.getElementsByClassName("selected")[0].nextElementSibling;
|
|
evt.stopImmediatePropagation();
|
|
evt.preventDefault();
|
|
}
|
|
if (el && el.tagName === "IMG") {
|
|
for (const img of act.getElementsByTagName("img")) img.classList.remove("selected");
|
|
el.classList.add("selected");
|
|
}
|
|
});
|