From 20ea388c24bf5429f8208e7364d5bdb33d4b3885 Mon Sep 17 00:00:00 2001 From: flashwave Date: Thu, 29 Feb 2024 21:43:00 +0000 Subject: [PATCH] Added connection strength indicator to chat. --- src/mami.css/main.css | 1 + src/mami.css/ping.css | 82 ++++++++++++++++++++++++++++++++ src/mami.css/sidebar.css | 8 ++++ src/mami.js/main.js | 17 +++++++ src/mami.js/settings/settings.js | 1 - src/mami.js/themes.js | 2 + src/mami.js/ui/ping.jsx | 37 ++++++++++++++ src/mami.js/ui/toggles.js | 30 +++++++----- 8 files changed, 165 insertions(+), 13 deletions(-) create mode 100644 src/mami.css/ping.css create mode 100644 src/mami.js/ui/ping.jsx diff --git a/src/mami.css/main.css b/src/mami.css/main.css index 82fbac6..6207707 100644 --- a/src/mami.css/main.css +++ b/src/mami.css/main.css @@ -4,6 +4,7 @@ @include views.css; @include baka.css; +@include ping.css; @include chat.css; @include eeprom.css; @include emote.css; diff --git a/src/mami.css/ping.css b/src/mami.css/ping.css new file mode 100644 index 0000000..2b9dc26 --- /dev/null +++ b/src/mami.css/ping.css @@ -0,0 +1,82 @@ +.ping { + min-width: 16px; + min-height: 16px; + aspect-ratio: 1; + display: grid; + grid-template-columns: repeat(16, 1fr); + grid-template-rows: repeat(16, 1fr); + background: #000; +} +.scheme-dark .ping-state-good { --ping-colour: #39e700; } +.scheme-dark .ping-state-warn { --ping-colour: #ffbd00; } +.scheme-dark .ping-state-poor { --ping-colour: #f70029; } +.scheme-light .ping-state-good { --ping-colour: #39bd4a; } +.scheme-light .ping-state-warn { --ping-colour: #ffc600; } +.scheme-light .ping-state-poor { --ping-colour: #ff5a73; } + +.ping-background { + grid-row: 4 / span 10; + grid-column: 2 / span 14; +} +.scheme-dark .ping-background { background: #000; } +.scheme-light .ping-background { background: #fff; } + +.ping-colour { + background: var(--ping-colour, #00f); + grid-column: 2 / span 14; +} +.ping-colour-top { + grid-row: 2; +} +.ping-colour-bottom { + grid-row: 15; +} + +.ping-antenna { + grid-row: 5 / span 8; + grid-column: 3 / span 3; +} +.scheme-dark .ping-antenna { background: #b5b5b5; } +.scheme-light .ping-antenna { background: #000; } + +.ping-antenna-dot { + grid-row: 6; + grid-column: 4; +} +.scheme-dark .ping-antenna-dot { background: #000; } +.scheme-light .ping-antenna-dot { background: var(--ping-colour, #00f); } + +.ping-antenna-over { + grid-row: 8 / span 5; +} +.scheme-dark .ping-antenna-over { background: #000; } +.scheme-light .ping-antenna-over { background: #fff; } + +.ping-antenna-left { + grid-column: 3; +} +.ping-antenna-right { + grid-column: 5; +} + +.ping-bar { + grid-column-end: span 2; +} +.scheme-dark .ping-bar { background: #525252; } +.scheme-light .ping-bar { background: #efefef; } + +.scheme-dark .ping-bar-on { background: #fff; } +.scheme-light .ping-bar-on { background: #000; } + +.ping-bar-1 { + grid-row: 11 / span 2; + grid-column-start: 7; +} +.ping-bar-2 { + grid-row: 8 / span 5; + grid-column-start: 10; +} +.ping-bar-3 { + grid-row: 5 / span 8; + grid-column-start: 13; +} diff --git a/src/mami.css/sidebar.css b/src/mami.css/sidebar.css index 051f486..7f55f02 100644 --- a/src/mami.css/sidebar.css +++ b/src/mami.css/sidebar.css @@ -110,6 +110,14 @@ content: "\f2ed" }*/ +.sidebar__selector-mode--ping { + padding: 4px; +} +.sidebar__selector-mode--ping .ping { + width: 32px; + height: 32px; +} + .sidebar__selector-mode--menu-toggle-opened:before { content: "\f152" } diff --git a/src/mami.js/main.js b/src/mami.js/main.js index 8f2a77b..5ec1ef5 100644 --- a/src/mami.js/main.js +++ b/src/mami.js/main.js @@ -35,6 +35,7 @@ window.Umi = { UI: {}, Protocol: { SockChat: { Protocol: {} } } }; #include ui/menus.js #include ui/messages.jsx #include ui/view.js +#include ui/ping.jsx #include ui/settings.jsx #include ui/toggles.js #include ui/uploads.js @@ -414,6 +415,11 @@ window.Umi = { UI: {}, Protocol: { SockChat: { Protocol: {} } } }; } }, 'Clear Logs'); + const pingIndicator = new MamiPingIndicator; + const pingToggle = Umi.UI.Toggles.Add('ping', undefined, 'Ready!'); + pingToggle.appendChild(pingIndicator.getElement()); + console.log(pingIndicator); + if(eeprom !== undefined) { Umi.UI.Menus.Add('uploads', 'Upload History', !FUTAMI_DEBUG); @@ -607,9 +613,20 @@ window.Umi = { UI: {}, Protocol: { SockChat: { Protocol: {} } } }; }); Umi.Server.watch('ping:long', long => { if(dumpEvents) console.log('ping:long', long); + + pingToggle.title = 'Taking longer than 2 seconds'; + pingIndicator.setStrength(0); }); Umi.Server.watch('ping:recv', recv => { if(dumpEvents) console.log('ping:recv', recv); + + let strength = 3; + if(recv.diff > 45) --strength; + if(recv.diff > 30) --strength; + if(recv.diff > 15) --strength; + + pingToggle.title = `${recv.diff.toLocaleString()}ms`; + pingIndicator.setStrength(strength); }); diff --git a/src/mami.js/settings/settings.js b/src/mami.js/settings/settings.js index 31cc966..d368317 100644 --- a/src/mami.js/settings/settings.js +++ b/src/mami.js/settings/settings.js @@ -1,4 +1,3 @@ -#include uniqstr.js #include watcher.js #include settings/scoped.js #include settings/virtual.js diff --git a/src/mami.js/themes.js b/src/mami.js/themes.js index 05dcf5d..a987109 100644 --- a/src/mami.js/themes.js +++ b/src/mami.js/themes.js @@ -314,6 +314,8 @@ const UmiThemeApply = function(theme) { if(propName && propName.indexOf(varPfx) === 0) document.body.style.removeProperty(propName); + document.body.classList.toggle('scheme-dark', theme.scheme === 'dark'); + document.body.classList.toggle('scheme-light', theme.scheme === 'light'); if(typeof theme.scheme === 'string') document.body.style.setProperty(varPfx + 'scheme', theme.scheme); diff --git a/src/mami.js/ui/ping.jsx b/src/mami.js/ui/ping.jsx new file mode 100644 index 0000000..b7c6fca --- /dev/null +++ b/src/mami.js/ui/ping.jsx @@ -0,0 +1,37 @@ +const MamiPingIndicator = function(initialStrength) { + const bars = []; + const html =
+
+
+
+
+
+
+
+
; + + for(let i = 1; i <= 3; ++i) + bars.push(html.appendChild(
)); + + const setStrength = strength => { + if(typeof strength !== 'number') + throw 'strength must be a number'; + + for(const i in bars) + bars[i].classList.toggle('ping-bar-on', i < strength); + + html.classList.toggle('ping-state-good', strength > 1); + html.classList.toggle('ping-state-warn', strength === 1); + html.classList.toggle('ping-state-poor', strength < 1); + }; + + if(typeof initialStrength !== 'number') + initialStrength = bars.length; + + setStrength(initialStrength); + + return { + getElement: () => html, + setStrength: setStrength, + }; +}; diff --git a/src/mami.js/ui/toggles.js b/src/mami.js/ui/toggles.js index f879073..8b4865f 100644 --- a/src/mami.js/ui/toggles.js +++ b/src/mami.js/ui/toggles.js @@ -5,23 +5,29 @@ Umi.UI.Toggles = (function() { return { Add: function(baseId, eventHandlers, title) { - if(ids.indexOf(baseId) < 0) { - ids.push(baseId); + if(ids.includes(baseId)) + return; - const toggle = $e({ - attrs: { - id: 'umi-toggles-' + baseId, - classList: ['sidebar__selector-mode', 'sidebar__selector-mode--' + baseId], - title: title, - }, - }); + ids.push(baseId); + const toggle = $e({ + attrs: { + id: 'umi-toggles-' + baseId, + classList: ['sidebar__selector-mode', 'sidebar__selector-mode--' + baseId], + title: title, + }, + }); + + if(typeof eventHandlers === 'object' && eventHandlers !== null) for(const i in eventHandlers) toggle.addEventListener(i, eventHandlers[i]); - const toggles = $i('umi-toggles'); - toggles.insertBefore(toggle, toggles.firstChild); - } + const toggles = $i('umi-toggles'); + toggles.insertBefore(toggle, toggles.firstChild); + + // hack cuz i'm lazy + if(baseId === 'ping') + return toggle; }, Get: function(baseId, icon) { const id = 'umi-toggles-' + baseId;