Clean up styling of top level component; add fleet labels (#3)

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>

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