Update UI

giongto35 · Apr 26, 2024 · 225c5a3 · 225c5a3
1 parent a209ac4
commit 225c5a3
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 10 deletions.
diff --git a/web/css/main.css b/web/css/main.css
@@ -647,7 +647,7 @@ body {
     background: #000;
     opacity: .465;
 
-    font-size: 1.5vmin;
+    font-size: 1.1vmin;
     font-family: monospace;
     min-width: 3em;
 

diff --git a/web/js/app.js b/web/js/app.js
@@ -169,8 +169,6 @@ const startGame = () => {
 
     setState(app.state.game);
 
-    screen.toggle(stream)
-
     api.game.start(
         gameList.selected,
         room.id,
@@ -470,7 +468,10 @@ document.onfullscreenchange = () => pub(FULLSCREEN_CHANGE, document.fullscreenEl
 // subscriptions
 sub(MESSAGE, onMessage);
 
-sub(GAME_ROOM_AVAILABLE, stream.play, 2)
+sub(GAME_ROOM_AVAILABLE, () => {
+    screen.toggle(stream)
+    stream.play()
+}, 2)
 sub(GAME_SAVED, () => message.show('Saved'));
 sub(GAME_PLAYER_IDX, data => {
     updatePlayerIndex(+data.index, state !== app.state.game);
@@ -552,11 +553,20 @@ let WEBRTC_STATS_RTT;
 
 stats.modules = [
     {
-        mui: stats.mui(),
+        mui: stats.mui('', '<0'),
         init() {
             WEBRTC_STATS_RTT = (v) => (this.val = v)
         },
     },
+    {
+        mui: stats.mui('', '', false, () => ''),
+        init() {
+            sub(APP_VIDEO_CHANGED, (payload) => {
+                const {w, h, a, s} = payload
+                this.val = `${w}x${h}`
+            })
+        },
+    },
     {
         async stats() {
             const stats = await webrtc.stats();

diff --git a/web/js/settings.js b/web/js/settings.js
@@ -522,8 +522,8 @@ const render = function () {
                     .build()
                 break;
             case opts.SHOW_PING:
-                _option(data).withName('Show ping')
-                    .withDescription('Always display ping info on the screen')
+                _option(data).withName('Show server stats')
+                    .withDescription('Always display server stats on the screen')
                     .add(gui.checkbox(k, onChange, value, 'Enabled', 'settings__option-checkbox'))
                     .build()
                 break;

diff --git a/web/js/stats.js b/web/js/stats.js
@@ -113,11 +113,12 @@ const graph = (parent, opts = {
  * <div><div>LABEL</div><span>VALUE</span>[<span><canvas/><span>]</div>
  *
  * @param label The name of the stat to show.
+ * @param nan A value to show when zero.
  * @param withGraph True if to draw a graph.
  * @param postfix Supposed to be the name of the stat passed as a function.
  * @returns {{el: HTMLDivElement, update: function}}
  */
-const moduleUi = (label = '', withGraph = false, postfix = () => 'ms') => {
+const moduleUi = (label = '', nan = '', withGraph = false, postfix = () => 'ms') => {
     const ui = document.createElement('div'),
         _label = document.createElement('div'),
         _value = document.createElement('span');
@@ -139,7 +140,7 @@ const moduleUi = (label = '', withGraph = false, postfix = () => 'ms') => {
     const update = (value) => {
         if (_graph) _graph.add(value);
         // 203 (333) ms
-        _value.textContent = `${value < 1 ? '<1' : value}${_graph ? `(${_graph.max()}) ` : ''}${postfix_(value)}`;
+        _value.textContent = `${value < 1 ? nan : value}${_graph ? `(${_graph.max()}) ` : ''}${postfix_(value)}`;
     }
 
     const clear = () => {
@@ -157,7 +158,7 @@ const module = (mod) => {
         enable: () => ({}),
         ...mod,
         _disable: function () {
-            mod.val = 0;
+            // mod.val = 0;
             mod.disable && mod.disable();
             mod.mui && mod.mui.clear();
         },