This commit is contained in:
2026-02-17 09:21:10 -08:00
parent 8eb63436fb
commit 32b4b1e88a
4 changed files with 67 additions and 31 deletions

13
web-demo/iframe-helper.js Normal file
View File

@@ -0,0 +1,13 @@
if (window.frameElement) {
const body = document.body;
const observer = new ResizeObserver(() => {
window.parent.postMessage({
cmd: "resize",
data: {
width: body.scrollWidth,
height: body.scrollHeight,
},
});
});
observer.observe(body);
}

View File

@@ -4,44 +4,31 @@
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta <meta
name="viewport" name="viewport"
content="width=device-width, height=device-height, initial-scale=1" content="width=device-width, initial-scale=1, shrink-to-fit=no"
/> />
<title>Strafe Client</title> <title>StrafesNET Roblox Bot Player Demo</title>
<style>
<base data-trunk-public-url /> :root {
<style type="text/css"> color-scheme: light dark;
:focus {
outline: none;
} }
html,
body { body {
margin: 0px; margin: 0; /* remove default margin */
background: #fff; height: 100%; /* make body fill the browser window */
width: 100%; display: flex;
height: 100%; place-content: center center;
} }
canvas {
#content { width: 600px;
/* This allows the flexbox to grow to max size, this is needed for WebGPU */ height: 600px;
flex: 1 1 100%; max-width: 100%;
/* This forces CSS to ignore the width/height of the canvas, this is needed for WebGL */ display: block;
contain: size;
}
.main-canvas {
margin: 0;
width: 100%;
height: 100%;
} }
</style> </style>
<script defer src="player.js" type="module"></script>
<script defer type="module" src="iframe-helper.js"></script>
</head> </head>
<body> <body>
<canvas class="main-canvas" id="canvas"></canvas> <canvas></canvas>
<link
data-trunk
rel="rust"
href="../strafe-client/Cargo.toml"
data-wasm-opt-params="--enable-bulk-memory --enable-nontrapping-float-to-int"
/>
</body> </body>
</html> </html>

36
web-demo/player.js Normal file
View File

@@ -0,0 +1,36 @@
import init, {
setup,
Graphics,
Bot,
PlaybackHead,
} from "./pkg/strafesnet_roblox_bot_player_wasm_module.js";
await init(); // load the wasm module
const botBuf = await fetch("bhop_marble_7cf33a64-7120-4514-b9fa-4fe29d9523d.qbot").then((r) => r.arrayBuffer());
const mapBuf = await fetch("bhop_marble_5692093612.snfm").then((r) => r.arrayBuffer());
const canvas = document.querySelector('canvas');
const context = await setup(canvas);
const graphics = new Graphics(context, new Uint8Array(mapBuf));
const bot = new Bot(new Uint8Array(botBuf));
const playback = new PlaybackHead(0);
const startTime = performance.now();
function animate(now) {
const elapsedMs = now - startTime;
const elapsedSec = elapsedMs / 1000; // wasm expects seconds
// Advance the playback head to the current time
playback.advance_time(bot, elapsedSec);
// Render the frame that the bot is at that time
graphics.render(bot, playback, elapsedSec);
// Keep the loop going
requestAnimationFrame(animate);
}
requestAnimationFrame(animate);

View File