style: Solve warnings

client/src/App.vue

 <template>
   <div id="app">
-        <h2 id="header">Salut {{name}} !</h2>
-        <Sockets/>
+    <h2 id="header">Salut {{ name }} !</h2>
+    <Sockets />
     <div id="game">
-            <Hand :cards="mockCards()"/>
+      <Hand :cards="mockCards()" />
       <label for="messages"> Choose a message:</label>
       <select v-model="message" name="message" id="messages">
         <option value="WAITING">J'attends</option>
@@ -17,75 +17,79 @@
 </template>
 
 <script>
+import Vue from "vue";
+import "es6-promise/auto"; // Needed for Promise polyfill
+import VueSocketIO from "vue-socket.io";
+import Vuex, { mapGetters, mapMutations } from "vuex";
+import Hand from "./components/Hand";
+import Sockets from "./Sockets";
+import { store } from "./vuex-store";
+import { BootstrapVue, IconsPlugin } from "bootstrap-vue";
+import "bootstrap/dist/css/bootstrap.css";
+import "bootstrap-vue/dist/bootstrap-vue.css";
 
-    import Vue from 'vue'
-    import 'es6-promise/auto' // Needed for Promise polyfill
-    import VueSocketIO from 'vue-socket.io'
-    import Vuex, {mapGetters, mapMutations} from 'vuex';
-    import Hand from "./components/Hand";
-    import Sockets from "./Sockets";
-    import {store} from './vuex-store'
+Vue.use(Vuex);
+Vue.use(BootstrapVue);
+Vue.use(IconsPlugin);
 
-    Vue.use(Vuex);
-
-    Vue.use(new VueSocketIO({
+Vue.use(
+  new VueSocketIO({
     debug: true,
-        connection: 'http://localhost:9042',
+    connection: "http://localhost:9042",
     vuex: {
       store,
-            actionPrefix: 'SOCKET_',
-            mutationPrefix: 'SOCKET_'
+      actionPrefix: "SOCKET_",
+      mutationPrefix: "SOCKET_"
     },
-        options: {path: "/socket.io/"} //Optional options
-    }));
-
+    options: { path: "/socket.io/" } //Optional options
+  })
+);
 
-    export default {
+export default {
   name: "App",
   store: store,
   components: {
     Sockets,
     Hand
   },
-        data: function () {
+  data: function() {
     return {
       message: "WAITING"
-            }
+    };
   },
   computed: {
-            ...mapGetters(['isConnected', 'name', 'socketMessage'])
+    ...mapGetters(["isConnected", "name", "socketMessage"])
   },
   methods: {
-            sendMessage: function (message) {
+    sendMessage: function(message) {
       console.log("User wants to send", message);
       this.$socket.emit("message", message);
     },
     mockCards() {
       return [
-                    {"value": "ace", "color": "hearts"},
-                    {"value": "ace", "color": "clubs"},
-                    {"value": "ace", "color": "diamonds"},
-                    {"value": "ace", "color": "spades"}
+        { value: "ace", color: "hearts" },
+        { value: "ace", color: "clubs" },
+        { value: "ace", color: "diamonds" },
+        { value: "ace", color: "spades" }
       ];
     },
-            ...mapMutations(['setName']),
+    ...mapMutations(["setName"])
     // ...mapActions(['setNumberToRemoteValue']),
   }
-    };
-
+};
 </script>
 
 <style>
-    #app {
+#app {
   font-family: Avenir, Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-align: center;
   color: #2c3e50;
   margin-top: 60px;
-    }
+}
 
-    #game {
+#game {
   margin-top: 20px;
-    }
+}
 </style>

client/src/components/Card.vue

 <template>
   <div class="card">
-        <img class="card-pic" v-bind:src="imageSrc()">
+    <div>
+      <b-card
+        title="Card Title"
+        img-src="https://picsum.photos/600/300/?image=25"
+        img-alt="Image"
+        img-top
+        tag="article"
+        style="max-width: 20rem;"
+        class="mb-2"
+      >
+        <b-card-text>
+          Some quick example text to build on the card title and make up the
+          bulk of the card's content.
+        </b-card-text>
+
+        <b-button href="#" variant="primary">Go somewhere</b-button>
+      </b-card>
+    </div>
+    <img class="card-pic" v-bind:src="imageSrc()" />
     <p>{{ text() }}</p>
   </div>
 </template>
 <script>
-    export default {
+export default {
   name: "Card",
   props: {
     value: String,
-            color: String,
+    color: String
   },
   methods: {
     imageSrc() {
-                return `/img/${this.value}_of_${this.color}.png`
+      return `/img/${this.value}_of_${this.color}.png`;
     },
-            text: function () {
-                console.log("Generating text for", this);
+    text: function() {
       // Translate
       let valueText = {
         "2": "Deux",
@@ -28,28 +45,28 @@
         "8": "Huit",
         "9": "Neuf",
         "10": "Dix",
-                    "jack": "Valet",
-                    "queen": "Dame",
-                    "king": "Roi",
-                    "ace": "As"
+        jack: "Valet",
+        queen: "Dame",
+        king: "Roi",
+        ace: "As"
       }[this.value];
       let colorText = {
-                    "hearts": "Coeur",
-                    "spades": "Pique",
-                    "clubs": "Trèfle",
-                    "diamonds": "Carreau"
+        hearts: "Coeur",
+        spades: "Pique",
+        clubs: "Trèfle",
+        diamonds: "Carreau"
       }[this.color];
 
       // Capitalize
       valueText = valueText.charAt(0).toUpperCase() + valueText.slice(1);
       colorText = colorText.charAt(0).toUpperCase() + colorText.slice(1);
-                return `${valueText} de ${colorText}`
-            }
+      return `${valueText} de ${colorText}`;
     }
   }
+};
 </script>
 <style scoped>
-    .card-pic {
+.card-pic {
   max-width: 150px;
-    }
+}
 </style>

client/src/components/Hand.vue

 <template>
   <div id="hand">
-        <p>{{count()}} cartes. </p>
-        <Card v-for="card in cards"
+    <p>{{ count() }} cartes.</p>
+    <Card
+      v-for="card in cards"
       v-bind:key="card.value + ' ' + card.color"
       v-bind:value="card.value"
       v-bind:color="card.color"
@@ -9,25 +10,25 @@
   </div>
 </template>
 <script>
-    import Card from "./Card";
+import Card from "./Card";
 
-    export default {
+export default {
   name: "Hand",
   components: {
     Card
   },
   props: {
-            cards: Array,
+    cards: Array
   },
   methods: {
     count() {
       return this.cards.length;
     }
   }
-    }
+};
 </script>
 <style scoped>
-    .card-pic {
+.card-pic {
   max-width: 100px;
-    }
+}
 </style>