Icons and more displaying.

package.json

@@ -8,6 +8,9 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^1.2.36",
+    "@fortawesome/free-solid-svg-icons": "^5.15.4",
+    "@fortawesome/vue-fontawesome": "^2.0.6",
     "core-js": "^3.6.5",
     "vue": "^2.6.11"
   },

src/components/Card.vue

@@ -1,10 +1,17 @@
 <template>
-  <div class="card" v-bind:class="{ red: isRed }">{{card.number}} of {{card.shape}}</div>
+  <div class="card" v-bind:class="{ red: isRed }">
+    <div class="icon">
+      <Shape v-bind:shape="card.shape"/>
+    </div>
+    <span> {{card.number}}</span>
+  </div>
 </template>
 
 <script>
+import Shape from "@/components/Shape";
 export default {
   name: "Card",
+  components: {Shape},
   props: ['card'],
   computed: {
     isRed: function () {
@@ -24,6 +31,7 @@ export default {
   display: flex;
   justify-content: center;
   align-items: center;
+  position: relative;
 }
 
 .card.red {
@@ -36,4 +44,10 @@ export default {
   color: #FCFBFB;
 }
 
+.icon {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+}
+
 </style>

src/components/Shape.vue

@@ -0,0 +1,26 @@
+<template>
+  <span v-bind:class="{ red: isRed }">
+    <font-awesome-icon v-if="shape == 'DIAMONDS'" icon="gem" size="lg" />
+    <font-awesome-icon v-if="shape == 'CLUBS'" icon="spa" size="lg" />
+    <font-awesome-icon v-if="shape == 'HEARTS'" icon="heartbeat" size="lg" />
+    <font-awesome-icon v-if="shape == 'SPADES'" icon="leaf" size="lg" />
+  </span>
+</template>
+
+<script>
+export default {
+  name: "Shape",
+  props: ['shape'],
+  computed: {
+    isRed: function () {
+      return this.shape == "DIAMONDS" || this.shape === "HEARTS";
+    }
+  }
+}
+</script>
+
+<style scoped>
+.red {
+  color: #FF7474;
+}
+</style>

src/components/Table.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
-    <h1>Table</h1>
+    <h1>Table <button v-on:click="reset()">Reset</button></h1>
-    <button v-on:click="reset()">RESET</button>
+
     <button v-on:click="initHand()">Tirer des cartes</button>
     <div v-if="cards != null && cards.length > 0">
       <h2>Cartes</h2>
@@ -10,8 +10,8 @@
     </div>
     <div v-if="sortResult != null">
       <h2>Cartes Triées</h2>
-      <h3><em>Shape order : {{sortResult.shapeOrder}}</em></h3>
+      <h3><em>Shape order : <Shape class="shape" v-bind:shape="shape" v-for="shape in sortResult.shapeOrder" v-bind:key="shape"/></em></h3>
-      <h3><em>Number order : {{sortResult.numberOrder}}</em></h3>
+      <h3><em>Number order : <span class="number" v-for="n in sortResult.numberOrder" v-bind:key="n">{{n}}</span></em></h3>
       <Deck v-bind:cards="sortResult.sortedCards"></Deck>
     </div>
   </div>
@@ -20,11 +20,12 @@
 <script>
 import {getHand, sortHand, resetDeck} from '../services/DeckService'
 import Deck from "@/components/Deck";
+import Shape from "@/components/Shape";
 
 
 export default {
   name: "Table",
-  components: {Deck},
+  components: {Shape, Deck},
   data() {
     return {
       cards: [],
@@ -58,5 +59,7 @@ export default {
 </script>
 
 <style scoped>
-
+.shape, .number {
+  margin-right: 10px;
+}
 </style>

src/main.js

@@ -1,5 +1,15 @@
 import Vue from 'vue'
 import App from './App.vue'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import { faGem, faSpa, faHeartbeat, faLeaf } from '@fortawesome/free-solid-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
+
+library.add(faGem)
+library.add(faSpa)
+library.add(faHeartbeat)
+library.add(faLeaf)
+
+Vue.component('font-awesome-icon', FontAwesomeIcon)
 
 Vue.config.productionTip = false
 

yarn.lock

@@ -911,6 +911,30 @@
     "@babel/helper-validator-identifier" "^7.15.7"
     to-fast-properties "^2.0.0"
 
+"@fortawesome/fontawesome-common-types@^0.2.36":
+  version "0.2.36"
+  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.36.tgz#b44e52db3b6b20523e0c57ef8c42d315532cb903"
+  integrity sha512-a/7BiSgobHAgBWeN7N0w+lAhInrGxksn13uK7231n2m8EDPE3BMCl9NZLTGrj9ZXfCmC6LM0QLqXidIizVQ6yg==
+
+"@fortawesome/fontawesome-svg-core@^1.2.36":
+  version "1.2.36"
+  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.36.tgz#4f2ea6f778298e0c47c6524ce2e7fd58eb6930e3"
+  integrity sha512-YUcsLQKYb6DmaJjIHdDWpBIGCcyE/W+p/LMGvjQem55Mm2XWVAP5kWTMKWLv9lwpCVjpLxPyOMOyUocP1GxrtA==
+  dependencies:
+    "@fortawesome/fontawesome-common-types" "^0.2.36"
+
+"@fortawesome/free-solid-svg-icons@^5.15.4":
+  version "5.15.4"
+  resolved "https://registry.yarnpkg.com/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.15.4.tgz#2a68f3fc3ddda12e52645654142b9e4e8fbb6cc5"
+  integrity sha512-JLmQfz6tdtwxoihXLg6lT78BorrFyCf59SAwBM6qV/0zXyVeDygJVb3fk+j5Qat+Yvcxp1buLTY5iDh1ZSAQ8w==
+  dependencies:
+    "@fortawesome/fontawesome-common-types" "^0.2.36"
+
+"@fortawesome/vue-fontawesome@^2.0.6":
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/@fortawesome/vue-fontawesome/-/vue-fontawesome-2.0.6.tgz#87e691ed87f28f4667238573a29743f543a087f6"
+  integrity sha512-V3vT3flY15AKbUS31aZOP12awQI3aAzkr2B1KnqcHLmwrmy51DW3pwyBczKdypV8QxBZ8U68Hl2XxK2nudTxpg==
+
 "@hapi/address@2.x.x":
   version "2.1.4"
   resolved "https://registry.yarnpkg.com/@hapi/address/-/address-2.1.4.tgz#5d67ed43f3fd41a69d4b9ff7b56e7c0d1d0a81e5"