feat: basic game is finished

battleship/src/style.css

@@ -1,6 +1,6 @@
 .container {
     display: flex;
-    justify-content: space-around;
+    justify-content: center;
     align-content: center;
     gap: 100px;
 }

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++) {
+        let misses = player.gameboard.scoreboard.misses;
-            for (let j = 0; j < 10; j++) {
+        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)];
+        // Exit if the block has already been clicked
-        console.log(move);
+        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);
+        this.updateScreen();
-        console.log(this.game.player2.gameboard.ships);
+        this.CPUMove();
+        console.log(available, move);
+    }
+
+    CPUMove() {
+        this.game.handleCPUMove();
+        this.updateScreen();
     }
 }