From cbeb47218e5ff4c7b39e31c00669e18d2bfdb223 Mon Sep 17 00:00:00 2001
From: Pooya Parsa <pooya@pi0.io>
Date: Mon, 26 Feb 2024 13:46:53 +0100
Subject: [PATCH] chore: update playground

---
 examples/h3/index.ts          |  5 ++-
 examples/h3/public/index.html | 74 ++++++++++++++++++-----------------
 playground/_index.html.ts     | 74 ++++++++++++++++++-----------------
 3 files changed, 80 insertions(+), 73 deletions(-)

diff --git a/examples/h3/index.ts b/examples/h3/index.ts
index 069558a..8eafc73 100644
--- a/examples/h3/index.ts
+++ b/examples/h3/index.ts
@@ -10,12 +10,15 @@ export const websocket = {
   hooks: defineHooks({
     open(peer) {
       console.log("[ws] open", peer);
+      peer.send({ user: "system", message: `Welcome ${peer}!` });
     },
 
     message(peer, message) {
       console.log("[ws] message", peer, message);
       if (message.text().includes("ping")) {
-        peer.send("pong");
+        peer.send({ user: "system", message: "pong" });
+      } else {
+        peer.send({ user: peer.toString(), message: message.toString() });
       }
     },
 
diff --git a/examples/h3/public/index.html b/examples/h3/public/index.html
index 28d534a..158f051 100644
--- a/examples/h3/public/index.html
+++ b/examples/h3/public/index.html
@@ -110,6 +110,7 @@
         ping,
         clear,
         connect,
+        rand: Math.random(),
       }).mount();
 
       await connect();
@@ -125,14 +126,11 @@
             <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"
+                :src="'https://www.gravatar.com/avatar/' + (message.user + rand) + '?s=512&d=monsterid'"
                 alt="Avatar"
                 class="w-8 h-8 rounded-full"
               />
-              <div
-                class="ml-2 bg-gray-800 rounded-lg p-2"
-                style="max-width: 33.33vw"
-              >
+              <div class="ml-2 bg-gray-800 rounded-lg p-2">
                 <p
                   v-if="message.formattedText"
                   class="overflow-x-scroll"
@@ -150,37 +148,41 @@
       <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 class="w-full min-w-6">
+          <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"
+          />
+        </div>
+        <div class="flex">
+          <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>
       </div>
     </main>
   </body>
diff --git a/playground/_index.html.ts b/playground/_index.html.ts
index e211adc..e9a8147 100644
--- a/playground/_index.html.ts
+++ b/playground/_index.html.ts
@@ -111,6 +111,7 @@ export default /* html */ `
         ping,
         clear,
         connect,
+        rand: Math.random(),
       }).mount();
 
       await connect();
@@ -126,14 +127,11 @@ export default /* html */ `
             <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"
+                :src="'https://www.gravatar.com/avatar/' + (message.user + rand) + '?s=512&d=monsterid'"
                 alt="Avatar"
                 class="w-8 h-8 rounded-full"
               />
-              <div
-                class="ml-2 bg-gray-800 rounded-lg p-2"
-                style="max-width: 33.33vw"
-              >
+              <div class="ml-2 bg-gray-800 rounded-lg p-2">
                 <p
                   v-if="message.formattedText"
                   class="overflow-x-scroll"
@@ -151,37 +149,41 @@ export default /* html */ `
       <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 class="w-full min-w-6">
+          <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"
+          />
+        </div>
+        <div class="flex">
+          <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>
       </div>
     </main>
   </body>