add list of boats alive or dead

Author: alexfauquette

src/components/BattleBoard.vue

@@ -1,15 +1,18 @@
 <template>
   <div class="battle-board">
     <div class="boards">
+      <Boats :boats="playerBoats" />
       <PlayBoard :title="'Player'" :board="playerCellsBoard" :ships-visible="true" />
       <PlayBoard :title="'IA'" :board="IACellsBoard" :ships-visible="false" @play="play" />
+      <Boats :boats="IABoats" />
     </div>
     <button class="start-button" @click="startGame">Start Game</button>
   </div>
 </template>
 
 <script>
 import PlayBoard from "./PlayBoard.vue";
+import Boats from "./Boats.vue";
 import { generateRandomBoard } from "../services/board-helper.js";
 import { shoot } from "../services/play-helper.js";
 import { findTargetCellV2 } from "../services/ia-helper.js";
@@ -19,12 +22,15 @@ import Vue from "vue";
 export default {
   name: "BattleBoard",
   components: {
-    PlayBoard
+    PlayBoard,
+    Boats
   },
   data: function() {
     return {
       playerCellsBoard: {},
       IACellsBoard: {},
+      IABoats: {},
+      playerBoats: {},
       gameStarted: false,
       humanCanPlay: true
     };

src/components/Boats.vue

@@ -0,0 +1,54 @@
+<template>
+  <div>
+    <ol class="boats-liste">
+      <li
+        v-for="boat in boatsInfos"
+        :key="boat.name"
+        v-bind:class="{sunk: boat.isSunk}"
+      >{{boat.name}} ({{boat.nbCells}})</li>
+    </ol>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Boats",
+  props: {
+    boats: {
+      type: Object,
+      required: true
+    }
+  },
+  computed: {
+    boatsInfos: function() {
+      const x = Object.keys(this.boats)
+        .map(name => ({
+          name,
+          nbCells: this.boats[name].cells.length,
+          isSunk: this.boats[name].nbOfAliveCells === 0
+        }))
+        .sort((boat1, boat2) =>
+          boat1.nbCells < boat2.nbCells ||
+          (boat1.nbCells === boat2.nbCells && boat1.name < boat2.name)
+            ? 1
+            : -1
+        );
+      return x;
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.sunk {
+  text-decoration: line-through;
+  color: red;
+}
+.boats-liste {
+  list-style: none;
+  padding: 100% 0;
+  margin: 0;
+  font-size: 18px;
+  font-weight: 500;
+}
+</style>