Skip to content

Minigolf Web

Jump to bottom
Philipp van Kempen edited this page Mar 8, 2021 · 4 revisions

Java Applets are deprecated since 2017 and support was dropped from every major web browser years ago. Therefore it is impossible to run the Minigolf Client as an Applet like on Playforia/Appeli in the past.

Because I received requests for adding Browser-Support to the Minigolf Client regularly, I sat down and looked into some ways to port the application to the Web.

Here is a list of my ideas:

  • Re-implementation of the whole game with HTML5+JS with some browser game engine
    • Most time consuming approach
    • Would introduce performance improvements and fix major issues like GUI-scaling in the original game
    • Would possibly feels a lot different compared to the original game
    • Mobile support possible?
    • Not feasible right now!
  • Use an Java-Applet-to-JavaScript/WebAssembly converter
    • Available tools: Emscripten, CheerpJ
    • Performance impact likely
    • Should preferably work without Browser Addons

Due to the aforementioned reasons the seconds approach is more realistic at the moment. The project is Work-in-Progress, but feedback is welcome!

Proof of Concept

Demo

The Client is currently hosted via GitHub Pages which is served by the cheerpj_pages branch. This branch however is deployed via GitHub Actions automatically when new commits are pushed to the cherrpj branch. It may happen that this Branch is outdated compared to the master branch!

Here are 2 screenshots of the current state of the WebApp:

TODO

Development

Compared to the default Minigolf Client, the following changes had to be applied in order to be able to use the CheerpJ-Suite:

  • Add another manifest file for Maven targeting the Applet instead of the JFrame application
  • Remove the Launcher from the Java-Program and replace it with some HTML5-form.
  • Because Browsers can only communicate via WebSockets and HTTP(S)-Requests, Javas native TCP-Socket implementation had to be replaced by a JavaScript wrapper which internally uses the WebSockets API
  • Add some scripts to make the build workflow easier
  • Automate deployment via GitHub Actions
  • Use an relay (websockify) to route incoming WebSocket messages to the TCP port 4242 on the server-side

For more details compare the cheerpj branch with the master branch.

Debugging

Instead having a look at the stdout/stderr output in your terminal, you will need to open the JavaScript-Console via the Developer Tools in your Webbrowser instead.

Deployment

See GitHub-Actions script here: https://github.com/PhilippvK/playforia-minigolf/blob/cheerpj/.github/workflows/applet.yml

It uses a simple shell script client/deploy.sh which may need some minor changes if you want to use it on a different machine.

Further Documentations

See https://github.com/leaningtech/cheerpj-meta. Especially the Wiki is very useful!

Hosting

First, follow the main Server-Hosting guide. Once you have a server set up, follow the following steps:

  • Install via Python-PIP or your distributions package manager: See https://github.com/novnc/websockify
  • Start the Minigolf server on port 4242 as usual
  • Start the relay vey executing websockify 80 :4242 (On some systems your might need to add a sudo-prefix to the command)
  • Make sure to keep the Terminal with this command running in background
  • Tell user to connect with the Server by entering your IP/Domain on https://philippvk.github.io/playforia-minigolf/

Notice: It should still be possible for players to connect to the server via the default TCP-Protocol running over port 4242.

ℹ️ The extra-step using the TCP-Relay will not be required anymore once the Client/Server-Protocol as updated to use Netty-Websockets instead of plain TCP. Follow Issue #70 for more details.

Clone this wiki locally