From 60d599eb3227b786926797b74f76f5e4fb1ba3d1 Mon Sep 17 00:00:00 2001
From: Alexandre Fauquette <alex.fauquette@gmail.com>
Date: Mon, 30 Sep 2019 13:53:50 +0200
Subject: [PATCH] add list of boats alive or dead

---
 src/components/BattleBoard.vue | 23 +++++---------
 src/components/Boats.vue       | 55 ++++++++++++++++++++++++++++++++++
 2 files changed, 63 insertions(+), 15 deletions(-)
 create mode 100644 src/components/Boats.vue

diff --git a/src/components/BattleBoard.vue b/src/components/BattleBoard.vue
index 35f91ce..3cbfe26 100644
--- a/src/components/BattleBoard.vue
+++ b/src/components/BattleBoard.vue
@@ -1,20 +1,11 @@
 <template>
   <div class="battle-board">
-    <div v-if="winner" class="end-game-message" :class="this.winner">
-      {{ this.winner }} wins !!!
-    </div>
+    <div v-if="winner" class="end-game-message" :class="this.winner">{{ this.winner }} wins !!!</div>
     <div v-else class="boards">
-      <PlayBoard
-        title="Player"
-        :board="playerCellsBoard"
-        :ships-visible="true"
-      />
-      <PlayBoard
-        title="IA"
-        :board="IACellsBoard"
-        :ships-visible="false"
-        @play="play"
-      />
+      <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>
@@ -22,6 +13,7 @@
 
 <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";
@@ -29,7 +21,8 @@ import { findTargetCellV2 } from "../services/ia-helper.js";
 export default {
   name: "BattleBoard",
   components: {
-    PlayBoard
+    PlayBoard,
+    Boats
   },
   data: function() {
     return {
diff --git a/src/components/Boats.vue b/src/components/Boats.vue
new file mode 100644
index 0000000..468e363
--- /dev/null
+++ b/src/components/Boats.vue
@@ -0,0 +1,55 @@
+<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)
+        .filter(name => !!this.boats[name].cells)
+        .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>