Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Appearance settings

Commit 6cd1003

Browse filesBrowse files
coderommcoderomm
committed
stage: inprogress for vercel deploy
1 parent 3e37bbc commit 6cd1003
Copy full SHA for 6cd1003

File tree

11 files changed

+399
-210
lines changed
Filter options

11 files changed

+399
-210
lines changed

‎apps/collabydraw/components/UserRoomsListDialog.tsx

Copy file name to clipboardExpand all lines: apps/collabydraw/components/UserRoomsListDialog.tsx
+5-10Lines changed: 5 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
'use client'
22

33
import { Button } from "./ui/button";
4-
import { LogIn, Plus, Trash } from "lucide-react";
4+
import { LogIn, Trash } from "lucide-react";
55
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "./ui/dialog";
66
import { toast } from "sonner";
77
import { getUserRooms, joinRoom, deleteRoom } from "@/actions/room";
@@ -151,10 +151,10 @@ export function UserRoomsListDialog({
151151
<Dialog open={open} onOpenChange={onOpenChange}>
152152
<DialogContent className="glass-panel gap-6 max-w-lg bg-island-bg-color border border-dialog-border-color shadow-modal-shadow rounded-lg p-10" overlayClassName="bg-[#12121233]">
153153
<DialogHeader className="gap-6">
154-
<DialogTitle className="flex items-center justify-center w-full font-bold text-xl text-color-primary tracking-[0.75px]">All Your Rooms</DialogTitle>
154+
<DialogTitle className="flex items-center justify-center w-full font-bold text-xl text-color-primary tracking-[0.75px]">{isLoading ? 'Loading' : rooms.length > 0 ? ('All Your Rooms') : ('No room found')}</DialogTitle>
155155
</DialogHeader>
156156

157-
<div className="space-y-4 max-h-60 overflow-y-auto">
157+
<div className="space-y-4 max-h-60">
158158
{isLoading ? (
159159
Array(3).fill(0).map((_, index) => (
160160
<div key={index} className="border border-gray-700 p-3 rounded-md">
@@ -186,19 +186,14 @@ export function UserRoomsListDialog({
186186
</div>
187187
))
188188
) : (
189-
<div className="text-center py-8 text-gray-400">
190-
<h3 className="font-assistant font-semibold text-[0.875rem] indent-[150%] text-collaby-textfield-label mb-1 select-none">No rooms found.</h3>
189+
<div className="text-center py-8">
191190
<Button
192191
type="button"
193192
size={"lg"}
194193
onClick={() => { setIsOpen(true); }}
195194
disabled={isPending}
196195
className="py-2 px-6 min-h-12 rounded-md text-[.875rem] font-semibold shadow-none bg-color-primary hover:bg-brand-hover active:bg-brand-active active:scale-[.98]"
197-
title="Create a Room">
198-
<div className="flex items-center justify-center gap-3 shrink-0 flex-nowrap">
199-
<Plus className="w-5 h-5" />Create a Room
200-
</div>
201-
</Button>
196+
title="Create a Room">Create a Room</Button>
202197
<CollaborationStartdDialog open={isOpen} onOpenChange={setIsOpen} />
203198
</div>
204199
)}

‎apps/collabydraw/components/canvas/CanvasSheet.tsx

Copy file name to clipboardExpand all lines: apps/collabydraw/components/canvas/CanvasSheet.tsx
+18-41Lines changed: 18 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
"use client"
22

33
import { Game } from "@/draw/Game";
4-
import { BgFill, canvasBgLight, Shape, StrokeEdge, StrokeFill, StrokeStyle, StrokeWidth, ToolType } from "@/types/canvas";
4+
import { BgFill, canvasBgLight, StrokeEdge, StrokeFill, StrokeStyle, StrokeWidth, ToolType } from "@/types/canvas";
55
import React, { SetStateAction, useCallback, useEffect, useRef, useState } from "react";
66
import { Scale } from "../Scale";
77
import { MobileNavbar } from "../mobile-navbar";
@@ -22,7 +22,6 @@ export default function CanvasSheet({ roomName, roomId, userId, userName, token
2222
roomName: string; roomId: string; userId: string; userName: string; token: string;
2323
}) {
2424
const { theme } = useTheme()
25-
const [canvasColor, setCanvasColor] = useState<string>(canvasBgLight[0]);
2625
const canvasRef = useRef<HTMLCanvasElement>(null);
2726
const paramsRef = useRef({ roomId, roomName, userId, userName, token });
2827
const router = useRouter();
@@ -56,14 +55,15 @@ export default function CanvasSheet({ roomName, roomId, userId, userName, token
5655
} = useWebSocket(paramsRef.current.roomId, paramsRef.current.roomName, paramsRef.current.userId, paramsRef.current.userName, paramsRef.current.token);
5756

5857
useEffect(() => {
59-
setCanvasColor(canvasBgLight[0]);
58+
setCanvasState(prev => ({ ...prev, canvasColor: canvasBgLight[0] }));
6059
}, [theme])
6160

6261
useEffect(() => {
6362
const { game, scale } = canvasState;
6463
if (game) {
6564
game.setScale(scale);
6665
}
66+
// eslint-disable-next-line react-hooks/exhaustive-deps
6767
}, [canvasState.game, canvasState.scale]);
6868

6969
useEffect(() => {
@@ -97,37 +97,6 @@ export default function CanvasSheet({ roomName, roomId, userId, userName, token
9797
}
9898
}, []);
9999

100-
// eslint-disable-next-line @typescript-eslint/no-explicit-any
101-
const processMessages = useCallback((messages: any[]) => {
102-
const newExistingShapes: Shape[] = [];
103-
104-
messages.forEach(message => {
105-
switch (message.type) {
106-
case WsDataType.DRAW:
107-
if (!newExistingShapes.some(s => s.id === message.id)) {
108-
newExistingShapes.push(message.message);
109-
}
110-
break;
111-
case WsDataType.UPDATE:
112-
const index = newExistingShapes.findIndex(s => s.id === message.id);
113-
if (index !== -1) {
114-
newExistingShapes[index] = {
115-
...newExistingShapes[index],
116-
...message.message
117-
};
118-
}
119-
break;
120-
case WsDataType.ERASER:
121-
const filteredShapes = newExistingShapes.filter(s => s.id !== message.id);
122-
newExistingShapes.length = 0;
123-
newExistingShapes.push(...filteredShapes);
124-
break;
125-
}
126-
});
127-
128-
return newExistingShapes;
129-
}, []);
130-
131100
const initializeGame = useCallback(() => {
132101
if (!canvasRef.current || !isConnected) return null;
133102

@@ -140,6 +109,9 @@ export default function CanvasSheet({ roomName, roomId, userId, userName, token
140109
const game = new Game(
141110
canvasRef.current,
142111
paramsRef.current.roomId,
112+
paramsRef.current.roomName,
113+
paramsRef.current.userId,
114+
paramsRef.current.userName,
143115
canvasState.canvasColor,
144116
handleSendDrawing,
145117
(newScale) => setCanvasState(prev => ({ ...prev, scale: newScale })),
@@ -177,11 +149,12 @@ export default function CanvasSheet({ roomName, roomId, userId, userName, token
177149
}, [initializeGame, handleKeyDown]);
178150

179151
useEffect(() => {
152+
console.log('messages length = ', messages.length)
180153
if (messages.length > 0 && canvasState.game) {
181-
const processedShapes = processMessages(messages);
182-
canvasState.game.updateShapes(processedShapes);
154+
canvasState.game.updateShapes(messages);
155+
console.log('messages = ', messages)
183156
}
184-
}, [messages, canvasState.game, processMessages]);
157+
}, [messages, canvasState.game]);
185158

186159
useEffect(() => {
187160
if (existingMsgs?.message && canvasState.game) {
@@ -215,8 +188,10 @@ export default function CanvasSheet({ roomName, roomId, userId, userName, token
215188
<MainMenuStack
216189
isOpen={canvasState.sidebarOpen}
217190
onClose={() => setCanvasState(prev => ({ ...prev, sidebarOpen: false }))}
218-
canvasColor={canvasColor}
219-
setCanvasColor={setCanvasColor}
191+
canvasColor={canvasState.canvasColor}
192+
setCanvasColor={(newCanvasColor: SetStateAction<string>) =>
193+
setCanvasState(prev => ({ ...prev, canvasColor: typeof newCanvasColor === 'function' ? newCanvasColor(prev.canvasColor) : newCanvasColor }))
194+
}
220195
roomName={roomName}
221196
onCloseRoom={() => {
222197
sendMessage(
@@ -300,8 +275,10 @@ export default function CanvasSheet({ roomName, roomId, userId, userName, token
300275
<MobileNavbar
301276
sidebarOpen={canvasState.sidebarOpen}
302277
setSidebarOpen={() => setCanvasState(prev => ({ ...prev, sidebarOpen: !prev.sidebarOpen }))}
303-
canvasColor={canvasColor}
304-
setCanvasColor={setCanvasColor}
278+
canvasColor={canvasState.canvasColor}
279+
setCanvasColor={(newCanvasColor: SetStateAction<string>) =>
280+
setCanvasState(prev => ({ ...prev, canvasColor: typeof newCanvasColor === 'function' ? newCanvasColor(prev.canvasColor) : newCanvasColor }))
281+
}
305282
scale={canvasState.scale}
306283
setScale={(newScale: SetStateAction<number>) =>
307284
setCanvasState(prev => ({ ...prev, scale: typeof newScale === 'function' ? newScale(prev.scale) : newScale }))

‎apps/collabydraw/components/canvas/StandaloneCanvas.tsx

Copy file name to clipboardExpand all lines: apps/collabydraw/components/canvas/StandaloneCanvas.tsx
+4Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -194,6 +194,9 @@ export function StandaloneCanvas() {
194194
const game = new Game(
195195
canvasRef.current,
196196
null,
197+
null,
198+
null,
199+
null,
197200
canvasColorRef.current,
198201
null,
199202
(newScale) => setScale(newScale),
@@ -290,6 +293,7 @@ export function StandaloneCanvas() {
290293
const handleToolSelect = (tool: ToolType) => {
291294
setActiveTool(tool);
292295
game?.setTool(tool);
296+
console.log('existingShapes = ', existingShapes)
293297
if (tool !== "selection") {
294298
game?.updateShapes(existingShapes);
295299
}

0 commit comments

Comments
0 (0)
Morty Proxy This is a proxified and sanitized view of the page, visit original site.