yeah
This commit is contained in:
valere
@@ -1,26 +0,0 @@
|
||||
<template>
|
||||
<boxes />
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useRoute } from 'vue-router'
|
||||
import { useUiStore } from '~/store/ui'
|
||||
import { useDataStore } from '~/store/data'
|
||||
|
||||
// Configuration du layout
|
||||
definePageMeta({
|
||||
layout: 'default'
|
||||
})
|
||||
|
||||
const uiStore = useUiStore()
|
||||
const dataStore = useDataStore()
|
||||
const route = useRoute()
|
||||
|
||||
onMounted(async () => {
|
||||
await dataStore.loadData()
|
||||
const idParam = Array.isArray(route.params.id) ? route.params.id[0] : route.params.id
|
||||
if (typeof idParam === 'string' && idParam.length > 0) {
|
||||
uiStore.selectBox(idParam)
|
||||
}
|
||||
})
|
||||
</script>
|
||||
@@ -1,202 +0,0 @@
|
||||
<template>
|
||||
<div class="card-page">
|
||||
<div v-if="loading" class="loading">
|
||||
<div class="spinner"></div>
|
||||
</div>
|
||||
|
||||
<Transition name="card-fade" mode="out-in">
|
||||
<div v-if="!loading && track" class="card-container" @click="playTrack">
|
||||
<Card :track="track" :is-face-up="true" class="card-item" />
|
||||
</div>
|
||||
|
||||
<div v-else-if="error" class="error-message">
|
||||
{{ error }}
|
||||
</div>
|
||||
</Transition>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, onBeforeUnmount } from 'vue'
|
||||
import { useRoute } from 'vue-router'
|
||||
import { usePlayerStore } from '~/store/player'
|
||||
import { useCardStore } from '~/store/card'
|
||||
import { useDataStore } from '~/store/data'
|
||||
import type { Track } from '~~/types/types'
|
||||
|
||||
const route = useRoute()
|
||||
const playerStore = usePlayerStore()
|
||||
const cardStore = useCardStore()
|
||||
const dataStore = useDataStore()
|
||||
|
||||
const track = ref<Track | null>(null)
|
||||
const loading = ref(true)
|
||||
const error = ref<string | null>(null)
|
||||
const hasUserInteracted = ref(false)
|
||||
const audioElement = ref<HTMLAudioElement | null>(null)
|
||||
|
||||
// Récupérer les données de la piste
|
||||
const fetchTrack = async () => {
|
||||
try {
|
||||
loading.value = true
|
||||
error.value = null
|
||||
|
||||
// S'assurer que les données sont chargées
|
||||
if (!dataStore.isLoaded) {
|
||||
await dataStore.loadData()
|
||||
}
|
||||
|
||||
// Récupérer la piste par son ID
|
||||
const trackId = Array.isArray(route.params.id) ? route.params.id[0] : route.params.id || ''
|
||||
const foundTrack = dataStore.getTrackById(trackId)
|
||||
|
||||
if (foundTrack) {
|
||||
track.value = foundTrack
|
||||
// Marquer la carte comme révélée
|
||||
if (foundTrack.id) {
|
||||
cardStore.revealCard(Number(foundTrack.id))
|
||||
}
|
||||
} else {
|
||||
error.value = 'Carte non trouvée'
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Erreur lors du chargement de la piste:', err)
|
||||
error.value = 'Une erreur est survenue lors du chargement de la piste'
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// Gérer la première interaction utilisateur
|
||||
const handleFirstInteraction = () => {
|
||||
if (!hasUserInteracted.value) {
|
||||
hasUserInteracted.value = true
|
||||
if (track.value) {
|
||||
playerStore.playTrack(track.value)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Configurer les écouteurs d'événements pour la première interaction
|
||||
const setupInteractionListeners = () => {
|
||||
const events: (keyof WindowEventMap)[] = ['click', 'touchstart', 'keydown']
|
||||
const handleInteraction = () => {
|
||||
handleFirstInteraction()
|
||||
events.forEach(event => {
|
||||
window.removeEventListener(event, handleInteraction as EventListener)
|
||||
})
|
||||
}
|
||||
|
||||
events.forEach(event => {
|
||||
window.addEventListener(event, handleInteraction as EventListener, { once: true } as AddEventListenerOptions)
|
||||
})
|
||||
|
||||
return () => {
|
||||
events.forEach(event => {
|
||||
window.removeEventListener(event, handleInteraction as EventListener)
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
// Lire la piste
|
||||
const playTrack = () => {
|
||||
if (track.value) {
|
||||
playerStore.playTrack(track.value)
|
||||
}
|
||||
}
|
||||
|
||||
// Charger les données au montage du composant
|
||||
onMounted(async () => {
|
||||
await fetchTrack()
|
||||
|
||||
// Configurer les écouteurs d'événements pour la première interaction
|
||||
const cleanup = setupInteractionListeners()
|
||||
|
||||
// Nettoyer les écouteurs lors du démontage du composant
|
||||
onBeforeUnmount(() => {
|
||||
cleanup()
|
||||
})
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.card-page {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 1rem;
|
||||
background: linear-gradient(135deg, #1a202c 0%, #2d3748 100%);
|
||||
}
|
||||
|
||||
.loading {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.spinner {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border: 4px solid rgba(255, 255, 255, 0.1);
|
||||
border-radius: 50%;
|
||||
border-top-color: #4299e1;
|
||||
animation: spin 1s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.card-container {
|
||||
perspective: 1000px;
|
||||
cursor: pointer;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.card-container:hover {
|
||||
transform: scale(1.02);
|
||||
}
|
||||
|
||||
.card-item {
|
||||
transform-style: preserve-3d;
|
||||
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
animation: cardAppear 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
|
||||
opacity: 0;
|
||||
transform: translateY(20px) rotateY(10deg);
|
||||
}
|
||||
|
||||
@keyframes cardAppear {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(20px) rotateY(10deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateY(0) rotateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.error-message {
|
||||
color: #feb2b2;
|
||||
background-color: #742a2a;
|
||||
padding: 1rem 2rem;
|
||||
border-radius: 0.5rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* Animation de transition */
|
||||
.card-fade-enter-active,
|
||||
.card-fade-leave-active {
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.card-fade-enter-from,
|
||||
.card-fade-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
</style>
|
||||
43
app/pages/card/[slug].vue
Normal file
43
app/pages/card/[slug].vue
Normal file
@@ -0,0 +1,43 @@
|
||||
<template>
|
||||
<section class="screen-centered">
|
||||
<Card :card="card" :isFaceUp="isFaceUp" @click="clickOnSlugCard" />
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { Card } from '~~/types/types'
|
||||
const route = useRoute()
|
||||
const slug = route.params.slug as string
|
||||
const isFaceUp = ref(false)
|
||||
|
||||
const { data: card, pending, error } = await useFetch<Card>(`/api/card/${slug}`)
|
||||
|
||||
useHead({
|
||||
title: computed(() =>
|
||||
card.value ? `${card.value.artist} - ${card.value.title}` : 'Loading...'
|
||||
)
|
||||
})
|
||||
|
||||
const clickOnSlugCard = () => {
|
||||
isFaceUp.value = true
|
||||
const audio = new Audio(card.value?.url_audio)
|
||||
audio.play()
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
setTimeout(() => {
|
||||
clickOnSlugCard()
|
||||
}, 700)
|
||||
})
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.screen-centered {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
height: 100dvh;
|
||||
width: 100dvw;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
}
|
||||
</style>
|
||||
@@ -1,27 +1,5 @@
|
||||
<template>
|
||||
<boxes />
|
||||
<div>
|
||||
here is the New front
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { useUiStore } from '~/store/ui'
|
||||
import { useDataStore } from '~/store/data'
|
||||
|
||||
// Configuration du layout
|
||||
definePageMeta({
|
||||
layout: 'default'
|
||||
})
|
||||
|
||||
const uiStore = useUiStore()
|
||||
|
||||
onMounted(async () => {
|
||||
const dataStore = useDataStore()
|
||||
await dataStore.loadData()
|
||||
uiStore.listBoxes()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.logo {
|
||||
filter: drop-shadow(3px 3px 0 rgb(0 0 0 / 0.7));
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,3 +0,0 @@
|
||||
<template>
|
||||
holo
|
||||
</template>
|
||||
@@ -1,46 +0,0 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<h1>Liste des pages Story</h1>
|
||||
<ul>
|
||||
<li v-for="page in pages" :key="page.name">
|
||||
<NuxtLink :to="`/story/${page.name}`">
|
||||
{{ page.name }}
|
||||
</NuxtLink>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const pages = [
|
||||
{ name: 'holo' },
|
||||
{ name: 'mix' },
|
||||
{ name: 'test' }
|
||||
]
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.container {
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
li {
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #2563eb;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
</style>
|
||||
@@ -1,60 +0,0 @@
|
||||
<template>
|
||||
<div class="mix">
|
||||
<Platine :track="track1" />
|
||||
<Platine :track="track2" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { useDataStore } from '~/store/data'
|
||||
|
||||
const dataStore = useDataStore()
|
||||
const track1 = ref(null)
|
||||
const track2 = ref(null)
|
||||
|
||||
// Configuration du layout
|
||||
definePageMeta({
|
||||
layout: 'empty'
|
||||
})
|
||||
|
||||
onMounted(async () => {
|
||||
await dataStore.loadData()
|
||||
track1.value = dataStore.getRandomPlaylistTrack()
|
||||
track2.value = dataStore.getRandomPlaylistTrack()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.mix {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
/* Écran portrait (plus haut que large) */
|
||||
@media (orientation: portrait) {
|
||||
.mix {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.platine {
|
||||
height: 50vh;
|
||||
|
||||
.disc {
|
||||
height: 100%;
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Écran paysage (plus large que haut) */
|
||||
@media (orientation: landscape) {
|
||||
.mix {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.platine {
|
||||
width: 50vw;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,4 +0,0 @@
|
||||
<template>
|
||||
<card />
|
||||
<card />
|
||||
</template>
|
||||
@@ -1,34 +0,0 @@
|
||||
<template>
|
||||
<boxes />
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useRoute } from 'vue-router'
|
||||
import { useUiStore } from '~/store/ui'
|
||||
import { useDataStore } from '~/store/data'
|
||||
import { usePlayerStore } from '~/store/player'
|
||||
|
||||
// Configuration du layout
|
||||
definePageMeta({
|
||||
layout: 'default'
|
||||
})
|
||||
|
||||
const uiStore = useUiStore()
|
||||
const dataStore = useDataStore()
|
||||
const playerStore = usePlayerStore()
|
||||
const route = useRoute()
|
||||
|
||||
onMounted(async () => {
|
||||
await dataStore.loadData()
|
||||
const idParam = Array.isArray(route.params.id) ? route.params.id[0] : route.params.id
|
||||
const id = Number(idParam)
|
||||
if (!Number.isNaN(id)) {
|
||||
const track = dataStore.tracks.find((t) => t.id === id)
|
||||
if (track) {
|
||||
// Open the box containing this track without changing global UI flow/animations
|
||||
uiStore.selectBox(track.boxId)
|
||||
playerStore.loadTrack(track)
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
Reference in New Issue
Block a user