94 lines
1.8 KiB
Vue
94 lines
1.8 KiB
Vue
<template>
|
|
<section class="playing-card" :class="{ 'platine-open': platineOpen }">
|
|
<Card :card="props.card!" :is-face-up="props.isFaceUp" @click="clickOnCard" :role="platineOpen ? 'img' : 'button'"
|
|
showPlayButtonFaceUp />
|
|
<Platine v-if="platineOpen && card" :card="card" autoplay />
|
|
<CloseButton v-if="platineOpen" @click="platineOpen = false" />
|
|
</section>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import type { Card } from '~~/types/types'
|
|
|
|
const props = defineProps<{ card: Card, isFaceUp: boolean }>()
|
|
|
|
const platineOpen = ref(false)
|
|
|
|
const clickOnCard = () => {
|
|
setTimeout(() => {
|
|
platineOpen.value = !platineOpen.value
|
|
}, 600);
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
$open-speed: 0.4s;
|
|
|
|
.playing-card {
|
|
@apply size-card;
|
|
position: relative;
|
|
|
|
.card,
|
|
.platine {
|
|
height: 100%;
|
|
width: 100%;
|
|
transition: width $open-speed, height $open-speed, min-width $open-speed,
|
|
min-height $open-speed, transform 0.1s;
|
|
}
|
|
|
|
:deep(.card) {
|
|
// transition: width $open-speed, height $open-speed, transform 0.1s;
|
|
position: absolute;
|
|
|
|
.face-up,
|
|
.cover {
|
|
transition: border-radius $open-speed, box-shadow $open-speed;
|
|
|
|
&:active {
|
|
.play-button {
|
|
@apply scale-90;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&.platine-open {
|
|
$open-size: 20rem;
|
|
width: $open-size;
|
|
height: $open-size;
|
|
min-height: $open-size;
|
|
min-width: $open-size;
|
|
|
|
.card {
|
|
pointer-events: none;
|
|
|
|
&:focus {
|
|
@apply z-auto scale-100;
|
|
}
|
|
}
|
|
|
|
&:deep(.card) {
|
|
.face-up {
|
|
border-radius: 100%;
|
|
@apply shadow-xl;
|
|
|
|
.cover {
|
|
border-radius: 100%;
|
|
}
|
|
|
|
.rank,
|
|
.play-button {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
.play-button,
|
|
.card-body,
|
|
.face-down {
|
|
display: none;
|
|
opacity: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style> |