compose elt v0.1

2025-12-23 12:55:37 +01:00
parent 8efafc4642
commit 2c826e29ea
16 changed files with 202 additions and 429 deletions
--- a/app/components/Boxes.vue
+++ b/app/components/Boxes.vue
@@ -11,10 +11,6 @@
        <deckPlaylist :box="box" class="box-page" v-if="box.type === 'playlist'" @click.stop="" />
      </template>
    </box>
-    <nav class="fixed top-0">
-      <a class="button m-4 bg-esyellow" href="/draggable">Draggable</a>
-      <a class="button m-4 bg-esyellow" href="/mix">Mix</a>
-    </nav>
  </div>
 </template>

--- a/app/components/Bucket.vue
+++ b/app/components/Bucket.vue
@@ -1,36 +1,49 @@
 <template>
  <div class="bucket" :class="{ 'drag-over': isDragOver }" @dragenter.prevent="onDragEnter"
    @dragover.prevent="onDragOver" @dragleave="onDragLeave" @drop.prevent="onDrop">
-    <div class="bucket-content">
-      <div v-if="cards.length === 0" class="bucket-empty">
-        Drop cards here
-      </div>
-      <div v-else class="bucket-cards">
-        <Card v-for="(card, index) in cards" :key="index" :track="card" class="bucket-card" isFaceUp />
-      </div>
+    <div v-if="tracks.length === 0" class="bucket-empty">
+      Drop cards here
    </div>
+    <draggable v-else v-model="tracks" item-key="id" class="bucket-cards" @start="onDragStart" @end="onDragEnd"
+      :touch-start-threshold="50">
+      <template #item="{ element: track }">
+        <card :track="track" tabindex="0" is-face-up class="bucket-card" @click="flipCard(track)" />
+      </template>
+    </draggable>
  </div>
 </template>

 <script setup lang="ts">
 import { ref, watch } from 'vue'
+import draggable from 'vuedraggable'
+import { useDataStore } from '~/store/data'

 const props = defineProps<{
  modelValue?: any[]
+  boxId?: string
 }>()

-const emit = defineEmits(['update:modelValue', 'card-dropped'])
-
+const dataStore = useDataStore()
 const isDragOver = ref(false)
-const cards = ref<any[]>(props.modelValue || [])
+const drag = ref(false)
+const tracks = ref<any[]>(props.modelValue || [])
+const touchedCard = ref<any>(null)
+const touchStartPos = ref<{ x: number, y: number } | null>(null)

-// Mettre à jour les cartes quand la prop change
 watch(() => props.modelValue, (newValue) => {
  if (newValue) {
-    cards.value = [...newValue]
+    tracks.value = [...newValue]
  }
 })

+if (props.boxId) {
+  onMounted(async () => {
+    await dataStore.loadData()
+    tracks.value = dataStore.getTracksByboxId(props.boxId)
+  })
+}
+
+// Gestion du drag and drop desktop
 const onDragEnter = (e: DragEvent) => {
  e.preventDefault()
  isDragOver.value = true
@@ -45,76 +58,79 @@ const onDragLeave = () => {
  isDragOver.value = false
 }

+const onDragStart = () => {
+  drag.value = true
+}
+
+const onDragEnd = () => {
+  drag.value = false
+  isDragOver.value = false
+}
+
 const onDrop = (e: DragEvent) => {
  isDragOver.value = false
-
-  // Récupérer les données de la carte depuis l'événement de glisser
  const cardData = e.dataTransfer?.getData('application/json')
  if (cardData) {
    try {
-      const card = JSON.parse(cardData)
-      cards.value = [...cards.value, card]
-      emit('update:modelValue', cards.value)
-      emit('card-dropped', card)
+      const track = JSON.parse(cardData)
+      if (!tracks.value.some(t => t.id === track.id)) {
+        tracks.value.push(track)
+      }
    } catch (e) {
-      console.error('Invalid card data', e)
+      console.error('Erreur lors du traitement de la carte déposée', e)
    }
  }
 }
+
+const flipCard = (track: any) => {
+  track.isFaceUp = !track.isFaceUp
+}
 </script>

 <style scoped>
 .bucket {
-  width: 120px;
-  min-height: 160px;
+  min-height: 200px;
  border: 2px dashed #ccc;
  border-radius: 8px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background-color: #f9f9f9;
-  transition: all 0.2s ease;
  padding: 1rem;
-  position: relative;
-  overflow: hidden;
+  transition: all 0.3s ease;
+  background-color: rgba(255, 255, 255, 0.1);
+  touch-action: none;
 }

 .bucket.drag-over {
-  border-color: #4f46e5;
-  background-color: #eef2ff;
-  transform: scale(1.02);
-  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
-}
-
-.bucket-content {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
+  border-color: #4CAF50;
+  background-color: rgba(76, 175, 80, 0.1);
 }

 .bucket-empty {
-  color: #9ca3af;
-  text-align: center;
-  padding: 1rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  color: #666;
+  font-style: italic;
 }

 .bucket-cards {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+  gap: 1rem;
  width: 100%;
 }

 .bucket-card {
-  background: white;
-  border-radius: 4px;
-  padding: 0.5rem;
-  font-size: 0.8rem;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+  transition: transform 0.2s;
+  cursor: move;
+  touch-action: none;
+  /* Important pour le touch */
+}
+
+.bucket-card:hover {
+  transform: translateY(-4px);
+}
+
+.bucket-card:active {
+  opacity: 0.7;
 }
 </style>
--- a/app/components/Card.vue
+++ b/app/components/Card.vue
@@ -71,22 +71,25 @@ import type { Track } from '~~/types/types'
 import { usePlayerStore } from '~/store/player'
 import { useDataStore } from '~/store/data';

-const props = withDefaults(defineProps<{ track: Track; isFaceUp?: boolean }>(), {
-  isFaceUp: false
+const props = withDefaults(defineProps<{
+  track?: Track;
+  isFaceUp?: boolean;
+}>(), {
+  track: () => {
+    const dataStore = useDataStore();
+    return dataStore.getRandomPlaylistTrack() || {} as Track;
+  },
+  isFaceUp: true,
 })
+
 const playerStore = usePlayerStore()
 const isManifesto = computed(() => props.track.boxId.startsWith('ES00'))
 const isOrder = computed(() => props.track.order && !isManifesto)
 const isPlaylistTrack = computed(() => props.track.type === 'playlist')
-const isRedCard = computed(() => props.track.card?.suit === '♥' || props.track.card?.suit === '♦')
+const isRedCard = computed(() => (props.track.card?.suit === '♥' || props.track.card?.suit === '♦'))
 const dataStore = useDataStore()
 const cardColor = computed(() => dataStore.getYearColor(props.track.year || 0))
-const coverUrl = computed(() => {
-  if (!props.track.coverId) return ''
-  return props.track.coverId.startsWith('http')
-    ? props.track.coverId
-    : `https://f4.bcbits.com/img/${props.track.coverId}_4.jpg`
-})
+const coverUrl = computed(() => props.track.coverId || '/card-dock.svg')

 const dragStart = (event: DragEvent) => {
  if (event.dataTransfer) {
--- a/app/components/Newsletter.vue
+++ b/app/components/Newsletter.vue
@@ -1,11 +0,0 @@
-<template>
-  <form
-    class="h-screen flex justify-center items-center flex-col absolute top-0 left-1/2 -translate-x-1/2"
-  >
-    <label for="email" class="block text-xl"> be notify when's evilSpins open : </label>
-    <div>
-      <input id="email" type="email" name="" placeholder="email" >
-      <button>ok</button>
-    </div>
-  </form>
-</template>
--- a/app/components/Platine.vue
+++ b/app/components/Platine.vue
@@ -1,6 +1,7 @@
 <template>
-  <div class="platine relative">
-    <div class="disc" :style="{ 'background-image': `url(${track?.coverId})` }" ref="discRef" id="disc">
+  <div class="platine" :class="{ 'drag-over': isDragOver }" @dragenter.prevent="onDragEnter"
+    @dragover.prevent="onDragOver" @dragleave="onDragLeave" @drop.prevent="onDrop">
+    <div class="disc" ref="discRef" :style="'background-image: url(' + coverUrl + ')'" id="disc">
      <div
        class="bobine bg-slate-800 bg-opacity-50 absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 rounded-full"
        :style="{ height: progressPercentage + '%', width: progressPercentage + '%' }">
@@ -26,14 +27,19 @@ import Disc from '@/platine-tools/disc'
 import Sampler from '@/platine-tools/sampler'
 import type { Track } from '~~/types/types'

-const props = withDefaults(defineProps<{ track: Track | undefined }>(), {})
+const props = withDefaults(defineProps<{ track?: Track }>(), {})
 const discRef = ref<HTMLElement>()
 const currentTurns = ref(0)
 const totalTurns = ref(0)
 const progressPercentage = ref(0)
-const isPlaying = ref(false)
-const isLoadingTrack = ref(false)
+const drag = ref(false)
+const isDragOver = ref(false)
 const isFirstDrag = ref(true)
+const isLoadingTrack = ref(false)
+const isPlaying = ref(false)
+
+const coverUrl = computed(() => props.track?.coverId || '/card-dock.svg')
+
 let disc: Disc | null = null
 let sampler: Sampler | null = null

@@ -79,12 +85,12 @@ const handleRewind = () => {
  }
 };

-const loadTrack = async () => {
-  if (!sampler || !props.track) return
+const loadTrack = async (track: Track) => {
+  if (!sampler || !track) return

  isLoadingTrack.value = true
  try {
-    await sampler.loadTrack(props.track.url)
+    await sampler.loadTrack(track.url)
    if (disc) {
      disc.setDuration(sampler.duration)
      updateTurns(disc)
@@ -96,6 +102,44 @@ const loadTrack = async () => {
  }
 }

+// Gestion du drag and drop
+const onDragEnter = (e: DragEvent) => {
+  e.preventDefault()
+  isDragOver.value = true
+}
+
+const onDragOver = (e: DragEvent) => {
+  e.preventDefault()
+  isDragOver.value = true
+}
+
+const onDragLeave = () => {
+  isDragOver.value = false
+}
+
+const onDragStart = () => {
+  drag.value = true
+}
+
+const onDragEnd = () => {
+  drag.value = false
+  isDragOver.value = false
+}
+
+const onDrop = (e: DragEvent) => {
+  isDragOver.value = false
+  const cardData = e.dataTransfer?.getData('application/json')
+  if (cardData) {
+    try {
+      const newTrack = JSON.parse(cardData)
+      if (newTrack && newTrack.url) {
+        loadTrack(newTrack)
+      }
+    } catch (error) {
+      console.error('Erreur lors du traitement de la carte déposée', error)
+    }
+  }
+}
 onMounted(async () => {
  disc = new Disc(discRef.value!)
  sampler = new Sampler()
@@ -131,8 +175,10 @@ onMounted(async () => {

 })

-watch(() => props.track, () => {
-  loadTrack()
+watch(() => props.track, (newTrack) => {
+  if (newTrack) {
+    loadTrack(newTrack)
+  }
 })

 onUnmounted(() => {
@@ -149,12 +195,15 @@ onUnmounted(() => {
 <style lang="scss">
 .platine {
  overflow: hidden;
+  position: relative;
  width: 100%;
  height: 100%;
+  padding: 20px;
 }

 .disc {
  position: relative;
+  background-color: white;
  aspect-ratio: 1;
  width: 100%;
  overflow: hidden;
@@ -162,6 +211,11 @@ onUnmounted(() => {
  cursor: grab;
  background-position: center;
  background-size: cover;
+  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
+
+  .dragoOver & {
+    background-color: #4CAF50;
+  }
 }

 .disc.is-scratching {
--- a/app/components/deck/DeckCompilation.vue
+++ b/app/components/deck/DeckCompilation.vue
--- a/app/components/deck/DeckPlaylist.vue
+++ b/app/components/deck/DeckPlaylist.vue
@@ -1,29 +1,30 @@
 <template>
-  <div class="deck-playlist">
-    <div class="flex flex-col fixed right-0 top-0 z-50">
-      <button @click="closeDatBox" v-if="uiStore.isBoxSelected"
-        class="px-4 py-2 text-black hover:text-black bg-esyellow transition-colors z-50" aria-label="close the box">
-        close
-      </button>
-      <Bucket v-model="bucketCards" @card-dropped="onCardDropped" />
-    </div>
-    <div class="controls flex justify-center z-50 relative">
-      <button class="px-4 py-2 text-black hover:text-black bg-esyellow transition-colors" @click="toggleAllCards">
-        {{ allCardsRevealed ? 'Hide All' : 'Reveal All' }}
-      </button>
-      <SearchInput @search="onSearch" />
-      <SelectCardRank @change="onRankChange" />
-      <SelectCardSuit @change="onSuitChange" />
-    </div>
-    <div ref="deck" class="deck flex flex-wrap justify-center gap-4" :class="{ 'pb-36': playerStore.currentTrack }">
-      <card v-for="(track, i) in filteredTracks" :key="track.id" :track="track" :tabindex="i"
-        :is-face-up="isCardRevealed(track.id)" />
-    </div>
+  <div class="flex flex-col fixed right-0 top-0 z-50">
+    <button @click="closeDatBox" v-if="uiStore.isBoxSelected"
+      class="px-4 py-2 text-black hover:text-black bg-esyellow transition-colors z-50" aria-label="close the box">
+      close
+    </button>
+  </div>
+  <div class="controls flex justify-center z-50 relative">
+    <button class="px-4 py-2 text-black hover:text-black bg-esyellow transition-colors" @click="toggleAllCards">
+      {{ allCardsRevealed ? 'Hide All' : 'Reveal All' }}
+    </button>
+    <SearchInput @search="onSearch" />
+    <SelectCardRank @change="onRankChange" />
+    <SelectCardSuit @change="onSuitChange" />
+  </div>
+  <div ref="deck" class="deck flex flex-wrap justify-center gap-4" :class="{ 'pb-36': playerStore.currentTrack }">
+    <card v-for="(track, i) in filteredTracks" :key="track.id" :track="track" :tabindex="i"
+      :is-face-up="isCardRevealed(track.id)" />
+  </div>
+  <div class="dock">
+    <Bucket @card-dropped="onCardDropped" />
+    <Platine />
  </div>
 </template>

 <script setup lang="ts">
-import { computed, ref, watch } from 'vue'
+import { computed, ref } from 'vue'
 import { useDataStore } from '~/store/data'
 import { useCardStore } from '~/store/card'
 import { usePlayerStore } from '~/store/player'
@@ -45,7 +46,6 @@ const uiStore = useUiStore()
 const deck = ref()
 const tracks = computed(() => dataStore.getTracksByboxId(props.box.id))
 const filteredTracks = ref(tracks.value)
-const bucketCards = ref([])

 // Variables réactives pour les filtres
 const selectedSuit = ref('')
--- a/app/components/draggable.vue
+++ b/app/components/draggable.vue
@@ -0,0 +1,117 @@
+<template>
+  <div class="deck">
+    <draggable v-model="tracks" item-key="id" class="draggable-container" @start="drag = true" @end="onDragEnd">
+      <template #item="{ element: track }">
+        <card :key="track.id" :track="track" tabindex="0" is-face-up class="draggable-item" @click="flipCard(track)" />
+      </template>
+    </draggable>
+  </div>
+</template>
+
+<script setup>
+import { useDataStore } from '~/store/data'
+import draggable from 'vuedraggable'
+
+const drag = ref(false)
+const tracks = ref([])
+// Configuration du layout
+definePageMeta({
+  layout: 'default'
+})
+
+onMounted(async () => {
+  const dataStore = useDataStore()
+  await dataStore.loadData()
+  tracks.value = dataStore.getTracksByboxId('ESPLAYLIST')
+})
+
+function flipCard(track) {
+  track.isFaceUp = !track.isFaceUp
+}
+
+function onDragEnd() {
+  drag.value = false
+  // Ici vous pouvez ajouter une logique supplémentaire après le drop si nécessaire
+}
+</script>
+
+<style lang="scss" scoped>
+.logo {
+  filter: drop-shadow(3px 3px 0 rgb(0 0 0 / 0.7));
+}
+
+.deck {
+  position: relative;
+  height: 80vh;
+
+  .draggable-container {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1rem;
+    padding: 1rem;
+    min-height: 100%;
+  }
+
+  .draggable-item {
+    cursor: grab;
+    transition: transform 0.2s;
+
+    &:active {
+      cursor: grabbing;
+    }
+
+    &.sortable-ghost {
+      opacity: 0.5;
+      background: #c8ebfb;
+      border-radius: 1rem;
+    }
+
+    &.sortable-drag {
+      transform: rotate(2deg);
+      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
+    }
+  }
+
+  .card {
+    z-index: 10;
+    position: relative;
+  }
+
+  /* noise tools */
+  $size: 130px;
+  $scale: 1.05;
+  $border-radius: calc($size / 2);
+  $grad-position: 100% 0;
+  $grad-start: 25%;
+  $grad-stop: 65%;
+  $duration: 3.5s;
+  $noise: url('data:image/png;base64,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');
+
+  @mixin dithered-gradient($position, $start, $stop, $color) {
+    background: radial-gradient(circle at $position, transparent $start, $color $stop);
+    mask: $noise, radial-gradient(circle at $position, transparent $start, #000 ($stop + 10%));
+  }
+
+  &::before,
+  &::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 0;
+    display: block;
+    width: 100%;
+    height: 100%;
+  }
+
+  &::before {
+    @include dithered-gradient(50%, 30%, 60%, #6cc8ff);
+  }
+
+  &::after {
+    mask-image:
+      $noise, linear-gradient(45deg, #000 0%, transparent 25%, transparent 75%, #000 100%);
+    background: linear-gradient(45deg, #6d6dff 10%, transparent 25%, transparent 75%, #6af789 90%);
+  }
+}
+</style>