feat(highway_3d): #5 early/late timing — colour the hit feedback by timing

Surfaces the detector's timing on every hit (the charrette's last item), fully
highway-side: notedetect already dispatches the judgment (timingState/timingError)
on notedetect:hit/miss, so we carry timingState onto the event mark and tint the
hit's spark burst + the ✓ verdict glyph by it — on-time green, early cyan, late
amber. Gracefully falls back to green when no timing is known (pure-provider path),
so it never invents data. Behind the new "Timing feedback" toggle (default on).

Charrette: 8/8 complete.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_011Q9BpGYqUaga9ZJyS3dDPq
This commit is contained in:
ChrisBeWithYou 2026-06-26 00:36:23 -05:00
parent e0e6213b1e
commit ccbb2c476d
2 changed files with 21 additions and 3 deletions

View File

@ -7225,7 +7225,7 @@
color: '#66c7ff',
});
}
return { s: note.s, f: note.f, noteTime: d.noteTime, labels };
return { s: note.s, f: note.f, noteTime: d.noteTime, labels, timingState: d.timingState || null };
};
const _ndPushMark = (arr, d) => {
const mark = _ndNormalizeMark(d);
@ -7834,6 +7834,14 @@
ambLight.intensity = _cinematic ? 0.35 : 0.85;
dirLight.intensity = _cinematic ? 1.15 : 0.8;
}
// #5 early/late: tint the hit feedback by timing — on-time green, early cyan,
// late amber. Falls back to green when timing is unknown (pure-provider path).
function _timingHex(ts) {
if (!_timingFx || !ts || ts === 'OK') return 0x22ff88;
if (ts === 'EARLY') return 0x35d6ff;
if (ts === 'LATE') return 0xffb84d;
return 0x22ff88;
}
function _sparkBurst(x, y, z, hex, count) {
if (!_sparkPts || count <= 0) return;
const r = ((hex >> 16) & 255) / 255, g = ((hex >> 8) & 255) / 255, b = (hex & 255) / 255;
@ -12891,7 +12899,7 @@
_ndFaceMat = mHitBrightArrays[s] ?? null;
if (_vAlpha > _ndHitFlash) _ndHitFlash = _vAlpha;
_hitPunch = 1 + 0.22 * _hitFx * _vAlpha; // #3 scale-punch (biggest at strike, eases)
if (_verdictMarks) _ndLabels.push({ x, y: y + NH * 1.7, z: noteZ + 0.02, labels: [{ text: '✓', color: '#22ff88' }] }); // #6
if (_verdictMarks) { const _tc = _timingHex(_ndMatchedMark && _ndMatchedMark.timingState); _ndLabels.push({ x, y: y + NH * 1.7, z: noteZ + 0.02, labels: [{ text: '✓', color: '#' + _tc.toString(16).padStart(6, '0') }] }); } // #6 + #5
if (_hitFx > 0 && _vAlpha > 0.5) {
const _spk = s + '|' + n.f + '|' + n.t.toFixed(2);
if (!(_sparkSeen.get(_spk) > now)) {
@ -12899,7 +12907,7 @@
if (_sparkSeen.size > 600) _sparkSeen.clear();
_streakHits++;
const _heatMul = _streakFx ? (1 + 0.85 * _streakHeat) : 1; // #7 escalate
_sparkBurst(x, y, noteZ, 0x22ff88, Math.round((7 + 13 * _hitFx) * _heatMul));
_sparkBurst(x, y, noteZ, _timingHex(_ndMatchedMark && _ndMatchedMark.timingState), Math.round((7 + 13 * _hitFx) * _heatMul));
}
}
}

View File

@ -631,6 +631,16 @@
onchange="window.h3dBgSetBloom && window.h3dBgSetBloom(this.checked)"
class="accent-accent mt-0.5">
</div>
<div class="mt-3 flex items-start justify-between gap-3">
<label for="h3d-timingfx" class="text-xs font-medium text-gray-400">
Timing feedback
<span class="block text-[10px] text-gray-500 font-normal">Colours a hit by your timing — on-time green, a touch <span style="color:#35d6ff">early (cyan)</span> or <span style="color:#ffb84d">late (amber)</span> — so you can feel where you sit in the beat.</span>
</label>
<input type="checkbox" id="h3d-timingfx" checked
onchange="window.h3dBgSetTimingFx && window.h3dBgSetTimingFx(this.checked)"
class="accent-accent mt-0.5">
</div>
</div>
</details>
</div>