feat: add some basic styling and stuff

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();
+    }
 }

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);
             }

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;
             }

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);

battleship/src/style.css

@@ -0,0 +1,11 @@
+.grid {
+    display: flex;
+    width: 500px;
+    height: 500px;
+    flex-wrap: wrap;
+}
+
+.cell {
+    width: 48px;
+    height: 48px;
+}

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);
+    }
+}