js controls

wasm-module/src/lib.rs

@@ -71,6 +71,10 @@ impl CompleteBot{
 		})
 	}
 	#[wasm_bindgen]
+	pub fn time_base(&self)->f64{
+		self.bot.time_base().get() as f64/PhysicsTime::ONE_SECOND.get() as f64
+	}
+	#[wasm_bindgen]
 	pub fn duration(&self)->f64{
 		self.bot.duration().get() as f64/PhysicsTime::ONE_SECOND.get() as f64
 	}
@@ -135,4 +139,30 @@ impl PlaybackHead{
 		let mode=v0::ModeID(mode_id);
 		Some(self.head.state().get_run(mode)?.is_finished())
 	}
+	#[wasm_bindgen]
+	pub fn set_paused(&mut self,time:f64,paused:bool){
+		let time=time::from_float(time).unwrap();
+		self.head.set_paused(time,paused);
+	}
+	#[wasm_bindgen]
+	pub fn set_scale(&mut self,time:f64,scale_num:i64,scale_den:u64){
+		let time=time::from_float(time).unwrap();
+		self.head.set_scale(time,strafesnet_common::integer::Ratio64::new(scale_num,scale_den).unwrap());
+	}
+	#[wasm_bindgen]
+	pub fn seek_to(&mut self,time:f64,new_time:f64){
+		let time=time::from_float(time).unwrap();
+		let new_time=time::from_float(new_time).unwrap();
+		self.head.seek_to(time,new_time);
+	}
+	#[wasm_bindgen]
+	pub fn seek_forward(&mut self,time:f64){
+		let time=time::from_float(time).unwrap();
+		self.head.seek_forward(time);
+	}
+	#[wasm_bindgen]
+	pub fn seek_backward(&mut self,time:f64){
+		let time=time::from_float(time).unwrap();
+		self.head.seek_backward(time);
+	}
 }

web-demo/index.html

@@ -40,6 +40,15 @@
 				font-size: 14px;
 				border-radius: 3px;
 			}
+
+			.controls {
+				position: fixed;
+				bottom: 10px;
+				left: 120px;
+				display: flex;
+				flex-direction: row; /* stack horizontally */
+				gap: 4px; /* space between timers */
+			}
 		</style>
 		<script defer src="player.js" type="module"></script>
 		<script defer type="module" src="iframe-helper.js"></script>
@@ -50,5 +59,13 @@
 			<div id="hud_duration" class="timer">00:00:00</div>
 			<div id="hud_timer" class="timer">00:00:00</div>
 		</div>
+		<div class="controls">
+			<button id="control_reset">↪️</button>
+			<button id="control_pause">⏯</button>
+			<button id="control_backward">⬅️</button>
+			<button id="control_forward">➡️</button>
+			<button id="control_slower">⏪</button>
+			<button id="control_faster">⏩</button>
+		</div>
 	</body>
 </html>

web-demo/player.js

@@ -5,6 +5,7 @@ import init, {
 	PlaybackHead,
 } from "./pkg/strafesnet_roblox_bot_player_wasm_module.js";
 
+// Loading
 await init(); // load the wasm module
 
 const b = await fetch("bhop_marble_7cf33a64-7120-4514-b9fa-4fe29d9523d.qbot");
@@ -19,6 +20,7 @@ const playback = new PlaybackHead(0);
 
 graphics.change_map(map);
 
+// HUD
 const hud_timer = document.getElementById("hud_timer");
 const hud_duration = document.getElementById("hud_duration");
 const MODE_MAIN = 0;
@@ -33,7 +35,48 @@ function timer_text(t) {
 
 hud_duration.textContent = timer_text(bot.run_duration(MODE_MAIN));
 
-const startTime = performance.now();
+// Stuff
+const startTime = document.timeline.currentTime;
+function elapsed() {
+	return (document.timeline.currentTime - startTime) / 1000;
+}
+
+var paused = false;
+var speed = 0;
+function speed_ratio(speed) {
+	if (speed < 0) {
+		return [BigInt(4) ** BigInt(-speed), BigInt(5) ** BigInt(-speed)];
+	} else {
+		return [BigInt(5) ** BigInt(speed), BigInt(4) ** BigInt(speed)];
+	}
+}
+
+// Controls
+document.getElementById("control_reset").addEventListener("click", (e) => {
+	playback.seek_to(elapsed(), bot.time_base());
+});
+document.getElementById("control_pause").addEventListener("click", (e) => {
+	paused = !paused;
+	playback.set_paused(elapsed(), paused);
+});
+document.getElementById("control_forward").addEventListener("click", (e) => {
+	playback.seek_forward(2.0);
+});
+document.getElementById("control_backward").addEventListener("click", (e) => {
+	playback.seek_backward(2.0);
+});
+document.getElementById("control_slower").addEventListener("click", (e) => {
+	speed = Math.max(speed - 1, -27);
+	const [speed_num, speed_den] = speed_ratio(speed);
+	playback.set_scale(elapsed(), speed_num, speed_den);
+});
+document.getElementById("control_faster").addEventListener("click", (e) => {
+	speed = Math.min(speed + 1, 27);
+	const [speed_num, speed_den] = speed_ratio(speed);
+	playback.set_scale(elapsed(), speed_num, speed_den);
+});
+
+// Rendering
 function animate(now) {
 	const elapsedMs = now - startTime;
 	const elapsedSec = elapsedMs / 1000; // wasm expects seconds
@@ -54,6 +97,7 @@ function animate(now) {
 
 requestAnimationFrame(animate);
 
+// Resizing
 function resize() {
 	canvas.width = canvas.clientWidth;
 	canvas.height = canvas.clientHeight;