v0.0.10

Author: CarcajadaArtificial

CHANGELOG.md

@@ -2,6 +2,10 @@
 
 ## Version History
 
+### v0.0.10
+
+- Added the `<GibberishChat/>` island.
+
 ### v0.0.9
 
 - Added the `<RandomQuote/>` island.

deno.json

@@ -20,7 +20,9 @@
   "imports": {
     "@/": "./",
     "@carcajada/teclas": "jsr:@carcajada/teclas@^1.0.8",
+    "@egamagz/time-ago": "jsr:@egamagz/time-ago@^2025.4.9",
     "@lunchbox/ui": "jsr:@lunchbox/ui@3.0.0",
+    "@vyn/cn": "jsr:@vyn/cn@^0.1.2",
     "lunchbox-css": "npm:lunchbox-css@^0.1.4",
     "@tailwindcss/typography": "npm:@tailwindcss/typography@^0.5.16",
     "daisyui": "npm:daisyui@^5.0.37",

islands/GibberishChat.tsx

@@ -0,0 +1,107 @@
+import { cn } from "@vyn/cn";
+import { useEffect, useState } from "preact/hooks";
+
+interface Message {
+  user: 0 | 1 | 2;
+  content: string;
+}
+
+function generateRandomWord(length: number): string {
+  const alphabet = "abcdefghijklmnopqrstuvwxyz";
+  let result = "";
+  for (let i = 0; i < length; i++) {
+    result += alphabet.charAt(Math.floor(Math.random() * alphabet.length));
+  }
+  return result;
+}
+
+function generateGibberish(words: number): string {
+  const parts: string[] = [];
+  for (let i = 0; i < words; i++) {
+    const len = Math.floor(Math.random() * 7) + 2;
+    parts.push(generateRandomWord(len));
+  }
+  return parts.join(" ");
+}
+
+function transformSentence(str: string): string {
+  if (str.length === 0) return "";
+  return str.charAt(0).toUpperCase() + str.slice(1) + ".";
+}
+
+const users = [
+  generateRandomWord(2).toUpperCase(),
+  generateRandomWord(2).toUpperCase(),
+  "ME",
+];
+
+export default function () {
+  const [messages, setMessages] = useState<Message[]>([]);
+
+  useEffect(() => {
+    const intervalId = setInterval(() => {
+      const seed = Math.random();
+      if (seed >= 0.1) return;
+
+      const simpleSeed = Math.trunc(seed * 100);
+
+      setMessages([{
+        user: simpleSeed % 2 === 0 ? 0 : 1,
+        content: transformSentence(generateGibberish((simpleSeed + 1) * 2)),
+      }, ...messages]);
+    }, 500);
+
+    return () => clearInterval(intervalId);
+  }, [messages]);
+
+  return (
+    <div class="col-span-full md:col-span-3 lg:col-span-4">
+      <div class="p-1-2 bg-base-200">
+        Gibberish Chat
+      </div>
+      <div class="p-1-2 dotted h-96 overflow-y-scroll flex flex-col-reverse">
+        {messages.map((message) => (
+          <div
+            class={cn("chat", message.user === 2 ? "chat-end" : "chat-start")}
+          >
+            <div class="chat-image avatar avatar-placeholder">
+              <div class="bg-neutral text-neutral-content w-8 rounded-full">
+                <span class="text-xs">{users[message.user]}</span>
+              </div>
+            </div>
+            <div
+              class={cn(
+                "chat-bubble",
+                message.user === 2 ? "chat-bubble-primary" : null,
+              )}
+            >
+              {message.content}
+            </div>
+          </div>
+        ))}
+      </div>
+      <div class="p-1-2 bg-base-200">
+        <div class="join">
+          <input
+            id="gibberish-input"
+            class="join-item input input-sm"
+            type="text"
+          />
+          <button
+            type="button"
+            class="join-item btn btn-sm"
+            onClick={() =>
+              setMessages([{
+                user: 2,
+                content: (document.getElementById(
+                  "gibberish-input",
+                ) as HTMLInputElement).value,
+              }, ...messages])}
+          >
+            Send
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

routes/index.tsx

@@ -1,6 +1,7 @@
 import { define } from "@/utils.ts";
 import Logo from "@/components/Logo.tsx";
 import RandomQuote from "@/islands/RandomQuote.tsx";
+import GibberishChat from "../islands/GibberishChat.tsx";
 
 export default define.page(function Home() {
   return (
@@ -16,6 +17,7 @@ export default define.page(function Home() {
         </div>
       </div>
       <RandomQuote />
+      <GibberishChat />
     </main>
   );
 });