← Tüm Özelliklere Dön

🔀 Shuffle (Karışık Çalma)

🔴 MEVCUT DURUM: Shuffle Butonu Çalışmıyor!

Kod satır 98: shuffle: false state var.

Kod satır 237: @click="shuffle = !shuffle" butonu var.

AMA: Shuffle toggle olduğunda queue'yu karıştıran FONKSİYON YOK!

✅ ÇÖZÜM: Fisher-Yates Shuffle Algoritması

Modern, etkili ve adil karıştırma algoritması. O(n) complexity.

🎯 Nasıl Çalışır?

Fisher-Yates Mantığı:

  1. Queue'nun sonundan başla
  2. Rastgele bir index seç (0 ile şu anki index arası)
  3. İki elemanın yerini değiştir
  4. Bir önceki elemana geç ve tekrarla
  5. Queue başına gelene kadar devam et

💻 İmplementasyon

1. Shuffle Fonksiyonu (Fisher-Yates)

// Fisher-Yates shuffle algorithm
shuffleArray(array) {
    const arr = [...array]; // Shallow copy (orijinali korur)

    for (let i = arr.length - 1; i > 0; i--) {
        // 0 ile i arasında rastgele index
        const j = Math.floor(Math.random() * (i + 1));

        // Swap (yer değiştir)
        [arr[i], arr[j]] = [arr[j], arr[i]];
    }

    return arr;
}

2. Toggle Shuffle (Aktif/Pasif)

// Shuffle toggle fonksiyonu
toggleShuffle() {
    this.shuffle = !this.shuffle;

    if (this.shuffle) {
        // Shuffle AÇILDI - Queue'yu karıştır

        // 1. Şu an çalan şarkıyı kaydet
        const currentSong = this.queue[this.queueIndex];

        // 2. Şu an çalan şarkıyı queue'dan çıkar
        const restOfQueue = [
            ...this.queue.slice(0, this.queueIndex),
            ...this.queue.slice(this.queueIndex + 1)
        ];

        // 3. Geri kalanları karıştır
        const shuffled = this.shuffleArray(restOfQueue);

        // 4. Şu an çalan şarkıyı başa koy
        this.queue = [currentSong, ...shuffled];

        // 5. Index'i 0'a çek (çalan şarkı başta)
        this.queueIndex = 0;

        // 6. Orijinal sırayı sakla (kapatınca geri döner)
        this.originalQueue = [...this.queue];

        console.log('🔀 Shuffle ON: Queue karıştırıldı');
        this.showToast('Karışık çalma açık', 'success');
    } else {
        // Shuffle KAPANDI - Orijinal sıraya dön

        if (this.originalQueue && this.originalQueue.length > 0) {
            // Orijinal sıra varsa geri yükle
            this.queue = [...this.originalQueue];
            this.originalQueue = null;

            console.log('🔀 Shuffle OFF: Orijinal sıra geri yüklendi');
            this.showToast('Karışık çalma kapalı', 'info');
        }
    }
}

3. State Eklemeleri

// Alpine.js data() içine ekle
data() {
    return {
        // ... mevcut state'ler

        shuffle: false,              // Shuffle aktif mi?
        originalQueue: null,         // Orijinal queue sırası (shuffle için)

        // ... diğer state'ler
    };
}

📊 Görsel Örnek

ÖNCE (Orijinal Sıra):

1
Smooth Jazz Morning
Jazz Ensemble
2
Coffee Break Blues
Blue Notes
3
Sunset Serenade
Evening Jazz
4
Midnight Groove
Late Night Band
5
Urban Vibes
City Jazz

🔀 SONRA (Shuffle Aktif - Şarkı 2 çalıyordu):

►
Coffee Break Blues
Blue Notes
2
Midnight Groove
Late Night Band
3
Smooth Jazz Morning
Jazz Ensemble
4
Urban Vibes
City Jazz
5
Sunset Serenade
Evening Jazz

✅ Çalan şarkı başa alındı, geri kalanlar karıştırıldı!

🎛️ Kullanıcı Senaryoları

Senaryo 1: Shuffle Aktif Ederken

Senaryo 2: Shuffle Kapatırken

💡 Gelişmiş Özellikler (Opsiyonel)

// Smart Shuffle (aynı sanatçı peş peşe gelmez)
smartShuffle(array) {
    let shuffled = this.shuffleArray(array);

    // Aynı sanatçı peş peşe gelirse yeniden karıştır
    for (let i = 0; i < shuffled.length - 1; i++) {
        if (shuffled[i].artist_id === shuffled[i + 1].artist_id) {
            // Sonraki farklı sanatçıyı bul
            for (let j = i + 2; j < shuffled.length; j++) {
                if (shuffled[j].artist_id !== shuffled[i].artist_id) {
                    // Swap
                    [shuffled[i + 1], shuffled[j]] = [shuffled[j], shuffled[i + 1]];
                    break;
                }
            }
        }
    }

    return shuffled;
}

✅ Avantajlar

🔧 Test Senaryosu

// Console'da test et
console.log('Orijinal queue:', this.queue.map(s => s.song_title));

// Shuffle aç
this.toggleShuffle();
console.log('Shuffled queue:', this.queue.map(s => s.song_title));

// Shuffle kapat
this.toggleShuffle();
console.log('Restored queue:', this.queue.map(s => s.song_title));

// Aynı mı kontrol et
console.log('Orijinal sıra geri döndü mü?', /* karşılaştırma */);

← Tüm Özelliklere Dön