feat(client): Hand

parent 47dc1f6e
......@@ -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']),
}
......
......@@ -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",
......
<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
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment