diff --git a/web/index.html b/web/index.html
index 4ed02ac..6d9b9bf 100644
--- a/web/index.html
+++ b/web/index.html
@@ -2,61 +2,11 @@
Pteropus
-
-
+
diff --git a/web/pteropus-frame.css b/web/pteropus-frame.css
new file mode 100644
index 0000000..01867e4
--- /dev/null
+++ b/web/pteropus-frame.css
@@ -0,0 +1,5 @@
+#pteropus-canvas {
+ height: 100%;
+ width: 100%;
+ display: block;
+}
diff --git a/web/pteropus-frame.js b/web/pteropus-frame.js
new file mode 100644
index 0000000..bd5f593
--- /dev/null
+++ b/web/pteropus-frame.js
@@ -0,0 +1,44 @@
+import init, {init_pteropus} from '../pkg/pteropus.js';
+
+function fileDragOverHandler(event) {
+ event.preventDefault();
+}
+
+async function run() {
+ await init();
+
+ let pteropus = await init_pteropus();
+
+ let test_file_data = null;
+ let needs_resize = true;
+
+ let mainCanvas = document.getElementById("pteropus-canvas");
+ mainCanvas.addEventListener("drop", async (event) => {
+ event.preventDefault();
+ test_file_data = event.dataTransfer.files[0]
+ });
+ mainCanvas.addEventListener("dragover", fileDragOverHandler);
+ const resizeObserver = new ResizeObserver((entries) => {
+ needs_resize = true;
+ });
+ resizeObserver.observe(mainCanvas)
+
+ while(true)
+ {
+ await pteropus.render();
+ // TODO: I really want to do this asynchronously, with the drop
+ // event listener calling pteropus_load_file directly, but I need
+ // to figure out how to get that to work.
+ if(test_file_data) {
+ await pteropus.load_file(test_file_data);
+ test_file_data = null
+ }
+ if(needs_resize) {
+ await pteropus.on_resize();
+ needs_resize = false;
+ }
+ await new Promise(requestAnimationFrame);
+ }
+}
+
+run();