From 67e46413db7b5916f2fe06cadc94eacdf674a458 Mon Sep 17 00:00:00 2001
From: Paul-Louis NECH <pln@algolia.com>
Date: Sun, 26 Apr 2020 14:04:54 +0200
Subject: [PATCH] feat(client): Card

---
 client/src/App.vue             |  5 ++++-
 client/src/components/Card.vue | 54 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 58 insertions(+), 1 deletion(-)
 create mode 100644 client/src/components/Card.vue

diff --git a/client/src/App.vue b/client/src/App.vue
index b58dd72..704294f 100644
--- a/client/src/App.vue
+++ b/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 {
diff --git a/client/src/components/Card.vue b/client/src/components/Card.vue
new file mode 100644
index 0000000..0415907
--- /dev/null
+++ b/client/src/components/Card.vue
@@ -0,0 +1,54 @@
+<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
--
libgit2 0.27.0