From 4194b03e980ac68e0fd07e183189fbe93dfefdce Mon Sep 17 00:00:00 2001 From: IgrisBRC Date: Sun, 14 Jul 2024 13:43:36 +0530 Subject: finnnallyyyy... added make move to the game, its a bit shitty, i'll make it prettier later --- public/board.js | 36 ++++++++++++++++++++++----- public/index.css | 70 ---------------------------------------------------- public/index.html | 7 ++---- public/make_move.js | 5 ++-- public/move.js | 2 +- public/style.css | 66 +++++++++++++++++++++++++++++++++++++++++++++++++ public/sync_board.js | 16 ++++++------ 7 files changed, 111 insertions(+), 91 deletions(-) delete mode 100644 public/index.css create mode 100644 public/style.css (limited to 'public') diff --git a/public/board.js b/public/board.js index 2484136..ca46335 100644 --- a/public/board.js +++ b/public/board.js @@ -7,29 +7,53 @@ sync_board() let previously_highlighted_squares = ['dummy'] for (let i = 0; i < squares.length; i++) { - squares[i].addEventListener('click', () => { + squares[i].onclick = () => { let square = [] let id = squares[i].id square.push(8 - id.charAt(1)) square.push(id.charAt(0).charCodeAt(0) - 97) - let moves = move(board, square[0], square[1], to_move) - for (let i = 0; i < previously_highlighted_squares.length; i++) { let prev = document.getElementById(previously_highlighted_squares[i]) prev.classList.remove('highlight') } - for (let i = 0; i < moves.length; i++) { + let hlsquare = document.getElementById(`${alphabet[moves[i][1]]}${8 - moves[i][0]}`) + + hlsquare.classList.add('highlight') + + hlsquare.onclick = handle_move(id, hlsquare.id) - document.getElementById(`${alphabet[moves[i][1]]}${8 - moves[i][0]}`).classList.add('highlight') previously_highlighted_squares.push(`${alphabet[moves[i][1]]}${8 - moves[i][0]}`) } - }) + } } +//let handle_move = () => { +// console.log('move') +//} + +function handle_move(from_id, id) { + return function() { + let table = { 1: 'K', 2: 'Q', 3: 'R', 4: 'B', 5: 'N', 6: 'p' } + make_move(board, 8 - from_id.charAt(1), from_id.charCodeAt(0) - 97, 8 - id.charAt(1), id.charCodeAt(0) - 97) + + let from_element = document.getElementById(from_id) + while (from_element.firstChild) { + from_element.removeChild(from_element.firstChild) + } + + let new_element = document.getElementById(id) + let piece = document.createElement('p') + piece.classList.add(board[8 - id.charAt(1)][id.charCodeAt(0) - 97] > 0 ? 'w' : 'b', 'piece') + new_element.append(piece) + piece.append(table[Math.abs(board[8 - id.charAt(1)][id.charCodeAt(0) - 97])]) + + to_move = !to_move + } +} diff --git a/public/index.css b/public/index.css deleted file mode 100644 index 1971278..0000000 --- a/public/index.css +++ /dev/null @@ -1,70 +0,0 @@ -*{ - margin: 0; - padding: 0; -} - -.box{ - height: 76px; - width: 76px; - position: relative; -} -.top-corner{ - padding: 1px; - position: absolute; -} -.bottom-corner{ - padding: 1px; - position: absolute; - bottom: 2px; - right: 2px; -} - -.white{ - background-color: #eaead2; - /*background-color: #4b7299; */ - color: #4b7299; -} - -.black{ - background-color: #4b7299; - color: #eaead2; -} - -body{ - height: 100vh; - width: 100vw; - display: flex; - justify-content: center; - align-items: center; - margin: 1px; -} - -.chess-board{ - width: 608px; - height: 608px; - display: grid; - grid-template-columns:repeat(8,1fr); - grid-template-rows:repeat(8,1fr); -} - -.piece { - color: black; - text-align:center; - font-size:50px; -} - -.highlight { - background-color: yellow; -} - -/*.wp {*/ -/* color: white;*/ -/*}*/ - -.w { - color: white -} - -.b { - color: black -} diff --git a/public/index.html b/public/index.html index dcf7f5f..312eb76 100644 --- a/public/index.html +++ b/public/index.html @@ -4,14 +4,11 @@ Chess - +
- - -
@@ -128,7 +125,7 @@
- + diff --git a/public/make_move.js b/public/make_move.js index ec0956d..562505f 100644 --- a/public/make_move.js +++ b/public/make_move.js @@ -1,5 +1,6 @@ function make_move(board, y ,x, new_y, new_x) { - let temp = board[y][x] + board[new_y][new_x] = board[y][x] board[y][x] = 0 - board[new_y][new_x] = temp } + +make_move(board,6,4,4,4) diff --git a/public/move.js b/public/move.js index 7626e5e..0c441c2 100644 --- a/public/move.js +++ b/public/move.js @@ -9,7 +9,7 @@ let board = [ [3, 5, 4, 2, 1, 4, 5, 3], ] -let to_move = true +let to_move = true //white to move //console.log(move(board, 4, 3)) //move(board, 3, 3) diff --git a/public/style.css b/public/style.css new file mode 100644 index 0000000..7c0c693 --- /dev/null +++ b/public/style.css @@ -0,0 +1,66 @@ +*{ + margin: 0; + padding: 0; +} + +.box{ + height: 76px; + width: 76px; + position: relative; +} +.top-corner{ + padding: 1px; + position: absolute; +} +.bottom-corner{ + padding: 1px; + position: absolute; + bottom: 2px; + right: 2px; +} + +.white{ + background-color: #eaead2; + /*background-color: #4b7299; */ + color: #4b7299; +} + +.black{ + background-color: #4b7299; + color: #eaead2; +} + +body{ + height: 100vh; + width: 100vw; + display: flex; + justify-content: center; + align-items: center; + margin: 1px; +} + +.chess-board{ + width: 608px; + height: 608px; + display: grid; + grid-template-columns:repeat(8,1fr); + grid-template-rows:repeat(8,1fr); +} + +.piece { + color: black; + text-align:center; + font-size:50px; +} + +.highlight { + background-color: yellow; +} + +.w { + color: white; +} + +.b { + color: black; +} diff --git a/public/sync_board.js b/public/sync_board.js index 629cae6..c56cb77 100644 --- a/public/sync_board.js +++ b/public/sync_board.js @@ -1,16 +1,18 @@ -function sync_board(){ - let table = {1:'K', 2:'Q', 3:'R', 4:'B', 5:'N', 6:'p'} +function sync_board() { + + let table = { 1: 'K', 2: 'Q', 3: 'R', 4: 'B', 5: 'N', 6: 'p' } - for(let i = 0; i < 8; i++){ - for(let j = 0; j < 8; j++){ - if(board[i][j] == 0) continue + for (let i = 0; i < 8; i++) { + for (let j = 0; j < 8; j++) { + if (board[i][j] == 0) continue let square = document.getElementById(`${alphabet.charAt(j)}${8 - i}`) let piece = document.createElement('p') - piece.classList.add(board[i][j] > 0 ? 'w' : 'b') + piece.classList.add(board[i][j] > 0 ? 'w' : 'b', 'piece') square.append(piece) piece.append(table[Math.abs(board[i][j])]) } } -} \ No newline at end of file + console.log(board) +} -- cgit v1.2.3