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 @@
00:00:00
00:00:00
+
-0.000 u/s
+
-0.000s
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);