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 React, { useState } from 'react';
import { ChatBox } from '@/shapes/ChatBoxShapeUtil';
import { chatBox } from '@/shapes/ChatBoxShapeUtil';
import { components, uiOverrides } from '@/ui-overrides'
const WORKER_URL = `https://jeffemmett-canvas.jeffemmett.workers.dev`
@ -61,7 +61,7 @@ export function Board() {
onChange={handleNameChange}
placeholder="Enter your name"
/>
<ChatBox
<chatBox
userName={userName}
roomId={roomId} // Added roomId
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";
export type IChatBoxShape = TLBaseShape<
'ChatBox',
{
w: number
h: number
'chatBox',
{
w: number
h: number
roomId: string
userName: string
}
}
>
export class ChatBoxShape extends BaseBoxShapeUtil<IChatBoxShape> {
static override type = 'ChatBox'
static override type = 'chatBox'
getDefaultProps(): IChatBoxShape['props'] {
return {
@ -29,7 +29,7 @@ export class ChatBoxShape extends BaseBoxShapeUtil<IChatBoxShape> {
component(shape: IChatBoxShape) {
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
export const ChatBox: React.FC<IChatBoxShape['props']> = ({ roomId, w, h, userName }) => {
// Update the chatBox component to accept userName
export const chatBox: React.FC<IChatBoxShape['props']> = ({ roomId, w, h, userName }) => {
const [messages, setMessages] = useState<Message[]>([]);
const [inputMessage, setInputMessage] = useState("");
const [username, setUsername] = useState(userName);
@ -99,7 +99,7 @@ export const ChatBox: React.FC<IChatBoxShape['props']> = ({ roomId, w, h, userNa
{messages.map((msg) => (
<div key={msg.id} className={`message ${msg.username === username ? 'own-message' : ''}`}>
<div className="message-header">
<strong>{msg.username}</strong>
<strong>{msg.username}</strong>
<span className="timestamp">{new Date(msg.timestamp).toLocaleTimeString()}</span>
</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..."
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>
</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> {
const apiUrl = 'https://jeffemmett-realtimechatappwithpolling.web.val.run'; // Replace with your actual Val Town URL
try {
const response = await fetch(`${apiUrl}?action=sendMessage`, {
method: 'POST',
mode: 'no-cors',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
roomId,
username,
content,
}),
});
const result = await response.text();
console.log('Message sent successfully:', result);
const response = await fetch(`${apiUrl}?action=sendMessage`, {
method: 'POST',
mode: 'no-cors',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
roomId,
username,
content,
}),
});
const result = await response.text();
console.log('Message sent successfully:', result);
} 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";
export class ChatBoxTool extends BaseBoxShapeTool {
static override id = 'ChatBox'
shapeType = 'ChatBox';
static override id = 'chatBox'
shapeType = 'chatBox';
override initial = 'idle';
}

10
src/ui-overrides.tsx
View File

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

2
worker/TldrawDurableObject.ts
View File

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