diff --git a/battleship/src/style.css b/battleship/src/style.css index 0439c6a..88a5940 100644 --- a/battleship/src/style.css +++ b/battleship/src/style.css @@ -1,6 +1,6 @@ .container { display: flex; - justify-content: space-around; + justify-content: center; align-content: center; gap: 100px; } diff --git a/battleship/src/website.js b/battleship/src/website.js index f6b049a..d8dfdb8 100644 --- a/battleship/src/website.js +++ b/battleship/src/website.js @@ -4,14 +4,19 @@ export default class Website { this.container = document.createElement('div'); this.container.classList.add('container'); - this.header = document.createElement('section'); + this.header = document.createElement('header'); this.header.id = 'header'; this.footer = document.createElement('footer'); this.footer.id = 'footer'; + this.createHeader(); this.updateScreen(); - document.body.appendChild(this.container); + document.body.append(this.header, this.container, this.footer); + } + + createHeader() { + this.header.textContent = 'Battleship'; } drawGrid(player = null) { @@ -19,28 +24,48 @@ export default class Website { div.style.border = '1px solid black'; div.classList.add('grid'); - for (let i = 0; i < 10; i++) { - for (let j = 0; j < 10; j++) { + let misses = player.gameboard.scoreboard.misses; + let hits = player.gameboard.scoreboard.hits; + + for (let i = 1; i < 11; i++) { + for (let j = 1; j < 11; j++) { const cell = document.createElement('div'); cell.classList.add('cell'); - cell.dataset.cell = `[${j + 1}, ${i + 1}]`; + cell.dataset.cell = `[${j}, ${i}]`; cell.style.border = '1px solid black'; div.appendChild(cell); + + if (hits.has(JSON.stringify([j, i]))) { + cell.style.backgroundColor = 'red'; + } else if (misses.has(JSON.stringify([j, i]))) { + cell.style.backgroundColor = 'black'; + console.log('miss '); + } } } + + // player.gameboard.scoreboard.misses + // .entries() + // .array.forEach((element) => { + // console.log(element); + // }); return div; } updateScreen() { + // Clear screen before update + this.container.innerHTML = ''; + const playerOneDiv = document.createElement('div'); playerOneDiv.classList.add('player1'); + playerOneDiv.appendChild(this.drawGrid(this.game.player1)); - playerOneDiv.addEventListener('click', (event) => - this.handleAttackClick(event), - ); const playerTwoDiv = document.createElement('div'); playerTwoDiv.classList.add('player2'); + playerTwoDiv.addEventListener('click', (event) => + this.handleAttackClick(event), + ); playerTwoDiv.appendChild(this.drawGrid(this.game.player2)); this.container.append(playerOneDiv, playerTwoDiv); @@ -48,11 +73,23 @@ export default class Website { handleAttackClick(event) { let move = JSON.parse(event.target.dataset.cell); - // let [x, _, y] = event.target.dataset.cell; - // let move = [Number(x), Number(y)]; - console.log(move); + + // Exit if the block has already been clicked + let available = this.game.player2.gameboard.scoreboard; + if ( + available.misses.has(JSON.stringify(move)) || + available.hits.has(JSON.stringify(move)) + ) + return; + this.game.handleUserMove(JSON.stringify(move)); - console.log(this.game.player2.gameboard.scoreboard); - console.log(this.game.player2.gameboard.ships); + this.updateScreen(); + this.CPUMove(); + console.log(available, move); + } + + CPUMove() { + this.game.handleCPUMove(); + this.updateScreen(); } }