jeffemmett
/
canvas-website
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

replace all ChatBox with chatBox

This commit is contained in:
Jeff Emmett 2024-10-18 17:35:05 -04:00
parent c6b78dff40
commit 7f7806df23
5 changed files with 39 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/Board.tsx
View File

@ -14,7 +14,7 @@ import { multiplayerAssetStore } from '../client/multiplayerAssetStore'
import { customSchema } from '../../worker/TldrawDurableObject' import { customSchema } from '../../worker/TldrawDurableObject'
import React, { useState } from 'react'; import React, { useState } from 'react';
import { ChatBox } from '@/shapes/ChatBoxShapeUtil'; import { chatBox } from '@/shapes/ChatBoxShapeUtil';
import { components, uiOverrides } from '@/ui-overrides' import { components, uiOverrides } from '@/ui-overrides'
const WORKER_URL = `https://jeffemmett-canvas.jeffemmett.workers.dev` const WORKER_URL = `https://jeffemmett-canvas.jeffemmett.workers.dev`
@ -61,7 +61,7 @@ export function Board() {
onChange={handleNameChange} onChange={handleNameChange}
placeholder="Enter your name" placeholder="Enter your name"
/> />
<ChatBox <chatBox
userName={userName} userName={userName}
roomId={roomId} // Added roomId roomId={roomId} // Added roomId
w={200} // Set appropriate width w={200} // Set appropriate width

58
src/shapes/ChatBoxShapeUtil.tsx
View File

@ -2,17 +2,17 @@ import { useEffect, useRef, useState } from "react";
import { BaseBoxShapeUtil, TLBaseShape } from "tldraw"; import { BaseBoxShapeUtil, TLBaseShape } from "tldraw";
export type IChatBoxShape = TLBaseShape< export type IChatBoxShape = TLBaseShape<
'ChatBox', 'chatBox',
{ {
w: number w: number
h: number h: number
roomId: string roomId: string
userName: string userName: string
} }
> >
export class ChatBoxShape extends BaseBoxShapeUtil<IChatBoxShape> { export class ChatBoxShape extends BaseBoxShapeUtil<IChatBoxShape> {
static override type = 'ChatBox' static override type = 'chatBox'
getDefaultProps(): IChatBoxShape['props'] { getDefaultProps(): IChatBoxShape['props'] {
return { return {
@ -29,7 +29,7 @@ export class ChatBoxShape extends BaseBoxShapeUtil<IChatBoxShape> {
component(shape: IChatBoxShape) { component(shape: IChatBoxShape) {
return ( return (
<ChatBox roomId={shape.props.roomId} w={shape.props.w} h={shape.props.h} userName="" /> <chatBox roomId={shape.props.roomId} w={shape.props.w} h={shape.props.h} userName="" />
) )
} }
} }
@ -44,8 +44,8 @@ interface Message {
// Update the ChatBox component to accept userName // Update the chatBox component to accept userName
export const ChatBox: React.FC<IChatBoxShape['props']> = ({ roomId, w, h, userName }) => { export const chatBox: React.FC<IChatBoxShape['props']> = ({ roomId, w, h, userName }) => {
const [messages, setMessages] = useState<Message[]>([]); const [messages, setMessages] = useState<Message[]>([]);
const [inputMessage, setInputMessage] = useState(""); const [inputMessage, setInputMessage] = useState("");
const [username, setUsername] = useState(userName); const [username, setUsername] = useState(userName);
@ -99,7 +99,7 @@ export const ChatBox: React.FC<IChatBoxShape['props']> = ({ roomId, w, h, userNa
{messages.map((msg) => ( {messages.map((msg) => (
<div key={msg.id} className={`message ${msg.username === username ? 'own-message' : ''}`}> <div key={msg.id} className={`message ${msg.username === username ? 'own-message' : ''}`}>
<div className="message-header"> <div className="message-header">
<strong>{msg.username}</strong> <strong>{msg.username}</strong>
<span className="timestamp">{new Date(msg.timestamp).toLocaleTimeString()}</span> <span className="timestamp">{new Date(msg.timestamp).toLocaleTimeString()}</span>
</div> </div>
<div className="message-content">{msg.content}</div> <div className="message-content">{msg.content}</div>
@ -115,7 +115,7 @@ export const ChatBox: React.FC<IChatBoxShape['props']> = ({ roomId, w, h, userNa
placeholder="Type a message..." placeholder="Type a message..."
className="message-input" className="message-input"
/> />
<button type="submit" style={{ pointerEvents: 'all',}} onPointerDown={(e)=>e.stopPropagation()} className="send-button">Send</button> <button type="submit" style={{ pointerEvents: 'all', }} onPointerDown={(e) => e.stopPropagation()} className="send-button">Send</button>
</form> </form>
</div> </div>
); );
@ -123,24 +123,24 @@ export const ChatBox: React.FC<IChatBoxShape['props']> = ({ roomId, w, h, userNa
async function sendMessageToChat(roomId: string, 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 const apiUrl = 'https://jeffemmett-realtimechatappwithpolling.web.val.run'; // Replace with your actual Val Town URL
try { try {
const response = await fetch(`${apiUrl}?action=sendMessage`, { const response = await fetch(`${apiUrl}?action=sendMessage`, {
method: 'POST', method: 'POST',
mode: 'no-cors', mode: 'no-cors',
headers: { headers: {
'Content-Type': 'application/json', 'Content-Type': 'application/json',
}, },
body: JSON.stringify({ body: JSON.stringify({
roomId, roomId,
username, username,
content, content,
}), }),
}); });
const result = await response.text(); const result = await response.text();
console.log('Message sent successfully:', result); console.log('Message sent successfully:', result);
} catch (error) { } catch (error) {
console.error('Error sending message:', error); console.error('Error sending message:', error);
} }
} }

4
src/tools/ChatBoxTool.ts
View File

@ -1,7 +1,7 @@
import { BaseBoxShapeTool } from "tldraw"; import { BaseBoxShapeTool } from "tldraw";
export class ChatBoxTool extends BaseBoxShapeTool { export class ChatBoxTool extends BaseBoxShapeTool {
static override id = 'ChatBox' static override id = 'chatBox'
shapeType = 'ChatBox'; shapeType = 'chatBox';
override initial = 'idle'; override initial = 'idle';
} }

10
src/ui-overrides.tsx
View File

@ -19,13 +19,13 @@ export const uiOverrides: TLUiOverrides = {
editor.setCurrentTool('VideoChat') editor.setCurrentTool('VideoChat')
}, },
} }
tools.ChatBox = { tools.chatBox = {
id: 'ChatBox', id: 'chatBox',
icon: 'color', icon: 'color',
label: 'Chat', label: 'Chat',
kbd: 'x', kbd: 'x',
onSelect: () => { onSelect: () => {
editor.setCurrentTool('ChatBox') editor.setCurrentTool('chatBox')
}, },
} }
return tools return tools
@ -35,12 +35,12 @@ export const uiOverrides: TLUiOverrides = {
export const components: TLComponents = { export const components: TLComponents = {
Toolbar: (props) => { Toolbar: (props) => {
const tools = useTools() const tools = useTools()
const isChatBoxSelected = useIsToolSelected(tools['ChatBox']) const isChatBoxSelected = useIsToolSelected(tools['chatBox'])
const isVideoSelected = useIsToolSelected(tools['VideoChat']) const isVideoSelected = useIsToolSelected(tools['VideoChat'])
return ( return (
<DefaultToolbar {...props}> <DefaultToolbar {...props}>
<TldrawUiMenuItem {...tools['VideoChat']} isSelected={isVideoSelected} /> <TldrawUiMenuItem {...tools['VideoChat']} isSelected={isVideoSelected} />
<TldrawUiMenuItem {...tools['ChatBox']} isSelected={isChatBoxSelected} /> <TldrawUiMenuItem {...tools['chatBox']} isSelected={isChatBoxSelected} />
<DefaultToolbarContent /> <DefaultToolbarContent />
</DefaultToolbar> </DefaultToolbar>
) )

2
worker/TldrawDurableObject.ts
View File

@ -15,7 +15,7 @@ import { VideoChatShape } from '@/shapes/VideoChatShapeUtil'
// add custom shapes and bindings here if needed: // add custom shapes and bindings here if needed:
export const customSchema = createTLSchema({ export const customSchema = createTLSchema({
shapes: { ...defaultShapeSchemas, ChatBox: ChatBoxShape, VideoChat: VideoChatShape }, shapes: { ...defaultShapeSchemas, chatBox: ChatBoxShape, VideoChat: VideoChatShape },
// bindings: { ...defaultBindingSchemas }, // bindings: { ...defaultBindingSchemas },
}) })