-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy path2ndScripts.js
More file actions
784 lines (662 loc) · 50 KB
/
2ndScripts.js
File metadata and controls
784 lines (662 loc) · 50 KB
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
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
// script.js
/*Old document, not gonna be used*/
const gameBoard = document.querySelector("#gameboard")
const playerDisplay = document.querySelector("#player")
const infoDisplay = document.querySelector("#info-display")
const width = 8
let playerTurn = 'white'
playerDisplay.textContent = 'white'
const startPeices =
[
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()
{
//Lexical Scoping: Obtains the variable access from parent element
startPeices.forEach((startPeice, i) => {
const square = document.createElement('div')
square.classList.add('square')
square.innerHTML = startPeice
square.firstChild?.setAttribute('draggable', true) //Checks if it has a first child
square.setAttribute('square-id', 63-i)
const row = Math.floor((63 - i)/ 8) + 1
if (row % 2 === 0 && i % 2 === 0)
{
square.classList.add("beige")
}
else if (row % 2 === 1 && i % 2 === 0)
{
square.classList.add("brown")
}
else if (row % 2 === 0 && i % 2 === 1)
{
square.classList.add("brown")
}
else
{
square.classList.add("beige")
}
if (i <= 15)
{
square.firstChild.firstChild.classList.add('black')
}
else if (i >= 48)
{
square.firstChild.firstChild.classList.add('white')
}
gameBoard.append(square)
})
}
createBoard()
let positionID
let draggedElement
let lastMove = 0
let targetId = 0
let castleBlack = true
let castleWhite = true
const allSquares = document.querySelectorAll('.square')
allSquares.forEach(square => {
square.addEventListener('dragstart', dragStart)
square.addEventListener('dragover', dragOver)
square.addEventListener('drop', dragDrop)
})
function dragStart (e)
{
positionID = e.target.parentNode.getAttribute('square-id')
draggedElement = e.target
}
function dragOver(e)
{
e.preventDefault()
}
function dragDrop (e)
{
e.stopPropagation()
console.log('playerTurn', playerTurn)
console.log('e.target', e.target)
const currentPlayerPeice = draggedElement.firstChild.classList.contains(playerTurn)
const taken = e.target.classList.contains('peice')
const valid = checkIfValid(e.target)
const currentOppPeice = playerTurn === 'white' ? 'black': 'white'
const takenByOpp = e.target.firstChild?.classList.contains(currentOppPeice)
const enpassantByOpp = document.querySelector(`[square-id = "${lastMove}"]`).firstChild?.getAttribute('id') === 'pawn'
const enpassantValid = checkIfenpassantValid(e.target)
const castleValid = checkIfCastleValid(e.target, playerTurn)
// const promotionValid = checkIfPromotion(e.target)
console.log("castleValid", castleValid)
if (currentPlayerPeice)
{
if (takenByOpp && valid)
{
e.target.parentNode.append(draggedElement)
lastMove = Number(e.target.getAttribute('square-id')) || Number(e.target.parentNode.getAttribute('square-id'))
console.log("lastMove", lastMove)
e.target.remove()
changePlayer()
return
}
else if (enpassantByOpp && enpassantValid)
{
document.querySelector(`[square-id = "${lastMove}"]`).firstChild.remove()
e.target.append(draggedElement)
lastMove = Number(e.target.getAttribute('square-id')) || Number(e.target.parentNode.getAttribute('square-id'))
console.log("lastMove", lastMove)
changePlayer()
return
}
else if (castleValid === "Right") //Add no checks later
{
e.target.append(draggedElement)
if (playerTurn === 'white')
{
document.querySelector(`[square-id = "${targetId + 1}"]`).append(document.querySelector(`[square-id = "${targetId - 1}"]`).firstChild)
}
else
{
document.querySelector(`[square-id = "${targetId - 1}"]`).append(document.querySelector(`[square-id = "${targetId + 1}"]`).firstChild)
}
lastMove = Number(e.target.getAttribute('square-id')) || Number(e.target.parentNode.getAttribute('square-id'))
console.log("lastMove", lastMove)
changePlayer()
return
}
else if (castleValid === "Left")
{
e.target.append(draggedElement)
if (playerTurn === 'white')
{
document.querySelector(`[square-id = "${targetId - 1}"]`).append(document.querySelector(`[square-id = "${targetId + 2}"]`).firstChild)
}
else if (playerTurn === 'black')
{
document.querySelector(`[square-id = "${targetId + 1}"]`).append(document.querySelector(`[square-id = "${targetId - 2}"]`).firstChild)
}
lastMove = Number(e.target.getAttribute('square-id')) || Number(e.target.parentNode.getAttribute('square-id'))
console.log("lastMove", lastMove)
changePlayer()
return
}
//Same side capture is attempted --> Ignore
else if (taken && !takenByOpp)
{
return
}
else if (valid)
{
e.target.append(draggedElement)
changePlayer()
lastMove = Number(e.target.getAttribute('square-id')) || Number(e.target.parentNode.getAttribute('square-id'))
console.log("lastMove", lastMove)
return
}
}
}
/*
function checkIfPromotion(target)
{
const lastRow = [56, 57, 58, 59, 60, 61, 62, 63]
targetId = Number(target.getAttribute('square-id')) || Number(target.parentNode.getAttribute('square-id'))
const startId = Number(positionID)
if (
lastRow.contains(targetId) &&
document.querySelector(`[square-id="${startId}"]`).firstChild.getAttribute('id') === 'pawn')
{
//add the code here
}
}
*/
function checkIfCastleValid(target, currPeice)
{
targetId = Number(target.getAttribute('square-id')) || Number(target.parentNode.getAttribute('square-id'))
const startId = Number(positionID)
if (
currPeice === 'white' && castleWhite &&
document.querySelector(`[square-id="${startId}"]`).firstChild.getAttribute('id') === 'king' &&
startId - 2 === targetId &&
!document.querySelector(`[square-id="${startId - 1}"]`).firstChild &&
document.querySelector(`[square-id="${startId - 3}"]`).firstChild?.getAttribute('id') === 'rook' ||
currPeice === 'black' && castleBlack &&
document.querySelector(`[square-id="${startId}"]`).firstChild?.getAttribute('id') === 'king' &&
startId + 2 === targetId &&
!document.querySelector(`[square-id="${startId + 1}"]`).firstChild &&
document.querySelector(`[square-id="${startId + 3}"]`).firstChild?.getAttribute('id') === 'rook'
)
{
if (currPeice === 'white')
{
castleWhite = false
console.log("castleWhite", castleWhite)
}
else
{
castleBlack = false
}
return "Right"
}
else if (
document.querySelector(`[square-id="${startId}"]`).firstChild?.getAttribute('id') === 'king' &&
startId + 2 === targetId && currPeice === 'white' && castleWhite &&
!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?.getAttribute('id') === 'rook' ||
document.querySelector(`[square-id="${startId}"]`).firstChild?.getAttribute('id') === 'king' &&
startId - 2 === targetId && currPeice === 'black' && castleBlack &&
!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?.getAttribute('id') === 'rook'
)
{
if (currPeice === 'white')
{
castleWhite = false
}
else
{
castleBlack = false
}
return "Left"
}
else
{
return
}
}
function checkIfenpassantValid(target)
{
const targetId = Number(target.getAttribute('square-id')) || Number(target.parentNode.getAttribute('square-id'))
const startId = Number(positionID)
const enpassantRow = [32, 33, 34, 35, 36, 37, 38, 39]
if (
startId - 1 === lastMove && enpassantRow.includes(startId) && lastMove + width === targetId ||
startId + 1 === lastMove && enpassantRow.includes(startId) && lastMove + width === targetId &&
document.querySelector(`[square-id = "${lastMove}"]`).firstChild.getAttribute('id') === 'pawn' &&
document.querySelector(`[square-id = "${startId}"]`).firstChild.getAttribute('id') === 'pawn'
)
{
return true;
}
}
function checkIfValid(target)
{
targetId = Number(target.getAttribute('square-id')) || Number(target.parentNode.getAttribute('square-id'))
const startId = Number(positionID)
const peice = draggedElement.id
console.log('targetId', targetId)
console.log('startId', startId)
console.log('peice', peice)
switch(peice)
{ /* Add king can't move to checked sqaures, \, gamewin()
, gamedraw(), gamelose(), moving dead peices to bottom, show all moves (back and forth) and promotion*/
case 'pawn' :
const starterRow = [8, 9, 10, 11, 12, 13, 14, 15]
if (
starterRow.includes(startId) && startId + width * 2 === targetId ||
startId + width === targetId && !document.querySelector(`[square-id="${startId + width}"]`).firstChild||
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*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*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*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*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*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*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*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*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*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*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*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*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
)
{
console.log('color', document.querySelector(`[square-id="${startId + width + 1}"]`).getAttribute('background-color'))
return true;
}
break;
case 'rook' :
if (
startId + width === targetId ||
startId + 2*width === targetId &&
!document.querySelector(`[square-id="${startId + width}"]`).firstChild ||
startId + 3*width === targetId &&
!document.querySelector(`[square-id="${startId + width}"]`).firstChild && !document.querySelector(`[square-id="${startId + 2*width}"]`).firstChild||
startId + 4*width === targetId &&
!document.querySelector(`[square-id="${startId + width}"]`).firstChild && !document.querySelector(`[square-id="${startId + 2*width}"]`).firstChild &&
!document.querySelector(`[square-id="${startId + 3*width}"]`).firstChild ||
startId + 5*width === targetId &&
!document.querySelector(`[square-id="${startId + width}"]`).firstChild && !document.querySelector(`[square-id="${startId + 2*width}"]`).firstChild &&
!document.querySelector(`[square-id="${startId + 3*width}"]`).firstChild && !document.querySelector(`[square-id="${startId + 4*width}"]`).firstChild ||
startId + 6*width === targetId &&
!document.querySelector(`[square-id="${startId + width}"]`).firstChild && !document.querySelector(`[square-id="${startId + 2*width}"]`).firstChild &&
!document.querySelector(`[square-id="${startId + 3*width}"]`).firstChild && !document.querySelector(`[square-id="${startId + 4*width}"]`).firstChild &&
!document.querySelector(`[square-id="${startId + 5*width}"]`).firstChild ||
startId + 7*width === targetId &&
!document.querySelector(`[square-id="${startId + width}"]`).firstChild && !document.querySelector(`[square-id="${startId + 2*width}"]`).firstChild &&
!document.querySelector(`[square-id="${startId + 3*width}"]`).firstChild && !document.querySelector(`[square-id="${startId + 4*width}"]`).firstChild &&
!document.querySelector(`[square-id="${startId + 5*width}"]`).firstChild && !document.querySelector(`[square-id="${startId + 6*width}"]`).firstChild ||
startId - width === targetId ||
startId - 2*width === targetId &&
!document.querySelector(`[square-id="${startId - width}"]`).firstChild ||
startId - 3*width === targetId &&
!document.querySelector(`[square-id="${startId - width}"]`).firstChild && !document.querySelector(`[square-id="${startId - 2*width}"]`).firstChild ||
startId - 4*width === targetId &&
!document.querySelector(`[square-id="${startId - width}"]`).firstChild && !document.querySelector(`[square-id="${startId - 2*width}"]`).firstChild &&
!document.querySelector(`[square-id="${startId - 3*width}"]`).firstChild ||
startId - 5*width === targetId &&
!document.querySelector(`[square-id="${startId - width}"]`).firstChild && !document.querySelector(`[square-id="${startId - 2*width}"]`).firstChild &&
!document.querySelector(`[square-id="${startId - 3*width}"]`).firstChild && !document.querySelector(`[square-id="${startId - 4*width}"]`).firstChild ||
startId - 6*width === targetId &&
!document.querySelector(`[square-id="${startId - width}"]`).firstChild && !document.querySelector(`[square-id="${startId - 2*width}"]`).firstChild &&
!document.querySelector(`[square-id="${startId - 3*width}"]`).firstChild && !document.querySelector(`[square-id="${startId - 4*width}"]`).firstChild &&
!document.querySelector(`[square-id="${startId - 5*width}"]`).firstChild ||
startId - 7*width === targetId &&
!document.querySelector(`[square-id="${startId - width}"]`).firstChild && !document.querySelector(`[square-id="${startId - 2*width}"]`).firstChild &&
!document.querySelector(`[square-id="${startId - 3*width}"]`).firstChild && !document.querySelector(`[square-id="${startId - 4*width}"]`).firstChild &&
!document.querySelector(`[square-id="${startId - 5*width}"]`).firstChild && !document.querySelector(`[square-id="${startId - 6*width}"]`).firstChild ||
//Problamatic Code
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 === targetId ||
startId + 2*width === targetId &&
!document.querySelector(`[square-id="${startId + width}"]`).firstChild ||
startId + 3*width === targetId &&
!document.querySelector(`[square-id="${startId + width}"]`).firstChild && !document.querySelector(`[square-id="${startId + 2*width}"]`).firstChild||
startId + 4*width === targetId &&
!document.querySelector(`[square-id="${startId + width}"]`).firstChild && !document.querySelector(`[square-id="${startId + 2*width}"]`).firstChild &&
!document.querySelector(`[square-id="${startId + 3*width}"]`).firstChild ||
startId + 5*width === targetId &&
!document.querySelector(`[square-id="${startId + width}"]`).firstChild && !document.querySelector(`[square-id="${startId + 2*width}"]`).firstChild &&
!document.querySelector(`[square-id="${startId + 3*width}"]`).firstChild && !document.querySelector(`[square-id="${startId + 4*width}"]`).firstChild ||
startId + 6*width === targetId &&
!document.querySelector(`[square-id="${startId + width}"]`).firstChild && !document.querySelector(`[square-id="${startId + 2*width}"]`).firstChild &&
!document.querySelector(`[square-id="${startId + 3*width}"]`).firstChild && !document.querySelector(`[square-id="${startId + 4*width}"]`).firstChild &&
!document.querySelector(`[square-id="${startId + 5*width}"]`).firstChild ||
startId + 7*width === targetId &&
!document.querySelector(`[square-id="${startId + width}"]`).firstChild && !document.querySelector(`[square-id="${startId + 2*width}"]`).firstChild &&
!document.querySelector(`[square-id="${startId + 3*width}"]`).firstChild && !document.querySelector(`[square-id="${startId + 4*width}"]`).firstChild &&
!document.querySelector(`[square-id="${startId + 5*width}"]`).firstChild && !document.querySelector(`[square-id="${startId + 6*width}"]`).firstChild ||
startId - width === targetId ||
startId - 2*width === targetId &&
!document.querySelector(`[square-id="${startId - width}"]`).firstChild ||
startId - 3*width === targetId &&
!document.querySelector(`[square-id="${startId - width}"]`).firstChild && !document.querySelector(`[square-id="${startId - 2*width}"]`).firstChild ||
startId - 4*width === targetId &&
!document.querySelector(`[square-id="${startId - width}"]`).firstChild && !document.querySelector(`[square-id="${startId - 2*width}"]`).firstChild &&
!document.querySelector(`[square-id="${startId - 3*width}"]`).firstChild ||
startId - 5*width === targetId &&
!document.querySelector(`[square-id="${startId - width}"]`).firstChild && !document.querySelector(`[square-id="${startId - 2*width}"]`).firstChild &&
!document.querySelector(`[square-id="${startId - 3*width}"]`).firstChild && !document.querySelector(`[square-id="${startId - 4*width}"]`).firstChild ||
startId - 6*width === targetId &&
!document.querySelector(`[square-id="${startId - width}"]`).firstChild && !document.querySelector(`[square-id="${startId - 2*width}"]`).firstChild &&
!document.querySelector(`[square-id="${startId - 3*width}"]`).firstChild && !document.querySelector(`[square-id="${startId - 4*width}"]`).firstChild &&
!document.querySelector(`[square-id="${startId - 5*width}"]`).firstChild ||
startId - 7*width === targetId &&
!document.querySelector(`[square-id="${startId - width}"]`).firstChild && !document.querySelector(`[square-id="${startId - 2*width}"]`).firstChild &&
!document.querySelector(`[square-id="${startId - 3*width}"]`).firstChild && !document.querySelector(`[square-id="${startId - 4*width}"]`).firstChild &&
!document.querySelector(`[square-id="${startId - 5*width}"]`).firstChild && !document.querySelector(`[square-id="${startId - 6*width}"]`).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 ||
//Problamatic Code
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 + 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*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*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*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*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*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*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*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*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*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*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*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*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 'king':
if (
startId + width === targetId ||
startId - width === targetId ||
startId - width - 1 === targetId ||
startId - width + 1 === targetId ||
startId + width - 1 === targetId ||
startId + width + 1 === targetId ||
startId + 1 === targetId ||
startId - 1 === targetId
)
{
if (playerTurn === 'white')
{
castleWhite = false
}
else
{
castleBlack = false
}
return true;
}
break;
}
}
/*function arraysEqual(arr1, arr2) {
if (arr1.length !== arr2.length) {
return false;
}
for (let i = 0; i < arr1.length; i++) {
if (arr1[i] !== arr2[i]) {
return false;
}
}
return true;
}*/
function changePlayer()
{
if (playerTurn === 'black')
{
reverseIds()
playerTurn = 'white'
playerDisplay.textContent = 'white'
}
else
{
revertIds()
playerTurn = 'black'
playerDisplay.textContent = 'black'
}
}
function reverseIds()
{
const allSqaures = document.querySelectorAll('.square')
allSqaures.forEach((square, i) =>
square.setAttribute('square-id', (width * width - 1) - i))
}
function revertIds()
{
const allSqaures = document.querySelectorAll('.square')
allSqaures.forEach((square, i) =>
square.setAttribute('square-id', i))
}