From e2e8e530197115bf78dcd72483ad2209d065cef0 Mon Sep 17 00:00:00 2001
From: garrettmills <shout@garrettmills.dev>
Date: Sat, 12 Sep 2020 13:46:04 -0500
Subject: [PATCH] Add instructions display to top-level component

---
 src/components/TopLevel.component.js | 13 ++++++++++---
 src/module/lang.js                   | 12 +++++-------
 src/style/components.css             |  5 +++++
 3 files changed, 20 insertions(+), 10 deletions(-)

diff --git a/src/components/TopLevel.component.js b/src/components/TopLevel.component.js
index 460ded0..82115bb 100644
--- a/src/components/TopLevel.component.js
+++ b/src/components/TopLevel.component.js
@@ -1,12 +1,13 @@
 import {Component} from '../../lib/vues6.js'
 import {GameState, ShipType} from '../module/util.js'
+import {instructions} from '../module/lang.js'
 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" class="game-choose-ships-container">
-            Choose number of ships:
+            <span v-if="instructions">{{ instructions }}</span>
             <div style="margin-top: 30px;">
                 <button @click="ship(1)" class="shipBtn">1 ship</button>
                 <button @click="ship(2)" class="shipBtn">2 ships</button>
@@ -19,6 +20,12 @@ const template = `
             It is now {{ current_player_display }}'s turn!
             <button @click="confirm_player_change" class="playerBtn">Continue</button>
         </div>
+        <div
+            v-if="current_state !== GameState.ChoosingNumberOfShips && current_state !== GameState.PromptPlayerChange && instructions"
+            class="instructions"
+        >
+            {{ instructions }}
+        </div>
         <div
             v-if="current_state !== GameState.ChoosingNumberOfShips && current_state !== GameState.PromptPlayerChange"
             class="game-boards-container"
@@ -79,7 +86,7 @@ export default class TopLevelComponent extends Component {
      * The current instructions to be shown to the user.
      * @type {string}
      */
-    instructions = ''
+    instructions = instructions[GameState.ChoosingNumberOfShips]
 
     /**
      * True if the player should be able to place their ships.
@@ -113,7 +120,7 @@ export default class TopLevelComponent extends Component {
                 this.ships_to_place = game_service.get_possible_boats()
             }
 
-            // TODO add code for instructions
+            this.instructions = instructions[this.current_state]
         })
     }
 
diff --git a/src/module/lang.js b/src/module/lang.js
index 119ed1d..08ab92b 100644
--- a/src/module/lang.js
+++ b/src/module/lang.js
@@ -5,12 +5,10 @@ import { GameState } from './util.js'
  * @type {object}
  */
 const instructions = {
-  [GameState.ChoosingNumberOfShips]: 'Select the number of ships ',
-  [GameState.PlayerSetup]: 'Place your ships on the grid',
-  [GameState.PromptPlayerChange]: "It is your opponent's turn",
-  [GameState.PlayerTurn]: 'Select a cell to fire a missile',
-  [GameState.PlayerVictory]: 'You won!'
-  // and so on
+  [GameState.ChoosingNumberOfShips]: 'Select the number of ships both players will play with.',
+  [GameState.PlayerSetup]: 'Place your ships on your fleet\'s grid. You can hold the shift key to change the orientation.',
+  [GameState.PlayerTurn]: 'Select a cell on the opposing fleet\'s grid to fire a missile.',
+  [GameState.PlayerVictory]: '{player} won!'
 }
 
-export { instructions }
\ No newline at end of file
+export { instructions }
diff --git a/src/style/components.css b/src/style/components.css
index fef62b7..823e9ad 100644
--- a/src/style/components.css
+++ b/src/style/components.css
@@ -95,6 +95,11 @@ p {
     display: flex;
     align-items: center;
     justify-content: center;
+    flex-direction: column;
+}
+
+.top-level-component .instructions {
+    margin: 20px;
 }
 
 .app-scoreboard-component {