JS modules

pkg/config/config.yaml

@@ -59,6 +59,7 @@ coordinator:
   # HTTP(S) server config
   server:
     address: :8000
+    cacheControl: "max-age=259200, must-revalidate"
     https: false
     # Letsencrypt or self cert config
     tls:

pkg/config/shared.go

@@ -30,9 +30,10 @@ type Monitoring struct {
 func (c *Monitoring) IsEnabled() bool { return c.MetricEnabled || c.ProfilingEnabled }
 
 type Server struct {
-	Address string
-	Https   bool
-	Tls     struct {
+	Address      string
+	CacheControl string
+	Https        bool
+	Tls          struct {
 		Address   string
 		Domain    string
 		HttpsKey  string

pkg/coordinator/coordinator.go

@@ -92,6 +92,9 @@ func index(conf config.CoordinatorConfig, log *logger.Logger) httpx.Handler {
 	if conf.Coordinator.Debug {
 		log.Info().Msgf("Using auto-reloading index.html")
 		return httpx.HandlerFunc(func(w httpx.ResponseWriter, r *httpx.Request) {
+			if conf.Coordinator.Server.CacheControl != "" {
+				w.Header().Add("Cache-Control", conf.Coordinator.Server.CacheControl)
+			}
 			if r.URL.Path == "/" || strings.HasSuffix(r.URL.Path, "/index.html") {
 				tpl := template.Must(template.ParseFiles(indexHTML))
 				handler(tpl, w, r)
@@ -102,6 +105,9 @@ func index(conf config.CoordinatorConfig, log *logger.Logger) httpx.Handler {
 	}
 
 	return httpx.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
+		if conf.Coordinator.Server.CacheControl != "" {
+			w.Header().Add("Cache-Control", conf.Coordinator.Server.CacheControl)
+		}
 		if r.URL.Path == "/" || strings.HasSuffix(r.URL.Path, "/index.html") {
 			handler(indexTpl, w, r)
 			return

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>
@@ -24,10 +24,10 @@
     <div class="app-button" id="w" title="Workers">W</div>
 
     <div id="circle-pad-holder">
-        <div id="btn-up" class="dpad" value="up"></div>
-        <div id="btn-down" class="dpad" value="down"></div>
-        <div id="btn-left" class="dpad" value="left"></div>
-        <div id="btn-right" class="dpad" value="right"></div>
+        <div id="btn-up" class="dpad" data-key="up"></div>
+        <div id="btn-down" class="dpad" data-key="down"></div>
+        <div id="btn-left" class="dpad" data-key="left"></div>
+        <div id="btn-right" class="dpad" data-key="right"></div>
         <div id="circle-pad"></div>
     </div>
 
@@ -49,33 +49,34 @@
     <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="btn-join" class="btn big" data-key="join"></div>
     <div id="slider-playeridx" class="slidecontainer">
         <span>player choice</span>
-        <input type="range" min="1" max="4" value="1" class="slider" id="playeridx" onkeydown="event.preventDefault()">
+        <input type="range" aria-label="" min="1" max="4" value="1" class="slider" id="playeridx">
     </div>
-    <div id="btn-quit" class="btn big" value="quit"></div>
+    <div id="btn-quit" class="btn big" data-key="quit"></div>
 
     <div id="controls-right">
-        <div id="btn-load" class="btn big hidden" value="load"></div>
-        <div id="btn-save" class="btn big hidden" value="save"></div>
-        <div id="btn-select" class="btn big" value="select"></div>
-        <div id="btn-start" class="btn big" value="start"></div>
+        <div id="btn-load" class="btn big hidden" data-key="load"></div>
+        <div id="btn-save" class="btn big hidden" data-key="save"></div>
+        <div id="btn-select" class="btn big" data-key="select"></div>
+        <div id="btn-start" class="btn big" data-key="start"></div>
 
         <div id="color-button-holder">
-            <div id="btn-a" class="btn" value="a"></div>
-            <div id="btn-b" class="btn" value="b"></div>
-            <div id="btn-x" class="btn" value="x"></div>
-            <div id="btn-y" class="btn" value="y"></div>
+            <div id="btn-a" class="btn" data-key="a"></div>
+            <div id="btn-b" class="btn" data-key="b"></div>
+            <div id="btn-x" class="btn" data-key="x"></div>
+            <div id="btn-y" class="btn" data-key="y"></div>
         </div>
     </div>
 
-    <div id="btn-settings" class="btn" value="settings"></div>
+    <div id="btn-settings" class="btn" data-key="settings"></div>
 
-    <!-- TODO: remove -->
-    <input id="room-txt" type="text" placeholder="room id..." disabled>
+    <input id="room-txt" type="text" aria-label="" placeholder="room id..." disabled>
 
     <label class="dpad-toggle-label" title="D-pad toggle">
         <input type="checkbox" id="dpad-toggle" checked>
@@ -88,11 +89,11 @@
         <div id="help-overlay-background"></div>
         <div id="help-overlay-detail"></div>
     </div>
-    <div id="btn-help" class="btn" value="help"></div>
+    <div id="btn-help" class="btn" data-key="help"></div>
     {{if .Recording.Enabled}}
     <input id="user-name" type="text" data-lpignore="true" spellcheck="false" placeholder="user"
-           class="record-user">
-    <div id="btn-rec" class="btn" value="rec"></div>
+           class="record-user" aria-label="">
+    <div id="btn-rec" class="btn" data-key="rec"></div>
     {{end}}
 </div>
 <div class="source">
@@ -102,32 +103,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))