Tooltip value now follows playback while the cursor stays on a cell

ep0/viewer.html

@@ -314,17 +314,24 @@ function drawTactile(i){
     ctx.fillText(peak>0?String(peak):'\u2014',lx,cTop+2*fs+3);
     ctx.textAlign='left';
   });
+  if(_hoverIdx>=0 && _hit[_hoverIdx] && tacTip.style.display!=='none')
+    tacTip.textContent=tipText(_hit[_hoverIdx]);      // 播放时数值随帧刷新
 }
 
+// 记住悬浮的是"哪个格子"(索引), 每帧重绘后用最新值刷新文字, 鼠标不动也会跟着播放更新
+let _hoverIdx=-1;
+function tipText(h){return `${h.hand} \u00b7 ${h.part} \u00b7 pt ${h.pt} \u00b7 ${h.v}`;}
 cHand.addEventListener('mousemove',e=>{
   const r=cHand.getBoundingClientRect(),mx=e.clientX-r.left,my=e.clientY-r.top;
-  let best=null,bd=1e9;
-  for(const c of _hit){const d=Math.hypot(mx-c.cx,my-c.cy); if(d<c.r*1.15&&d<bd){bd=d;best=c;}}
-  if(best){tacTip.style.display='block';
+  let bi=-1,bd=1e9;
+  for(let i=0;i<_hit.length;i++){const c=_hit[i],d=Math.hypot(mx-c.cx,my-c.cy);
+    if(d<c.r*1.15&&d<bd){bd=d;bi=i;}}
+  _hoverIdx=bi;
+  if(bi>=0){tacTip.style.display='block';
     tacTip.style.left=Math.min(mx+12,r.width-160)+'px'; tacTip.style.top=Math.max(0,my-30)+'px';
-    tacTip.textContent=`${best.hand} \u00b7 ${best.part} \u00b7 pt ${best.pt} \u00b7 ${best.v}`;}
+    tacTip.textContent=tipText(_hit[bi]);}
   else tacTip.style.display='none';});
-cHand.addEventListener('mouseleave',()=>tacTip.style.display='none');
+cHand.addEventListener('mouseleave',()=>{tacTip.style.display='none';_hoverIdx=-1;});
 
 function loop(){update();if(playing)requestAnimationFrame(loop);}
 

ep1/viewer.html

@@ -314,17 +314,24 @@ function drawTactile(i){
     ctx.fillText(peak>0?String(peak):'\u2014',lx,cTop+2*fs+3);
     ctx.textAlign='left';
   });
+  if(_hoverIdx>=0 && _hit[_hoverIdx] && tacTip.style.display!=='none')
+    tacTip.textContent=tipText(_hit[_hoverIdx]);      // 播放时数值随帧刷新
 }
 
+// 记住悬浮的是"哪个格子"(索引), 每帧重绘后用最新值刷新文字, 鼠标不动也会跟着播放更新
+let _hoverIdx=-1;
+function tipText(h){return `${h.hand} \u00b7 ${h.part} \u00b7 pt ${h.pt} \u00b7 ${h.v}`;}
 cHand.addEventListener('mousemove',e=>{
   const r=cHand.getBoundingClientRect(),mx=e.clientX-r.left,my=e.clientY-r.top;
-  let best=null,bd=1e9;
-  for(const c of _hit){const d=Math.hypot(mx-c.cx,my-c.cy); if(d<c.r*1.15&&d<bd){bd=d;best=c;}}
-  if(best){tacTip.style.display='block';
+  let bi=-1,bd=1e9;
+  for(let i=0;i<_hit.length;i++){const c=_hit[i],d=Math.hypot(mx-c.cx,my-c.cy);
+    if(d<c.r*1.15&&d<bd){bd=d;bi=i;}}
+  _hoverIdx=bi;
+  if(bi>=0){tacTip.style.display='block';
     tacTip.style.left=Math.min(mx+12,r.width-160)+'px'; tacTip.style.top=Math.max(0,my-30)+'px';
-    tacTip.textContent=`${best.hand} \u00b7 ${best.part} \u00b7 pt ${best.pt} \u00b7 ${best.v}`;}
+    tacTip.textContent=tipText(_hit[bi]);}
   else tacTip.style.display='none';});
-cHand.addEventListener('mouseleave',()=>tacTip.style.display='none');
+cHand.addEventListener('mouseleave',()=>{tacTip.style.display='none';_hoverIdx=-1;});
 
 function loop(){update();if(playing)requestAnimationFrame(loop);}
 

ep2/viewer.html

@@ -314,17 +314,24 @@ function drawTactile(i){
     ctx.fillText(peak>0?String(peak):'\u2014',lx,cTop+2*fs+3);
     ctx.textAlign='left';
   });
+  if(_hoverIdx>=0 && _hit[_hoverIdx] && tacTip.style.display!=='none')
+    tacTip.textContent=tipText(_hit[_hoverIdx]);      // 播放时数值随帧刷新
 }
 
+// 记住悬浮的是"哪个格子"(索引), 每帧重绘后用最新值刷新文字, 鼠标不动也会跟着播放更新
+let _hoverIdx=-1;
+function tipText(h){return `${h.hand} \u00b7 ${h.part} \u00b7 pt ${h.pt} \u00b7 ${h.v}`;}
 cHand.addEventListener('mousemove',e=>{
   const r=cHand.getBoundingClientRect(),mx=e.clientX-r.left,my=e.clientY-r.top;
-  let best=null,bd=1e9;
-  for(const c of _hit){const d=Math.hypot(mx-c.cx,my-c.cy); if(d<c.r*1.15&&d<bd){bd=d;best=c;}}
-  if(best){tacTip.style.display='block';
+  let bi=-1,bd=1e9;
+  for(let i=0;i<_hit.length;i++){const c=_hit[i],d=Math.hypot(mx-c.cx,my-c.cy);
+    if(d<c.r*1.15&&d<bd){bd=d;bi=i;}}
+  _hoverIdx=bi;
+  if(bi>=0){tacTip.style.display='block';
     tacTip.style.left=Math.min(mx+12,r.width-160)+'px'; tacTip.style.top=Math.max(0,my-30)+'px';
-    tacTip.textContent=`${best.hand} \u00b7 ${best.part} \u00b7 pt ${best.pt} \u00b7 ${best.v}`;}
+    tacTip.textContent=tipText(_hit[bi]);}
   else tacTip.style.display='none';});
-cHand.addEventListener('mouseleave',()=>tacTip.style.display='none');
+cHand.addEventListener('mouseleave',()=>{tacTip.style.display='none';_hoverIdx=-1;});
 
 function loop(){update();if(playing)requestAnimationFrame(loop);}
 

ep3/viewer.html

@@ -314,17 +314,24 @@ function drawTactile(i){
     ctx.fillText(peak>0?String(peak):'\u2014',lx,cTop+2*fs+3);
     ctx.textAlign='left';
   });
+  if(_hoverIdx>=0 && _hit[_hoverIdx] && tacTip.style.display!=='none')
+    tacTip.textContent=tipText(_hit[_hoverIdx]);      // 播放时数值随帧刷新
 }
 
+// 记住悬浮的是"哪个格子"(索引), 每帧重绘后用最新值刷新文字, 鼠标不动也会跟着播放更新
+let _hoverIdx=-1;
+function tipText(h){return `${h.hand} \u00b7 ${h.part} \u00b7 pt ${h.pt} \u00b7 ${h.v}`;}
 cHand.addEventListener('mousemove',e=>{
   const r=cHand.getBoundingClientRect(),mx=e.clientX-r.left,my=e.clientY-r.top;
-  let best=null,bd=1e9;
-  for(const c of _hit){const d=Math.hypot(mx-c.cx,my-c.cy); if(d<c.r*1.15&&d<bd){bd=d;best=c;}}
-  if(best){tacTip.style.display='block';
+  let bi=-1,bd=1e9;
+  for(let i=0;i<_hit.length;i++){const c=_hit[i],d=Math.hypot(mx-c.cx,my-c.cy);
+    if(d<c.r*1.15&&d<bd){bd=d;bi=i;}}
+  _hoverIdx=bi;
+  if(bi>=0){tacTip.style.display='block';
     tacTip.style.left=Math.min(mx+12,r.width-160)+'px'; tacTip.style.top=Math.max(0,my-30)+'px';
-    tacTip.textContent=`${best.hand} \u00b7 ${best.part} \u00b7 pt ${best.pt} \u00b7 ${best.v}`;}
+    tacTip.textContent=tipText(_hit[bi]);}
   else tacTip.style.display='none';});
-cHand.addEventListener('mouseleave',()=>tacTip.style.display='none');
+cHand.addEventListener('mouseleave',()=>{tacTip.style.display='none';_hoverIdx=-1;});
 
 function loop(){update();if(playing)requestAnimationFrame(loop);}
 

ep4/viewer.html

@@ -314,17 +314,24 @@ function drawTactile(i){
     ctx.fillText(peak>0?String(peak):'\u2014',lx,cTop+2*fs+3);
     ctx.textAlign='left';
   });
+  if(_hoverIdx>=0 && _hit[_hoverIdx] && tacTip.style.display!=='none')
+    tacTip.textContent=tipText(_hit[_hoverIdx]);      // 播放时数值随帧刷新
 }
 
+// 记住悬浮的是"哪个格子"(索引), 每帧重绘后用最新值刷新文字, 鼠标不动也会跟着播放更新
+let _hoverIdx=-1;
+function tipText(h){return `${h.hand} \u00b7 ${h.part} \u00b7 pt ${h.pt} \u00b7 ${h.v}`;}
 cHand.addEventListener('mousemove',e=>{
   const r=cHand.getBoundingClientRect(),mx=e.clientX-r.left,my=e.clientY-r.top;
-  let best=null,bd=1e9;
-  for(const c of _hit){const d=Math.hypot(mx-c.cx,my-c.cy); if(d<c.r*1.15&&d<bd){bd=d;best=c;}}
-  if(best){tacTip.style.display='block';
+  let bi=-1,bd=1e9;
+  for(let i=0;i<_hit.length;i++){const c=_hit[i],d=Math.hypot(mx-c.cx,my-c.cy);
+    if(d<c.r*1.15&&d<bd){bd=d;bi=i;}}
+  _hoverIdx=bi;
+  if(bi>=0){tacTip.style.display='block';
     tacTip.style.left=Math.min(mx+12,r.width-160)+'px'; tacTip.style.top=Math.max(0,my-30)+'px';
-    tacTip.textContent=`${best.hand} \u00b7 ${best.part} \u00b7 pt ${best.pt} \u00b7 ${best.v}`;}
+    tacTip.textContent=tipText(_hit[bi]);}
   else tacTip.style.display='none';});
-cHand.addEventListener('mouseleave',()=>tacTip.style.display='none');
+cHand.addEventListener('mouseleave',()=>{tacTip.style.display='none';_hoverIdx=-1;});
 
 function loop(){update();if(playing)requestAnimationFrame(loop);}
 

ep5/viewer.html

@@ -314,17 +314,24 @@ function drawTactile(i){
     ctx.fillText(peak>0?String(peak):'\u2014',lx,cTop+2*fs+3);
     ctx.textAlign='left';
   });
+  if(_hoverIdx>=0 && _hit[_hoverIdx] && tacTip.style.display!=='none')
+    tacTip.textContent=tipText(_hit[_hoverIdx]);      // 播放时数值随帧刷新
 }
 
+// 记住悬浮的是"哪个格子"(索引), 每帧重绘后用最新值刷新文字, 鼠标不动也会跟着播放更新
+let _hoverIdx=-1;
+function tipText(h){return `${h.hand} \u00b7 ${h.part} \u00b7 pt ${h.pt} \u00b7 ${h.v}`;}
 cHand.addEventListener('mousemove',e=>{
   const r=cHand.getBoundingClientRect(),mx=e.clientX-r.left,my=e.clientY-r.top;
-  let best=null,bd=1e9;
-  for(const c of _hit){const d=Math.hypot(mx-c.cx,my-c.cy); if(d<c.r*1.15&&d<bd){bd=d;best=c;}}
-  if(best){tacTip.style.display='block';
+  let bi=-1,bd=1e9;
+  for(let i=0;i<_hit.length;i++){const c=_hit[i],d=Math.hypot(mx-c.cx,my-c.cy);
+    if(d<c.r*1.15&&d<bd){bd=d;bi=i;}}
+  _hoverIdx=bi;
+  if(bi>=0){tacTip.style.display='block';
     tacTip.style.left=Math.min(mx+12,r.width-160)+'px'; tacTip.style.top=Math.max(0,my-30)+'px';
-    tacTip.textContent=`${best.hand} \u00b7 ${best.part} \u00b7 pt ${best.pt} \u00b7 ${best.v}`;}
+    tacTip.textContent=tipText(_hit[bi]);}
   else tacTip.style.display='none';});
-cHand.addEventListener('mouseleave',()=>tacTip.style.display='none');
+cHand.addEventListener('mouseleave',()=>{tacTip.style.display='none';_hoverIdx=-1;});
 
 function loop(){update();if(playing)requestAnimationFrame(loop);}