Some styling and more components.
This commit is contained in:
parent
a47d382e71
commit
8e5f822c39
30
src/components/Card.vue
Normal file
30
src/components/Card.vue
Normal file
@ -0,0 +1,30 @@
|
||||
<template>
|
||||
<div class="card" v-bind:class="{ red: isRed }">{{card.number}} of {{card.shape}}</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "Card",
|
||||
props: ['card'],
|
||||
computed: {
|
||||
isRed: function () {
|
||||
return this.card.shape == "DIMONDS" || this.card.shape === "HEARTS";
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.card {
|
||||
width: 174px;
|
||||
height: 205px;
|
||||
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
|
||||
border-radius: 5px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.card.red {
|
||||
background: red;
|
||||
}
|
||||
|
||||
</style>
|
24
src/components/Deck.vue
Normal file
24
src/components/Deck.vue
Normal file
@ -0,0 +1,24 @@
|
||||
<template>
|
||||
<div class="deck">
|
||||
<div v-for="card in cards" v-bind:key="JSON.stringify(card)">
|
||||
<Card v-bind:card="card"/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Card from "@/components/Card";
|
||||
export default {
|
||||
name: "Deck",
|
||||
components: {Card},
|
||||
props: ['cards'],
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.deck {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-around;
|
||||
}
|
||||
</style>
|
@ -5,28 +5,26 @@
|
||||
<button v-on:click="initHand()">Tirer des cartes</button>
|
||||
<div v-if="cards != null && cards.length > 0">
|
||||
<h2>Cartes</h2>
|
||||
<div v-for="card in cards" v-bind:key="JSON.stringify(card)">
|
||||
{{card}}
|
||||
</div>
|
||||
<button v-on:click="sortMyHand()">Tirer des cartes</button>
|
||||
<Deck v-bind:cards="cards"/>
|
||||
<button v-if="sortResult == null" v-on:click="sortMyHand()">Tirer des cartes</button>
|
||||
</div>
|
||||
<div v-if="sortResult != null">
|
||||
<h2>Cartes Triées</h2>
|
||||
<h3><em>Shape order : {{sortResult.shapeOrder}}</em></h3>
|
||||
<h3><em>Number order : {{sortResult.numberOrder}}</em></h3>
|
||||
<div v-for="card in sortResult.sortedCards" v-bind:key="JSON.stringify(card)">
|
||||
{{card}}
|
||||
</div>
|
||||
<Deck v-bind:cards="sortResult.sortedCards"></Deck>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {getHand, sortHand, resetDeck} from '../services/DeckService'
|
||||
import Deck from "@/components/Deck";
|
||||
|
||||
|
||||
export default {
|
||||
name: "Table",
|
||||
components: {Deck},
|
||||
data() {
|
||||
return {
|
||||
cards: [],
|
||||
|
Loading…
Reference in New Issue
Block a user