Add presence tracking for selector and navigator roles

Author: Max Carlson

WebSites/spacetime/index.html

@@ -6,22 +6,29 @@
     <title>Spacecraft in Unity</title>
     <link rel="icon" href="https://brand.publiccode.net/logo/mark-128w128h.png">
     <script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js"></script>
     <script src="qrcode.min.js"></script>
     <script>
       const qrcodeDefaults = {dim: 100, pad: 1, pal: ['#000','#fff']}
-      const getQrcodeLink = (url) => {
+      const getQrcodeLink = (url, id) => {
         const el = document.createElement('a');
         el.href = url;
         el.target = "_new";
         el.className = "qrcode";
+        el.id = id;
         // pass {msg: 'http://...'} and/or overrides for qrcodeDefaults
         const svg = QRCode( {...qrcodeDefaults, msg: url})
         el.appendChild(svg);
+        const label = document.createElement('div');
+        label.innerText = id;
+        label.className = 'label';
+        el.appendChild(label);
         return el;
       }
     </script>
     <style>
       body {
+        font-family: "Mulish", Helvetica;
         text-align: right;
         padding: 0;
         border: 0;
@@ -37,6 +44,13 @@
         width: 100px;
         height: 100px;
         padding: 10px;
+        opacity: .60;
+        transition: opacity 1s;
+      }
+      .label {
+        color: white;
+        margin-top: 0;
+        margin-bottom: 50px;
       }
     </style>
   </head>
@@ -60,20 +74,27 @@
 
       // handlers to send events into Unity
       function handlePos(payload) {
-        console.log('handlePos', payload)
+        console.debug('handlePos', payload)
       }
 
       function handleZoom(zoom) {
-        console.log('handleZoom', zoom)
+        console.debug('handleZoom', zoom)
+      }
+
+      function handlePresence(id, payload) {
+        const el = document.getElementById(id);
+        console.debug('handlePresence', id, payload, el)
+        userCount = Object.keys(payload).length
+        el.style.opacity = userCount ? 1 : '';
       }
 
       function handleSelectPos(payload) {
-        console.log('handleSelectPos', payload)
+        console.debug('handleSelectPos', payload)
       }
 
       // handlers to send events into Unity
       function handleSelectZoom(payload) {
-        console.log('handleSelectZoom', payload)
+        console.debug('handleSelectZoom', payload)
       }
 
       // Subscribe to the navigatorChannel
@@ -94,12 +115,16 @@
           { event: 'zoom' },
           (data) => handleZoom(data.payload.zoom)
         )
+        .on('presence', { event: 'sync' }, () => {
+          const newState = navigatorChannel.presenceState()
+          handlePresence('navigator', newState)
+        })
 
       const selectorChannel = client.channel("selectors")
       // Subscribe to the selectorChannel
       selectorChannel
         .subscribe((status) => {
-          console.log('subscribe', status)
+          console.debug('subscribe', status)
           if (status === 'SUBSCRIBED') {
             subscribed = true;
           }
@@ -114,6 +139,10 @@
           { event: 'zoom' },
           (data) => handleSelectZoom(data.payload.zoom)
         )
+        .on('presence', { event: 'sync' }, () => {
+          const newState = selectorChannel.presenceState()
+          handlePresence('selector', newState)
+        })
     </script>
     <canvas id="unity-canvas" width=960 height=600 tabindex="-1" style="width: 100%; height: 100%; position: fixed; top: 0; left: 0; background: #1F1F20"></canvas>
     <script src="Build/CraftSpace.loader.js"></script>
@@ -148,8 +177,8 @@
     </script>
     <script>
       // add navigator and selector qr codes
-      document.body.appendChild( getQrcodeLink( window.location + 'navigator.html') );
-      document.body.appendChild( getQrcodeLink( window.location + 'selector.html') );
+      document.body.appendChild( getQrcodeLink( window.location + 'navigator.html', 'navigator') );
+      document.body.appendChild( getQrcodeLink( window.location + 'selector.html', 'selector') );
     </script>
   </body>
 </html>

WebSites/spacetime/navigator.html

@@ -41,10 +41,24 @@
 
         const channel = client.channel("navigators")
 
+        var isMobile = navigator.userAgent.toLowerCase().match(/mobile/i),
+            isTablet = navigator.userAgent.toLowerCase().match(/tablet/i),
+            isAndroid = navigator.userAgent.toLowerCase().match(/android/i),
+            isiPhone = navigator.userAgent.toLowerCase().match(/iphone/i),
+            isiPad = navigator.userAgent.toLowerCase().match(/ipad/i);
+
+        let user = isAndroid ? 'Android' : isiPhone ? 'iPhone' : isAndroid ? 'Android' : isTablet ? 'Tablet' : isMobile ? 'Mobile' : 'Computer';
+
+        let userStatus = {
+          user,
+          online_at: new Date().toISOString()
+        };
+
         let subscribed = false;
         channel.subscribe((status) => {
           console.log('subscribe', status)
           if (status === 'SUBSCRIBED') {
+            channel.track(userStatus);
             const el = document.getElementById("label");
             el.style.opacity = '';
             subscribed = true;

WebSites/spacetime/selector.html

@@ -41,10 +41,24 @@
 
         const channel = client.channel("selectors")
 
+        var isMobile = navigator.userAgent.toLowerCase().match(/mobile/i),
+            isTablet = navigator.userAgent.toLowerCase().match(/tablet/i),
+            isAndroid = navigator.userAgent.toLowerCase().match(/android/i),
+            isiPhone = navigator.userAgent.toLowerCase().match(/iphone/i),
+            isiPad = navigator.userAgent.toLowerCase().match(/ipad/i);
+
+        let user = isAndroid ? 'Android' : isiPhone ? 'iPhone' : isAndroid ? 'Android' : isTablet ? 'Tablet' : isMobile ? 'Mobile' : 'Computer'
+
+        let userStatus = {
+          user,
+          online_at: new Date().toISOString()
+        };
+
         let subscribed = false;
         channel.subscribe((status) => {
           console.log('subscribe', status)
           if (status === 'SUBSCRIBED') {
+            channel.track(userStatus);
             const el = document.getElementById("label");
             el.style.opacity = '';
             subscribed = true;