diff --git a/battleship/src/index.js b/battleship/src/index.js index 00ca86c..ed16543 100644 --- a/battleship/src/index.js +++ b/battleship/src/index.js @@ -6,4 +6,4 @@ import './style.css'; const player1 = new Player('Player1'); const player2 = new Player('CPU'); const game = new Game({ player1: player1, player2: player2 }); -const website = new Website(game); +new Website(game); diff --git a/battleship/src/style.css b/battleship/src/style.css index 88a5940..7dcf5ce 100644 --- a/battleship/src/style.css +++ b/battleship/src/style.css @@ -1,9 +1,15 @@ +#header { + display: flex; + justify-content: center; +} + .container { display: flex; justify-content: center; align-content: center; gap: 100px; } + .grid { display: flex; width: 500px; @@ -11,6 +17,14 @@ flex-wrap: wrap; } +.player2 div { + cursor: pointer; +} + +.player2 div > div:hover { + background-color: gray; +} + .cell { width: 48px; height: 48px; diff --git a/battleship/src/website.js b/battleship/src/website.js index 93eda05..c9d0393 100644 --- a/battleship/src/website.js +++ b/battleship/src/website.js @@ -1,5 +1,3 @@ -import { forEach } from 'lodash'; - export default class Website { constructor(game) { this.game = game; @@ -18,7 +16,10 @@ export default class Website { } createHeader() { - this.header.textContent = 'Battleship'; + let title = document.createElement('h1'); + title.textContent = 'Battleship'; + + this.header.appendChild(title); } drawGrid(player = null) { @@ -53,7 +54,6 @@ export default class Website { cell.style.backgroundColor = 'red'; } else if (misses.has(JSON.stringify([j, i]))) { cell.style.backgroundColor = 'black'; - console.log('miss '); } } } @@ -68,37 +68,71 @@ export default class Website { const playerOneDiv = document.createElement('div'); playerOneDiv.classList.add('player1'); - playerOneDiv.appendChild(this.drawGrid(this.game.player1)); + const h2 = document.createElement('h2'); + h2.classList.add('player-title'); + h2.textContent = 'Player 1'; + + playerOneDiv.append(h2, this.drawGrid(this.game.player1)); const playerTwoDiv = document.createElement('div'); playerTwoDiv.classList.add('player2'); playerTwoDiv.addEventListener('click', (event) => this.handleAttackClick(event), ); - playerTwoDiv.appendChild(this.drawGrid(this.game.player2)); + + const h2Cpu = document.createElement('h2'); + h2Cpu.classList.add('player-title'); + h2Cpu.textContent = 'CPU'; + + playerTwoDiv.append(h2Cpu, this.drawGrid(this.game.player2)); this.container.append(playerOneDiv, playerTwoDiv); } handleAttackClick(event) { - let move = JSON.parse(event.target.dataset.cell); - + let move = event.target.dataset.cell + ? JSON.parse(event.target.dataset.cell) + : null; // 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)) + available.hits.has(JSON.stringify(move)) || + !move ) return; this.game.handleUserMove(JSON.stringify(move)); this.updateScreen(); + if (this.isGameOver()) { + let winner = this.announceWinner(); + this.container.textContent = `Gameover ${winner} has won the game`; + } this.CPUMove(); - console.log(available, move); } CPUMove() { this.game.handleCPUMove(); this.updateScreen(); + + if (this.isGameOver()) { + let winner = this.announceWinner(); + this.container.textContent = `Gameover ${winner} has won the game`; + } + } + + isGameOver() { + return ( + this.game.player1.gameboard.ships.length === 0 || + this.game.player2.gameboard.ships.length === 0 + ); + } + + announceWinner() { + if (this.game.player1.gameboard.ships.length === 0) { + return 'CPU'; + } + + return 'Player 1'; } }