-
Notifications
You must be signed in to change notification settings - Fork 0
/
app.js
339 lines (313 loc) · 38.2 KB
/
app.js
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
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
const gameboard = document.querySelector("#gameboard");
const playerDisplay = document.querySelector("#player");
const infoDisplayer = document.querySelector("#info-display");
const width = 8;
let playerGo = 'black';
playerDisplay.textContent = 'blacks';
const startPieces = [
rook, knight, bishop, queen, king, bishop, knight, rook,
pawn, pawn, pawn, pawn, pawn, pawn, pawn, pawn,
'', '', '', '', '', '', '', '',
'', '', '', '', '', '', '', '',
'', '', '', '', '', '', '', '',
'', '', '', '', '', '', '', '',
pawn, pawn, pawn, pawn, pawn, pawn, pawn, pawn,
rook, knight, bishop, queen, king, bishop, knight, rook,
];
function createBoard() {
startPieces.forEach((piece, i) => {
const square = document.createElement('div');
square.classList.add('square');
square.innerHTML = piece;
square.firstChild?.setAttribute('draggable', true);
square.setAttribute('square-id', i);
const row = Math.floor((63 - i) / 8) + 1;
if (row % 2 == 0) {
square.classList.add(i % 2 == 0 ? "beige" : "brown");
} else {
square.classList.add(i % 2 == 0 ? "brown" : "beige");
}
gameboard.append(square);
if (i <= 15) {
square.firstChild.firstChild.classList.add("black");
}
if (i >= 48) {
square.firstChild.firstChild.classList.add("white");
}
})
}
createBoard();
const allSquares = document.querySelectorAll("#gameboard .square");
allSquares.forEach(square => {
square.addEventListener('dragstart', dragStart);
square.addEventListener('dragover', dragOver);
square.addEventListener('drop', dragDrop);
});
let startPositionId;
let draggedElement;
function dragStart(e) {
startPositionId = e.target?.parentNode.getAttribute("square-id");
draggedElement = e.target;
}
function dragOver(e) {
e.preventDefault();
}
function dragDrop(e) {
e.stopPropagation();
const correctGO = draggedElement.firstChild.classList.contains(playerGo);
const taken = e.target.classList.contains('piece');
const valid = checkIfValid(e.target);
const opponentGo = playerGo === 'white' ? 'black' : 'white';
const takenByOpponent = e.target.firstChild?.classList.contains(opponentGo);
if (correctGO) {
//must check this firts
if (takenByOpponent && valid) {
e.target.parentNode.append(draggedElement);
e.target.remove();
checkForWin();
changePlayer();
return;
}
//then check this
if (taken && !takenByOpponent) {
infoDisplayer.textContent = 'You cannot go here!';
setTimeout(() => infoDisplayer.textContent = '', 2000);
return;
}
if (valid) {
e.target.append(draggedElement);
checkForWin();
changePlayer();
return;
}
}
}
function changePlayer() {
if (playerGo === 'black') {
reverseIds();
playerGo = 'white';
playerDisplay.textContent = 'white';
} else {
revertIds();
playerGo = 'black';
playerDisplay.textContent = 'black';
}
}
function reverseIds() {
const allSquares = document.querySelectorAll(".square");
allSquares.forEach(
(square, i) => square.setAttribute("square-id", ((width * width) - 1) - i)
);
}
function revertIds() {
const allSquares = document.querySelectorAll(".square");
allSquares.forEach(
(square, i) => square.setAttribute("square-id", i)
);
}
function checkIfValid(target) {
const targetId = Number(target.getAttribute('square-id')) || Number(target.parentNode.getAttribute('square-id'));
const startId = Number(startPositionId);
const piece = draggedElement.id;
// console.log("targetId", targetId);
// console.log("startID", startId);
// console.log(piece);
switch (piece) {
case 'pawn':
const starterRow = [8, 9, 10, 11, 12, 13, 14, 15];
if (
starterRow.includes(startId) && ((startId + width * 2) === targetId) ||
startId + width === targetId ||
startId + width - 1 === targetId && document.querySelector(`[square-id="${startId + width - 1}"]`).firstChild ||
startId + width + 1 === targetId && document.querySelector(`[square-id="${startId + width + 1}"]`).firstChild
) {
return true;
}
break;
case 'knight':
if (
startId + width * 2 - 1 === targetId ||
startId + width * 2 + 1 === targetId ||
startId + width - 2 === targetId ||
startId + width + 2 === targetId ||
startId - width * 2 - 1 === targetId ||
startId - width * 2 + 1 === targetId ||
startId - width - 2 === targetId ||
startId - width + 2 === targetId
) {
return true;
}
break;
case 'bishop':
if (
(startId + width + 1 === targetId) ||
(startId + width * 2 + 2) === targetId && !(document.querySelector(`[square-id="${startId + width + 1}"]`).firstChild) ||
(startId + width * 3 + 3) === targetId && !(document.querySelector(`[square-id="${startId + width + 1}"]`).firstChild) && !(document.querySelector(`[square-id="${startId + (width * 2) + 2}"]`).firstChild) ||
(startId + width * 4 + 4) === targetId && !(document.querySelector(`[square-id="${startId + width + 1}"]`).firstChild) && !(document.querySelector(`[square-id="${startId + (width * 2) + 2}"]`).firstChild) && !(document.querySelector(`[square-id="${startId + width * 3 + 3}"]`).firstChild) ||
(startId + width * 5 + 5) === targetId && !(document.querySelector(`[square-id="${startId + width + 1}"]`).firstChild) && !(document.querySelector(`[square-id="${startId + (width * 2) + 2}"]`).firstChild) && !(document.querySelector(`[square-id="${startId + width * 3 + 3}"]`).firstChild) && !(document.querySelector(`[square-id="${startId + width * 4 + 4}"]`).firstChild) ||
(startId + width * 6 + 6) === targetId && !(document.querySelector(`[square-id="${startId + width + 1}"]`).firstChild) && !(document.querySelector(`[square-id="${startId + (width * 2) + 2}"]`).firstChild) && !(document.querySelector(`[square-id="${startId + width * 3 + 3}"]`).firstChild) && !(document.querySelector(`[square-id="${startId + width * 4 + 4}"]`).firstChild) && !(document.querySelector(`[square-id="${startId + width * 5 + 5}"]`).firstChild) ||
(startId + width * 7 + 7) === targetId && !(document.querySelector(`[square-id="${startId + width + 1}"]`).firstChild) && !(document.querySelector(`[square-id="${startId + (width * 2) + 2}"]`).firstChild) && !(document.querySelector(`[square-id="${startId + width * 3 + 3}"]`).firstChild) && !(document.querySelector(`[square-id="${startId + width * 4 + 4}"]`).firstChild) && !(document.querySelector(`[square-id="${startId + width * 5 + 5}"]`).firstChild) && !(document.querySelector(`[square-id="${startId + width * 6 + 6}"]`).firstChild) ||
// // --
(startId - width - 1 === targetId) ||
(startId - width * 2 - 2) === targetId && !(document.querySelector(`[square-id="${startId - width - 1}"]`)?.firstChild) ||
(startId - width * 3 - 3) === targetId && !(document.querySelector(`[square-id="${startId - width - 1}"]`).firstChild) && !(document.querySelector(`[square-id="${startId - width * 2 - 2}"]`).firstChild) ||
(startId - width * 4 - 4) === targetId && !(document.querySelector(`[square-id="${startId - width - 1}"]`).firstChild) && !(document.querySelector(`[square-id="${startId - width * 2 - 2}"]`).firstChild) && !(document.querySelector(`[square-id="${startId - width * 3 - 3}"]`).firstChild) ||
(startId - width * 5 - 5) === targetId && !(document.querySelector(`[square-id="${startId - width - 1}"]`).firstChild) && !(document.querySelector(`[square-id="${startId - width * 2 - 2}"]`).firstChild) && !(document.querySelector(`[square-id="${startId - width * 3 - 3}"]`).firstChild) && !(document.querySelector(`[square-id="${startId - width * 4 - 4}"]`).firstChild) ||
(startId - width * 6 - 6) === targetId && !(document.querySelector(`[square-id="${startId - width - 1}"]`).firstChild) && !(document.querySelector(`[square-id="${startId - width * 2 - 2}"]`).firstChild) && !(document.querySelector(`[square-id="${startId - width * 3 - 3}"]`).firstChild) && !(document.querySelector(`[square-id="${startId - width * 4 - 4}"]`).firstChild) && !(document.querySelector(`[square-id="${startId - width * 5 - 5}"]`).firstChild) ||
(startId - width * 7 - 7) === targetId && !(document.querySelector(`[square-id="${startId - width - 1}"]`).firstChild) && !(document.querySelector(`[square-id="${startId - width * 2 - 2}"]`).firstChild) && !(document.querySelector(`[square-id="${startId - width * 3 - 3}"]`).firstChild) && !(document.querySelector(`[square-id="${startId - width * 4 - 4}"]`).firstChild) && !(document.querySelector(`[square-id="${startId - width * 5 - 5}"]`).firstChild) && !(document.querySelector(`[square-id="${startId - width * 6 - 6}"]`).firstChild) ||
// // --
(startId - width + 1 === targetId) ||
(startId - width * 2 + 2) === targetId && !(document.querySelector(`[square-id="${startId - width + 1}"]`)?.firstChild) ||
(startId - width * 3 + 3) === targetId && !(document.querySelector(`[square-id="${startId - width + 1}"]`).firstChild) && !(document.querySelector(`[square-id="${startId - width * 2 + 2}"]`).firstChild) ||
(startId - width * 4 + 4) === targetId && !(document.querySelector(`[square-id="${startId - width + 1}"]`).firstChild) && !(document.querySelector(`[square-id="${startId - width * 2 + 2}"]`).firstChild) && !(document.querySelector(`[square-id="${startId - width * 3 + 3}"]`).firstChild) ||
(startId - width * 5 + 5) === targetId && !(document.querySelector(`[square-id="${startId - width + 1}"]`).firstChild) && !(document.querySelector(`[square-id="${startId - width * 2 + 2}"]`).firstChild) && !(document.querySelector(`[square-id="${startId - width * 3 + 3}"]`).firstChild) && !(document.querySelector(`[square-id="${startId - width * 4 + 4}"]`).firstChild) ||
(startId - width * 6 + 6) === targetId && !(document.querySelector(`[square-id="${startId - width + 1}"]`).firstChild) && !(document.querySelector(`[square-id="${startId - width * 2 + 2}"]`).firstChild) && !(document.querySelector(`[square-id="${startId - width * 3 + 3}"]`).firstChild) && !(document.querySelector(`[square-id="${startId - width * 4 + 4}"]`).firstChild) && !(document.querySelector(`[square-id="${startId - width * 5 + 5}"]`).firstChild) ||
(startId - width * 7 + 7) === targetId && !(document.querySelector(`[square-id="${startId - width + 1}"]`).firstChild) && !(document.querySelector(`[square-id="${startId - width * 2 + 2}"]`).firstChild) && !(document.querySelector(`[square-id="${startId - width * 3 + 3}"]`).firstChild) && !(document.querySelector(`[square-id="${startId - width * 4 + 4}"]`).firstChild) && !(document.querySelector(`[square-id="${startId - width * 5 + 5}"]`).firstChild) && !(document.querySelector(`[square-id="${startId - width * 6 + 6}"]`).firstChild) ||
// // --
(startId + width - 1 === targetId) ||
(startId + width * 2 - 2) === targetId && !(document.querySelector(`[square-id="${startId + width - 1}"]`)?.firstChild) ||
(startId + width * 3 - 3) === targetId && !(document.querySelector(`[square-id="${startId + width - 1}"]`).firstChild) && !(document.querySelector(`[square-id="${startId + width * 2 - 2}"]`).firstChild) ||
(startId + width * 4 - 4) === targetId && !(document.querySelector(`[square-id="${startId + width - 1}"]`).firstChild) && !(document.querySelector(`[square-id="${startId + width * 2 - 2}"]`).firstChild) && !(document.querySelector(`[square-id="${startId + width * 3 - 3}"]`).firstChild) ||
(startId + width * 5 - 5) === targetId && !(document.querySelector(`[square-id="${startId + width - 1}"]`).firstChild) && !(document.querySelector(`[square-id="${startId + width * 2 - 2}"]`).firstChild) && !(document.querySelector(`[square-id="${startId + width * 3 - 3}"]`).firstChild) && !(document.querySelector(`[square-id="${startId + width * 4 - 4}"]`).firstChild) ||
(startId + width * 6 - 6) === targetId && !(document.querySelector(`[square-id="${startId + width - 1}"]`).firstChild) && !(document.querySelector(`[square-id="${startId + width * 2 - 2}"]`).firstChild) && !(document.querySelector(`[square-id="${startId + width * 3 - 3}"]`).firstChild) && !(document.querySelector(`[square-id="${startId + width * 4 - 4}"]`).firstChild) && !(document.querySelector(`[square-id="${startId + width * 5 - 5}"]`).firstChild) ||
(startId + width * 7 - 7) === targetId && !(document.querySelector(`[square-id="${startId + width - 1}"]`).firstChild) && !(document.querySelector(`[square-id="${startId + width * 2 - 2}"]`).firstChild) && !(document.querySelector(`[square-id="${startId + width * 3 - 3}"]`).firstChild) && !(document.querySelector(`[square-id="${startId + width * 4 - 4}"]`).firstChild) && !(document.querySelector(`[square-id="${startId + width * 5 - 5}"]`).firstChild) && !(document.querySelector(`[square-id="${startId + width * 6 - 6}"]`).firstChild)
) {
return true;
}
break;
case 'rook':
if (
startId + width === targetId ||
startId + width * 2 === targetId && !document.querySelector(`[square-id="${startId + width}"]`).firstChild ||
startId + width * 3 === targetId && !document.querySelector(`[square-id="${startId + width}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 2}"]`).firstChild ||
startId + width * 4 === targetId && !document.querySelector(`[square-id="${startId + width}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 2}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 3}"]`).firstChild ||
startId + width * 5 === targetId && !document.querySelector(`[square-id="${startId + width}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 2}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 3}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 4}"]`).firstChild ||
startId + width * 6 === targetId && !document.querySelector(`[square-id="${startId + width}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 2}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 3}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 4}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 5}"]`).firstChild ||
startId + width * 7 === targetId && !document.querySelector(`[square-id="${startId + width}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 2}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 3}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 4}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 5}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 6}"]`).firstChild ||
// --
startId - width === targetId ||
startId - width * 2 === targetId && !document.querySelector(`[square-id="${startId - width}"]`).firstChild ||
startId - width * 3 === targetId && !document.querySelector(`[square-id="${startId - width}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 2}"]`).firstChild ||
startId - width * 4 === targetId && !document.querySelector(`[square-id="${startId - width}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 2}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 3}"]`).firstChild ||
startId - width * 5 === targetId && !document.querySelector(`[square-id="${startId - width}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 2}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 3}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 4}"]`).firstChild ||
startId - width * 6 === targetId && !document.querySelector(`[square-id="${startId - width}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 2}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 3}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 4}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 5}"]`).firstChild ||
startId - width * 7 === targetId && !document.querySelector(`[square-id="${startId - width}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 2}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 3}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 4}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 5}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 6}"]`).firstChild ||
// --
startId + 1 === targetId ||
startId + 2 === targetId && !document.querySelector(`[square-id="${startId + 1}"]`).firstChild ||
startId + 3 === targetId && !document.querySelector(`[square-id="${startId + 1}"]`).firstChild && !document.querySelector(`[square-id="${startId + 2}"]`).firstChild ||
startId + 4 === targetId && !document.querySelector(`[square-id="${startId + 1}"]`).firstChild && !document.querySelector(`[square-id="${startId + 2}"]`).firstChild && !document.querySelector(`[square-id="${startId + 3}"]`).firstChild ||
startId + 5 === targetId && !document.querySelector(`[square-id="${startId + 1}"]`).firstChild && !document.querySelector(`[square-id="${startId + 2}"]`).firstChild && !document.querySelector(`[square-id="${startId + 3}"]`).firstChild && !document.querySelector(`[square-id="${startId + 4}"]`).firstChild ||
startId + 6 === targetId && !document.querySelector(`[square-id="${startId + 1}"]`).firstChild && !document.querySelector(`[square-id="${startId + 2}"]`).firstChild && !document.querySelector(`[square-id="${startId + 3}"]`).firstChild && !document.querySelector(`[square-id="${startId + 4}"]`).firstChild && !document.querySelector(`[square-id="${startId + 5}"]`).firstChild ||
startId + 7 === targetId && !document.querySelector(`[square-id="${startId + 1}"]`).firstChild && !document.querySelector(`[square-id="${startId + 2}"]`).firstChild && !document.querySelector(`[square-id="${startId + 3}"]`).firstChild && !document.querySelector(`[square-id="${startId + 4}"]`).firstChild && !document.querySelector(`[square-id="${startId + 5}"]`).firstChild && !document.querySelector(`[square-id="${startId + 6}"]`).firstChild ||
// --
startId - 1 === targetId ||
startId - 2 === targetId && !document.querySelector(`[square-id="${startId - 1}"]`).firstChild ||
startId - 3 === targetId && !document.querySelector(`[square-id="${startId - 1}"]`).firstChild && !document.querySelector(`[square-id="${startId - 2}"]`).firstChild ||
startId - 4 === targetId && !document.querySelector(`[square-id="${startId - 1}"]`).firstChild && !document.querySelector(`[square-id="${startId - 2}"]`).firstChild && !document.querySelector(`[square-id="${startId - 3}"]`).firstChild ||
startId - 5 === targetId && !document.querySelector(`[square-id="${startId - 1}"]`).firstChild && !document.querySelector(`[square-id="${startId - 2}"]`).firstChild && !document.querySelector(`[square-id="${startId - 3}"]`).firstChild && !document.querySelector(`[square-id="${startId - 4}"]`).firstChild ||
startId - 6 === targetId && !document.querySelector(`[square-id="${startId - 1}"]`).firstChild && !document.querySelector(`[square-id="${startId - 2}"]`).firstChild && !document.querySelector(`[square-id="${startId - 3}"]`).firstChild && !document.querySelector(`[square-id="${startId - 4}"]`).firstChild && !document.querySelector(`[square-id="${startId - 5}"]`).firstChild ||
startId - 7 === targetId && !document.querySelector(`[square-id="${startId - 1}"]`).firstChild && !document.querySelector(`[square-id="${startId - 2}"]`).firstChild && !document.querySelector(`[square-id="${startId - 3}"]`).firstChild && !document.querySelector(`[square-id="${startId - 4}"]`).firstChild && !document.querySelector(`[square-id="${startId - 5}"]`).firstChild && !document.querySelector(`[square-id="${startId - 6}"]`).firstChild
) {
return true;
}
break;
case 'queen':
if (
(startId + width + 1 === targetId) ||
(startId + width * 2 + 2) === targetId && !(document.querySelector(`[square-id="${startId + width + 1}"]`).firstChild) ||
(startId + width * 3 + 3) === targetId && !(document.querySelector(`[square-id="${startId + width + 1}"]`).firstChild) && !(document.querySelector(`[square-id="${startId + (width * 2) + 2}"]`).firstChild) ||
(startId + width * 4 + 4) === targetId && !(document.querySelector(`[square-id="${startId + width + 1}"]`).firstChild) && !(document.querySelector(`[square-id="${startId + (width * 2) + 2}"]`).firstChild) && !(document.querySelector(`[square-id="${startId + width * 3 + 3}"]`).firstChild) ||
(startId + width * 5 + 5) === targetId && !(document.querySelector(`[square-id="${startId + width + 1}"]`).firstChild) && !(document.querySelector(`[square-id="${startId + (width * 2) + 2}"]`).firstChild) && !(document.querySelector(`[square-id="${startId + width * 3 + 3}"]`).firstChild) && !(document.querySelector(`[square-id="${startId + width * 4 + 4}"]`).firstChild) ||
(startId + width * 6 + 6) === targetId && !(document.querySelector(`[square-id="${startId + width + 1}"]`).firstChild) && !(document.querySelector(`[square-id="${startId + (width * 2) + 2}"]`).firstChild) && !(document.querySelector(`[square-id="${startId + width * 3 + 3}"]`).firstChild) && !(document.querySelector(`[square-id="${startId + width * 4 + 4}"]`).firstChild) && !(document.querySelector(`[square-id="${startId + width * 5 + 5}"]`).firstChild) ||
(startId + width * 7 + 7) === targetId && !(document.querySelector(`[square-id="${startId + width + 1}"]`).firstChild) && !(document.querySelector(`[square-id="${startId + (width * 2) + 2}"]`).firstChild) && !(document.querySelector(`[square-id="${startId + width * 3 + 3}"]`).firstChild) && !(document.querySelector(`[square-id="${startId + width * 4 + 4}"]`).firstChild) && !(document.querySelector(`[square-id="${startId + width * 5 + 5}"]`).firstChild) && !(document.querySelector(`[square-id="${startId + width * 6 + 6}"]`).firstChild) ||
// --
(startId - width - 1 === targetId) ||
(startId - width * 2 - 2) === targetId && !(document.querySelector(`[square-id="${startId - width - 1}"]`)?.firstChild) ||
(startId - width * 3 - 3) === targetId && !(document.querySelector(`[square-id="${startId - width - 1}"]`).firstChild) && !(document.querySelector(`[square-id="${startId - width * 2 - 2}"]`).firstChild) ||
(startId - width * 4 - 4) === targetId && !(document.querySelector(`[square-id="${startId - width - 1}"]`).firstChild) && !(document.querySelector(`[square-id="${startId - width * 2 - 2}"]`).firstChild) && !(document.querySelector(`[square-id="${startId - width * 3 - 3}"]`).firstChild) ||
(startId - width * 5 - 5) === targetId && !(document.querySelector(`[square-id="${startId - width - 1}"]`).firstChild) && !(document.querySelector(`[square-id="${startId - width * 2 - 2}"]`).firstChild) && !(document.querySelector(`[square-id="${startId - width * 3 - 3}"]`).firstChild) && !(document.querySelector(`[square-id="${startId - width * 4 - 4}"]`).firstChild) ||
(startId - width * 6 - 6) === targetId && !(document.querySelector(`[square-id="${startId - width - 1}"]`).firstChild) && !(document.querySelector(`[square-id="${startId - width * 2 - 2}"]`).firstChild) && !(document.querySelector(`[square-id="${startId - width * 3 - 3}"]`).firstChild) && !(document.querySelector(`[square-id="${startId - width * 4 - 4}"]`).firstChild) && !(document.querySelector(`[square-id="${startId - width * 5 - 5}"]`).firstChild) ||
(startId - width * 7 - 7) === targetId && !(document.querySelector(`[square-id="${startId - width - 1}"]`).firstChild) && !(document.querySelector(`[square-id="${startId - width * 2 - 2}"]`).firstChild) && !(document.querySelector(`[square-id="${startId - width * 3 - 3}"]`).firstChild) && !(document.querySelector(`[square-id="${startId - width * 4 - 4}"]`).firstChild) && !(document.querySelector(`[square-id="${startId - width * 5 - 5}"]`).firstChild) && !(document.querySelector(`[square-id="${startId - width * 6 - 6}"]`).firstChild) ||
// // --
(startId - width + 1 === targetId) ||
(startId - width * 2 + 2) === targetId && !(document.querySelector(`[square-id="${startId - width + 1}"]`)?.firstChild) ||
(startId - width * 3 + 3) === targetId && !(document.querySelector(`[square-id="${startId - width + 1}"]`).firstChild) && !(document.querySelector(`[square-id="${startId - width * 2 + 2}"]`).firstChild) ||
(startId - width * 4 + 4) === targetId && !(document.querySelector(`[square-id="${startId - width + 1}"]`).firstChild) && !(document.querySelector(`[square-id="${startId - width * 2 + 2}"]`).firstChild) && !(document.querySelector(`[square-id="${startId - width * 3 + 3}"]`).firstChild) ||
(startId - width * 5 + 5) === targetId && !(document.querySelector(`[square-id="${startId - width + 1}"]`).firstChild) && !(document.querySelector(`[square-id="${startId - width * 2 + 2}"]`).firstChild) && !(document.querySelector(`[square-id="${startId - width * 3 + 3}"]`).firstChild) && !(document.querySelector(`[square-id="${startId - width * 4 + 4}"]`).firstChild) ||
(startId - width * 6 + 6) === targetId && !(document.querySelector(`[square-id="${startId - width + 1}"]`).firstChild) && !(document.querySelector(`[square-id="${startId - width * 2 + 2}"]`).firstChild) && !(document.querySelector(`[square-id="${startId - width * 3 + 3}"]`).firstChild) && !(document.querySelector(`[square-id="${startId - width * 4 + 4}"]`).firstChild) && !(document.querySelector(`[square-id="${startId - width * 5 + 5}"]`).firstChild) ||
(startId - width * 7 + 7) === targetId && !(document.querySelector(`[square-id="${startId - width + 1}"]`).firstChild) && !(document.querySelector(`[square-id="${startId - width * 2 + 2}"]`).firstChild) && !(document.querySelector(`[square-id="${startId - width * 3 + 3}"]`).firstChild) && !(document.querySelector(`[square-id="${startId - width * 4 + 4}"]`).firstChild) && !(document.querySelector(`[square-id="${startId - width * 5 + 5}"]`).firstChild) && !(document.querySelector(`[square-id="${startId - width * 6 + 6}"]`).firstChild) ||
// // --
(startId + width - 1 === targetId) ||
(startId + width * 2 - 2) === targetId && !(document.querySelector(`[square-id="${startId + width - 1}"]`)?.firstChild) ||
(startId + width * 3 - 3) === targetId && !(document.querySelector(`[square-id="${startId + width - 1}"]`).firstChild) && !(document.querySelector(`[square-id="${startId + width * 2 - 2}"]`).firstChild) ||
(startId + width * 4 - 4) === targetId && !(document.querySelector(`[square-id="${startId + width - 1}"]`).firstChild) && !(document.querySelector(`[square-id="${startId + width * 2 - 2}"]`).firstChild) && !(document.querySelector(`[square-id="${startId + width * 3 - 3}"]`).firstChild) ||
(startId + width * 5 - 5) === targetId && !(document.querySelector(`[square-id="${startId + width - 1}"]`).firstChild) && !(document.querySelector(`[square-id="${startId + width * 2 - 2}"]`).firstChild) && !(document.querySelector(`[square-id="${startId + width * 3 - 3}"]`).firstChild) && !(document.querySelector(`[square-id="${startId + width * 4 - 4}"]`).firstChild) ||
(startId + width * 6 - 6) === targetId && !(document.querySelector(`[square-id="${startId + width - 1}"]`).firstChild) && !(document.querySelector(`[square-id="${startId + width * 2 - 2}"]`).firstChild) && !(document.querySelector(`[square-id="${startId + width * 3 - 3}"]`).firstChild) && !(document.querySelector(`[square-id="${startId + width * 4 - 4}"]`).firstChild) && !(document.querySelector(`[square-id="${startId + width * 5 - 5}"]`).firstChild) ||
(startId + width * 7 - 7) === targetId && !(document.querySelector(`[square-id="${startId + width - 1}"]`).firstChild) && !(document.querySelector(`[square-id="${startId + width * 2 - 2}"]`).firstChild) && !(document.querySelector(`[square-id="${startId + width * 3 - 3}"]`).firstChild) && !(document.querySelector(`[square-id="${startId + width * 4 - 4}"]`).firstChild) && !(document.querySelector(`[square-id="${startId + width * 5 - 5}"]`).firstChild) && !(document.querySelector(`[square-id="${startId + width * 6 - 6}"]`).firstChild) ||
// --
startId + width === targetId ||
startId + width * 2 === targetId && !document.querySelector(`[square-id="${startId + width}"]`).firstChild ||
startId + width * 3 === targetId && !document.querySelector(`[square-id="${startId + width}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 2}"]`).firstChild ||
startId + width * 4 === targetId && !document.querySelector(`[square-id="${startId + width}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 2}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 3}"]`).firstChild ||
startId + width * 5 === targetId && !document.querySelector(`[square-id="${startId + width}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 2}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 3}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 4}"]`).firstChild ||
startId + width * 6 === targetId && !document.querySelector(`[square-id="${startId + width}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 2}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 3}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 4}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 5}"]`).firstChild ||
startId + width * 7 === targetId && !document.querySelector(`[square-id="${startId + width}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 2}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 3}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 4}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 5}"]`).firstChild && !document.querySelector(`[square-id="${startId + width * 6}"]`).firstChild ||
// --
startId - width === targetId ||
startId - width * 2 === targetId && !document.querySelector(`[square-id="${startId - width}"]`).firstChild ||
startId - width * 3 === targetId && !document.querySelector(`[square-id="${startId - width}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 2}"]`).firstChild ||
startId - width * 4 === targetId && !document.querySelector(`[square-id="${startId - width}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 2}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 3}"]`).firstChild ||
startId - width * 5 === targetId && !document.querySelector(`[square-id="${startId - width}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 2}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 3}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 4}"]`).firstChild ||
startId - width * 6 === targetId && !document.querySelector(`[square-id="${startId - width}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 2}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 3}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 4}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 5}"]`).firstChild ||
startId - width * 7 === targetId && !document.querySelector(`[square-id="${startId - width}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 2}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 3}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 4}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 5}"]`).firstChild && !document.querySelector(`[square-id="${startId - width * 6}"]`).firstChild ||
// --
startId + 1 === targetId ||
startId + 2 === targetId && !document.querySelector(`[square-id="${startId + 1}"]`).firstChild ||
startId + 3 === targetId && !document.querySelector(`[square-id="${startId + 1}"]`).firstChild && !document.querySelector(`[square-id="${startId + 2}"]`).firstChild ||
startId + 4 === targetId && !document.querySelector(`[square-id="${startId + 1}"]`).firstChild && !document.querySelector(`[square-id="${startId + 2}"]`).firstChild && !document.querySelector(`[square-id="${startId + 3}"]`).firstChild ||
startId + 5 === targetId && !document.querySelector(`[square-id="${startId + 1}"]`).firstChild && !document.querySelector(`[square-id="${startId + 2}"]`).firstChild && !document.querySelector(`[square-id="${startId + 3}"]`).firstChild && !document.querySelector(`[square-id="${startId + 4}"]`).firstChild ||
startId + 6 === targetId && !document.querySelector(`[square-id="${startId + 1}"]`).firstChild && !document.querySelector(`[square-id="${startId + 2}"]`).firstChild && !document.querySelector(`[square-id="${startId + 3}"]`).firstChild && !document.querySelector(`[square-id="${startId + 4}"]`).firstChild && !document.querySelector(`[square-id="${startId + 5}"]`).firstChild ||
startId + 7 === targetId && !document.querySelector(`[square-id="${startId + 1}"]`).firstChild && !document.querySelector(`[square-id="${startId + 2}"]`).firstChild && !document.querySelector(`[square-id="${startId + 3}"]`).firstChild && !document.querySelector(`[square-id="${startId + 4}"]`).firstChild && !document.querySelector(`[square-id="${startId + 5}"]`).firstChild && !document.querySelector(`[square-id="${startId + 6}"]`).firstChild ||
// --
startId - 1 === targetId ||
startId - 2 === targetId && !document.querySelector(`[square-id="${startId - 1}"]`).firstChild ||
startId - 3 === targetId && !document.querySelector(`[square-id="${startId - 1}"]`).firstChild && !document.querySelector(`[square-id="${startId - 2}"]`).firstChild ||
startId - 4 === targetId && !document.querySelector(`[square-id="${startId - 1}"]`).firstChild && !document.querySelector(`[square-id="${startId - 2}"]`).firstChild && !document.querySelector(`[square-id="${startId - 3}"]`).firstChild ||
startId - 5 === targetId && !document.querySelector(`[square-id="${startId - 1}"]`).firstChild && !document.querySelector(`[square-id="${startId - 2}"]`).firstChild && !document.querySelector(`[square-id="${startId - 3}"]`).firstChild && !document.querySelector(`[square-id="${startId - 4}"]`).firstChild ||
startId - 6 === targetId && !document.querySelector(`[square-id="${startId - 1}"]`).firstChild && !document.querySelector(`[square-id="${startId - 2}"]`).firstChild && !document.querySelector(`[square-id="${startId - 3}"]`).firstChild && !document.querySelector(`[square-id="${startId - 4}"]`).firstChild && !document.querySelector(`[square-id="${startId - 5}"]`).firstChild ||
startId - 7 === targetId && !document.querySelector(`[square-id="${startId - 1}"]`).firstChild && !document.querySelector(`[square-id="${startId - 2}"]`).firstChild && !document.querySelector(`[square-id="${startId - 3}"]`).firstChild && !document.querySelector(`[square-id="${startId - 4}"]`).firstChild && !document.querySelector(`[square-id="${startId - 5}"]`).firstChild && !document.querySelector(`[square-id="${startId - 6}"]`).firstChild
) {
return true;
}
break;
case 'king':
if (
startId + 1 === targetId ||
startId - 1 === targetId ||
startId + width === targetId ||
startId - width === targetId ||
startId + width - 1 === targetId ||
startId + width + 1 === targetId ||
startId - width - 1 === targetId ||
startId - width + 1 === targetId
) {
return true;
}
}
}
function checkForWin() {
const kings = Array.from(document.querySelectorAll('#king'));
if (!kings.some(king => king.firstChild.classList.contains('white'))) {
infoDisplayer.innerHTML = "Black player wins!";
const allSquares = document.querySelectorAll(".square");
allSquares
.forEach(s => s.firstChild?.setAttribute('draggable', false));
}
if (!kings.some(king => king.firstChild.classList.contains('black'))) {
infoDisplayer.innerHTML = "White player wins!";
const allSquares = document.querySelectorAll(".square");
allSquares
.forEach(s => s.firstChild?.setAttribute('draggable', false));
}
}