feat(client): Card

client/src/App.vue

@@ -3,6 +3,7 @@
         <HelloWorld />
         <Sockets/>
         <div id="game">
+            <Card value="ace" color="hearts"/>
             <label for="messages"> Choose a message:</label>
             <select v-model="message" name="message" id="messages">
                 <option value="WAITING">J'attends</option>
@@ -22,6 +23,7 @@
     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'
 
@@ -44,7 +46,8 @@
         store: store,
         components: {
             HelloWorld,
-            Sockets
+            Sockets,
+            Card
         },
         data: function () {
             return {

client/src/components/Card.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