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
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
|
import Ball from "./Ball";
import { MAP_WIDTH, MAP_HEIGHT, TD_SIZE } from "./consts";
import { sleep } from "./utils";
import { findToRemove, genGraph, genMap } from "./map";
import findPath, { Path } from "./pathfinder";
let selectedBall: Ball | null = null;
let currentPath: Path = [];
let turnIsChanging = false;
const setCurrentPath = (p: any) => {
for (const v of currentPath) {
getTd(v.x!, v.y!).style.backgroundColor = "";
}
currentPath = p;
}
export async function nextTurn() {
turnIsChanging = true;
for (const v of currentPath) {
getTd(v.x!, v.y!).style.backgroundColor = "rgba(50, 50, 50, 0.8)";
}
await sleep(1000);
const toRemove = findToRemove(window.balls);
window.balls = window.balls.filter(ba => !toRemove.find(b => ba.isEqual(b)))
for (const b of toRemove) {
clearTd(b.td)
}
pointsEl.innerText = (parseInt(pointsEl.innerText) + toRemove.length).toString()
setCurrentPath([]);
window.balls.push(...Ball.generateNewBalls(window.balls));
render();
turnIsChanging = false;
}
export function tdOnClick(_e: PointerEvent) {
if (!currentPath.length || turnIsChanging) return;
const std = getTd(currentPath[0].x!, currentPath[0].y!);
clearTd(std)
const ib = window.balls.findIndex(b => b.x === currentPath[0].x && b.y === currentPath[0].y)!
window.balls[ib].x = currentPath[currentPath.length - 1].x!
window.balls[ib].y = currentPath[currentPath.length - 1].y!
selectedBall = null;
render(window.balls);
nextTurn();
}
export function tdOnMouseEnter(_e: PointerEvent, x: number, y: number) {
if (!selectedBall || turnIsChanging) return;
const graph = genGraph(genMap(window.balls), { x: selectedBall.x, y: selectedBall.y }, { x, y });
const path = findPath(graph) ?? [];
setCurrentPath(path);
if (!path.length) return;
for (const v of path) {
getTd(v.x!, v.y!).style.backgroundColor = "rgba(45, 123, 78, 0.6)";
}
}
export function render(balls?: Ball[]) {
balls = balls ? balls : window.balls;
for (const ball of balls) {
const { x, y, color } = ball;
const td = getTd(x, y);
td.firstChild.style.backgroundColor = color;
td.onmousedown = () => {
if (turnIsChanging) return;
const circle = td.firstChild as HTMLDivElement;
setCurrentPath([]);
const smallerCircle = () => {
if (!selectedBall) return;
selectedBall.td.firstChild.style.width = ""
selectedBall.td.firstChild.style.height = ""
}
getGameMapEl().onmouseleave = () => {
if (turnIsChanging) return;
setCurrentPath([]);
smallerCircle();
selectedBall = null;
}
if (circle.style.width === TD_SIZE) {
smallerCircle();
selectedBall = null;
return;
}
smallerCircle();
circle.style.width = TD_SIZE;
circle.style.height = TD_SIZE;
selectedBall = ball;
};
}
}
export function clearTd(td: Td) {
if (td.localName !== "td") {
console.log(td)
throw new Error("Not td passed to clearTd()");
}
td.innerHTML = ""
td.onmousedown = null;
td.appendChild(document.createElement("div"))
}
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.onmouseenter = e => tdOnMouseEnter(e, i, j);
// @ts-expect-error
td.onclick = e => tdOnClick(e);
td.appendChild(document.createElement("div"));
tr.appendChild(td)
}
table.appendChild(tr)
}
}
export function getGameMapEl(): HTMLTableElement {
return document.querySelector('table')!
}
export interface Td extends HTMLTableCellElement {
firstChild: HTMLDivElement;
}
export function getTd(x: number, y: number): Td {
return getGameMapEl().children[x].children[y] as Td;
}
export const pointsEl = document.querySelector("h3 span") as HTMLSpanElement
|
