valere/evilspins
1
0
Fork 0
Code Issues 29 Pull Requests 1 Actions Packages Projects 4 Releases Wiki Activity

sql #33

Open
valere wants to merge 34 commits from sql into master
pull from: sql
merge into: valere:master
Conversation 1 Commits 34 Files Changed 114 +92 -97
2 changed files with 92 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit a349205af9 - Show all commits

95
app/pages/index.vue
View File

@@ -1,5 +1,94 @@
<template> <template>
<div> <section class="platine-card" :class="{ 'platine-card--platine-open': platineOpen }">
here is the New New front <Card :card="card!" :is-face-up @click="clickOnCard" :role="platineOpen ? 'img' : 'button'" showPlayButtonFaceUp />
</div> <Platine v-if="platineOpen && card" :card="card" autoplay />
<CloseButton v-if="platineOpen" @click="platineOpen = false" />
</section>
</template> </template>
<script setup lang="ts">
import type { Card } from '~~/types/types'
const { data: card, pending, error } = await useFetch<Card>('/api/card/random')
const isFaceUp = ref(false)
const platineOpen = ref(false)
useHead({
title: computed(() =>
card.value ? `${card.value.artist} - ${card.value.title}` : 'Loading...'
)
})
onMounted(() => {
setTimeout(() => {
isFaceUp.value = true
}, 700)
})
const clickOnCard = () => {
platineOpen.value = !platineOpen.value
}
</script>
<style scoped lang="scss">
$open-speed: 0.4s;
.platine-card {
@apply screen-centered h-screen;
:deep(.card) {
transition: width $open-speed, height $open-speed, transform 0.1s;
position: absolute;
.face-up,
.pochette {
transition: border-radius $open-speed, box-shadow $open-speed;
&:active {
.play-button {
@apply scale-90;
}
}
}
}
&--platine-open {
.card {
pointer-events: none;
&:focus {
@apply z-auto scale-100;
}
}
.card,
.platine {
width: 100vmin;
height: 100vmin;
}
&:deep(.card) {
.face-up {
border-radius: 999px;
@apply shadow-xl;
.pochette {
border-radius: 999px;
}
.rank {
opacity: 0;
}
}
.play-button,
.card-body,
.face-down {
display: none;
opacity: 0;
}
}
}
}
</style>

94
app/pages/random.vue
View File

@@ -1,94 +0,0 @@
<template>
<section class="platine-card" :class="{ 'platine-card--platine-open': platineOpen }">
<Card :card="card!" :is-face-up @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 { data: card, pending, error } = await useFetch<Card>('/api/card/random')
const isFaceUp = ref(false)
const platineOpen = ref(false)
useHead({
title: computed(() =>
card.value ? `${card.value.artist} - ${card.value.title}` : 'Loading...'
)
})
onMounted(() => {
setTimeout(() => {
isFaceUp.value = true
}, 700)
})
const clickOnCard = () => {
platineOpen.value = !platineOpen.value
}
</script>
<style scoped lang="scss">
$open-speed: 0.4s;
.platine-card {
@apply screen-centered h-screen;
:deep(.card) {
transition: width $open-speed, height $open-speed, transform 0.1s;
position: absolute;
.face-up,
.pochette {
transition: border-radius $open-speed, box-shadow $open-speed;
&:active {
.play-button {
@apply scale-90;
}
}
}
}
&--platine-open {
.card {
pointer-events: none;
&:focus {
@apply z-auto scale-100;
}
}
.card,
.platine {
width: 100vmin;
height: 100vmin;
}
&:deep(.card) {
.face-up {
border-radius: 999px;
@apply shadow-xl;
.pochette {
border-radius: 999px;
}
.rank {
opacity: 0;
}
}
.play-button,
.card-body,
.face-down {
display: none;
opacity: 0;
}
}
}
}
</style>