Migrate from IIFE to modern ES modules

These modules should be supported by all contemporary browsers, and this transition should resolve most issues related to the explicit import order of the .js files.

web/index.html

@@ -15,7 +15,7 @@
 
     <link rel="icon" href="data:,">
 
-    <link href="css/main.css?v=6" rel="stylesheet">
+    <link href="css/main.css?v=3" rel="stylesheet">
     <link href="css/ui.css?v=3" rel="stylesheet">
     <title>Cloud Retro</title>
 </head>
@@ -49,7 +49,9 @@
     <div id="settings"></div>
 
     <div id="guide-txt">
-        <b>Arrows</b> (move), <b>ZXCVAS;'./</b> (game ABXYL1-L3R1-R3), <b>1/2</b> (1st/2nd player), <b>Shift/Enter/K/L</b> (select/start/save/load), <b>F</b> (fullscreen), <b>share</b> (copy the link to the clipboard)
+        <b>Arrows</b> (move), <b>ZXCVAS;'./</b> (game ABXYL1-L3R1-R3), <b>1/2</b> (1st/2nd player),
+        <b>Shift/Enter/K/L</b> (select/start/save/load), <b>F</b> (fullscreen), <b>share</b> (copy the link to the
+        clipboard)
     </div>
     <div id="btn-join" class="btn big" value="join"></div>
     <div id="slider-playeridx" class="slidecontainer">
@@ -102,32 +104,23 @@
     </a>
 </div>
 
-<script src="js/gui/gui.js?v=3"></script>
-<script src="js/utils.js?v1"></script>
-<script src="js/gui/message.js?v=4"></script>
-<script src="js/log.js?v=5"></script>
-<script src="js/event/event.js?v=6"></script>
-<script src="js/input/keys.js?v=3"></script>
-<script src="js/settings/opts.js?v=3"></script>
-<script src="js/settings/settings.js?v=8"></script>
-<script src="js/env.js?v=6"></script>
-<script src="js/input/input.js?v=3"></script>
-<script src="js/gameList.js?v=5"></script>
-<script src="js/stream/stream.js?v=8"></script>
-<script src="js/room.js?v=3"></script>
-<script src="js/network/ajax.js?v=3"></script>
-<script src="js/network/socket.js?v=4"></script>
-<script src="js/network/webrtc.js?v=4"></script>
-<script src="js/recording.js?v=1"></script>
-<script src="js/api/api.js?v=3"></script>
-<script src="js/workerManager.js?v=1"></script>
-<script src="js/stats/stats.js?v=1"></script>
-<script src="js/controller.js?v=13"></script>
-<script src="js/input/keyboard.js?v=6"></script>
-<script src="js/input/touch.js?v=3"></script>
-<script src="js/input/joystick.js?v=3"></script>
-
-<script src="js/init.js?v=5"></script>
+<script type="importmap">
+    {
+      "imports": {
+        "api": "./js/api.js?v=3",
+        "env": "./js/env.js?v=3",
+        "event": "./js/event.js?v=3",
+        "gui": "./js/gui.js?v=3",
+        "input": "./js/input/input.js?v=3",
+        "log": "./js/log.js?v=3",
+        "network": "./js/network/network.js?v=3",
+        "settings": "./js/settings.js?v=3",
+        "utils": "./js/utils.js?v=3"
+      }
+    }
+</script>
+
+<script type="module" src="js/app.js?v=3"></script>
 
 {{if .Analytics.Inject}}
 <script async src="https://www.googletagmanager.com/gtag/js?id={{.Analytics.Gtag}}"></script>

web/js/api.js

@@ -0,0 +1,70 @@
+import {log} from 'log';
+
+const endpoints = {
+    LATENCY_CHECK: 3,
+    INIT: 4,
+    INIT_WEBRTC: 100,
+    OFFER: 101,
+    ANSWER: 102,
+    ICE_CANDIDATE: 103,
+    GAME_START: 104,
+    GAME_QUIT: 105,
+    GAME_SAVE: 106,
+    GAME_LOAD: 107,
+    GAME_SET_PLAYER_INDEX: 108,
+    GAME_RECORDING: 110,
+    GET_WORKER_LIST: 111,
+    GAME_ERROR_NO_FREE_SLOTS: 112,
+
+    APP_VIDEO_CHANGE: 150,
+}
+
+/**
+ * Server API.
+ *
+ * Requires the actual api.transport implementation.
+ */
+export const api = {
+    set transport(t) {
+        transport = t;
+    },
+    endpoint: endpoints,
+    decode: (b) => JSON.parse(decodeBytes(b)),
+    server: {
+        initWebrtc: () => packet(endpoints.INIT_WEBRTC),
+        sendIceCandidate: (candidate) => packet(endpoints.ICE_CANDIDATE, btoa(JSON.stringify(candidate))),
+        sendSdp: (sdp) => packet(endpoints.ANSWER, btoa(JSON.stringify(sdp))),
+        latencyCheck: (id, list) => packet(endpoints.LATENCY_CHECK, list, id),
+        getWorkerList: () => packet(endpoints.GET_WORKER_LIST),
+    },
+    game: {
+        load: () => packet(endpoints.GAME_LOAD),
+        save: () => packet(endpoints.GAME_SAVE),
+        setPlayerIndex: (i) => packet(endpoints.GAME_SET_PLAYER_INDEX, i),
+        start: (game, roomId, record, recordUser, player) => packet(endpoints.GAME_START, {
+            game_name: game,
+            room_id: roomId,
+            player_index: player,
+            record: record,
+            record_user: recordUser,
+        }),
+        toggleRecording: (active = false, userName = '') =>
+            packet(endpoints.GAME_RECORDING, {active: active, user: userName}),
+        quit: (roomId) => packet(endpoints.GAME_QUIT, {room_id: roomId}),
+    }
+}
+
+let transport = {
+    send: (packet) => {
+        log.warn('Default transport is used! Change it with the api.transport variable.', packet)
+    }
+}
+
+const packet = (type, payload, id) => {
+    const packet = {t: type};
+    if (id !== undefined) packet.id = id;
+    if (payload !== undefined) packet.p = payload;
+    transport.send(packet);
+}
+
+const decodeBytes = (b) => String.fromCharCode.apply(null, new Uint8Array(b))