From cf18d7d2f4a694ffcd5aa58ea6aad80f4962110c Mon Sep 17 00:00:00 2001 From: Mike Smith <89040888+smiggiddy@users.noreply.github.com> Date: Fri, 22 Mar 2024 20:08:48 -0400 Subject: [PATCH] feat: add some basic styling and stuff --- battleship/src/app.js | 39 +++++++++++++++++--------- battleship/src/components/gameboard.js | 1 - battleship/src/components/player.js | 4 --- battleship/src/index.js | 5 +++- battleship/src/style.css | 11 ++++++++ battleship/src/website.js | 38 +++++++++++++++++++++++++ 6 files changed, 79 insertions(+), 19 deletions(-) create mode 100644 battleship/src/style.css create mode 100644 battleship/src/website.js diff --git a/battleship/src/app.js b/battleship/src/app.js index 186c2b4..7e6853b 100644 --- a/battleship/src/app.js +++ b/battleship/src/app.js @@ -7,24 +7,37 @@ export default class Game { main() { // TODO take turns picking points to shoot a ship - // this.player1.gameboard.receiveAttack([1, 2]); - // this.player1.gameboard.receiveAttack([3, 8]); let count = 0; - while (count < 100) { - let move = this.player2.computerMoves( - this.player1.gameboard.scoreboard, - ); - this.player1.gameboard.receiveAttack(move); - this.player1.gameboard.shipStatus(); - console.log( - this.player1.gameboard.scoreboard, - move, - this.player1.gameboard.sunkShipCount, - ); + // Main Game Loop + while (count < 100) { + this.handleUserMove(); + this.handleCPUMove(); + + // console.log( + // this.player1.gameboard.scoreboard, + // this.player1.gameboard.sunkShipCount, + // this.player2.gameboard.scoreboard, + // ); if (this.player1.gameboard.sunkShipCount === 5) return; count += 1; } } + + handleUserMove(move = null) { + // let move = window.prompt('Enter your move in array fashion'); + if (move) { + this.player2.gameboard.receiveAttack(JSON.parse(move)); + } + this.player2.gameboard.shipStatus(); + } + + handleCPUMove() { + let move = this.player2.computerMoves( + this.player1.gameboard.scoreboard, + ); + this.player1.gameboard.receiveAttack(move); + this.player1.gameboard.shipStatus(); + } } diff --git a/battleship/src/components/gameboard.js b/battleship/src/components/gameboard.js index d15c16e..a223274 100644 --- a/battleship/src/components/gameboard.js +++ b/battleship/src/components/gameboard.js @@ -108,7 +108,6 @@ class Gameboard { shipStatus() { for (let i = 0; i < this.ships.length; i++) { if (this.ships[i].isSunk()) { - console.log(this.ships[i]); this.sunkShipCount += 1; this.ships.splice(i, 1); } diff --git a/battleship/src/components/player.js b/battleship/src/components/player.js index 4cbaa3d..a95b112 100644 --- a/battleship/src/components/player.js +++ b/battleship/src/components/player.js @@ -14,10 +14,6 @@ class Player { while (true) { let potentialMove = coordinates(); - console.log( - scoreboard.misses.has(JSON.stringify(potentialMove)), - potentialMove, - ); if (!scoreboard.misses.has(JSON.stringify(potentialMove))) { return potentialMove; } diff --git a/battleship/src/index.js b/battleship/src/index.js index 0f196de..00ca86c 100644 --- a/battleship/src/index.js +++ b/battleship/src/index.js @@ -1,6 +1,9 @@ import { Player } from './components/player'; import Game from './app'; +import Website from './website'; +import './style.css'; -const player1 = new Player('Player 1'); +const player1 = new Player('Player1'); const player2 = new Player('CPU'); const game = new Game({ player1: player1, player2: player2 }); +const website = new Website(game); diff --git a/battleship/src/style.css b/battleship/src/style.css new file mode 100644 index 0000000..5bf95eb --- /dev/null +++ b/battleship/src/style.css @@ -0,0 +1,11 @@ +.grid { + display: flex; + width: 500px; + height: 500px; + flex-wrap: wrap; +} + +.cell { + width: 48px; + height: 48px; +} diff --git a/battleship/src/website.js b/battleship/src/website.js new file mode 100644 index 0000000..202c2a0 --- /dev/null +++ b/battleship/src/website.js @@ -0,0 +1,38 @@ +export default class Website { + constructor(game) { + this.game = game; + this.container = document.createElement('div'); + this.container.classList.add('container'); + + this.header = document.createElement('section'); + this.header.id = 'header'; + + this.footer = document.createElement('footer'); + this.footer.id = 'footer'; + + this.drawGrid(this.game.player1); + + document.body.appendChild(this.container); + } + + drawGrid(player = null) { + const div = document.createElement('div'); + div.style.border = '1px solid black'; + if (player) { + div.classList.add(`grid-${player.playerName}`); + } else { + div.classList.add('grid'); + } + + for (let i = 0; i < 10; i++) { + for (let j = 0; j < 10; j++) { + const cell = document.createElement('div'); + cell.classList.add('cell'); + cell.dataset.cell = `${j + 1},${i + 1}`; + cell.style.border = '1px solid black'; + div.appendChild(cell); + } + } + this.container.appendChild(div); + } +}