Custom style isn't applied on browser refresh

[klembot]

Describe the bug Reloading a story doesn't re-apply custom styles correctly.

To Reproduce Create a story with this:

config.style.googleFont: '<link href="https://fonts.googleapis.com/css?family=Audiowide" rel="stylesheet">'
config.style.page.font: 'AudioWide 32'
config.style.dark.page.color: 'yellow-2'
config.style.dark.page.link.color: 'red-4'
--
This text should be yellow!

[[This link should be red!->CLICK ME]]

Play it and then refresh the browser. It should now show default styles.

This doesn't happen in test mode or in local dev.

Expected behavior Should retain custom style.

Stories and screenshots n/a

Environment All

Additional context n/a

[klembot]

I think this is a timing issue. I suspect what's happening is that in this scenario, the state-change events from loading state from local storage are dispatched before the state-css-variables element is initialized, so it never sees them.

Workaround appears to be putting this code in Story JavaScript:

for (const name of engine.state.varNames()) {
  window.dispatchEvent(
    new CustomEvent('state-change', {
      detail: {
        name,
        value: engine.state.get(name),
        previous: engine.state.get(name)
      }
    })
  );
}

[HAL9000-GH]

Your JavaScript workaround fixes the style configuration problem for me. Tested on Win10 with latest Firefox.

I use a dinosaur computer, so I see a lot of the intermittent things going on that might happen in the flash of an eye on normal computers. Upon hitting RESTART in the story, I get a bit of a weird sequence. Maybe this has always been, I don't know. (This is with the workaround code you provided.)

If I stay on the starting passage and hit RESTART, I see the following...

1.) The first passage appears again abruptly with the wrong style. (The one with the #222222 background color.) 2.) The page goes white as the page refreshes. (I see the browser's loading indicator.) 3.) It flashes again with a full white page. 4.) The first passage transitions in with the proper style.

If I hit RESTART from a subsequent passage, this is what happens:

1.) The first passage transitions in nicely with the proper style. 2.) The page then flashes white as the browser loads the story file again. 3.) The page flashes white again. 4.) The passage transitions in with proper styling.

If I hit refresh on any other page on the internet that I know of, the page just refreshes cleanly. Perhaps it has something to do with local storage access or something. Anyway, the fact that I saw the wrong style in even a brief instance says that the bug still lingers in some capacity. Seems to be when restarting from the starting passage.

Kind of unrelated, but I wonder... do you need to reload the page when you restart a story, over that of resetting/flushing variables? I mostly ask because going from a dark themed story to a blank white loading screen and then back to the dark theme is a bit jarring.