1 files changed, 74 insertions, 23 deletions
diff --git a/client.html b/client.html
index db7a4d3..ed5f9d4 100644
--- a/client.html
+++ b/client.html
@@ -1,34 +1,63 @@
 <div class="container">
-    <div class="title">wsChat</div>
-    <div class="logs">
+    <div class="sidebar">
+        Channels
+        <ul id="channels"></ul>
     </div>
-    <div class="msg">
-        <form id="msg">
-            <input type="text" id="msg-content" autocomplete="off">
-            <input type="submit">
-        </form>
+    <div class="flex-col">
+        <div class="title">wsChat</div>
+        <div class="logs"></div>
+        <div class="msg">
+            <form id="msg">
+                <input type="text" id="msg-content" autocomplete="off" />
+                <input type="submit" />
+            </form>
+        </div>
     </div>
 </div>
 <script>
     const logs = document.querySelector(".logs");
     const msgForm = document.querySelector("#msg");
-    const server = prompt("Enter server URL", "ws://127.0.0.1:9933")
+    const server = prompt("Enter server URL", "ws://127.0.0.1:9933");
     const ws = new WebSocket(server); // CHANGE ME
-    ws.onopen = openEv => {
-        if(logs.innerText.length != 0) logs.innerText += "\n";
+    let gettingChannels = false;
+    let leavingAChannel = false;
+    ws.onopen = (openEv) => {
+        if (logs.innerText.length != 0) logs.innerText += "\n";
         logs.innerText += `Connected to wsChat server at ${ws.url}`;
         document.querySelector(".title").innerHTML += ` - ${new URL(ws.url).host}`;
-    }
-    ws.onmessage = msg => {;
+        gettingChannels = true;
+        ws.send(":jsonGet channels");
+    };
+    ws.onmessage = (msg) => {
         console.log(msg);
-        if(logs.innerText.length != 0) logs.innerText += "\n";
+        if (msg.data.startsWith(":json.channels>")) {
+            gettingChannels = false;
+            let channels = JSON.parse(String(msg.data).replace(":json.channels>", ""));
+            console.log(msg.data, "gh", channels);
+            channels.forEach((ch) => {
+                let elem = document.createElement("li");
+                elem.innerText = `#${ch}`;
+                elem.addEventListener("click", function (ev) {
+                    ws.send(`/join #${ch}`);
+                    leavingAChannel = true;
+                });
+                document.getElementById("channels").appendChild(elem);
+            });
+            return;
+        }
+        if (leavingAChannel) {
+            logs.innerText = "";
+            leavingAChannel = false;
+            return;
+        }
+        if (logs.innerText.length != 0) logs.innerText += "\n";
         logs.innerText += msg.data;
     };
-    ws.onclose = cls => {
-        if(logs.innerText.length != 0) logs.innerText += "\n";
-        logs.innerText += `Connection closed with code ${cls.code}, reason: ${cls.reason}`;
-    }
-    msgForm.addEventListener('submit', ev => {
+    ws.onclose = (cls) => {
+        if (logs.innerText.length != 0) logs.innerText += "\n";
+        logs.innerText += `Connection closed with code ${cls.code}, reason: ${cls.reason}. reload the page to reconnect`;
+    };
+    msgForm.addEventListener("submit", (ev) => {
         ev.preventDefault();
         const message = document.querySelector("#msg-content");
         ws.send(message.value);
@@ -39,31 +68,52 @@
     * {
         box-sizing: border-box;
     }
+
     body {
         margin: 0;
         width: 100%;
         min-height: 100vh;
         position: absolute;
     }
+
+    .sidebar {
+        padding: 1em;
+        border-right: 2px red solid;
+    }
+
+    .sidebar ul {
+        margin: 0;
+        padding: 0;
+        list-style: none;
+    }
+
     .container {
-        position: relative;
         display: flex;
-        flex-direction: column;
+        position: relative;
         height: calc(100vh - 3em);
         border: 2px red solid;
         margin: 1.5em;
     }
+
+    .flex-col {
+        flex-direction: column;
+        display: flex;
+        flex-grow: 1;
+    }
+
     .logs {
         flex-grow: 1;
         padding: 1em;
     }
+
     .title {
         border-bottom: 2px red solid;
         padding: 1em;
-        font-size:  larger;
-        font-weight:  bold;
+        font-size: larger;
+        font-weight: bold;
         text-align: center;
     }
+
     #msg {
         border-top: 2px red solid;
         padding: 1em;
@@ -72,7 +122,8 @@
         height: 2em;
         box-sizing: content-box;
     }
+
     #msg-content {
         flex-grow: 1;
     }
-</style>
\ No newline at end of file
+</style>