From 4b6d67ed899dbc9cf0c9d743ffa27724cd6abb34 Mon Sep 17 00:00:00 2001
From: David Kotnik <hipodevil666@gmail.com>
Date: Sat, 10 Jan 2026 14:49:18 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=AC=E2=9C=A8=20CROSSFADE=20COMPLETE=20?=
 =?UTF-8?q?-=20ZERO=20BLACK=20GAPS!?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

✅ CROSSFADE IMPLEMENTATION:
- OLD polaroid fades OUT while NEW fades IN
- Same 800ms duration = smooth transition
- NO black screen between shots!
- Removed old sequential fade logic

✅ KEY CHANGES:
1. Store old polaroid reference (don't destroy immediately)
2. Create new photo+frame
3. Fade IN new (800ms)
4. SIMULTANEOUSLY fade OUT old (800ms)
5. Destroy old only after fade complete

✅ REMOVED:
- Old sequential fade-out (300ms wait)
- Old glitch-out transition (caused black)
- RGB flash at end (made gaps)

RESULT: Smooth continuous image flow!
NO MORE BLACK GAPS! 🎆

Test with 'rs' in terminal!
---
 src/scenes/IntroScene.js | 70 ++++++++++++----------------------------
 1 file changed, 20 insertions(+), 50 deletions(-)

diff --git a/src/scenes/IntroScene.js b/src/scenes/IntroScene.js
index 6320adb3a..8d631f3d7 100644
--- a/src/scenes/IntroScene.js
+++ b/src/scenes/IntroScene.js
@@ -448,21 +448,9 @@ class IntroScene extends Phaser.Scene {
         const duration = endTime - startTime;
 
         this.time.delayedCall(startTime, () => {
-            // Fade out previous polaroid
-            if (this.currentPolaroid) {
-                this.tweens.add({
-                    targets: this.currentPolaroid,
-                    alpha: 0,
-                    duration: 300,
-                    onComplete: () => {
-                        if (this.currentPolaroid) {
-                            this.currentPolaroid.frame.destroy();
-                            this.currentPolaroid.photo.destroy();
-                            this.currentPolaroid = null;
-                        }
-                    }
-                });
-            }
+            // CROSSFADE: Store old reference for simultaneous fade
+            const oldPolaroid = this.currentPolaroid;
+            // (Old will fade out WHILE new fades in - see below)
 
             // Create photo image (65% of screen)
             const photo = this.add.image(width / 2, height / 2 - 30, imageKey);
@@ -524,47 +512,29 @@ class IntroScene extends Phaser.Scene {
                 photo.setTint(0x66ff66);
             }
 
-            // FASTER FADE-IN (less black!)
+            // CROSSFADE: NEW fades IN (800ms)
             this.tweens.add({
                 targets: [photo, frame],
-                alpha: { from: 0, to: 1 },
-                duration: 1000, // Was 2000 - now faster!
+                alpha: 1,
+                duration: 800,
                 ease: 'Power2.easeOut'
             });
 
-            // GLITCH-OUT transition (earlier start!)
-            this.time.delayedCall(duration - 300, () => { // Was 500 - now earlier!
-                if (this.currentPolaroid) {
-                    // Frame fades first (faster!)
-                    this.tweens.add({
-                        targets: frame,
-                        alpha: 0,
-                        duration: 50 // Was 100 - now faster!
-                    });
+            // SIMULTANEOUSLY: OLD fades OUT (same 800ms)
+            if (oldPolaroid) {
+                this.tweens.add({
+                    targets: [oldPolaroid.photo, oldPolaroid.frame],
+                    alpha: 0,
+                    duration: 800, // Same duration = perfect crossfade!
+                    ease: 'Power2.easeIn',
+                    onComplete: () => {
+                        oldPolaroid.frame.destroy();
+                        oldPolaroid.photo.destroy();
+                    }
+                });
+            }
 
-                    // Photo glitches (faster!)
-                    this.tweens.add({
-                        targets: photo,
-                        x: { from: photo.x - 10, to: photo.x + 10 },
-                        duration: 30, // Was 50 - now faster!
-                        repeat: 5,
-                        yoyo: true,
-                        onComplete: () => {
-                            // RGB flash (faster!)
-                            photo.setTint(0xff0000);
-                            this.time.delayedCall(30, () => photo.setTint(0x00ff00)); // Was 50
-                            this.time.delayedCall(60, () => photo.setTint(0x0000ff)); // Was 100
-                            this.time.delayedCall(90, () => { // Was 150
-                                this.tweens.add({
-                                    targets: photo,
-                                    alpha: 0,
-                                    duration: 100 // Was 200 - faster!
-                                });
-                            });
-                        }
-                    });
-                }
-            });
+            // OLD GLITCH-OUT removed - crossfade handles transitions now!
 
             if (options.glitch) {
                 this.tweens.add({