Refresh

package.json

@@ -3,12 +3,20 @@
   "module": "src/index.ts",
   "type": "module",
   "scripts": {
-        "build": "bun scripts/build.ts"
+    "build": "bun scripts/build.ts",
+    "watch": "bun run build --watch --debug"
   },
   "devDependencies": {
+    "@types/react": "^18.2.21",
+    "@types/react-dom": "^18.2.7",
     "bun-types": "latest"
   },
   "peerDependencies": {
     "typescript": "^5.0.0"
+  },
+  "dependencies": {
+    "mppclone-client": "^1.1.3",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   }
 }

scripts/build.ts

@@ -1,13 +1,63 @@
 import fs from "fs";
 
-await Bun.build({
-  entrypoints: ["src/index.tsx"],
-  outdir: "./build/index.js",
+let watch = false;
+let debug = false;
+
+process.argv.forEach(c => {
+    if (c.includes("--watch")) watch = true;
+    if (c.includes("--debug")) debug = true;
 });
 
+if (watch) {
+    console.log("Watch mode enabled");
+    const watcher = fs.watch(
+        "./src/",
+        {
+            recursive: true
+        },
+        async (event, filename) => {
+            if (event !== "change" && event !== "rename") return;
+            console.log("");
+            console.log("Rebuilding...");
+            await build();
+        }
+    );
+}
+
+async function build() {
+    console.log("Removing old build...");
+
+    if (fs.existsSync("build")) {
+        fs.rmSync("build", {
+            recursive: true,
+            force: true
+        });
+    }
+
+    console.log("Compiling scripts...");
+
+    const build = await Bun.build({
+        entrypoints: ["src/index.ts"],
+        target: "browser",
+        minify: true,
+        outdir: "./build/"
+    });
+
+    if (build.logs.length > 0) {
+        console.log("Build logs:", build.logs);
+    }
+
+    if (!build.success) return;
+
+    console.log("Adding userscript header...");
+
     const userscriptHeader = fs
         .readFileSync("scripts/userscriptHeader.js")
         .toString();
     const artifact = fs.readFileSync("build/index.js").toString();
 
     fs.writeFileSync("build/Saturn.user.js", userscriptHeader + artifact);
+    console.log("Done");
+}
+
+await build();

src/chat/commands/general/help.ts

@@ -0,0 +1,12 @@
+import { Command } from "..";
+
+export const help = new Command(
+    ["help", "h", "commands", "cmds"],
+    "Returns a list of commands",
+    "%Phelp [command]",
+    msg => {
+        return "help menu TODO";
+    }
+);
+
+console.log(help);

src/chat/commands/index.inc.ts

@@ -0,0 +1,9 @@
+import { CommandGroup, CommandHandler } from ".";
+import { help } from "./general/help";
+
+console.log("Adding things");
+
+const GROUP_GENERAL = new CommandGroup("General");
+GROUP_GENERAL.addCommand(help);
+
+CommandHandler.addCommandGroup(GROUP_GENERAL);

src/chat/commands/index.ts

@@ -0,0 +1,43 @@
+import { type CustomChatMessage } from "..";
+import { type ChatMessage } from "../../util/MPP";
+
+export class Command {
+    public static getUsage(usage: string, prefix: string) {
+        return usage.split("%P").join(prefix);
+    }
+
+    constructor(
+        public aliases: string[],
+        public description: string,
+        public usage: string,
+        public callback: (msg: ChatMessage) => void
+    ) {}
+}
+
+export class CommandHandler {
+    public static commandGroups = new Array<CommandGroup>();
+
+    public static handleCommand(msg: CustomChatMessage) {
+        for (const group of this.commandGroups) {
+            for (const command of group.commands) {
+                command.callback(msg);
+            }
+        }
+    }
+
+    public static addCommandGroup(commandGroup: CommandGroup) {
+        this.commandGroups.push(commandGroup);
+    }
+}
+
+export class CommandGroup {
+    public commands = new Array<Command>();
+
+    constructor(public id: string) {}
+
+    public addCommand(command: Command) {
+        this.commands.push(command);
+    }
+}
+
+require("./index.inc");

src/chat/index.ts

@@ -0,0 +1,32 @@
+import { ChatMessage } from "../util/MPP";
+import { CommandHandler } from "./commands";
+
+export interface CustomChatMessage extends ChatMessage {
+    prefix: string;
+}
+
+export class ChatBot {
+    public static prefixes = ["sat"];
+
+    public static handleMessage(msg: ChatMessage) {
+        console.log(`[Saturn] ${msg.p.name}: ${msg.a}`);
+
+        let usedPrefix: string | undefined;
+
+        for (const prefix of this.prefixes) {
+            if (!msg.a.startsWith(prefix)) continue;
+            usedPrefix = prefix;
+        }
+
+        if (!usedPrefix) return;
+
+        const nmsg = msg as CustomChatMessage;
+        nmsg.prefix = usedPrefix;
+
+        CommandHandler.handleCommand(nmsg);
+    }
+}
+
+MPP.client.on("a", msg => {
+    ChatBot.handleMessage(msg);
+});

src/index.ts

@@ -0,0 +1,2 @@
+import "./ui";
+import "./chat";

src/index.tsx

@@ -1 +0,0 @@
-console.log(typeof (globalThis as any).MPP);

src/ui/index.tsx

@@ -0,0 +1,12 @@
+import ReactDOM from "react-dom/client";
+import React from "react";
+
+const document = (globalThis as any).document;
+const reactRoot = document.createElement("div");
+
+reactRoot.setAttribute("id", "saturn");
+document.body.appendChild(reactRoot);
+const root = ReactDOM.createRoot(reactRoot);
+
+const test = <p></p>;
+root.render(test);

src/util/MPP.d.ts

@@ -0,0 +1,25 @@
+import Client from "mppclone-client";
+
+declare global {
+    var MPP: {
+        client: Client;
+    };
+}
+
+declare interface ChatMessage {
+    m: "a";
+    a: string;
+    p: Participant;
+    t: number;
+}
+
+declare interface Participant {
+    _id: string;
+    id: string;
+    name: string;
+    color: string;
+    tag?: {
+        text: string;
+        color: string;
+    };
+}

tsconfig.json

@@ -1,8 +1,8 @@
 {
     "compilerOptions": {
-    "lib": ["ESNext"],
-    "module": "esnext",
-    "target": "esnext",
+        "lib": ["ESNext", "dom"],
+        "module": "ESNext",
+        "target": "ESNext",
         "moduleResolution": "bundler",
         "moduleDetection": "force",
         "allowImportingTsExtensions": true,