Emscripten: Add Api and remove Asynchify

[Ghabry]

Already wrote this in February but never gave it the final touch... Better for post 0.7.1, removing asynchify can cause problems.

Had to remove Asynchify because it breaks the Api (you cannot call back into the Player while the endless async loop is running). Previously we had bad experiences when the browser does the mainloop timing. I hope this works better by now...

New feature: Save upload and download (fix: #1025).

New feature: Api under "easyrpgPlayer.api". Currently can do: Reset, Refresh (called after upload to refresh the scene), Upload, Download. Can be used as an extension point if you have a website that wants to access certain functionality of the Player.

[fdelapena]

Looking great 👍. There's a good chance for an emscripten PR to include a couple of changes:

Pause/resume option via SDL_WINDOWEVENT_FOCUS_GAINED or whichever supports Emscripten as suggested by catinbag and Carsten:
https://community.easyrpg.org/t/pause-and-resume-on-web-version-of-player/1151/2

OSD button html shell updates by Joke:
https://community.easyrpg.org/t/web-player-on-mobile-more-touch-screen-buttons/1032/17

[Ghabry]

Acorn optimizer was just fixed :) emscripten-core/emscripten#18461

[johannschopplich]

Wow, this PR looks promising. Unfortunately, I'm not able to help technically.
Just am here to cheer and applaud for the work. 🙂

[Ghabry]

Also added a screenshot API now that offers the screen for download. Will bind it to the screenshot key.

Is suitable for ynonline which currently downloads the canvas for screenshots and this can be black for a brief moment due to how rendering works.

[Ghabry]

okay rebound the Screenshot button to do a download :)

This PR is ready now. Will use the work in this PR to enhance the Fluidsynth and Font settings scene: I want to allow file "upload" so you can have custom (sound)fonts in the browser.

[johannschopplich]

Waited a year for this. Thank you all for your work. Is it Christmas already? 🎄

[Ghabry]

I have to amend this.

1. hulje from https://archive.yumeboo.ru/play/ found a regression:

The ?game argument is now always lowercased. When the game is in games/Yume_Nikki the game is not found anymore because the request goes to games/yume_nikki.

2. papancakes from https://ynoproject.net/ noticed that the canvas steals now all input events on the entire page.

The problem is here that emscripten_set_main_loop grabs all the input (related issue is emscripten-core/emscripten#10542). Before we used Asynchify which didn`t use this funciton.

Solution seems to be:

In sdl2_ui.cpp:

#ifdef EMSCRIPTEN
    // Only handle keyboard events when the canvas has focus
    SDL_SetHint(SDL_HINT_EMSCRIPTEN_KEYBOARD_ELEMENT, "#canvas");
#endif

Changes on the website:

// Launch the Player and configure it
window.addEventListener('load', (event) => {
    createEasyRpgPlayer({
      game: undefined,
      saveFs: undefined
    }).then(function(Module) {
      // Module is ready
      easyrpgPlayer = Module;
      easyrpgPlayer.initApi();
      canvas.focus(); // <-- NEW

      // Custom code here
    });
});

// Make EasyRPG player embeddable
canvas.addEventListener('mouseenter', () => canvas.focus()); // <- CHANGED
canvas.addEventListener('click', () => canvas.focus()); // <- CHANGED

3. @Mimigris noticed that it is hard to upload a savegame when the game has 0 because "Load" on the title scene cannot be accessed. Will likely alter this so it can be still opened with SHIFT even if disabled.

[thenick775]

Bump, I too am experiencing this regression related to inputs.

All of my text input fields are locked up, and this no longer works to disable:

EMSCRIPTEN_KEEPALIVE void setEventEnable(bool toggle) {
    int state = toggle ? SDL_ENABLE : SDL_DISABLE;
    SDL_EventState(SDL_TEXTINPUT, state);
    SDL_EventState(SDL_KEYDOWN, state);
    SDL_EventState(SDL_KEYUP, state);
    SDL_EventState(SDL_MOUSEMOTION, state);
    SDL_EventState(SDL_MOUSEBUTTONDOWN, state);
    SDL_EventState(SDL_MOUSEBUTTONUP, state);
}

[Ghabry]

The fix for this is already merged.

When you use a custom shell file do not forget to update it