Get possible boats to add #1}

src/components/GameBoard.component.js

@@ -55,12 +55,20 @@ export default class GameBoardComponent extends Component {
      */
     // rows = []
     column_labels = ["A", "B", "C", "D", "E", "F", "G", "H", "I"]
+<<<<<<< Updated upstream
+=======
+
+>>>>>>> Stashed changes
 
     async vue_on_create() {
         this.ready = true
     }
 
+<<<<<<< Updated upstream
     on_cell_click(row_i, cell_i) {
         alert(`${row_i} : ${cell_i}`)
     }
+=======
+    
+>>>>>>> Stashed changes
 }

src/components/TopLevel.component.js

@@ -3,6 +3,7 @@ import {GameState} from '../module/util.js'
 import game_service from '../services/GameState.service.js'
 
 const template = `
+<<<<<<< Updated upstream
 <div class="top-level-container">
     <div class="top-level-component">
         <div v-if="current_state === GameState.ChoosingNumberOfShips">
@@ -12,6 +13,24 @@ const template = `
             <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 class="top-level-component">
+    <div v-if="current_state === GameState.ChoosingNumberOfShips">
+        Choose number of ships:
+        <button @click="ship1" class="shipBtn">1 ship</button>
+        <button @click="ship2" class="shipBtn">2 ships</button>
+        <button @click="ship3" class="shipBtn">3 ships</button>
+        <button @click="ship4" class="shipBtn">4 ships</button>
+        <button @click="ship5" class="shipBtn">5 ships</button>
+    </div>
+<<<<<<< HEAD
+=======
+>>>>>>> 19aa3733d0604f37e6875b825eb51ccd4092d4c4
+    <div v-if="current_state !== GameState.ChoosingNumberOfShips" class="game-boards-container">
+        <!-- Opponent's board -->
+        <div class="game-board">
+            <app-game-board v-bind:rows="opponent_rows"></app-game-board>
+>>>>>>> Stashed changes
         </div>
         <div v-if="current_state !== GameState.ChoosingNumberOfShips" class="game-boards-container">
             <!-- Opponent's board -->

src/services/GameState.service.js

@@ -68,6 +68,23 @@ export class GameStateService {
         }
     }
 
+    get_possible_boats(number){
+      if (get_n_boats == 1) {
+          return (ships:x1)
+      }
+      if (get_n_boats == 2) {
+          return (ships:x1, x2)
+      }
+      if (get_n_boats == 3) {
+          return (ships:x1, x2, x3)
+      }
+      if (get_n_boats == 4) {
+          return (ships:x1, x2, x3,x4)
+      }
+      if (get_n_boats == 5) {
+          return (ships:x1, x2, x3, x4, x5)
+      }
+    }
     /**
      * The current state of the game.
      * @private

src/style/components.css

@@ -29,6 +29,7 @@
 /* Styles for the various grid cell states. */
 
 .game-board-cell-component {
+
     width: 40px;
     height: 40px;
     border: 1px solid grey;