blob: f0a0e73379eadf183fd55aaa93c4142560b978f2 (
plain) (
blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
|
import Ball from "./Ball";
import { MAP_WIDTH, MAP_HEIGHT, TD_SIZE, CIRCLE_SIZE } from "./consts";
let selectedBall: Ball | null = null;
let smallerCircle = () => { };
export function tdOnclick(el: PointerEvent) {
if (!selectedBall) return;
// Calc which x, y is clicked
// pass to shortest path
// ui
}
export function render(balls: Ball[]) {
for (const ball of balls) {
const { x, y, color } = ball;
const td = getTd(x, y);
(td.firstChild as HTMLDivElement).style.backgroundColor = color;
td.onclick = () => {
const circle = td.firstChild as HTMLDivElement;
if (circle.style.width === TD_SIZE) {
smallerCircle();
selectedBall = null;
return;
}
smallerCircle();
circle.style.width = TD_SIZE;
circle.style.height = TD_SIZE;
selectedBall = ball;
smallerCircle = () => {
circle.style.width = CIRCLE_SIZE;
circle.style.height = CIRCLE_SIZE;
}
};
}
}
// setInterval(() => console.log(selectedBall), 1000);
export function genGameTable() {
const table = getGameMapEl();
for (let i = 0; i < MAP_HEIGHT; i++) {
const tr = document.createElement("tr")
for (let j = 0; j < MAP_WIDTH; j++) {
const td = document.createElement("td")
//@ts-expect-error
td.onclick = tdOnclick;
td.appendChild(document.createElement("div"));
tr.appendChild(td)
}
table.appendChild(tr)
}
}
export function getGameMapEl(): HTMLTableElement {
return document.querySelector('table')!
}
export function getTd(x: number, y: number): HTMLTableDataCellElement {
return getGameMapEl().children[x].children[y] as HTMLTableDataCellElement;
}
|
