refactor(client): Hello in app

client/src/App.vue

 <template>
     <div id="app">
-        <HelloWorld />
+        <h2 id="header">Salut {{name}} !</h2>
         <Sockets/>
         <div id="game">
             <Card value="ace" color="hearts"/>
@@ -22,7 +22,6 @@
     import 'es6-promise/auto' // Needed for Promise polyfill
     import VueSocketIO from 'vue-socket.io'
     import Vuex, {mapGetters, mapMutations} from 'vuex';
-    import HelloWorld from "./components/HelloWorld";
     import Card from "./components/Card";
     import Sockets from "./Sockets";
     import {store} from './vuex-store'
@@ -45,7 +44,6 @@
         name: "App",
         store: store,
         components: {
-            HelloWorld,
             Sockets,
             Card
         },

client/src/components/Hand.vue

+<template>
+    <div class="card">
+        <img class="card-pic" v-bind:src="imageSrc()">
+        <p>{{ text() }}</p>
+    </div>
+</template>
+<script>
+    export default {
+        name: "Card",
+        props: {
+            value: String,
+            color: String,
+        },
+        methods: {
+            imageSrc() {
+                return `/img/${this.value}_of_${this.color}.png`
+            },
+            text: function () {
+                // Translate
+                let valueText = {
+                    "2": "Deux",
+                    "3": "Trois",
+                    "4": "Quatre",
+                    "5": "Cinq",
+                    "6": "Six",
+                    "7": "Sept",
+                    "8": "Huit",
+                    "9": "Neuf",
+                    "10": "Dix",
+                    "jack": "Valet",
+                    "queen": "Dame",
+                    "king": "Roi",
+                    "ace": "As"
+                }[this.value];
+                let colorText = {
+                    "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}`
+            }
+        }
+    }
+</script>
+<style scoped>
+    .card-pic {
+        max-width: 150px;
+    }
+</style>
\ No newline at end of file

client/src/components/HelloWorld.vue

-<template>
-    <div class="hello">
-        <h1>Salut {{ this.printName() }} !</h1>
-    </div>
-</template>
-
-<script>
-    export default {
-        name: "HelloWorld",
-        props: {
-            name: String
-        },
-        methods: {
-            printName() {
-                let name = this.$store.name;
-                console.log("Saying hello to ", name);
-                return name
-            }
-        }
-    };
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
-    h3 {
-        margin: 40px 0 0;
-    }
-
-    ul {
-        list-style-type: none;
-        padding: 0;
-    }
-
-    li {
-        display: inline-block;
-        margin: 0 10px;
-    }
-
-    a {
-        color: #42b983;
-    }
-</style>