Some styling and more components.

This commit is contained in:
aminecmi 2021-10-30 17:07:11 +02:00
parent a47d382e71
commit 8e5f822c39
3 changed files with 59 additions and 7 deletions

30
src/components/Card.vue Normal file
View 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
View 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>

View File

@ -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: [],