AmineB/cartes-ui
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Icons and more displaying.

Browse Source
This commit is contained in:
aminecmi 2021-10-30 21:31:14 +02:00
parent 0f2f09d530
commit 08b3cd4056
6 changed files with 87 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
package.json
View File

@ -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"
},

16
src/components/Card.vue
View File

@ -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>

26
src/components/Shape.vue Normal file
View File

@ -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>

15
src/components/Table.vue
View File

@ -1,7 +1,7 @@
<template>
<div>
<h1>Table</h1>
<button v-on:click="reset()">RESET</button>
<h1>Table <button v-on:click="reset()">Reset</button></h1>
<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>Number order : {{sortResult.numberOrder}}</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 : <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>

10
src/main.js
View File

@ -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

24
yarn.lock
View File

@ -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"