From 8e5f822c393bb7b2a42b2f9a0f8779dd37a22580 Mon Sep 17 00:00:00 2001
From: aminecmi <aminecmi@gmail.com>
Date: Sat, 30 Oct 2021 17:07:11 +0200
Subject: [PATCH] Some styling and more components.

---
 src/components/Card.vue  | 30 ++++++++++++++++++++++++++++++
 src/components/Deck.vue  | 24 ++++++++++++++++++++++++
 src/components/Table.vue | 12 +++++-------
 3 files changed, 59 insertions(+), 7 deletions(-)
 create mode 100644 src/components/Card.vue
 create mode 100644 src/components/Deck.vue

diff --git a/src/components/Card.vue b/src/components/Card.vue
new file mode 100644
index 0000000..759a5dc
--- /dev/null
+++ b/src/components/Card.vue
@@ -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>
diff --git a/src/components/Deck.vue b/src/components/Deck.vue
new file mode 100644
index 0000000..752645a
--- /dev/null
+++ b/src/components/Deck.vue
@@ -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>
diff --git a/src/components/Table.vue b/src/components/Table.vue
index 66bcb33..f75bd24 100644
--- a/src/components/Table.vue
+++ b/src/components/Table.vue
@@ -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: [],