Basic mod manager

islands/terminal.tsx

@@ -3,37 +3,43 @@ import { useEffect, useRef, useState } from "preact/hooks";
 import { JSX } from "preact/jsx-runtime";
 import { Sockpuppet } from "puppet/client";
 
-
 export function Terminal(props: { channelId: string }) {
   const puppet = useRef(new Sockpuppet("ws://sockpuppet.cyborggrizzly.com"));
   const [lines, setLines] = useState<string[]>([]);
   const divRef = useRef<HTMLDivElement>(null);
-  const storeKey = 'commandHistory';
-  const [commandHistory, setCommandHistory] = useState<string[]>(JSON.parse(localStorage.getItem(storeKey) || '[]'));
+  const storeKey = "commandHistory";
+  const [commandHistory, setCommandHistory] = useState<string[]>(
+    JSON.parse(localStorage.getItem(storeKey) || "[]"),
+  );
   const [historyIndex, setHistoryIndex] = useState(commandHistory.length);
 
   const [command, setCommand] = useState("");
 
-  const changeHistoryIndex = (by: number) => setHistoryIndex(i => i + by);
+  const changeHistoryIndex = (by: number) => setHistoryIndex((i) => i + by);
 
   useEffect(() => {
     if (!IS_BROWSER) return;
     puppet.current.joinChannel(props.channelId, (line) => {
       setLines((l) => [...l, line]);
     });
+    setTimeout(() => {
+      const channel = puppet.current.getChannel(props.channelId)
+      // console.log(channel)
+      channel?.send("log");
+    }, 200);
 
-    document.addEventListener('keyup', (e) => {
+    document.addEventListener("keyup", (e) => {
       switch (e.key) {
-        case 'Up':
-        case 'ArrowUp':
+        case "Up":
+        case "ArrowUp":
           changeHistoryIndex(-1);
           break;
-        case 'Down':
-        case 'ArrowDown':
+        case "Down":
+        case "ArrowDown":
           changeHistoryIndex(1);
           break;
       }
-    })
+    });
   }, []);
 
   useEffect(() => {
@@ -44,26 +50,35 @@ export function Terminal(props: { channelId: string }) {
 
   const sendCommand = (e: Event) => {
     e.preventDefault();
-    puppet.current.getChannel(props.channelId)?.send(historyIndex === commandHistory.length ? command : commandHistory[historyIndex]);
-    setCommandHistory(c => [...c, command]);
-    setHistoryIndex(commandHistory.length + 1)
+    puppet.current.getChannel(props.channelId)?.send(
+      historyIndex === commandHistory.length
+        ? command
+        : commandHistory[historyIndex],
+    );
+    setCommandHistory((c) => [...c, command]);
+    setHistoryIndex(commandHistory.length + 1);
     setCommand("");
   };
 
-  const handleCommandUpdate = (e: JSX.TargetedEvent<HTMLInputElement, Event>) => {
+  const handleCommandUpdate = (
+    e: JSX.TargetedEvent<HTMLInputElement, Event>,
+  ) => {
     const value = e.currentTarget.value;
 
     if (historyIndex !== commandHistory.length) {
       setHistoryIndex(commandHistory.length);
     }
 
-    setCommand(value || '')
-  }
+    setCommand(value || "");
+  };
 
   useEffect(() => {
-    localStorage.setItem(storeKey, JSON.stringify(commandHistory.slice(0,100)));
-  }, [commandHistory])
-  
+    localStorage.setItem(
+      storeKey,
+      JSON.stringify(commandHistory.slice(0, 100)),
+    );
+  }, [commandHistory]);
+
   return (
     <div>
       <div ref={divRef} class="flex flex-col h-[600px] w-full overflow-auto">