Update index.html

index.html

@@ -115,7 +115,7 @@
             position: relative;
         }
         .white-key {
-            width: 30px;
+            width: 30px; /* WHITE_KEY_WIDTH_PX */
             height: 100%;
             background: linear-gradient(to bottom, var(--white-key-bg-start), var(--white-key-bg-end));
             border-left: 1px solid var(--white-key-border);
@@ -124,23 +124,23 @@
             border-radius: 0 0 4px 4px;
             box-shadow: 0 2px 3px rgba(0,0,0,0.22), inset 0 -2px 2px rgba(255,255,255,0.68);
             z-index: 1;
-            margin-right: -1px;
+            margin-right: -1px; /* WHITE_KEY_OVERLAP_PX (negated) */
         }
         .white-key:first-child { border-left: 1px solid #686868; }
         .white-key:last-child { border-right: 1px solid #686868; margin-right: 0;}
         .black-key {
-            width: 18px;
+            width: 18px; /* BLACK_KEY_WIDTH_PX */
             height: 58%;
             background: linear-gradient(to bottom, var(--black-key-bg-start), var(--black-key-bg-end));
             border: 1px solid var(--black-key-border);
             border-bottom: 4px solid #181818;
             border-radius: 0 0 3px 3px;
             position: absolute;
-            z-index: 5; /* Black keys normally above white keys */
+            z-index: 2; /* White keys: 1, Active keys: 3, Particles: 4 */
             box-shadow: -1px 0 2px rgba(0,0,0,0.4), 1px 0 2px rgba(0,0,0,0.4), 0 2px 3px rgba(0,0,0,0.55), inset 0 -1px 1px rgba(60,60,60,0.3);
         }
         .key.active { /* Applied when key is pressed by user or MIDI */
-            z-index: 4 !important; /* Active keys always on top */
+            z-index: 3 !important; /* Active keys always on top of other keys */
         }
         .white-key.active {
             background: linear-gradient(to bottom, #d5d5d5, #c2c2c2);
@@ -164,7 +164,6 @@
             left: 50%;
             transform: translateX(-50%);
             pointer-events: none;
-            /* border: 1px solid red; */
         }
         .note-bar {
             position: absolute;
@@ -186,19 +185,18 @@
             height: 3.5px;
             background: linear-gradient(to right, transparent, var(--hit-line-color), transparent);
             border-radius: 1.75px;
-            z-index: 3;
+            z-index: 3; /* Can be same as active keys, or below particles if particles are z-index 4 */
             box-shadow: 0 0 16px var(--hit-line-color);
         }
         .particle-container {
             position: absolute;
             width: var(--piano-actual-width, 100%);
-            height: calc(28vh + 5px); /* Cover piano keys area and slightly above */
-            bottom: 0; /* Align with bottom of the page (below piano-container) */
+            height: calc(28vh + 5px + 10px); /* Cover piano base and slightly above */
+            bottom: 0;
             left: 50%;
             transform: translateX(-50%);
             pointer-events: none;
-            z-index: 5;
-             /* border: 1px dashed lime; */
+            z-index: 4; /* Particles above keys and hit-line */
         }
         .particle {
             position: absolute;
@@ -244,57 +242,75 @@
         const loadMidiButton = document.getElementById('loadMidiButton');
         const loadingIndicator = document.getElementById('loading-indicator');
         const hitLineElement = document.getElementById('hit-line');
+
         const synth = new Tone.PolySynth(Tone.Synth, {
             oscillator: { type: "triangle8" },
             envelope: { attack: 0.015, decay: 0.35, sustain: 0.15, release: 0.9 },
             volume: -10
         }).toDestination();
+
         const NOTES_ORDER = ['C', 'C#', 'D', 'D#', 'E', 'F', 'F#', 'G', 'G#', 'A', 'A#', 'B'];
         const START_OCTAVE = 1;
         const END_OCTAVE = 7;
         const WHITE_KEY_WIDTH_PX = 30;
         const BLACK_KEY_WIDTH_PX = 18;
+        const WHITE_KEY_OVERLAP_PX = 1; // Corresponds to white-key margin-right: -1px
+
         const NOTE_FALL_DURATION_MS = 3800;
         const pianoKeys = {};
         let whiteKeyCount = 0;
-        let pianoActualWidth = 0;
+        let pianoActualWidth = 0; // Will be calculated based on white keys and their overlap
+
         const keyboardMapping = {
             'a': 'C4', 'w': 'C#4', 's': 'D4', 'e': 'D#4', 'd': 'E4', 'f': 'F4',
             't': 'F#4', 'g': 'G4', 'y': 'G#4', 'h': 'A4', 'u': 'A#4', 'j': 'B4',
             'k': 'C5', 'o': 'C#5', 'l': 'D5', 'p': 'D#5', ';': 'E5', "'": 'F5'
         };
         const activeKeyboardKeys = new Set();
+
         function createPianoKeys() {
             pianoElement.innerHTML = '';
             whiteKeyCount = 0;
             pianoActualWidth = 0;
+            let currentWhiteKeyVisualOffset = 0; // Tracks the visual offset for black key positioning
+
             for (let octave = START_OCTAVE; octave <= END_OCTAVE; octave++) {
                 NOTES_ORDER.forEach((noteBase) => {
                     if (octave === END_OCTAVE && noteBase !== 'C') return;
                     if (octave === START_OCTAVE && !['A','A#','B'].includes(noteBase)) return;
+
                     const keyElement = document.createElement('div');
                     keyElement.classList.add('key');
                     const noteName = noteBase + octave;
                     keyElement.dataset.note = noteName;
                     pianoKeys[noteName] = keyElement;
-                    if (noteBase.includes('#')) {
+
+                    if (noteBase.includes('#')) { // Black key
                         keyElement.classList.add('black-key');
-                        keyElement.style.left = (whiteKeyCount * WHITE_KEY_WIDTH_PX) - (BLACK_KEY_WIDTH_PX / 2) -0.5 + 'px';
+                        // Position black key centered over the "crack" of the preceding white key
+                        // currentWhiteKeyVisualOffset is the right edge of the *previous* white key
+                        keyElement.style.left = (currentWhiteKeyVisualOffset - (BLACK_KEY_WIDTH_PX / 2) - (WHITE_KEY_OVERLAP_PX / 2)) + 'px';
                         keyElement.style.top = '0px';
-                    } else {
+                    } else { // White key
                         keyElement.classList.add('white-key');
-                        pianoActualWidth += WHITE_KEY_WIDTH_PX;
+                        // If not the first white key, account for overlap with previous key
+                        if (whiteKeyCount > 0) {
+                            currentWhiteKeyVisualOffset -= WHITE_KEY_OVERLAP_PX;
+                        }
+                        currentWhiteKeyVisualOffset += WHITE_KEY_WIDTH_PX;
                         whiteKeyCount++;
                     }
                     pianoElement.appendChild(keyElement);
+
                     const playNote = (e) => {
                         if(e && e.preventDefault) e.preventDefault();
                         if(keyElement.classList.contains('active')) return;
                         keyElement.classList.add('active');
                         const hue = Math.random() * 360;
-                        keyElement.style.setProperty('--key-active-glow', `hsla(${hue}, 100%, 65%, 0.9)`);
+                        const activeColor = `hsla(${hue}, 100%, 65%, 0.9)`;
+                        keyElement.style.setProperty('--key-active-glow', activeColor);
                         synth.triggerAttack(noteName, Tone.now());
-                        createKeyParticles(keyElement, `hsla(${hue}, 100%, 65%, 0.9)`);
+                        createKeyParticles(keyElement, activeColor);
                     };
                     const releaseNote = (e) => {
                         if(e && e.preventDefault) e.preventDefault();
@@ -308,11 +324,19 @@
                     keyElement.addEventListener('touchend', releaseNote);
                 });
             }
-            pianoActualWidth += (whiteKeyCount -1) * (-1);
+
+            // Calculate the actual width of the piano considering overlaps
+            if (whiteKeyCount > 0) {
+                pianoActualWidth = (whiteKeyCount * WHITE_KEY_WIDTH_PX) - ( (whiteKeyCount - 1) * WHITE_KEY_OVERLAP_PX );
+            } else {
+                pianoActualWidth = 0;
+            }
+            
             pianoElement.style.width = pianoActualWidth + 'px';
             document.documentElement.style.setProperty('--piano-actual-width', pianoActualWidth + 'px');
         }
         createPianoKeys();
+
         function createKeyParticles(keyElement, color) {
             const keyRect = keyElement.getBoundingClientRect();
             const particleContRect = particleContainer.getBoundingClientRect();
@@ -322,7 +346,7 @@
                 particle.style.setProperty('--particle-color', color);
                 particle.style.setProperty('--random-x', Math.random());
                 particle.style.setProperty('--random-y', Math.random());
-                const xPos = (keyRect.left - particleContRect.left) + (keyRect.width / 2);
+                const xPos = (keyRect.left - particleContRect.left) + (keyRect.width / 2) - (8/2); // Center particle
                 const yPos = (keyRect.top - particleContRect.top) - 15; // Particles start slightly above the key
                 particle.style.left = `${xPos}px`;
                 particle.style.top = `${yPos}px`;
@@ -330,13 +354,16 @@
                 setTimeout(() => particle.remove(), 800);
             }
         }
+
         let currentMidiEvents = [];
         let currentMidiTempo = 120;
+
         async function loadAndPlayMidiFromUrl(url) {
             if (Tone.Transport.state === 'started') {
                 Tone.Transport.stop();
                 Tone.Transport.cancel();
                 document.querySelectorAll('.note-bar').forEach(n => n.remove());
+                 Object.values(pianoKeys).forEach(key => key.classList.remove('active')); // Reset active keys
                 loadMidiButton.textContent = 'Load & Play MIDI';
                 return;
             }
@@ -393,6 +420,7 @@
             const fallAreaRect = noteFallArea.getBoundingClientRect();
             const hitLineRect = hitLineElement.getBoundingClientRect();
             const hitLineTopRelativeToFallArea = hitLineRect.top - fallAreaRect.top;
+
             currentMidiEvents.forEach(noteData => {
                 Tone.Transport.scheduleOnce(time => {
                     const targetKeyElement = pianoKeys[noteData.note];
@@ -401,10 +429,12 @@
                     noteElement.classList.add('note-bar');
                     
                     const keyRect = targetKeyElement.getBoundingClientRect();
-                    
                     const keyIsBlack = noteData.note.includes('#');
-                    noteElement.style.width = ((keyIsBlack ? BLACK_KEY_WIDTH_PX : WHITE_KEY_WIDTH_PX) - (keyIsBlack ? 1 : 2)) + 'px';
-                    noteElement.style.left = (keyRect.left - fallAreaRect.left + 1) + 'px';
+                    // Adjust width for visual fit
+                    const noteBarWidth = (keyIsBlack ? BLACK_KEY_WIDTH_PX : WHITE_KEY_WIDTH_PX) - (keyIsBlack ? 2 : 2);
+                    noteElement.style.width = noteBarWidth + 'px';
+                     // Center the note bar on the key
+                    noteElement.style.left = (keyRect.left - fallAreaRect.left + (keyRect.width - noteBarWidth) / 2) + 'px';
                     
                     const noteVisualHeight = Math.max(15, (noteData.duration / (60 / currentMidiTempo)) * 70);
                     noteElement.style.height = noteVisualHeight + 'px';
@@ -418,36 +448,42 @@
                     noteElement.style.top = `-${noteVisualHeight}px`;
                     noteFallArea.appendChild(noteElement);
                     
-                    const targetYForNoteTopToHitLine = hitLineTopRelativeToFallArea; // Note's top aligns with hit line's top
-                    const targetYForNoteBottomToPassHitLine = hitLineTopRelativeToFallArea + noteVisualHeight; // Note's bottom passes hit line
+                    const targetYForNoteTopToHitLine = hitLineTopRelativeToFallArea;
+                    const targetYForNoteBottomToPassHitLine = hitLineTopRelativeToFallArea + noteVisualHeight; 
                     
                     const timeToHitLine = NOTE_FALL_DURATION_MS;
                     const timeAfterHitLine = noteData.duration * 1000;
                     const totalAnimationDuration = timeToHitLine + timeAfterHitLine;
+
                     noteElement.animate([
-                        { transform: `translateY(0px)` }, // Start from above
-                        { transform: `translateY(${targetYForNoteTopToHitLine}px)`, offset: timeToHitLine / totalAnimationDuration }, // Note's top reaches hit line
-                        { transform: `translateY(${targetYForNoteBottomToPassHitLine}px)` } // Note's bottom passes hit line
+                        { transform: `translateY(0px)` }, 
+                        { transform: `translateY(${targetYForNoteTopToHitLine}px)`, offset: timeToHitLine / totalAnimationDuration }, 
+                        { transform: `translateY(${targetYForNoteBottomToPassHitLine + 20}px)` } // +20 to ensure it goes off screen
                     ], {
                         duration: totalAnimationDuration,
                         easing: 'linear'
                     }).onfinish = () => {
                         if (noteElement.parentNode) noteElement.remove();
                     };
+
                     Tone.Transport.scheduleOnce(hitTime => {
                         synth.triggerAttackRelease(noteData.note, noteData.duration, hitTime, noteData.velocity);
                         if (targetKeyElement) {
-                            targetKeyElement.style.setProperty('--key-active-glow-hue', (colorIdx * 40) % 360);
+                            // Use noteMainColor for the glow of MIDI-played keys
+                            targetKeyElement.style.setProperty('--key-active-glow', noteMainColor);
                             targetKeyElement.classList.add('active');
                             createKeyParticles(targetKeyElement, noteMainColor);
                             setTimeout(() => {
                                 targetKeyElement.classList.remove('active');
+                                // Optionally reset glow to default if needed
+                                // targetKeyElement.style.removeProperty('--key-active-glow');
                             }, noteData.duration * 1000);
                         }
                     }, time + (NOTE_FALL_DURATION_MS / 1000));
                 }, noteData.time);
             });
         }
+
         loadMidiButton.addEventListener('click', async () => {
             await Tone.start();
             const url = midiUrlInput.value.trim();
@@ -471,6 +507,17 @@
         });
         window.addEventListener('resize', () => {
             createPianoKeys();
+            // If MIDI is playing, you might want to reschedule visuals or handle this more gracefully.
+            // For now, stopping and clearing visuals might be simplest if a resize happens during playback.
+            if (Tone.Transport.state === 'started') {
+                 Tone.Transport.stop();
+                 Tone.Transport.cancel();
+                 document.querySelectorAll('.note-bar').forEach(n => n.remove());
+                 Object.values(pianoKeys).forEach(key => key.classList.remove('active'));
+                 loadMidiButton.textContent = 'Load & Play MIDI';
+                 // Optionally, you could try to re-calculate and re-schedule notes here,
+                 // but it's complex to get right without visual jumps.
+            }
         });
     </script>
 </body>