diff --git a/web/css/main.css b/web/css/main.css index 545c19ba9..b73ccd2ec 100644 --- 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 index 758d2108c..d3e43a899 100644 --- 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 index a69428baa..ca6a05094 100644 --- 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 index bca0332fc..25057124e 100644 --- a/web/js/stats.js +++ b/web/js/stats.js @@ -113,11 +113,12 @@ const graph = (parent, opts = { *
LABEL
VALUE[]
* * @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(); },