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 670c9ff0b0
commit f384673cf9
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

10
src/shapes/ChatBoxShapeUtil.tsx
View File

@ -2,7 +2,7 @@ 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
@ -12,7 +12,7 @@ export type IChatBoxShape = TLBaseShape<
> >
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);

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 },
}) })