From 45aa8248fc18299575f43334a7bdcbd44b5ce7d2 Mon Sep 17 00:00:00 2001
From: garrettmills <shout@garrettmills.dev>
Date: Sat, 12 Sep 2020 13:33:33 -0500
Subject: [PATCH 1/2] Clean up styling of top level component; add fleet labels
 (#3)

---
 src/components/TopLevel.component.js | 20 ++++++++++++--------
 src/style/components.css             | 22 ++++++++++++++++++++++
 2 files changed, 34 insertions(+), 8 deletions(-)

diff --git a/src/components/TopLevel.component.js b/src/components/TopLevel.component.js
index 1ce0438..460ded0 100644
--- a/src/components/TopLevel.component.js
+++ b/src/components/TopLevel.component.js
@@ -5,17 +5,19 @@ import game_service from '../services/GameState.service.js'
 const template = `
 <div class="top-level-container">
     <div class="top-level-component">
-        <div v-if="current_state === GameState.ChoosingNumberOfShips">
+        <div v-if="current_state === GameState.ChoosingNumberOfShips" class="game-choose-ships-container">
             Choose number of ships:
-            <button @click="ship(1)" class="shipBtn">1 ship</button>
-            <button @click="ship(2)" class="shipBtn">2 ships</button>
-            <button @click="ship(3)" class="shipBtn">3 ships</button>
-            <button @click="ship(4)" class="shipBtn">4 ships</button>
-            <button @click="ship(5)" class="shipBtn">5 ships</button>
+            <div style="margin-top: 30px;">
+                <button @click="ship(1)" class="shipBtn">1 ship</button>
+                <button @click="ship(2)" class="shipBtn">2 ships</button>
+                <button @click="ship(3)" class="shipBtn">3 ships</button>
+                <button @click="ship(4)" class="shipBtn">4 ships</button>
+                <button @click="ship(5)" class="shipBtn">5 ships</button>
+            </div>
         </div>
-        <div v-if="current_state === GameState.PromptPlayerChange">
+        <div v-if="current_state === GameState.PromptPlayerChange" class="game-player-change-container">
             It is now {{ current_player_display }}'s turn!
-            <button @click="confirm_player_change" class="shipBtn">Continue</button>
+            <button @click="confirm_player_change" class="playerBtn">Continue</button>
         </div>
         <div
             v-if="current_state !== GameState.ChoosingNumberOfShips && current_state !== GameState.PromptPlayerChange"
@@ -24,6 +26,7 @@ const template = `
             <!-- Opponent's board -->
             <div class="game-board">
                 <app-game-board v-bind:rows="opponent_rows"></app-game-board>
+                <div class="fleet-label">Opposing fleet</div>
             </div>
     
             <!-- Player's board -->
@@ -34,6 +37,7 @@ const template = `
                     v-bind:ships_to_place="ships_to_place"
                     @shipplaced="on_ship_placed"
                 ></app-game-board>
+                <div class="fleet-label">Your fleet</div>
             </div>
         </div>
     </div>
diff --git a/src/style/components.css b/src/style/components.css
index 548a3a5..fef62b7 100644
--- a/src/style/components.css
+++ b/src/style/components.css
@@ -101,5 +101,27 @@ p {
 
 }
 
+.game-player-change-container, .game-choose-ships-container {
+    height: calc(40px * 9);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+}
 
+.playerBtn {
+    background-color: #327da8;
+    color: white;
+    padding: 5px 12px;
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+    font-size: 12px;
+    margin-top: 30px;
+}
+
+.fleet-label {
+    text-align: center;
+    margin: 20px;
+}
 

From 84f0cf0c76f998be6ae979349fe117f1642c6e6c Mon Sep 17 00:00:00 2001
From: Lucas Brakenridge <lbrakenridge@ku.edu>
Date: Sat, 12 Sep 2020 14:01:27 -0500
Subject: [PATCH 2/2] - Added Scoreboard with UI (unfinished UI)

---
 src/components/ScoreBoard.component.js | 22 +++++++++++++++++++++-
 1 file changed, 21 insertions(+), 1 deletion(-)

diff --git a/src/components/ScoreBoard.component.js b/src/components/ScoreBoard.component.js
index 3cdda0e..4532847 100644
--- a/src/components/ScoreBoard.component.js
+++ b/src/components/ScoreBoard.component.js
@@ -4,7 +4,27 @@ import {Player} from '../module/util.js'
 
 const template = `
 <div class="app-scoreboard-component">
-    Scoreboard Goes Here {{ player_one_score }}
+        <table class="scoreboard_table" style="width:50%">
+        <tr class="scoreboard_rows">
+            <th class="scoreboard_table_empty"></th>
+            <th class="scoreboard_table_header" colspan="3">scoreboard</th>
+        </tr>
+        <tr class="scoreboard_header_scoreProgress">
+            <th class="scoreboard_table_empty"></th>
+            <td class="scoreboard_data">score</td>
+            <td class="scoreboard_data">progress</td>
+        </tr>
+        <tr class="scoreboard_rows_score&progress">
+            <td class="scoreboard_player">player_1</td>
+            <td class="scoreboard_data">{{player_one_score}}</td>
+            <td class="scoreboard_data">{{player_one_progress}}</td>
+        </tr>
+        <tr class="scoreboard_lastRow">
+            <td class="scoreboard_player">player_2</td>
+            <td class="scoreboard_data">{{player_one_score}}</td>
+            <td class="scoreboard_data">{{player_two_progress}}</td>
+        </tr>
+    </table>
 </div>
 `
 export default class ScoreBoardComponent extends Component {