You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: classes/ChessPiece.js
+14-4Lines changed: 14 additions & 4 deletions
Original file line number
Diff line number
Diff line change
@@ -8,7 +8,6 @@ export class ChessPiece {
8
8
this.team=team;
9
9
this.location=location;
10
10
this.image=image;
11
-
//console.log(this);
12
11
}
13
12
14
13
//getters
@@ -23,9 +22,16 @@ export class ChessPiece {
23
22
* @param {string} newLocation the new location that this chess piece will be moved to
24
23
*/
25
24
move(newLocation){
26
-
constnode=document.querySelector(`#${location}`).removeChild(`#${pieceID}`);//go to the square where this chess piece is located, and remove its child, which will be an image, and store the image as a node
27
-
document.querySelector(`#${newLocation}`).appendChild(node);//go to the square which is to be the new location, and place the image there
28
-
location=newLocation;//update the location stored in this object
//Create the ChessPiece objects, and store them in array vvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv
chessPieces[4]=newChessPiece('DQ0','dark','E8','images/dark-king.png');//dark king -- can't have pieceID 'DK1' because that will be used by dark knight 1 -- so I gave it pieceID of 'DQ0' so he can be associated with his wife, the queen
26
+
chessPieces[4]=newChessPiece('DQ0','dark','E8','images/dark-king.png');//dark king
//instead of this duplicate code, I did a for loop to do the same thing
26
-
//chessPieces[8] = new ChessPiece('DP8', 'dark', 'A7', 'images/dark-pawn.png');//dark pawn 8
27
-
//...
28
-
// chessPieces[15] = new ChessPiece('DP1', 'dark', 'H7', 'images/dark-pawn.png');//dark pawn 1
29
-
for(letcol=0;col<EIGHT;col++){//loops through 8 times -- one for each pawn
30
-
chessPieces[col+EIGHT]=newChessPiece(`DP${EIGHT-col}`,'dark',`${alpha2num[col+1]}7`,'images/dark-pawn.png');//creates dark pawn 8, ... dark pawn 1
30
+
for(letcol=0;col<NUM_COLS;col++){//loops through 8 times -- one for each pawn
31
+
chessPieces[col+NUM_COLS]=newChessPiece(`DP${NUM_COLS-col}`,'dark',`${alpha2num[col+1]}7`,'images/dark-pawn.png');//creates dark pawn 8, ... dark pawn 1
31
32
}
32
-
33
-
//instead of this duplicate code, I did a for loop to do the same thing
34
-
//chessPieces[16] = new ChessPiece('LP1', 'light', 'A2', 'images/light-pawn.png');//light pawn 1
35
-
//...
36
-
//chessPieces[23] = new ChessPiece('LP8', 'light', 'H2', 'images/light-pawn.png');//light pawn 8
37
-
for(letcol=0;col<EIGHT;col++){//loops through 8 times -- one for each pawn
chessPieces[28]=newChessPiece('LQ0','light','E1','images/light-king.png');//light king -- can't have pieceID 'LK1' because that will be used by light knight 1 -- so I gave it pieceID of 'LQ0' so he can be associated with his wife, the queen
40
+
chessPieces[28]=newChessPiece('LQ0','light','E1','images/light-king.png');//light king
//Create the ChessPiece objects, and store them in array ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
44
+
//Create the light ChessPiece objects, and store them in array ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
50
45
51
46
//Once I create all the ChessPiece objects, place them on the board vvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv
//Once I create all the ChessPiece objects, place them on the board ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
60
58
61
-
//garbage probably
62
-
constlightPawn1=document.querySelector('#LP1');
63
-
console.log(lightPawn1);
64
-
lightPawn1.addEventListener('click',e=>{
65
-
lightPawn1.classList.toggle('clicked');
59
+
//this section adds event listeners to help move pieces vvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv
60
+
btnMove.addEventListener('click',e=>{
61
+
e.preventDefault();
62
+
letpieceID=document.querySelector('#movePiece').value;//get the piece ID from the input
63
+
letchessPiece=chessPieces[pieceID2Index.indexOf(pieceID)];//get the chessPiece object to be moved
64
+
letnewLocation=document.querySelector('#newLocation').value.trim().toUpperCase();//get the new location from the input, trimmed and upper case
65
+
if(chessPiece.canMove(newLocation)){
66
+
chessPiece.move(newLocation);
67
+
}
66
68
});
69
+
//this section adds event listeners to help move pieces ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
//this section adds event listeners for when the squares are clicked vvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv
69
77
//creates a 2d array to hold all the squares
70
-
letsquares=newArray(EIGHT);
71
-
for(leti=0;i<EIGHT;i++){
72
-
squares[i]=newArray(EIGHT);
78
+
let squares = new Array(NUM_COLS);
79
+
for (let i = 0; i < NUM_COLS; i++) {
80
+
squares[i] = new Array(NUM_ROWS);
73
81
}
82
+
83
+
let originClicked = null;
84
+
let destinationClicked = null;
85
+
74
86
//in a double for loop, adds all the squares to a 2D array
//adds event listeners to all the squares so they toggle an orange color when they are clicked
81
-
for(letcol=0;col<EIGHT;col++){
82
-
for(letrow=0;row<EIGHT;row++){
83
-
squares[col][row].addEventListener('click',e=>{
84
-
squares[col][row].classList.toggle('clicked');
92
+
//adds event listeners to all the squares so they toggle color when they are clicked
93
+
for (let col = 0; col < NUM_COLS; col++) {
94
+
for (let row = 0; row < NUM_ROWS; row++) {
95
+
const square = squares[col][row];
96
+
square.addEventListener('click', e => {
97
+
square.classList.toggle('clicked');
98
+
console.log(square);
85
99
});
86
100
}
87
101
}
88
102
//this section adds event listeners for when the squares are clicked ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
0 commit comments