From 0d0afb9b660faf4ec5d025bd7a1d96f61ebce563 Mon Sep 17 00:00:00 2001
From: Mike Smith <89040888+smiggiddy@users.noreply.github.com>
Date: Fri, 22 Mar 2024 23:45:40 -0400
Subject: [PATCH] feat: added UI logic

---
 battleship/src/app.js     |  2 +-
 battleship/src/style.css  |  6 ++++++
 battleship/src/website.js | 38 +++++++++++++++++++++++++++++---------
 3 files changed, 36 insertions(+), 10 deletions(-)

diff --git a/battleship/src/app.js b/battleship/src/app.js
index 7e6853b..dd91328 100644
--- a/battleship/src/app.js
+++ b/battleship/src/app.js
@@ -2,7 +2,7 @@ export default class Game {
     constructor(players) {
         this.player1 = players.player1;
         this.player2 = players.player2;
-        this.main();
+        // this.main();
     }
 
     main() {
diff --git a/battleship/src/style.css b/battleship/src/style.css
index 5bf95eb..0439c6a 100644
--- a/battleship/src/style.css
+++ b/battleship/src/style.css
@@ -1,3 +1,9 @@
+.container {
+    display: flex;
+    justify-content: space-around;
+    align-content: center;
+    gap: 100px;
+}
 .grid {
     display: flex;
     width: 500px;
diff --git a/battleship/src/website.js b/battleship/src/website.js
index 202c2a0..f6b049a 100644
--- a/battleship/src/website.js
+++ b/battleship/src/website.js
@@ -10,29 +10,49 @@ export default class Website {
         this.footer = document.createElement('footer');
         this.footer.id = 'footer';
 
-        this.drawGrid(this.game.player1);
-
+        this.updateScreen();
         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');
-        }
+        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.dataset.cell = `[${j + 1}, ${i + 1}]`;
                 cell.style.border = '1px solid black';
                 div.appendChild(cell);
             }
         }
-        this.container.appendChild(div);
+        return div;
+    }
+
+    updateScreen() {
+        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.appendChild(this.drawGrid(this.game.player2));
+
+        this.container.append(playerOneDiv, playerTwoDiv);
+    }
+
+    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);
+        this.game.handleUserMove(JSON.stringify(move));
+        console.log(this.game.player2.gameboard.scoreboard);
+        console.log(this.game.player2.gameboard.ships);
     }
 }