<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 () {
                console.log("Generating text for", this);
                // 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>