208 lines
6.2 KiB
Vue
208 lines
6.2 KiB
Vue
<template>
|
|
<article class="spell-card" v-bind:class="{ active: isFlipped }" @click="toggleCard">
|
|
<div class="content">
|
|
<header>
|
|
<h3>{{ name }}</h3>
|
|
</header>
|
|
<section class="casting-header">
|
|
<div class="casting-infos">
|
|
<div class="type">
|
|
<div class="level">
|
|
<div class="label">
|
|
<span>LV.</span>
|
|
<br>
|
|
<span>MIN</span>
|
|
</div>
|
|
<var>{{ level }}</var>
|
|
</div>
|
|
<ul class="schools">
|
|
<li v-for="(school, index) in schools" :key="index">
|
|
{{ school }}
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="cost">
|
|
<span class="label">Malus</span>
|
|
<var>{{ cost }}</var>
|
|
</div>
|
|
<div class="charge">
|
|
<span class="label">Charge</span>
|
|
<var>{{ charge }}</var>
|
|
</div>
|
|
</div>
|
|
<div class="casting-ingredients">
|
|
<p class="title">Nécessite</p>
|
|
<p class="content">
|
|
{{ ingredients }}
|
|
</p>
|
|
</div>
|
|
</section>
|
|
<hr>
|
|
<section class="spell-description">
|
|
<p v-for="(line, index) of description" :key="index">
|
|
{{ line }}
|
|
</p>
|
|
</section>
|
|
<hr>
|
|
<footer v-if="variables">
|
|
<div class="label">Variables</div>
|
|
<div class="variables">
|
|
<div v-for="(variable, index) in variables" :key="index" class="xyz">
|
|
<span>{{ variable.name }}</span>
|
|
<var>{{ variable.description }}</var>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
</article>
|
|
</template>
|
|
|
|
<script>
|
|
|
|
export default {
|
|
name: 'spell-card',
|
|
props: {
|
|
name: String,
|
|
description: Array,
|
|
level: String,
|
|
schools: Array,
|
|
ingredients: String,
|
|
charge: String,
|
|
cost: String,
|
|
variables: Array,
|
|
},
|
|
data() {
|
|
return {
|
|
isFlipped: false,
|
|
}
|
|
},
|
|
methods: {
|
|
toggleCard: async function() {
|
|
this.isFlipped = !this.isFlipped;
|
|
}
|
|
},
|
|
}
|
|
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
|
|
.spell-card {
|
|
max-width: 35rem;
|
|
padding: .5rem;
|
|
margin: .5rem auto .5rem;
|
|
background: $spell-card--innerborder;
|
|
border: solid 1px rgba($primary--base, .5);
|
|
border-radius: .5rem;
|
|
box-shadow: .0 .0 .75rem rgba($primary--base, .25);
|
|
|
|
> .content {
|
|
max-width: 35rem;
|
|
height: 100%;
|
|
padding: .75rem;
|
|
background: $white;
|
|
|
|
header {
|
|
h3 {
|
|
padding: .5rem;
|
|
text-align: center;
|
|
color: $white;
|
|
text-transform: uppercase;
|
|
background: $black;
|
|
}
|
|
}
|
|
|
|
.casting-header {
|
|
display: flex;
|
|
> * {
|
|
width: 50%;
|
|
}
|
|
|
|
.casting-infos {
|
|
margin: .75rem 0;
|
|
padding-right: .75rem;
|
|
border-right: 1px solid rgba($black, .25);
|
|
.type {
|
|
margin-bottom: .5rem;
|
|
display: flex;
|
|
> * {
|
|
width: 50%;
|
|
}
|
|
.level {
|
|
.label {
|
|
margin-right: .25rem;
|
|
display: inline-block;
|
|
}
|
|
var {
|
|
display: inline-block;
|
|
font-size: 2.3em;
|
|
}
|
|
}
|
|
}
|
|
.cost, .charge {
|
|
font-size: 0.9rem;
|
|
> * {
|
|
vertical-align: middle;
|
|
}
|
|
.label {
|
|
display: inline-block;
|
|
width: 30%;
|
|
text-transform: uppercase;
|
|
}
|
|
var {
|
|
display: inline-block;
|
|
}
|
|
}
|
|
}
|
|
|
|
.casting-ingredients {
|
|
margin: .75rem 0;
|
|
padding-left: .75rem;
|
|
.title {
|
|
margin-bottom: .25rem;
|
|
font-size: .9rem;
|
|
font-weight: bold;
|
|
text-transform: uppercase;
|
|
}
|
|
.content {
|
|
padding-top: 1rem;
|
|
font-size: .85rem;
|
|
text-align: justify;
|
|
text-align-last: center;
|
|
}
|
|
}
|
|
}
|
|
|
|
.spell-description {
|
|
padding: .75rem 0;
|
|
font-size: .85rem;
|
|
p {
|
|
&:not(:last-of-type) {
|
|
margin-bottom: .5rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
footer {
|
|
padding: .75rem 0 0;
|
|
display: flex;
|
|
align-items: center;
|
|
.label {
|
|
margin-right: 1rem;
|
|
}
|
|
.variables {
|
|
.xyz {
|
|
span {
|
|
font-size: 1.1rem;
|
|
font-weight: bold;
|
|
margin-right: 1rem;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</style> |