From a6879bd3208d09fce5365e7bfb293a7986795d29 Mon Sep 17 00:00:00 2001
From: Pooya Parsa <pooya@pi0.io>
Date: Mon, 26 Feb 2024 12:59:15 +0100
Subject: [PATCH] chore: update playground

---
 examples/h3/public/index.html | 184 ++++++++++++++++++++++-----------
 playground/_index.html.ts     | 187 +++++++++++++++++++++++-----------
 playground/_shared.ts         |  21 ++++
 3 files changed, 274 insertions(+), 118 deletions(-)
diff --git a/examples/h3/public/index.html b/examples/h3/public/index.html
index 6009275..be8cd50 100644
--- a/examples/h3/public/index.html
+++ b/examples/h3/public/index.html
@@ -2,89 +2,157 @@
 <html lang="en" data-theme="dark">
   <head>
     <title>CrossWS Test Page</title>
-    <!-- https://minstyle.io/ -->
-    <link
-      rel="stylesheet"
-      type="text/css"
-      href="https://cdn.jsdelivr.net/npm/minstyle.io@2.0.2/dist/css/minstyle.io.min.css"
-    />
-  </head>
-  <body class="ms-m-5">
-    <h3>WebSocket Test Page</h3>
-
-    <div class="ms-btn-group">
-      <button onclick="sendPing()">Send Ping</button>
-      <button onclick="connect()">Reconnect</button>
-      <button onclick="clearLogs()">Clear</button>
-    </div>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <style>
+      body {
+        background-color: #1a1a1a;
+      }
+    </style>
+    <script type="module">
+      // https://github.com/vuejs/petite-vue
+      import {
+        createApp,
+        reactive,
+        nextTick,
+      } from "https://esm.sh/petite-vue@0.4.1";
 
-    <div class="ms-form-group ms-mt-2">
-      <div class="row">
-        <div class="col-sm-6">
-          <input
-            type="email"
-            class="ms-secondary ms-small"
-            id="message"
-            placeholder="Message..."
-            value="ping"
-            onkeypress="if(event.key==='Enter') sendMessage()"
-          />
-        </div>
-        <div class="col-sm-1">
-          <button class="ms-btn ms-secondary ms-small" onclick="sendMessage()">
-            Send
-          </button>
-        </div>
-      </div>
-      <br />
-    </div>
+      let ws;
 
-    <pre id="logs"></pre>
+      const store = reactive({
+        message: "",
+        messages: [],
+      });
 
-    <script type="module">
-      const isSecure = location.protocol === "https:";
-      const url = (isSecure ? "wss://" : "ws://") + location.host + "/_ws";
+      const scroll = () => {
+        nextTick(() => {
+          const el = document.querySelector("#messages");
+          el.scrollTop = el.scrollHeight;
+          el.scrollTo({
+            top: el.scrollHeight,
+            behavior: "smooth",
+          });
+        });
+      };
 
-      const logsEl = document.querySelector("#logs");
-      let lastTime = performance.now();
-      const log = (...args) => {
-        console.log("[ws]", ...args);
-        logsEl.innerHTML += `<br>${args.join(" ")}`;
+      const log = (user, ...args) => {
+        console.log("[ws]", user, ...args);
+        store.messages.push({
+          text: args.join(" "),
+          user: user,
+          date: new Date().toLocaleString(),
+        });
+        scroll();
       };
 
-      let ws;
-      globalThis.connect = async () => {
+      const connect = async () => {
+        const isSecure = location.protocol === "https:";
+        const url = (isSecure ? "wss://" : "ws://") + location.host + "/_ws";
         if (ws) {
-          log("Closing...");
+          log("system", "closing");
           ws.close();
         }
 
-        log("Connecting to", url, "...");
+        log("system", "Connecting to", url, "...");
         ws = new WebSocket(url);
 
         ws.addEventListener("message", (event) => {
-          log("Message from server:", event.data);
+          log("server", event.data);
         });
 
-        log("Waiting for connection...");
+        log("system", "Waiting for connection...");
         await new Promise((resolve) => ws.addEventListener("open", resolve));
       };
 
-      globalThis.clearLogs = () => {
-        logsEl.innerText = "";
+      const clear = () => {
+        store.messages.splice(0, store.messages.length);
+        log("system", "previous messages cleared");
       };
 
-      globalThis.sendPing = () => {
-        log("Sending ping...");
-        ws.send("ping");
+      const send = () => {
+        console.log("sending message...");
+        if (store.message) {
+          log("you", store.message);
+          ws.send(store.message);
+        }
+        store.message = "";
       };
 
-      globalThis.sendMessage = () => {
-        ws.send(document.querySelector("#message").value);
+      const ping = () => {
+        log("you", "Sending ping");
+        ws.send("ping");
       };
 
+      createApp({
+        store,
+        send,
+        ping,
+        clear,
+        connect,
+      }).mount();
+
       await connect();
-      sendPing();
+      ping();
+      send("foo");
     </script>
+  </head>
+  <body class="h-screen flex flex-col justify-between">
+    <main v-scope="{}">
+      <!-- Messages -->
+      <div id="messages" class="flex-grow flex flex-col justify-end px-4 py-8">
+        <div class="flex items-center mb-4" v-for="message in store.messages">
+          <div class="flex flex-col">
+            <p class="text-gray-500 mb-1 text-xs ml-10">{{ message.user }}</p>
+            <div class="flex items-center">
+              <img
+                src="https://robohash.org/a"
+                alt="Avatar"
+                class="w-8 h-8 rounded-full"
+              />
+              <div class="ml-2 bg-gray-800 rounded-lg p-2">
+                <p class="text-white">{{ message.text }}</p>
+              </div>
+            </div>
+            <p class="text-gray-500 mt-1 text-xs ml-10">{{ message.date }}</p>
+          </div>
+        </div>
+      </div>
+
+      <!-- Chatbox -->
+      <div
+        class="bg-gray-800 px-4 py-2 flex items-center justify-between fixed bottom-0 w-full"
+      >
+        <input
+          type="text"
+          placeholder="Type your message..."
+          class="w-full rounded-l-lg px-4 py-2 bg-gray-700 text-white focus:outline-none focus:ring focus:border-blue-300"
+          @keydown.enter="send"
+          v-model="store.message"
+        />
+        <button
+          class="bg-blue-500 hover:bg-blue-600 text-white py-2 px-4"
+          @click="send"
+        >
+          Send
+        </button>
+        <button
+          class="bg-blue-500 hover:bg-blue-600 text-white py-2 px-4"
+          @click="ping"
+        >
+          Ping
+        </button>
+        <button
+          class="bg-blue-500 hover:bg-blue-600 text-white py-2 px-4"
+          @click="connect"
+        >
+          Reconnect
+        </button>
+        <button
+          class="bg-blue-500 hover:bg-blue-600 text-white py-2 px-4 rounded-r-lg"
+          @click="clear"
+        >
+          Clear
+        </button>
+      </div>
+    </main>
   </body>
 </html>
diff --git a/playground/_index.html.ts b/playground/_index.html.ts
index 79dee98..3e6f6b4 100644
--- a/playground/_index.html.ts
+++ b/playground/_index.html.ts
@@ -2,90 +2,157 @@ export default /* html */ `<!doctype html>
 <html lang="en" data-theme="dark">
   <head>
     <title>CrossWS Test Page</title>
-    <!-- https://minstyle.io/ -->
-    <link
-      rel="stylesheet"
-      type="text/css"
-      href="https://cdn.jsdelivr.net/npm/minstyle.io@2.0.2/dist/css/minstyle.io.min.css"
-    />
-  </head>
-  <body class="ms-m-5">
-    <h3>WebSocket Test Page</h3>
-
-    <div class="ms-btn-group">
-      <button onclick="sendPing()">Send Ping</button>
-      <button onclick="connect()">Reconnect</button>
-      <button onclick="clearLogs()">Clear</button>
-    </div>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <style>
+      body {
+        background-color: #1a1a1a;
+      }
+    </style>
+    <script type="module">
+      // https://github.com/vuejs/petite-vue
+      import {
+        createApp,
+        reactive,
+        nextTick,
+      } from "https://esm.sh/petite-vue@0.4.1";
 
-    <div class="ms-form-group ms-mt-2">
-      <div class="row">
-        <div class="col-sm-6">
-          <input
-            type="email"
-            class="ms-secondary ms-small"
-            id="message"
-            placeholder="Message..."
-            value="ping"
-            onkeypress="if(event.key==='Enter') sendMessage()"
-          />
-        </div>
-        <div class="col-sm-1">
-          <button class="ms-btn ms-secondary ms-small" onclick="sendMessage()">
-            Send
-          </button>
-        </div>
-      </div>
-      <br />
-    </div>
+      let ws;
 
-    <pre id="logs"></pre>
+      const store = reactive({
+        message: "",
+        messages: [],
+      });
 
-    <script type="module">
-      const isSecure = location.protocol === "https:";
-      const url = (isSecure ? "wss://" : "ws://") + location.host + "/_ws";
+      const scroll = () => {
+        nextTick(() => {
+          const el = document.querySelector("#messages");
+          el.scrollTop = el.scrollHeight;
+          el.scrollTo({
+            top: el.scrollHeight,
+            behavior: "smooth",
+          });
+        });
+      };
 
-      const logsEl = document.querySelector("#logs");
-      let lastTime = performance.now();
-      const log = (...args) => {
-        console.log("[ws]", ...args);
-        logsEl.innerHTML += "<br>" + args.join(" ");
+      const log = (user, ...args) => {
+        console.log("[ws]", user, ...args);
+        store.messages.push({
+          text: args.join(" "),
+          user: user,
+          date: new Date().toLocaleString(),
+        });
+        scroll();
       };
 
-      let ws;
-      globalThis.connect = async () => {
+      const connect = async () => {
+        const isSecure = location.protocol === "https:";
+        const url = (isSecure ? "wss://" : "ws://") + location.host + "/_ws";
         if (ws) {
-          log("Closing...");
+          log("system", "closing");
           ws.close();
         }
 
-        log("Connecting to", url, "...");
+        log("system", "Connecting to", url, "...");
         ws = new WebSocket(url);
 
         ws.addEventListener("message", (event) => {
-          log("Message from server:", event.data);
+          log("server", event.data);
         });
 
-        log("Waiting for connection...");
+        log("system", "Waiting for connection...");
         await new Promise((resolve) => ws.addEventListener("open", resolve));
       };
 
-      globalThis.clearLogs = () => {
-        logsEl.innerText = "";
+      const clear = () => {
+        store.messages.splice(0, store.messages.length);
+        log("system", "previous messages cleared");
       };
 
-      globalThis.sendPing = () => {
-        log("Sending ping...");
-        ws.send("ping");
+      const send = () => {
+        console.log("sending message...");
+        if (store.message) {
+          log("you", store.message);
+          ws.send(store.message);
+        }
+        store.message = "";
       };
 
-      globalThis.sendMessage = () => {
-        ws.send(document.querySelector("#message").value);
+      const ping = () => {
+        log("you", "Sending ping");
+        ws.send("ping");
       };
 
+      createApp({
+        store,
+        send,
+        ping,
+        clear,
+        connect,
+      }).mount();
+
       await connect();
-      sendPing();
+      ping();
+      send("foo");
     </script>
+  </head>
+  <body class="h-screen flex flex-col justify-between">
+    <main v-scope="{}">
+      <!-- Messages -->
+      <div id="messages" class="flex-grow flex flex-col justify-end px-4 py-8">
+        <div class="flex items-center mb-4" v-for="message in store.messages">
+          <div class="flex flex-col">
+            <p class="text-gray-500 mb-1 text-xs ml-10">{{ message.user }}</p>
+            <div class="flex items-center">
+              <img
+                src="https://robohash.org/a"
+                alt="Avatar"
+                class="w-8 h-8 rounded-full"
+              />
+              <div class="ml-2 bg-gray-800 rounded-lg p-2">
+                <p class="text-white">{{ message.text }}</p>
+              </div>
+            </div>
+            <p class="text-gray-500 mt-1 text-xs ml-10">{{ message.date }}</p>
+          </div>
+        </div>
+      </div>
+
+      <!-- Chatbox -->
+      <div
+        class="bg-gray-800 px-4 py-2 flex items-center justify-between fixed bottom-0 w-full"
+      >
+        <input
+          type="text"
+          placeholder="Type your message..."
+          class="w-full rounded-l-lg px-4 py-2 bg-gray-700 text-white focus:outline-none focus:ring focus:border-blue-300"
+          @keydown.enter="send"
+          v-model="store.message"
+        />
+        <button
+          class="bg-blue-500 hover:bg-blue-600 text-white py-2 px-4"
+          @click="send"
+        >
+          Send
+        </button>
+        <button
+          class="bg-blue-500 hover:bg-blue-600 text-white py-2 px-4"
+          @click="ping"
+        >
+          Ping
+        </button>
+        <button
+          class="bg-blue-500 hover:bg-blue-600 text-white py-2 px-4"
+          @click="connect"
+        >
+          Reconnect
+        </button>
+        <button
+          class="bg-blue-500 hover:bg-blue-600 text-white py-2 px-4 rounded-r-lg"
+          @click="clear"
+        >
+          Clear
+        </button>
+      </div>
+    </main>
   </body>
-</html>
-`;
+</html>`;
diff --git a/playground/_shared.ts b/playground/_shared.ts
index 7b1d629..b784d46 100644
--- a/playground/_shared.ts
+++ b/playground/_shared.ts
@@ -33,6 +33,27 @@ export function createDemo<T extends Adapter<any, any>>(
     },
   });
 
+  // open(peer) {
+  //   // Send welcome to the new client
+  //   peer.send("Welcome to the server!");
+
+  //   // Join new client to the "chat" channel
+  //   peer.subscribe("chat");
+
+  //   // Notify every other connected client
+  //   peer.publish("chat", `[system] ${peer} joined!`);
+  // },
+
+  // message(peer, message) {
+  //   // The server re-broadcasts incoming messages to everyone
+  //   peer.publish("chat", `[${peer}] ${message}`);
+  // },
+
+  // close(peer) {
+  //   peer.publish("chat", `[system] ${peer} has left the chat!`);
+  //   peer.unsubscribe("chat");
+  // },
+
   const resolve: ResolveHooks = (info) => {
     return {
       open: (peer) => {
