From 6e2538412a476f67dcd6e42fc4e02fc646cf02d4 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Wed, 1 Apr 2026 16:18:09 +0000
Subject: [PATCH] Add visual melody editor for classical pieces

New editor screen lets users fix incorrect melodies without editing code:
- Canvas-based timeline with 5 lane rows (Red/Yellow/Blue/Green/Kick)
- Click to add notes, click existing notes to select, drag to move
- Delete/Backspace to remove selected note
- Arrow keys to nudge timing and lane
- Beat grid snapping (1/4 beat resolution)
- BPM adjustment
- Zoom slider for timeline scale
- Preview with orchestral background + melody clicks
- Save to localStorage (auto-loaded when playing the piece)
- Copy JSON to clipboard for sharing corrections
- Reset button to restore original melody
- Edit button appears in menu only for classical pieces

Edits are loaded in buildClassicalNotes() so saved corrections
are used during gameplay automatically.

https://claude.ai/code/session_01TFVkxq4PYhkSFGYHEi4uqY
---
 index.html | 340 ++++++++++++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 338 insertions(+), 2 deletions(-)

diff --git a/index.html b/index.html
index 1bdf53b..c459629 100644
--- a/index.html
+++ b/index.html
@@ -131,6 +131,7 @@ canvas{display:block;}
 
   <div class="sticky-start">
     <button class="smbtn" onclick="startRemap()">🎮 Remap Pads</button>
+    <button class="smbtn" id="edit-btn" onclick="openEditor()" style="display:none;">✏️ Edit Melody</button>
     <button class="bigbtn" onclick="startGame()">▶ Start</button>
   </div>
 </div>
@@ -179,6 +180,25 @@ canvas{display:block;}
   </div>
 </div>
 
+<!-- EDITOR -->
+<div class="screen" id="sed" style="padding:0;">
+  <div id="ed-toolbar" style="display:flex;align-items:center;gap:8px;padding:6px 12px;background:#13131f;border-bottom:1px solid #333;flex-wrap:wrap;">
+    <button class="smbtn" onclick="closeEditor()">← Back</button>
+    <span id="ed-title" style="font-weight:bold;color:#ccc;margin-right:8px;">Editing: —</span>
+    <label style="color:#aaa;font-size:12px;">BPM: <input type="number" id="ed-bpm" value="120" min="30" max="300" style="width:55px;background:#1a1a2e;color:#fff;border:1px solid #444;padding:2px 4px;border-radius:3px;" onchange="edUpdateBpm()"></label>
+    <label style="color:#aaa;font-size:12px;">Zoom: <input type="range" id="ed-zoom" min="20" max="200" value="80" style="width:80px;" oninput="edDraw()"></label>
+    <button class="smbtn" onclick="edPreview()" id="ed-pv-btn">▶ Preview</button>
+    <button class="smbtn" onclick="edSave()" style="background:#38a169;">💾 Save</button>
+    <button class="smbtn" onclick="edExport()">📋 Copy JSON</button>
+    <button class="smbtn red" onclick="edReset()">↺ Reset</button>
+    <span id="ed-status" style="color:#888;font-size:11px;margin-left:auto;"></span>
+  </div>
+  <div id="ed-help" style="padding:4px 12px;background:#0d0d18;color:#666;font-size:11px;border-bottom:1px solid #222;">
+    Click = add note | Click note = select | Drag = move | Delete/Backspace = remove selected | Scroll = pan timeline
+  </div>
+  <canvas id="ed-canvas" style="display:block;width:100%;cursor:crosshair;"></canvas>
+</div>
+
 <script>
 // ── LANE DEFINITIONS ──────────────────────────────────
 const LANES=[
@@ -3086,12 +3106,15 @@ const WORLD_PIECES=(function(){
 var SYNTH_GENRES={"Prime":PRIME_PIECES,"Singalong":SINGALONG_PIECES,"Christmas":CHRISTMAS_PIECES,"Folk":FOLK_PIECES,"Spirituals":SPIRITUAL_PIECES,"World":WORLD_PIECES,"Classical":CLASSICAL_PIECES,"Video Games":VIDEOGAME_PIECES,"Chiptune Originals":CHIPTUNE_PIECES};
 
 function buildClassicalNotes(piece){
-  return piece.melody.filter(function(m){return activePads[m.l];})
+  // Check for saved melody edits
+  var saved=edLoadSaved(piece.n);
+  var melody=saved?saved.melody:piece.melody;
+  return melody.filter(function(m){return activePads[m.l];})
     .map(function(m){
       var freq=261.63;
       for(var i=0;i<piece.bg.length;i++){
         var b=piece.bg[i];
-        if(Math.abs(b.t-m.t)<0.01&&b.i!=='bass'&&b.i!=='timpani'){freq=b.f;break;}
+        if(Math.abs(b.t-m.t)<0.05&&b.i!=='bass'&&b.i!=='timpani'){freq=b.f;break;}
       }
       return{time:m.t/gameSpeed,lane:m.l,freq:freq,hit:false,missed:false};
     })
@@ -3250,6 +3273,7 @@ function buildMenu(){
     pl.appendChild(row);
   });
   updateHitModeVisibility();
+  updateEditBtn();
 }
 buildMenu();loadSettings();
 function addPlayer(){players.push({name:"Player "+(players.length+1)});buildMenu();}
@@ -3327,6 +3351,318 @@ function renderScores(){
 }
 refreshMiniLB();
 
+// ── MELODY EDITOR ─────────────────────────────────────
+var edPiece=null,edMelody=[],edBpm=120,edSelected=-1,edScrollX=0,edDragging=false,edDragNote=-1,edDragOffX=0,edDragOffY=0,edPreviewing=false;
+var ED_LANE_H=50,ED_KICK_H=40,ED_HEAD=0,ED_NOTE_W=14,ED_NOTE_H=16;
+var ED_COLORS=["#e53e3e","#d69e2e","#3182ce","#38a169","#805ad5"];
+var ED_NAMES=["Red","Yellow","Blue","Green","Kick"];
+
+function getEdCanvas(){return document.getElementById("ed-canvas");}
+function getEdCtx(){return getEdCanvas().getContext("2d");}
+function edPxPerSec(){return parseInt(document.getElementById("ed-zoom").value);}
+function edTimeToX(t){return t*edPxPerSec()-edScrollX;}
+function edXToTime(x){return(x+edScrollX)/edPxPerSec();}
+function edYToLane(y){
+  if(y<ED_HEAD)return-1;
+  var laneY=y-ED_HEAD;
+  var padH=ED_LANE_H;
+  for(var i=0;i<4;i++){if(laneY<padH*(i+1))return i;}
+  return 4; // kick
+}
+function edLaneToY(l){
+  if(l<4)return ED_HEAD+l*ED_LANE_H+ED_LANE_H/2;
+  return ED_HEAD+4*ED_LANE_H+ED_KICK_H/2;
+}
+
+function openEditor(){
+  var pieces=SYNTH_GENRES[curGenre];
+  if(!pieces||!pieces[curIdx])return;
+  edPiece=pieces[curIdx];
+  if(!edPiece.isClassical)return;
+  // Load saved edits or use original
+  var saved=edLoadSaved(edPiece.n);
+  if(saved){
+    edMelody=saved.melody.map(function(m){return{t:m.t,l:m.l};});
+    edBpm=saved.bpm||edPiece.bpm;
+  }else{
+    edMelody=edPiece.melody.map(function(m){return{t:m.t,l:m.l};});
+    edBpm=edPiece.bpm;
+  }
+  edSelected=-1;edScrollX=0;
+  document.getElementById("ed-title").textContent="Editing: "+edPiece.n;
+  document.getElementById("ed-bpm").value=edBpm;
+  show("sed");
+  setTimeout(edResize,50);
+}
+function closeEditor(){stopPreview();edPreviewing=false;document.getElementById("ed-pv-btn").textContent="▶ Preview";show("sm");}
+
+function edResize(){
+  var cv=getEdCanvas();
+  var rect=cv.parentElement.getBoundingClientRect();
+  var toolH=document.getElementById("ed-toolbar").offsetHeight+document.getElementById("ed-help").offsetHeight;
+  cv.width=rect.width;
+  cv.height=window.innerHeight-toolH-cv.getBoundingClientRect().top+window.scrollY;
+  ED_LANE_H=Math.floor((cv.height-ED_KICK_H)/4);
+  edDraw();
+}
+window.addEventListener("resize",function(){if(document.getElementById("sed").classList.contains("active"))edResize();});
+
+function edDraw(){
+  var cv=getEdCanvas(),ctx=getEdCtx(),W=cv.width,H=cv.height;
+  ctx.clearRect(0,0,W,H);
+  var pps=edPxPerSec();
+
+  // Draw lane backgrounds
+  for(var i=0;i<4;i++){
+    ctx.fillStyle=i%2===0?"#0e0e1a":"#111122";
+    ctx.fillRect(0,ED_HEAD+i*ED_LANE_H,W,ED_LANE_H);
+    // Lane label
+    ctx.fillStyle=ED_COLORS[i];ctx.globalAlpha=0.3;
+    ctx.font="bold 12px sans-serif";
+    ctx.fillText(ED_NAMES[i],4,ED_HEAD+i*ED_LANE_H+15);
+    ctx.globalAlpha=1;
+  }
+  // Kick lane
+  ctx.fillStyle="#0a0a14";
+  ctx.fillRect(0,ED_HEAD+4*ED_LANE_H,W,ED_KICK_H);
+  ctx.fillStyle=ED_COLORS[4];ctx.globalAlpha=0.3;
+  ctx.font="bold 12px sans-serif";
+  ctx.fillText("Kick",4,ED_HEAD+4*ED_LANE_H+15);
+  ctx.globalAlpha=1;
+
+  // Grid lines (every beat and every second)
+  var beatSec=60/edBpm;
+  var startBeat=Math.floor(edXToTime(0)/beatSec);
+  var endBeat=Math.ceil(edXToTime(W)/beatSec);
+  for(var b=startBeat;b<=endBeat;b++){
+    var bx=edTimeToX(b*beatSec);
+    if(bx<0||bx>W)continue;
+    ctx.strokeStyle=b%4===0?"#444":"#222";
+    ctx.lineWidth=b%4===0?1.5:0.5;
+    ctx.beginPath();ctx.moveTo(bx,ED_HEAD);ctx.lineTo(bx,H);ctx.stroke();
+    if(b%4===0){
+      ctx.fillStyle="#555";ctx.font="10px sans-serif";
+      ctx.fillText((b*beatSec).toFixed(1)+"s",bx+2,ED_HEAD+H-4);
+    }
+  }
+  // Second markers
+  var startSec=Math.floor(edXToTime(0));
+  var endSec=Math.ceil(edXToTime(W));
+  for(var s=startSec;s<=endSec;s++){
+    var sx=edTimeToX(s);
+    if(sx<0||sx>W)continue;
+    ctx.strokeStyle="#333";ctx.lineWidth=0.5;
+    ctx.beginPath();ctx.moveTo(sx,0);ctx.lineTo(sx,ED_HEAD);ctx.stroke();
+  }
+
+  // Lane separator lines
+  for(i=1;i<5;i++){
+    var ly=ED_HEAD+i*ED_LANE_H;
+    ctx.strokeStyle="#333";ctx.lineWidth=1;
+    ctx.beginPath();ctx.moveTo(0,ly);ctx.lineTo(W,ly);ctx.stroke();
+  }
+
+  // Draw notes
+  edMelody.forEach(function(m,idx){
+    var nx=edTimeToX(m.t)-ED_NOTE_W/2;
+    var ny=edLaneToY(m.l)-ED_NOTE_H/2;
+    if(nx+ED_NOTE_W<0||nx>W)return;
+    ctx.fillStyle=ED_COLORS[m.l]||"#888";
+    ctx.globalAlpha=idx===edSelected?1:0.8;
+    ctx.fillRect(nx,ny,ED_NOTE_W,ED_NOTE_H);
+    if(idx===edSelected){
+      ctx.strokeStyle="#fff";ctx.lineWidth=2;
+      ctx.strokeRect(nx-1,ny-1,ED_NOTE_W+2,ED_NOTE_H+2);
+    }
+    ctx.globalAlpha=1;
+  });
+
+  // Duration marker
+  if(edPiece){
+    var dx=edTimeToX(edPiece.duration);
+    if(dx>0&&dx<W){
+      ctx.strokeStyle="#e53e3e";ctx.lineWidth=2;ctx.setLineDash([4,4]);
+      ctx.beginPath();ctx.moveTo(dx,0);ctx.lineTo(dx,H);ctx.stroke();
+      ctx.setLineDash([]);
+      ctx.fillStyle="#e53e3e";ctx.font="10px sans-serif";
+      ctx.fillText("END",dx+3,12);
+    }
+  }
+
+  // Status
+  document.getElementById("ed-status").textContent=edMelody.length+" notes | "+
+    (edSelected>=0?"Selected #"+edSelected+" (t="+edMelody[edSelected].t.toFixed(3)+"s, "+ED_NAMES[edMelody[edSelected].l]+")":"Click to add, click note to select");
+}
+
+function edHitTest(x,y){
+  for(var i=edMelody.length-1;i>=0;i--){
+    var m=edMelody[i];
+    var nx=edTimeToX(m.t)-ED_NOTE_W/2;
+    var ny=edLaneToY(m.l)-ED_NOTE_H/2;
+    if(x>=nx&&x<=nx+ED_NOTE_W&&y>=ny&&y<=ny+ED_NOTE_H)return i;
+  }
+  return-1;
+}
+
+// Mouse handlers
+function edMouseDown(e){
+  var cv=getEdCanvas(),rect=cv.getBoundingClientRect();
+  var mx=e.clientX-rect.left,my=e.clientY-rect.top;
+  var hit=edHitTest(mx,my);
+  if(hit>=0){
+    edSelected=hit;
+    edDragging=true;edDragNote=hit;
+    edDragOffX=mx-edTimeToX(edMelody[hit].t);
+    edDragOffY=my-edLaneToY(edMelody[hit].l);
+    edDraw();
+  }else{
+    // Add new note
+    var t=edXToTime(mx);
+    var l=edYToLane(my);
+    if(l>=0&&l<=4&&t>=0){
+      // Snap to nearest beat subdivision (1/4 beat)
+      var snap=60/edBpm/4;
+      t=Math.round(t/snap)*snap;
+      edMelody.push({t:t,l:l});
+      edMelody.sort(function(a,b){return a.t-b.t;});
+      edSelected=edMelody.findIndex(function(m){return m.t===t&&m.l===l;});
+      edDraw();
+    }
+  }
+}
+function edMouseMove(e){
+  if(!edDragging||edDragNote<0)return;
+  var cv=getEdCanvas(),rect=cv.getBoundingClientRect();
+  var mx=e.clientX-rect.left,my=e.clientY-rect.top;
+  var t=edXToTime(mx-edDragOffX);
+  var l=edYToLane(my);
+  var snap=60/edBpm/4;
+  t=Math.max(0,Math.round(t/snap)*snap);
+  if(l>=0&&l<=4){
+    edMelody[edDragNote].t=t;
+    edMelody[edDragNote].l=l;
+    edSelected=edDragNote;
+    edDraw();
+  }
+}
+function edMouseUp(){
+  if(edDragging){
+    edDragging=false;edDragNote=-1;
+    edMelody.sort(function(a,b){return a.t-b.t;});
+    // Re-find selected after sort
+    edDraw();
+  }
+}
+function edWheel(e){
+  e.preventDefault();
+  edScrollX+=e.deltaX||e.deltaY;
+  if(edScrollX<0)edScrollX=0;
+  edDraw();
+}
+function edKeyDown(e){
+  if(!document.getElementById("sed").classList.contains("active"))return;
+  if((e.key==="Delete"||e.key==="Backspace")&&edSelected>=0){
+    edMelody.splice(edSelected,1);
+    edSelected=-1;
+    edDraw();
+    e.preventDefault();
+  }
+  if(e.key==="ArrowLeft"&&edSelected>=0){
+    var snap=60/edBpm/4;
+    edMelody[edSelected].t=Math.max(0,edMelody[edSelected].t-snap);
+    edMelody.sort(function(a,b){return a.t-b.t;});
+    edDraw();e.preventDefault();
+  }
+  if(e.key==="ArrowRight"&&edSelected>=0){
+    var snap2=60/edBpm/4;
+    edMelody[edSelected].t+=snap2;
+    edMelody.sort(function(a,b){return a.t-b.t;});
+    edDraw();e.preventDefault();
+  }
+  if(e.key==="ArrowUp"&&edSelected>=0){
+    edMelody[edSelected].l=Math.max(0,edMelody[edSelected].l-1);
+    edDraw();e.preventDefault();
+  }
+  if(e.key==="ArrowDown"&&edSelected>=0){
+    edMelody[edSelected].l=Math.min(4,edMelody[edSelected].l+1);
+    edDraw();e.preventDefault();
+  }
+}
+
+// Setup editor canvas events
+(function(){
+  var cv=document.getElementById("ed-canvas");
+  cv.addEventListener("mousedown",edMouseDown);
+  cv.addEventListener("mousemove",edMouseMove);
+  cv.addEventListener("mouseup",edMouseUp);
+  cv.addEventListener("mouseleave",edMouseUp);
+  cv.addEventListener("wheel",edWheel,{passive:false});
+  document.addEventListener("keydown",edKeyDown);
+})();
+
+function edUpdateBpm(){edBpm=parseInt(document.getElementById("ed-bpm").value)||120;edDraw();}
+
+function edPreview(){
+  if(edPreviewing){stopPreview();edPreviewing=false;document.getElementById("ed-pv-btn").textContent="▶ Preview";return;}
+  // Play the piece with current edits
+  var ac=getAc(true);ac.resume();
+  var piece=edPiece;
+  for(var i=0;i<piece.bg.length;i++){
+    var n=piece.bg[i];
+    playSynth(ac,n.f,ac.currentTime+0.1+n.t,n.d,n.i,n.v*1.2,previewNodes);
+  }
+  // Also play a click/drum sound on each melody note so user hears the hits
+  edMelody.forEach(function(m){
+    var freq=[329,392,440,349,220][m.l]||329;
+    playSynth(ac,freq,ac.currentTime+0.1+m.t,0.1,'woodwind',0.5,previewNodes);
+  });
+  edPreviewing=true;
+  document.getElementById("ed-pv-btn").textContent="⏹ Stop";
+  // Auto-stop after duration
+  var dur=piece.duration||90;
+  setTimeout(function(){if(edPreviewing){edPreviewing=false;document.getElementById("ed-pv-btn").textContent="▶ Preview";}},dur*1000+500);
+}
+
+// Save/load edits to localStorage
+var ED_STORAGE_KEY="drgame_edits";
+function edGetAllSaved(){try{return JSON.parse(localStorage.getItem(ED_STORAGE_KEY))||{};}catch(e){return{};}}
+function edLoadSaved(name){var all=edGetAllSaved();return all[name]||null;}
+function edSave(){
+  var all=edGetAllSaved();
+  all[edPiece.n]={melody:edMelody.map(function(m){return{t:m.t,l:m.l};}),bpm:edBpm};
+  try{localStorage.setItem(ED_STORAGE_KEY,JSON.stringify(all));}catch(e){}
+  document.getElementById("ed-status").textContent="Saved! ("+edMelody.length+" notes)";
+}
+function edReset(){
+  if(!confirm("Reset to original melody? This discards your edits."))return;
+  var all=edGetAllSaved();delete all[edPiece.n];
+  try{localStorage.setItem(ED_STORAGE_KEY,JSON.stringify(all));}catch(e){}
+  edMelody=edPiece.melody.map(function(m){return{t:m.t,l:m.l};});
+  edBpm=edPiece.bpm;
+  document.getElementById("ed-bpm").value=edBpm;
+  edSelected=-1;edDraw();
+}
+function edExport(){
+  var data=JSON.stringify({name:edPiece.n,bpm:edBpm,melody:edMelody},null,2);
+  navigator.clipboard.writeText(data).then(function(){
+    document.getElementById("ed-status").textContent="Copied to clipboard!";
+  }).catch(function(){
+    // Fallback: show in prompt
+    prompt("Copy this JSON:",data);
+  });
+}
+
+// Show/hide edit button based on whether current genre has classical pieces
+function updateEditBtn(){
+  var pieces=SYNTH_GENRES[curGenre];
+  var btn=document.getElementById("edit-btn");
+  if(pieces&&pieces[curIdx]&&pieces[curIdx].isClassical){
+    btn.style.display="";
+  }else{
+    btn.style.display="none";
+  }
+}
+
 // ── GAME START ─────────────────────────────────────────
 function startGame(){
   stopPreview();