perf: update replay HUD labels imperatively instead of per-frame state

[Anexus5919]

📌 Related Issue

Fixes #870

---

📝 Description

The requestAnimationFrame render loop in Replay3DModel.tsx called setHudLabels on every rendered frame to position the six joint-angle overlays, re-rendering the whole component at the animation frame rate. (setDisplayFPS is already throttled to every 30 frames, so setHudLabels was the per-frame re-render driver.)

🔹 What has been changed?

• src/components/Replay3DModel.tsx: the six HUD labels are now rendered once from a static HUD_JOINTS config, and the loop updates each label's position, visibility, border colour and angle text directly via refs (hudRefs / hudAngleRefs) instead of via setHudLabels. The hudLabels React state (and the HudLabel type) are removed.

🔹 Why are these changes needed?

• A 60fps requestAnimationFrame loop should not drive React re-renders. The projection and angle math is unchanged; only the output target moves from React state to direct DOM, so playback no longer re-renders the component every frame. The CSS transition on the labels is preserved, so label movement stays smooth.

---

🛠️ Type of Change

• ⚡ Performance Improvement

---

🧪 Testing

✅ Tests Performed

• Tested locally
• npx tsc --noEmit: Replay3DModel.tsx is clean (the only pre-existing tsc errors are in exerciseEngine.ts, unrelated).
• npx eslint src/components/Replay3DModel.tsx: 0 problems — including no unused-variable warnings, confirming the hudLabels state and HudLabel type were removed cleanly and the refs are wired correctly.
• Reviewed that the projection/angle computation is byte-for-byte the same as before (only the output moved from a pushed array to el.style + the angle span's text), and that the label styles match the previous markup (with display toggled to show/hide and left/top set imperatively).

🔹 Note on automated tests

No runtime unit test is included: the HUD is rendered inside a WebGL/Three.js requestAnimationFrame loop, which is not feasible to unit test without a full WebGL + DOM harness. Verification is by tsc, eslint, and a careful review that the math/markup are unchanged.

🌐 Browsers Tested

Not applicable here (verified via static analysis and review).

---

📷 Screenshots / Demo (if applicable)

Not applicable.

---

📋 Checklist

• I have read the project's CONTRIBUTING guidelines
• My code follows the project style guidelines
• I have performed a self-review of my code
• I have tested my changes locally
• I have added/updated documentation where necessary (not applicable)
• My changes do not introduce new warnings or errors
• This PR is linked to an existing issue

---

💬 Additional Notes

Branched from latest upstream/main (5464425). Related to #869 (the same loop also re-subscribed the RAF effect every frame).

[vercel]

@Anexus5919 is attempting to deploy a commit to the somiljain2024-4175's projects Team on Vercel.

A member of the Team first needs to authorize it.

[Anexus5919]

@Somil450 @diksha78dev Kindly have a review on this pr. Thanks!