Update app/page.tsx

app/page.tsx

@@ -13,7 +13,7 @@ import {
 import { Button } from "@/components/ui/button"
 import { Sparkles, Music, TreePine, RainbowIcon as Unicorn } from "lucide-react"
 
-// -------------------- Scales (No Pentatonics) --------------------
+// Scales
 const SCALES = {
   ionian: [0, 2, 4, 5, 7, 9, 11, 12],
   dorian: [0, 2, 3, 5, 7, 9, 10, 12],
@@ -26,10 +26,10 @@ const SCALES = {
   melodicMinor: [0, 2, 3, 5, 7, 9, 11, 12],
 } as const
 
-// Chromatic root notes
+// Root notes
 const ROOTS = ["C", "C#", "D", "D#", "E", "F", "F#", "G", "G#", "A", "A#", "B"]
 
-// 8 distinct colors for on-screen keys
+// 8 colors for on-screen keys
 const KEY_COLORS = [
   "bg-red-400 hover:bg-red-500",
   "bg-orange-400 hover:bg-orange-500",
@@ -41,12 +41,12 @@ const KEY_COLORS = [
   "bg-purple-400 hover:bg-purple-500",
 ]
 
-// Keyboard mapping for A..K => indexes 0..7
+// Keyboard mapping for A-K (0-7)
 const KEY_MAPPING = ["a", "s", "d", "f", "g", "h", "j", "k"]
 
-// -------------------- MAIN COMPONENT --------------------
+// Main component
 export default function Fairyland() {
-  // ------ States ------
+  // States
   const [synth, setSynth] = useState<Tone.PolySynth | null>(null)
 
   // Scale/Root/Octave
@@ -77,7 +77,7 @@ export default function Fairyland() {
   const delayRef = useRef<Tone.FeedbackDelay | null>(null)
   const reverbRef = useRef<Tone.Reverb | null>(null)
 
-  // -------------- 1) Initialize Synth + Effects + Forest --------------
+  // 1) Initialize Synth + Effects + Forest
   useEffect(() => {
     // Create delay
     const delay = new Tone.FeedbackDelay({
@@ -146,7 +146,7 @@ export default function Fairyland() {
       window.removeEventListener("keydown", handleFirstInteraction)
       // No missing dependencies because we're removing only local references
     }
-  // We add relevant states so ESLint doesn't complain about missing deps
+  
   }, [
     forestOn, 
     forestPlaying, 
@@ -158,7 +158,7 @@ export default function Fairyland() {
     release
   ])
 
-  // -------------- 2) Toggling forestOn --------------
+  // Toggling forestOn 
   useEffect(() => {
     const forest = forestRef.current
     if (!forest) return
@@ -177,7 +177,7 @@ export default function Fairyland() {
     }
   }, [forestOn, forestPlaying])
 
-  // -------------- 3) Envelope changes (Synth) --------------
+  // Envelope changes (Synth)
   useEffect(() => {
     if (!synth) return
     synth.set({
@@ -190,7 +190,7 @@ export default function Fairyland() {
     })
   }, [synth, attack, decay, sustain, release])
 
-  // -------------- 4) Delay & Reverb updates --------------
+  // Delay & Reverb updates
   useEffect(() => {
     if (delayRef.current) {
       delayRef.current.wet.value = delayWet
@@ -203,7 +203,7 @@ export default function Fairyland() {
     }
   }, [reverbWet])
 
-  // -------------- 5) Keyboard (A..K => scaleNotes) --------------
+  // Keyboard (A..K => scaleNotes)
   // Build scale notes
   const scaleNotes = useMemo(() => {
     const intervals = SCALES[scale as keyof typeof SCALES] || [0, 2, 4, 5, 7, 9, 11, 12]
@@ -252,7 +252,7 @@ export default function Fairyland() {
     }
   }, [synth, scaleNotes])
 
-  // -------------- RENDER --------------
+  // RENDER
   return (
     <div
       className="min-h-screen relative overflow-hidden flex flex-col items-center justify-center p-4"
@@ -483,7 +483,7 @@ export default function Fairyland() {
   )
 }
 
-// -------------------- OnScreenKeys COMPONENT --------------------
+// OnScreenKeys COMPONENT
 function OnScreenKeys({
   synth,
   scale,