feat(client): Hand

client/src/App.vue

@@ -3,7 +3,7 @@
         <h2 id="header">Salut {{name}} !</h2>
         <Sockets/>
         <div id="game">
-            <Card value="ace" color="hearts"/>
+            <Hand :cards="mockCards()"/>
             <label for="messages"> Choose a message:</label>
             <select v-model="message" name="message" id="messages">
                 <option value="WAITING">J'attends</option>
@@ -22,7 +22,7 @@
     import 'es6-promise/auto' // Needed for Promise polyfill
     import VueSocketIO from 'vue-socket.io'
     import Vuex, {mapGetters, mapMutations} from 'vuex';
-    import Card from "./components/Card";
+    import Hand from "./components/Hand";
     import Sockets from "./Sockets";
     import {store} from './vuex-store'
 
@@ -45,7 +45,7 @@
         store: store,
         components: {
             Sockets,
-            Card
+            Hand
         },
         data: function () {
             return {
@@ -60,6 +60,14 @@
                 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"}
+                ];
+            },
             ...mapMutations(['setName']),
             // ...mapActions(['setNumberToRemoteValue']),
         }

client/src/components/Card.vue

@@ -16,6 +16,7 @@
                 return `/img/${this.value}_of_${this.color}.png`
             },
             text: function () {
+                console.log("Generating text for", this);
                 // Translate
                 let valueText = {
                     "2": "Deux",

client/src/components/Hand.vue

 <template>
-    <div class="card">
-        <img class="card-pic" v-bind:src="imageSrc()">
-        <p>{{ text() }}</p>
+    <div id="hand">
+        <p>{{count()}} cartes. </p>
+        <Card v-for="card in cards"
+              v-bind:key="card"
+              v-bind:value="card.value"
+              v-bind:color="card.color"
+        />
     </div>
 </template>
 <script>
+    import Card from "./Card";
+
     export default {
-        name: "Card",
+        name: "Hand",
+        components: {
+            Card
+        },
         props: {
-            value: String,
-            color: String,
+            cards: Array,
         },
         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}`
+            count() {
+                return this.cards.length;
             }
         }
     }
 </script>
 <style scoped>
     .card-pic {
-        max-width: 150px;
+        max-width: 100px;
     }
 </style>
\ No newline at end of file