Create a web app version using love.js and GitHub Pages

[FormularSumo]

https://github.com/FormularSumo/Star-Wars-Galaxy-Collection-Web

Partially fixes #31, allowing the game to be run on iOS as a web app. Also adds support for macOS (which I don't currently build for) and any platforms not supported by Love2D, and is generally an easier way to play the game than downloading and installing it.

https://github.com/Davidobot/love.js https://pages.github.com/ https://css-tricks.com/how-to-install-npm-packages/

Current to-do

• [ ] Fix resizing (if necessary it could help to lock to landscape/one size.. though wouldn't be ideal) - maybe through resizing the canvas more often in index/in a JS function?
• [ ] Fix resolution on mobile (canvas size?)
• [ ] Fix touch targets when in fullscreen (both touch and click, only happens sometimes)
• [ ] Try implementing video workaround
• [ ] Ensure app is updated correctly when cached as PWA, and then enable offline functionality by always caching
• [ ] Fix Desktop web app using monochrome logo?
• [ ] Pause on loose focus toggle should be removed iOS as well.. and fixed on Android
• [ ] Remove fullscreen button in Chromium browsers when installed as a PWA (at least on Android)
• [ ] Ensure fullscreen button is removed on all iOS browsers (Firefox currently shows
• [ ] Fix button snapping (keyboard/controller) not working
• [ ] Background blurring seems quite broken (try a different algorithm?)
• [ ] Fix mouse scrolling on Linux

Unsolvable issues, in order of important

• Local storage does not seem to be working in some situations (mostly on mobile), as outlined here
• Graphics performance on iOS (unsure about Safari desktop) is awful - about 41x worse than Firefox/Chrome on Android, or ~164x worse than running natively. It's only about playable on high-end devices unfortunately.
• Graphics performance on non-iOS platforms seems to be between 1/4 and 4/5 of the native app. For most users this shouldn't matter, as the game is very easy to run, but those on lower-end hardware might notice an improvement in the native app. CPU usage, memory usage and load times are a little higher as well but not by as much. The game is pretty light on CPU and memory anyway so shouldn't make much difference (much more likely to be GPU bottlenecked). I don't think there's really anything I can do about this, it's just dependent on Love.js and your browser/OS.
• iOS can't go fullscreen unless installed as web app, because Safari doesn't support it, and other browser engines are not currently allowed/available
• Threads don't seem to work on Love.js, so instead loading images on the mainthead - minor CPU performance impact.

[FormularSumo]

cd C:\Program Files\nodejs\node_modules\love.js npx love.js.cmd -m 150000000 -t "Galaxy Collection" C:\Users\chewy\Documents\SWGC\love-android\app\src\main\assets\game.love "C:\Users\chewy\Documents\SWGC\Galaxy Collection website" -c

cd C:\Users\chewy\Documents\SWGC\Star-Wars-Galaxy-Collection-Web python -m http.server 8000 localhost:8000 ctrl + c to stop Running as a local server fixed the a/sync wasm issues, but now I get this issue

[FormularSumo]

I switched from using bitser to binser so that FFI is not needed, and also removed the FFI-dependent but unneeded on the web ANGLE code. The game runs well, with the major exception that it crashes when trying to load battles. Turning videos on also crashes.

For game loading crash: Firefox console:

Chromium (Chrome/Edge) console:

[FormularSumo]

https://github.com/Davidobot/love.js/issues/7 using love.audio.stop on only a single source resolves the issue

[FormularSumo]

https://github.com/Davidobot/love.js/issues/69

[FormularSumo]

Website now hosted on https://github.com/FormularSumo/Star-Wars-Galaxy-Collection-Web. The only existing issue from the point of the source code (aside from things outside of my control such as videos not working) is character duplication in deck editor which doesn't happen in native app, and the escape key being binded to exit fullscreen as well as back.

[FormularSumo]

Character duplication occurs whenever sortdeck() is called I believe

[FormularSumo]

Character duplication fixed

[FormularSumo]

It might now be possible to get video working using a workaround discussed here https://github.com/FormularSumo/Star-Wars-Galaxy-Collection/issues/72#issuecomment-1266138951

[FormularSumo]

Another important thing is to get it working as a PWA. This is currently working fine on Firefox. It doesn't work on Chromium or Safari/iOS. Install prompts would be good. Screenshots too.

[FormularSumo]

PWA is now working on (iOS) Safari and partially working on Chromium. On Chromium it's still just saying add to home screen not install, I think adding a screenshot might fix this? Additionally on Chromium and Firefox on Android the logo has an extra white box around it which is not supposed to be the case.

[FormularSumo]

Install still not working on Chromium, maybe service workers are still needed?

[FormularSumo]

Turns out it just wasn't finding the files. Installs is now working in Chromium, with screenshots and browser prompts. The logo is now correct on Chromium and Firefox too

[FormularSumo]

It would be good to get the app working offline using a service worked. The app resolution and screen filling also still need fixing on mobile... Also the fullscreen button is not needed on Android when installed as a PWA on Chromium (is on Firefox), and doesn't do anything on iOS

[FormularSumo]

Changing the scope now enables it to work offline, the service workers correctly update. I'm not sure what happens if there is an update to what's hosted on the server now

[FormularSumo]

I attempted to fix resizing using https://github.com/MrcSnm/Love.js-Api-Player) but turns out console wrapping is disabled by github pages so that doesn't work.

[FormularSumo]

Testing results:

• In order to change the actual canvas size, rather than the css size (which just stretches it), you need to use the canvas height and width property, which is not in style but a separate tag.
• screen.orientation.addEventListener("changed") is called just before a screen has rotated not afterwards, so accessing window.innerWidth for example gets the wrong value
• Changing the canvas size using window.addEventListener("resize") works, but changing the canvas does not always cause love2d to correctly resize.
• When I print the size in love2d, it does not change resolution on desktop until the program has entered and left fullscreen, then resizing does change the resolution. Chrome and Firefox have slightly different beheavior around entering and exiting fullscreen but it's a minor difference.
• Meanwhile on mobile Chrome and Firefox are the same, both also only resize after fullscreen has been toggled, with identical behavior. However when they are fullscreen, rotating does not cause them to resize properly. On Safari mobile though resizing and re-orientaing actually works fine always (there's no fullscreen toggle as this isn't supported on Safari). This was all tested both in browser and in web apps

[FormularSumo]

I've been trying to get threads working on the web version since #81, however I've been unable to make it work so far.

I've switched to compiling in non-compatibility mode and included love.worker.js. I've yet to get the "Uncaught ReferenceError: SharedArrayBuffer is not defined" error, but to be thorough I also tried using a script (from this issue to add the correct cross-origin headers, as Github pages doesn't support this, but without any effect. I've also done all my testing with the game and the Love wiki thread example. My testing has been in localhost anyway, which I think should support the headers, at least with the extension I've temporarily installed to always enable.

Also strange is the Love.js compatibility example does not work with threads despite saying it should, and the non-compatibility one won't run whatever I do (extension, firefox/chrome, whatever). So I think I'm going to have to conclude that threads are currently broken in Love.js and easiest thing is if I just rewrite it to be like it was previously, doing image decoding on the main thread :/

I should test on Github pages as well just to double check, and also check if non-compatibility mode works there on all browsers - if so would presumably be better than compatibility mode ("dody audio")

[FormularSumo]

Initial test of non-compatibility mode: works fine in Firefox and Chrome, not Safari (who would have guessed). Testing now with cross-origin script

[FormularSumo]

With cross-origin headers in theory set and worker.js it now runs on Safari, but audio is completely broken

[FormularSumo]

Testing multi-threading version on Github pages, threads still don't do anything like in localhost on any browser. And audio is still broken on iOS. So unfortunately will have to go back to non-compatibility I think, and remove multithreading from web version.

[FormularSumo]

For good measure have tried threads on non-compatibilty mode github pages, with love.worker installed, but still doesn't work.

[FormularSumo]

https://github.com/FormularSumo/Star-Wars-Galaxy-Collection/commit/70680dbeccdd5cea24ca0378696e92076099c135 and https://github.com/FormularSumo/Star-Wars-Galaxy-Collection-Web/commit/359f44cd106c73ddcbc9a57e6fe603b502073579 mean that data is now saved permanently on the user's browser, for whenever they next load the website/web app. If the device is running very low on storage, or if Safari feels like it, data could be cleared if it's among the least recently used websites. This only happens if Chromium-based browses/Safari choose not to grant persistent storage, or a user denies the permission prompt in Firefox.

[FormularSumo]

Testing out indexedDB data storage - persistent storage prompt off or on

Desktop (Linux/Windows)

Chrome/Firefox

Data saves perfectly, whether reloading the page, browser, or web app

Gnome Web (tracking protection on/off)

Does persists when reloading. But when restarting the browser, only uses data from last time you reloaded. Which can mean old data is used on no data, it's bizarre. Can't get web apps working "You are not authorised to execute this file"...

Android

Chrome/Firefox

Same as Gnome Web desktop, and web apps are affected in the same way (regardless of whether browser/tab is open)

ChromeOS

Same as above. Note: seems like only Chrome can install web apps, so unsure about them in other browsers

iOS

Data does not persist ever, regardless of browser, tracking protection, in-browser vs web app, reloading.......