have a roster and a whoami

priv/static/js/ts/webrtc.ts

@@ -10,6 +10,14 @@
  * @module
  */
 
+type state =
+    {whoami: string,
+     roster: Array<string>};
+
+let st: state =
+    {whoami: "",
+     roster: []};
+
 main();
 
 async function
@@ -26,6 +34,7 @@ main
     init_join.addEventListener('click',
         function() {
             init.hidden = true;
+            document.getElementById('run')!.hidden = false;
             ws = new WebSocket('/ws/webrtc');
             ws.onopen    = function(e) { console.log('ws open'); };
             ws.onclose   = function(e) { console.warn('ws closed'); };
@@ -40,8 +49,8 @@ main
     );
 }
 
-type ws_msg = ["join", string]
-            | ["down", string];
+type ws_msg = ["whoami", string]
+            | ["roster", Array<string>];
 
 function
 handle_ws_msg
@@ -49,6 +58,18 @@ handle_ws_msg
     : void
 {
     console.log('message from server:', message);
+    switch(message[0]) {
+        case "whoami":
+            st.whoami = message[1];
+            break;
+        case "roster":
+            st.roster = (message[1] as Array<string>);
+            break;
+        default:
+            console.warn("unknown message", message);
+    }
+
+    render_state();
 }
 
 
@@ -64,3 +85,24 @@ ws_send_json
 
     ws.send(s);
 }
+
+
+
+function
+render_state
+    ()
+    : void
+{
+    console.log('st', st);
+    // whoami
+    document.getElementById('whoami')!.innerText = st.whoami;
+    //
+    let roster_ul = document.getElementById('roster-ul') as HTMLUListElement;
+    let newChildren : Array<HTMLElement> = [];
+    for (let nick of st.roster) {
+        let li = document.createElement('li');
+        li.innerText = nick;
+        newChildren.push(li);
+    }
+    roster_ul.replaceChildren(...newChildren);
+}