upload which is not upload somehow works, almost ...

Author: sparkoo

web/src/App.jsx

@@ -1,6 +1,6 @@
 import { LocationProvider, Router, Route, lazy } from 'preact-iso';
 import { Home } from './Index/Home'
-import { PlayerApp } from './Player/App'
+import { PlayerApp } from './Player/PlayerApp'
 
 export function App() {
 	return <LocationProvider>

web/src/Index/Home.jsx

@@ -44,7 +44,7 @@ export function Home() {
     //     console.log(err)
     //     setContent(<span className="w3-xxxlarge rotate">failed to contact server ...</span>)
     //   })
-  }, [serverHost, auth, isWasmLoaded])
+  }, [serverHost, auth])
 
   // let faceitAuth = (
   //   <div className='faceitAuth'>
@@ -146,9 +146,9 @@ export function Home() {
 }
 
 function clickeeedd() {
-  console.log("fjasklfjklas")
-  window.open("/player", '_blank').focus();
-  const channel = new BroadcastChannel("my-channel");
+  const uuid = crypto.randomUUID()
+  window.open("/player?platform=upload&uuid=" + uuid, '_blank').focus();
+  const channel = new BroadcastChannel(uuid);
   setTimeout(() => {
     channel.postMessage("Hey, how's it going mate? I'm from a different tab!");
   }, 100)

web/src/Index/Uploader/Uploader.jsx

@@ -26,7 +26,12 @@ const Uploader = (props) => {
       const arrayBuffer = e.target.result;
       const byteArray = new Uint8Array(arrayBuffer);
 
-      window.testt(byteArray)
+      const uuid = crypto.randomUUID()
+      window.open("/player?platform=upload&uuid=" + uuid, '_blank').focus();
+      const channel = new BroadcastChannel(uuid);
+      setTimeout(() => {
+        channel.postMessage(byteArray);
+      }, 1000)
     };
     reader.readAsArrayBuffer(file);
   }

web/src/Player/App.jsx

@@ -0,0 +1,100 @@
+import { useEffect, useState } from "react";
+import './PlayerApp.css';
+import ErrorBoundary from "./Error.jsx";
+import MessageBus from "./MessageBus.js";
+import Player from "./Player.js";
+import Map2d from "./map/Map2d.jsx";
+import InfoPanel from "./panel/InfoPanel.jsx";
+import '../libs/wasm_exec.js';
+import './protos/Message_pb.js'
+
+export function PlayerApp() {
+  const [messageBus] = useState(new MessageBus())
+  const [player] = useState(new Player(messageBus))
+  const [serverHost] = useState(window.location.host.includes("localhost") ? "http://localhost:8080" : "");
+  const [isWasmLoaded, setIsWasmLoaded] = useState(false)
+
+  useEffect(() => {
+    console.log("run run run")
+
+    if (!isWasmLoaded) {
+      loadWasm();
+      return
+    }
+
+    const urlParams = new URLSearchParams(window.location.search);
+    const channel = new BroadcastChannel(urlParams.get("uuid"));
+    channel.addEventListener("message", e => {
+      console.log("received", e, isWasmLoaded)
+      window.testt(e.data, function (data) {
+        if (data instanceof Uint8Array) {
+          const msg = proto.Message.deserializeBinary(data).toObject()
+          messageBus.emit(msg)
+        } else {
+          // text frame
+          // console.log(event.data);
+          console.log("[message] text data received from server, this is weird. We're using protobufs ?!?!?", data);
+          messageBus.emit(JSON.parse(data))
+        }
+
+        // console.log(`[message] Data received from server: ${event.data}`);
+        // let msg = JSON.parse(event.data)
+        // messageBus.emit(msg)
+      })
+    });
+    messageBus.listen([13], function (msg) {
+      alert(msg.message)
+      // window.testt(byteArray)
+    })
+    // Connect(this.messageBus)
+
+    async function loadWasm() {
+      const go = new window.Go();
+      WebAssembly.instantiateStreaming(fetch(serverHost + "/wasm"), go.importObject)
+        .then((result) => {
+          go.run(result.instance);
+          console.log("should be loaded now")
+          setIsWasmLoaded(true)
+          // window.withDownload("https://corsproxy.io/?" + encodeURIComponent("https://github.com/sparkoo/csgo-2d-demo-viewer/raw/refs/heads/master/test_demos/1-c26b4e22-66ac-4904-87cc-3b2b65a67ddb-1-1.dem.gz"))
+          // fetch("https://corsproxy.io/?" + encodeURIComponent("https://github.com/sparkoo/csgo-2d-demo-viewer/raw/refs/heads/master/test_demos/1-c26b4e22-66ac-4904-87cc-3b2b65a67ddb-1-1.dem.gz"))
+          // .then((result) => {
+          //   console.log(result)
+          //   result.arrayBuffer().then(b => {
+          //     const data = new Uint8Array(b)
+          //     console.log(data)
+          //     window.testt(data, function (data) {
+          //       if(data instanceof Uint8Array) {
+          //         const msg = proto.Message.deserializeBinary(data).toObject()
+          //         messageBus.emit(msg)
+          //       } else {
+          //         // text frame
+          //         // console.log(event.data);
+          //         console.log("[message] text data received from server, this is weird. We're using protobufs ?!?!?", data);
+          //         messageBus.emit(JSON.parse(data))
+          //       }
+
+          //       // console.log(`[message] Data received from server: ${event.data}`);
+          //       // let msg = JSON.parse(event.data)
+          //       // messageBus.emit(msg)
+          //     })
+          //   })
+          // })
+          // .catch(err => console.log(err))
+        });
+    }
+
+  }, [isWasmLoaded])
+
+
+  return (
+    <ErrorBoundary>
+      <div className="grid-container">
+        <div className="grid-item map">
+          <Map2d messageBus={messageBus} />
+        </div>
+        <div className="grid-item infoPanel">
+          <InfoPanel messageBus={messageBus} />
+        </div>
+      </div>
+    </ErrorBoundary>);
+}