Trying to load monogatari inside a react project - works on first load, fails on every next load

[blurymind]

When I try to do it like this

  useEffect(() => {
    monogatari.settings(settings);
    monogatari.preferences(preferences);
    monogatari.storage(storage);
    //// Script
    setScript(monogatari);

    ///  doesnt make a differentce
    const { $_ready, $_ } = Monogatari;
    //// 1. Outside the $_ready function:
    // $_ready(() => {
    //   // 2. Inside the $_ready function:
    //   // monogatari.init("#monogatari").then(() => {
    //   //   console.log("INIT");
    //   //   // 3. Inside the init function:
    //   // });
    // });

    monogatari.init("#monogatari").then(() => {
      console.log("INIT");
      // 3. Inside the init function:
    });

    // unmount
    return () => {
     };
  }, []);

My game starts fine on the first refresh of the page. I am guessing its because its using some onload event internally to initiate things.

But when I use react-router-dom, navigate to a different route then back to the one where the game is, it fails to load and gives me errors

monogatari.js:1810 Uncaught (in promise) TypeError: Cannot set property 'innerHTML' of null
    at r.value (monogatari.js:1810)
    at monogatari.js:1713

or this

index.js:1 TypeError: Cannot read property 'props' of undefined
    at i.value (monogatari.js:1830)
    at monogatari.js:1713
console.<computed> @ index.js:1
(anonymous) @ monogatari.js:1713
Promise.catch (async)
(anonymous) @ monogatari.js:1713
Promise.then (async)
value @ monogatari.js:1713
(anonymous) @ monogatari.js:1713
Promise.then (async)
callback @ monogatari.js:1713
value @ monogatari.js:854
value @ monogatari.js:1713
(anonymous) @ monogatari.js:1713
(anonymous) @ monogatari.js:826
5monogatari.js:1830 Uncaught (in promise) TypeError: Cannot read property 'props' of undefined
    at i.value (monogatari.js:1830)
    at monogatari.js:1713

since the code is minified its kinda hard to tell

Another observation is that $_ready only runs on the first load, every other time its not called at all (navigating away from the page and back to it). I am assuming that it keeps running when I navigate away somehow

I am guessing that after the first load, before leaving the component (see //unmount), I am supposed to somehow reset the engine? I couldnt find any documentation on that

[Hyuchia]

Hey there, $_ready only running once is the right behavior, it listens to the window load event which in a SPA indeed only happens the first time it's loaded.

You can't really "reset" monogatari in that context since you can't run monogatari.init() more than twice. You would need to add monogatari in a component that persists navigation changes, once you have a single instance, then you would be able to reset the game as needed.

[blurymind]

Is there a way to give it new assets without them being in the public folder or a folder? That is the other thing that I wonder if it has a workaround. Say for example my react app wrapper let's the user add or change an image on the game without actually writing it to the public directory of my app

…

On Thu, 22 Apr 2021, 20:02 Diego Islas Ocampo, ***@***.***> wrote: Hey there, $_ready only running once is the right behavior, it listens to the window load event which in a SPA indeed only happens the first time it's loaded. You can't really "reset" monogatari in that context since you can't run monogatari.init() more than twice. You would need to add monogatari in a component that persists navigation changes, once you have a single instance, then you would be able to reset the game as needed. — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#139 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ABRRWVOQ3ZWZBHCYGQMD5XDTKBXCZANCNFSM43M664CA> .

[blurymind]

How does one reset a game? I can't find any documentation on that

…

On Fri, 23 Apr 2021, 01:08 Todor Imreorov, ***@***.***> wrote: Is there a way to give it new assets without them being in the public folder or a folder? That is the other thing that I wonder if it has a workaround. Say for example my react app wrapper let's the user add or change an image on the game without actually writing it to the public directory of my app On Thu, 22 Apr 2021, 20:02 Diego Islas Ocampo, ***@***.***> wrote: > Hey there, $_ready only running once is the right behavior, it listens > to the window load event which in a SPA indeed only happens the first time > it's loaded. > > You can't really "reset" monogatari in that context since you can't run > monogatari.init() more than twice. You would need to add monogatari in a > component that persists navigation changes, once you have a single > instance, then you would be able to reset the game as needed. > > — > You are receiving this because you authored the thread. > Reply to this email directly, view it on GitHub > <#139 (comment)>, > or unsubscribe > <https://github.com/notifications/unsubscribe-auth/ABRRWVOQ3ZWZBHCYGQMD5XDTKBXCZANCNFSM43M664CA> > . >