From 2c35a0c53c534b5092fa68348b3435abc111ed1e Mon Sep 17 00:00:00 2001
From: Jeff Emmett <46964190+Jeff-Emmett@users.noreply.github.com>
Date: Sat, 31 Aug 2024 15:00:06 +0200
Subject: [PATCH] fix stuff

---
 src/components/Board.tsx    |  2 +-
 src/shapes/ChatBoxShape.tsx | 22 +++++++++++-----------
 tsconfig.json               |  2 +-
 worker/worker.ts            |  2 +-
 4 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/src/components/Board.tsx b/src/components/Board.tsx
index 57f818b..21ef49f 100644
--- a/src/components/Board.tsx
+++ b/src/components/Board.tsx
@@ -10,7 +10,7 @@ import {
 import { useParams } from 'react-router-dom' // Add this import
 import { ChatBoxTool } from '@/tools/ChatBoxTool'
 import { IChatBoxShape, ChatBoxShape } from '@/shapes/ChatBoxShape'
-import { multiplayerAssetStore } from '@/client/multiplayerAssetStore'
+import { multiplayerAssetStore } from '../client/multiplayerAssetStore' // Adjusted path if necessary
 import { customSchema } from '../../worker/TldrawDurableObject'
 
 const WORKER_URL = `https://jeffemmett-canvas.jeffemmett.workers.dev`
diff --git a/src/shapes/ChatBoxShape.tsx b/src/shapes/ChatBoxShape.tsx
index d56acce..b1b80fa 100644
--- a/src/shapes/ChatBoxShape.tsx
+++ b/src/shapes/ChatBoxShape.tsx
@@ -40,7 +40,7 @@ interface Message {
 }
 
 // Add this new component after the ChatBoxShape class
-function ChatBox({ width, height }: { roomId: string, width: number, height: number }) {
+function ChatBox({ roomId, width, height }: { roomId: string, width: number, height: number }) {
     const [messages, setMessages] = useState<Message[]>([]);
     const [inputMessage, setInputMessage] = useState("");
     const [username, setUsername] = useState("jeff");
@@ -55,12 +55,11 @@ function ChatBox({ width, height }: { roomId: string, width: number, height: num
             setUsername(newUsername);
             localStorage.setItem("chatUsername", newUsername);
         }
-        
-        fetchMessages();
-        const interval = setInterval(fetchMessages, 2000);
+        fetchMessages(roomId);
+        const interval = setInterval(() => fetchMessages(roomId), 2000);
 
         return () => clearInterval(interval);
-    }, []);
+    }, [roomId]);
 
     useEffect(() => {
         if (messagesEndRef.current) {
@@ -68,9 +67,9 @@ function ChatBox({ width, height }: { roomId: string, width: number, height: num
         }
     }, [messages]);
 
-    const fetchMessages = async () => {
+    const fetchMessages = async (roomId: string) => {
         try {
-            const response = await fetch("https://jeffemmett-realtimechatappwithpolling.web.val.run?action=getMessages");
+            const response = await fetch(`https://jeffemmett-realtimechatappwithpolling.web.val.run?action=getMessages&roomId=${roomId}`);
             if (!response.ok) {
                 throw new Error(`HTTP error! status: ${response.status}`);
             }
@@ -81,12 +80,12 @@ function ChatBox({ width, height }: { roomId: string, width: number, height: num
         }
     };
 
-    const sendMessage = async (e: any) => {
+    const sendMessage = async (e: React.FormEvent) => {
         e.preventDefault();
         if (!inputMessage.trim()) return;
-        await sendMessageToChat(username, inputMessage);
+        await sendMessageToChat(roomId, username, inputMessage);
         setInputMessage("");
-        fetchMessages();
+        fetchMessages(roomId);
     };
 
     return (
@@ -117,7 +116,7 @@ function ChatBox({ width, height }: { roomId: string, width: number, height: num
     );
 }
 
-async function sendMessageToChat(username: string, content: string): Promise<void> {
+async function sendMessageToChat(roomId: string, username: string, content: string): Promise<void> {
     const apiUrl = 'https://jeffemmett-realtimechatappwithpolling.web.val.run'; // Replace with your actual Val Town URL
   
     try {
@@ -128,6 +127,7 @@ async function sendMessageToChat(username: string, content: string): Promise<voi
           'Content-Type': 'application/json',
         },
         body: JSON.stringify({
+          roomId,
           username,
           content,
         }),
diff --git a/tsconfig.json b/tsconfig.json
index 8fa8bf3..2be2aaa 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -25,7 +25,7 @@
     "noUnusedParameters": true,
     "noFallthroughCasesInSwitch": true
   },
-  "include": ["src", "worker"],
+  "include": ["src", "worker", "src/client"],
   
   "references": [{ "path": "./tsconfig.node.json" }]
 }
diff --git a/worker/worker.ts b/worker/worker.ts
index 2c52b00..b288744 100644
--- a/worker/worker.ts
+++ b/worker/worker.ts
@@ -9,7 +9,7 @@ export { TldrawDurableObject } from './TldrawDurableObject'
 // we use itty-router (https://itty.dev/) to handle routing. in this example we turn on CORS because
 // we're hosting the worker separately to the client. you should restrict this to your own domain.
 const { preflight, corsify } = cors({ origin: '*' })
-const router = AutoRouter<IRequest, [env: Environment]>({
+const router = AutoRouter<IRequest, [env: Environment, ctx: ExecutionContext]>({
 	before: [preflight],
 	finally: [corsify],
 	catch: (e) => {