Added connection strength indicator to chat.

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;

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;
+}

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"
 }

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);
     });
 
 

src/mami.js/settings/settings.js

@@ -1,4 +1,3 @@
-#include uniqstr.js
 #include watcher.js
 #include settings/scoped.js
 #include settings/virtual.js

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);
 

src/mami.js/ui/ping.jsx

@@ -0,0 +1,37 @@
+const MamiPingIndicator = function(initialStrength) {
+    const bars = [];
+    const html = <div class="ping">
+        <div class="ping-colour ping-colour-top"/>
+        <div class="ping-colour ping-colour-bottom"/>
+        <div class="ping-background"/>
+        <div class="ping-antenna"/>
+        <div class="ping-antenna-dot"/>
+        <div class="ping-antenna-over ping-antenna-left"/>
+        <div class="ping-antenna-over ping-antenna-right"/>
+    </div>;
+
+    for(let i = 1; i <= 3; ++i)
+        bars.push(html.appendChild(<div class={`ping-bar ping-bar-${i}`}/>));
+
+    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,
+    };
+};

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) {
+            if(ids.includes(baseId))
-                ids.push(baseId);
+                return;
 
-                const toggle = $e({
+            ids.push(baseId);
-                    attrs: {
-                        id: 'umi-toggles-' + baseId,
-                        classList: ['sidebar__selector-mode', 'sidebar__selector-mode--' + baseId],
-                        title: title,
-                    },
-                });
 
+            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');
+            const toggles = $i('umi-toggles');
-                toggles.insertBefore(toggle, toggles.firstChild);
+            toggles.insertBefore(toggle, toggles.firstChild);
-            }
+
+            // hack cuz i'm lazy
+            if(baseId === 'ping')
+                return toggle;
         },
         Get: function(baseId, icon) {
             const id = 'umi-toggles-' + baseId;