Joe Posts - Answer Overflow

Joe

•Created by Joe on 5/11/2024 in #support

Reloading Wasm or Reloading Page

hello everyone. I am trying to host some games I made with Raylib and Zig and compiled to wasm on my website. It kinda works right now, when I first enter the Gamepage the game loads just fine and works fine, but when I route some other page on my website and back to my game page the game doesnt work anymore (using Solid Router). To get it to Work again i have to reload the page. So now I either have to find a way to reload the page when I get rerouted to it by solid router or find a way how to properly unload and reload the wasm an js code. I have a page for my game which contains the HTML Elements I need and a function createScriptLoader to add the required Js scripts to the head of the page when I enter my TestGame Page and removed if i leave it:

var OMITTED_PROPS = ["src"];
function createScriptLoader(props: any) {
  if (isServer) {
    return void 0;
  }
  const script = document.createElement("script");
  const [local, scriptProps] = splitProps(props, OMITTED_PROPS);
  setTimeout(() => spread(script, scriptProps, false, true));
  createRenderEffect(() => {
    const src = typeof local.src === "string" ? local.src : local.src();
    const prop = "src";
    if (script[prop] !== src) {
      script[prop] = src;
      document.head.appendChild(script);
    }
  });
  onCleanup(() => document.head.contains(script) && document.head.removeChild(script));
  return script;
}

var OMITTED_PROPS = ["src"];
function createScriptLoader(props: any) {
  if (isServer) {
    return void 0;
  }
  const script = document.createElement("script");
  const [local, scriptProps] = splitProps(props, OMITTED_PROPS);
  setTimeout(() => spread(script, scriptProps, false, true));
  createRenderEffect(() => {
    const src = typeof local.src === "string" ? local.src : local.src();
    const prop = "src";
    if (script[prop] !== src) {
      script[prop] = src;
      document.head.appendChild(script);
    }
  });
  onCleanup(() => document.head.contains(script) && document.head.removeChild(script));
  return script;
}

const TestGame: Component = () => {
    createScriptLoader({
        src: "/index.js",
        async: true,
    });
    createScriptLoader({
        src: "/core.js",
    });
  return (
    <>
    <Navbar />
    <div hidden class="emscripten" id="status">Downloading...</div>
    <progress hidden id="progress" max={100} value={0}></progress>
    <canvas class="emscripten" id="canvas" oncontextmenu={e => e.preventDefault()} tabindex={-1}></canvas>
    </>
  );
};

const TestGame: Component = () => {
    createScriptLoader({
        src: "/index.js",
        async: true,
    });
    createScriptLoader({
        src: "/core.js",
    });
  return (
    <>
    <Navbar />
    <div hidden class="emscripten" id="status">Downloading...</div>
    <progress hidden id="progress" max={100} value={0}></progress>
    <canvas class="emscripten" id="canvas" oncontextmenu={e => e.preventDefault()} tabindex={-1}></canvas>
    </>
  );
};

6 replies

Gaming

Programming