listen for env and viewer stats messages

PWhiddy · Mar 25, 2024 · e384c36 · e384c36
1 parent 695529d
commit e384c36
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 7 deletions.
diff --git a/index.html b/index.html
@@ -68,6 +68,15 @@
             border-color: blue;
             outline: none;
         }
+
+        #statsDisplay {
+            position: absolute;
+            bottom: 10px;
+            right: 10px;
+            color: red;
+            font-family: 'Inter', sans-serif;
+            font-size: 18px;
+        }
     </style>
 </head>
 <body>
@@ -78,15 +87,22 @@
                    onkeydown="return event.keyCode != 13;">
         </div>
     </form>
+    <div id="statsDisplay" style="position: absolute; bottom: 1rem; right: 1rem; color: red;">
+        <div id="envsCount">0 Environments Streaming</div>
+        <div id="viewersCount">0 Viewers Connected</div>
+    </div>
     <script src="pixi.js"></script>
     <script src="visualizer_live.js"></script>
     <script>
         document.addEventListener('DOMContentLoaded', function() {
-            var form = document.getElementById('userForm');
-            form.style.display = 'none'; 
+            let form = document.getElementById("userForm");
+            let stats = document.getElementById("statsDisplay");
+            form.style.display = "none"; 
+            stats.style.display = "none";
             document.addEventListener('keydown', function(event) {
                 if ((event.key === 'f' || event.key === 'F') && document.activeElement.id !== 'fname') {
                     form.style.display = form.style.display === 'none' ? 'block' : 'none';
+                    statsDisplay.style.display = statsDisplay.style.display === 'none' ? 'block' : 'none';
                 }
             });
         });

diff --git a/visualizer_live.js b/visualizer_live.js
@@ -14,6 +14,7 @@ const app = new PIXI.Application({
 let socket = null;
 
 let lastFrameTime = Date.now();
+let curStats = {envs: 0, viewers: 0};
 
 let backgroundSharp = null;
 let backgroundSmooth = null;
@@ -244,11 +245,17 @@ PIXI.Assets.load([
         const ws = new WebSocket(url);
         ws.onmessage = function(event) {
             const data = JSON.parse(event.data); // Assuming the data is JSON-encoded
-            const path = data["coords"];
-            const meta = data["metadata"];
-            console.log(meta);
-            if (Date.now() - lastFrameTime < 2 * animationDuration) {
-                startAnimationForPath(path, meta);
+            if ("stats" in data) {
+                curStats = data["stats"];
+                document.getElementById('envsCount').innerText = `${curStats.envs} Environments Streaming`;
+                document.getElementById('viewersCount').innerText = `${curStats.viewers} Viewers Connected`;
+            } else {
+                const path = data["coords"];
+                const meta = data["metadata"];
+                console.log(meta);
+                if (Date.now() - lastFrameTime < 2 * animationDuration) {
+                    startAnimationForPath(path, meta);
+                }
             }
         };
         return ws;