From ae624f90dcfec8fd5cf194560b74bab6a4da86ed Mon Sep 17 00:00:00 2001
From: Rhys Lloyd <krakow20@gmail.com>
Date: Fri, 13 Mar 2026 10:39:54 -0700
Subject: [PATCH] bvh demo

---
 web-demo/index.html |  2 ++
 web-demo/player.js  | 21 +++++++++++++++++++++
 2 files changed, 23 insertions(+)

diff --git a/web-demo/index.html b/web-demo/index.html
index 4e7d866..f905072 100644
--- a/web-demo/index.html
+++ b/web-demo/index.html
@@ -58,6 +58,8 @@
 		<div class="hud">
 			<div id="hud_duration" class="timer">00:00:00</div>
 			<div id="hud_timer" class="timer">00:00:00</div>
+			<div id="diff_velocity" class="timer">-0.000 u/s</div>
+			<div id="diff_time" class="timer">-0.000s</div>
 		</div>
 		<div class="controls">
 			<button id="control_reset">↪️</button>
diff --git a/web-demo/player.js b/web-demo/player.js
index 60a47ce..7a831b4 100644
--- a/web-demo/player.js
+++ b/web-demo/player.js
@@ -3,6 +3,7 @@ import init, {
 	CompleteBot,
 	CompleteMap,
 	PlaybackHead,
+	Bvh,
 } from "./pkg/strafesnet_roblox_bot_player_wasm_module.js";
 
 // Loading
@@ -17,12 +18,16 @@ const graphics = await setup_graphics(canvas);
 const bot = new CompleteBot(new Uint8Array(await b.arrayBuffer()));
 const map = new CompleteMap(new Uint8Array(await m.arrayBuffer()));
 const playback = new PlaybackHead(bot, 0);
+const bvh_wr = new Bvh(bot);
+const playback_wr = new PlaybackHead(bot, 0);
 
 graphics.change_map(map);
 
 // HUD
 const hud_timer = document.getElementById("hud_timer");
 const hud_duration = document.getElementById("hud_duration");
+const diff_velocity = document.getElementById("diff_velocity");
+const diff_time = document.getElementById("diff_time");
 const MODE_MAIN = 0;
 
 function timer_text(t) {
@@ -106,6 +111,22 @@ function animate(now) {
 	const time = playback.get_run_time(bot, elapsedSec, MODE_MAIN);
 	hud_timer.textContent = timer_text(time);
 
+	// show diff
+	const pos = playback.get_position(bot, elapsedSec);
+	const wr_playback_time = bvh_wr.closest_time_to_point(bot, pos);
+	playback_wr.set_head_time(bot, elapsedSec, wr_playback_time);
+	const wr_time = playback_wr.get_run_time(bot, elapsedSec, MODE_MAIN);
+	const run_speed = playback.get_speed(bot, elapsedSec);
+	const wr_speed = playback_wr.get_speed(bot, elapsedSec);
+	const v_diff = run_speed - wr_speed;
+	const wholespeed = Math.floor(Math.abs(v_diff));
+	const millispeed = Math.floor((Math.abs(v_diff) % 1) * 1000);
+	diff_velocity.textContent = `${v_diff<0?"-":"+"}${String(wholespeed)}.${String(millispeed).padStart(3, "0")} u/s`;
+	const t_diff = time - wr_time;
+	const s = Math.floor(Math.abs(t_diff));
+	const ms = Math.floor((Math.abs(t_diff) % 1) * 1000);
+	diff_time.textContent = `${t_diff<0?"-":"+"}${String(s)}.${String(ms).padStart(3, "0")}s`;
+
 	// Render the frame that the bot is at that time
 	graphics.render(bot, playback, elapsedSec);