demo
This commit is contained in:
13
web-demo/iframe-helper.js
Normal file
13
web-demo/iframe-helper.js
Normal 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);
|
||||||
|
}
|
||||||
@@ -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
36
web-demo/player.js
Normal 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);
|
||||||
Reference in New Issue
Block a user