- {isCanvasEnabled && elementsInfo.length > 0 ? : null})
+ {isCanvasEnabled && elementsInfo.length > 0 ? : null}
+ )
}
\ No newline at end of file
diff --git a/src/components/Board.tsx b/src/components/Board.tsx
index 6d28e36..80da60f 100644
--- a/src/components/Board.tsx
+++ b/src/components/Board.tsx
@@ -2,83 +2,82 @@ import { useSync } from '@tldraw/sync'
import {
AssetRecordType,
getHashForString,
- TLAssetStore,
TLBookmarkAsset,
Tldraw,
- uniqueId,
} from 'tldraw'
-import { useParams } from 'react-router-dom' // Add this import
+import { useParams } from 'react-router-dom'
import { ChatBoxTool } from '@/tools/ChatBoxTool'
-import { IChatBoxShape, ChatBoxShape } from '@/shapes/ChatBoxShape'
-import { multiplayerAssetStore } from '../client/multiplayerAssetStore' // Adjusted path if necessary
+import { ChatBoxShape } from '@/shapes/ChatBoxShapeUtil'
+import { VideoChatTool } from '@/tools/VideoChatTool'
+import { VideoChatShape } from '@/shapes/VideoChatShapeUtil'
+import { multiplayerAssetStore } from '../client/multiplayerAssetStore'
import { customSchema } from '../../worker/TldrawDurableObject'
-import './ChatBoxStyles.css' // Add a CSS file for styles
+
+import React, { useState } from 'react';
+import { chatBox } from '@/shapes/ChatBoxShapeUtil';
+import { components, uiOverrides } from '@/ui-overrides'
const WORKER_URL = `https://jeffemmett-canvas.jeffemmett.workers.dev`
-const shapeUtils = [ChatBoxShape]
-const tools = [ChatBoxTool]
+const shapeUtils = [ChatBoxShape, VideoChatShape]
+const tools = [ChatBoxTool, VideoChatTool]; // Array of tools
export function Board() {
- // Extract the slug from the URL
- const { slug } = useParams<{ slug: string }>()
-
- // Use the slug as the roomId, or fallback to 'default-room' if not provided
- const roomId = slug || 'default-room'
+ const { slug } = useParams<{ slug: string }>(); // Ensure this is inside the Board component
+ const roomId = slug || 'default-room'; // Declare roomId here
- // Create a store connected to multiplayer.
const store = useSync({
- // Use the dynamic roomId in the URI
uri: `${WORKER_URL}/connect/${roomId}`,
- // ...and how to handle static assets like images & videos
assets: multiplayerAssetStore,
- shapeUtils: shapeUtils,
- schema: customSchema
- })
+ shapeUtils: shapeUtils,
+ schema: customSchema,
+ });
+
+ const [isChatBoxVisible, setChatBoxVisible] = useState(false);
+ const [userName, setUserName] = useState('');
+ const [isVideoChatVisible, setVideoChatVisible] = useState(false); // Added state for video chat visibility
+
+ const handleNameChange = (event: React.ChangeEvent) => {
+ setUserName(event.target.value);
+ };
return (
{
- // when the editor is ready, we need to register out bookmark unfurling service
editor.registerExternalAssetHandler('url', unfurlBookmarkUrl)
- editor.createShape({
- type: 'chatBox',
- x: 0,
- y: 0,
- props: {
- w: 200,
- h: 200,
- roomId: roomId,
- },
- })
}}
/>
+ {isChatBoxVisible && (
+
+
+
+
+ )}
+ {isVideoChatVisible && ( // Render the button to join video chat
+
+ )}
)
}
-// Assuming you have a message structure like this
-interface ChatMessage {
- id: string;
- text: string;
- isUser: boolean; // New property to identify the sender
-}
-
-// Example rendering function for messages
-function renderMessage(message: ChatMessage) {
- return (
-
- {message.text}
-
- )
-}
-
// How does our server handle bookmark unfurling?
async function unfurlBookmarkUrl({ url }: { url: string }): Promise {
const asset: TLBookmarkAsset = {
diff --git a/src/components/Canvas.tsx b/src/components/Canvas.tsx
index bdf7457..34f2a2d 100644
--- a/src/components/Canvas.tsx
+++ b/src/components/Canvas.tsx
@@ -1,6 +1,6 @@
import { Editor, Tldraw, TLShape, TLUiComponents } from "tldraw";
import { SimController } from "@/physics/PhysicsControls";
-import { HTMLShapeUtil } from "@/shapes/HTMLShapeUtil";
+import { HTMLShapeUtil } from "@/utils/HTMLShapeUtil";
const components: TLUiComponents = {
HelpMenu: null,
diff --git a/src/components/ChatBoxStyles.css b/src/css/ChatBoxStyles.css
similarity index 100%
rename from src/components/ChatBoxStyles.css
rename to src/css/ChatBoxStyles.css
diff --git a/src/physics/simulation.ts b/src/physics/simulation.ts
index b67a8e5..2ff1ec7 100644
--- a/src/physics/simulation.ts
+++ b/src/physics/simulation.ts
@@ -66,6 +66,9 @@ export class PhysicsWorld {
this.createGroup(shape as TLGroupShape);
break;
// Add cases for any new shape types here
+ case "VideoChat":
+ this.createShape (shape as TLGeoShape);
+ break;
}
}
}
diff --git a/src/shapes/ChatBoxShape.tsx b/src/shapes/ChatBoxShapeUtil.tsx
similarity index 75%
rename from src/shapes/ChatBoxShape.tsx
rename to src/shapes/ChatBoxShapeUtil.tsx
index b1b80fa..e94ebcd 100644
--- a/src/shapes/ChatBoxShape.tsx
+++ b/src/shapes/ChatBoxShapeUtil.tsx
@@ -1,13 +1,14 @@
import { useEffect, useRef, useState } from "react";
-import { BaseBoxShapeUtil, TLBaseBoxShape, TLBaseShape, TldrawBaseProps } from "tldraw";
+import { BaseBoxShapeUtil, TLBaseShape } from "tldraw";
export type IChatBoxShape = TLBaseShape<
- 'chatBox',
- {
- w: number
- h: number
+ 'chatBox',
+ {
+ w: number
+ h: number
roomId: string
- }
+ userName: string
+ }
>
export class ChatBoxShape extends BaseBoxShapeUtil {
@@ -18,6 +19,7 @@ export class ChatBoxShape extends BaseBoxShapeUtil {
roomId: 'default-room',
w: 100,
h: 100,
+ userName: '',
}
}
@@ -27,7 +29,7 @@ export class ChatBoxShape extends BaseBoxShapeUtil {
component(shape: IChatBoxShape) {
return (
-
+
)
}
}
@@ -39,11 +41,14 @@ interface Message {
timestamp: Date;
}
-// Add this new component after the ChatBoxShape class
-function ChatBox({ roomId, width, height }: { roomId: string, width: number, height: number }) {
+
+
+
+// Update the chatBox component to accept userName
+export const chatBox: React.FC = ({ roomId, w, h, userName }) => {
const [messages, setMessages] = useState([]);
const [inputMessage, setInputMessage] = useState("");
- const [username, setUsername] = useState("jeff");
+ const [username, setUsername] = useState(userName);
const messagesEndRef = useRef(null);
useEffect(() => {
@@ -89,12 +94,12 @@ function ChatBox({ roomId, width, height }: { roomId: string, width: number, hei
};
return (
-