From ce98b75c54c2861a488057dd90a4713acd340ea0 Mon Sep 17 00:00:00 2001
From: cottongin <cottongin@users.noreply.github.com>
Date: Sat, 17 Jan 2026 17:36:51 -0500
Subject: [PATCH] tweak reel sizes, fix end-of-tape procedure

---
 index.html | 77 ++++++++++++++++++++++++++++++++++++++++++++++++++----
 1 file changed, 72 insertions(+), 5 deletions(-)

diff --git a/index.html b/index.html
index f34c892..3697ec3 100644
--- a/index.html
+++ b/index.html
@@ -1450,8 +1450,8 @@
         const reelContainerRight = document.getElementById('reelContainerRight');
 
         // Tape size constants (in pixels)
-        const TAPE_MIN_SIZE = 62;  // Minimum tape size (just larger than reel-inner)
-        const TAPE_MAX_SIZE = 166;  // Maximum tape size (fills most of reel)
+        const TAPE_MIN_SIZE = 70;  // Minimum tape size (just larger than reel-inner)
+        const TAPE_MAX_SIZE = 180;  // Maximum tape size (fills most of reel)
 
         // ========================================
         // CONTINUOUS TAPE MODEL - STATE
@@ -2509,9 +2509,76 @@
 
         // Auto-play next track when current ends
         audio.addEventListener('ended', async () => {
-            currentTrack = (currentTrack + 1) % playlist.length;
-            await loadTrack(currentTrack);
-            // Tape position continues naturally - don't reset
+            const wasLastTrack = currentTrack === playlist.length - 1;
+            
+            // End of tape - rewind to beginning with sound, then continue playing
+            if (wasLastTrack) {
+                if (durationsLoaded) {
+                    // Animate rewind to beginning with sound
+                    const animationDuration = 500;
+                    const startProgress = getTapeProgress();
+                    const endProgress = 0;
+                    
+                    // Start rewind sound and animation
+                    SoundEffects.startTapeWindLoop();
+                    reelLeft.style.animationDuration = '0.3s';
+                    reelRight.style.animationDuration = '0.3s';
+                    tapeLeft.style.animationDuration = '0.3s';
+                    tapeRight.style.animationDuration = '0.3s';
+                    reelLeft.classList.add('spinning');
+                    reelRight.classList.add('spinning');
+                    tapeLeft.classList.add('spinning');
+                    tapeRight.classList.add('spinning');
+                    
+                    // Animate tape sizes
+                    const startTime = performance.now();
+                    await new Promise(resolve => {
+                        function animate(time) {
+                            const elapsed = time - startTime;
+                            const t = Math.min(elapsed / animationDuration, 1);
+                            const easedT = easeInOutQuad(t);
+                            const currentProgress = startProgress + (endProgress - startProgress) * easedT;
+                            setTapeSizesAtProgress(currentProgress);
+                            
+                            if (t < 1) {
+                                requestAnimationFrame(animate);
+                            } else {
+                                resolve();
+                            }
+                        }
+                        requestAnimationFrame(animate);
+                    });
+                    
+                    // Stop sound and reset animation speed
+                    SoundEffects.stopTapeWindLoop();
+                    reelLeft.style.animationDuration = '';
+                    reelRight.style.animationDuration = '';
+                    tapeLeft.style.animationDuration = '';
+                    tapeRight.style.animationDuration = '';
+                }
+                
+                // Load track 0
+                currentTrack = 0;
+                trackNameInner.textContent = playlist[0].name;
+                audio.src = playlist[0].url;
+                
+                await new Promise(resolve => {
+                    audio.addEventListener('loadedmetadata', function onMeta() {
+                        audio.removeEventListener('loadedmetadata', onMeta);
+                        resolve();
+                    });
+                    audio.load();
+                });
+                
+                audio.currentTime = 0;
+                resetTapeSizes();
+            } else {
+                // Normal track transition - advance to next track
+                currentTrack = (currentTrack + 1) % playlist.length;
+                await loadTrack(currentTrack);
+            }
+            
+            // Auto-play the next track
             audio.play();
             reelLeft.classList.add('spinning');
             reelRight.classList.add('spinning');