From 0d1b9da125ebfe4119fe4cd2ce3b5fd70bd4b91a Mon Sep 17 00:00:00 2001 From: Nicholas Date: Fri, 6 Dec 2024 18:00:04 +0000 Subject: [PATCH] chore: bit of refactoring --- apps/web/components/AnyoneCanDraw/index.tsx | 11 +-- .../DrawingCanvas/Components/Chat.tsx | 38 ++++++++++ .../Components/GenerateDrawing.tsx | 42 +++++++++++ .../DrawingCanvas/hooks/useGameState.ts | 20 +++++ apps/web/components/DrawingCanvas/index.tsx | 73 +++++-------------- apps/web/components/DrawingCanvas/types.ts | 3 - 6 files changed, 119 insertions(+), 68 deletions(-) create mode 100644 apps/web/components/DrawingCanvas/Components/Chat.tsx create mode 100644 apps/web/components/DrawingCanvas/Components/GenerateDrawing.tsx diff --git a/apps/web/components/AnyoneCanDraw/index.tsx b/apps/web/components/AnyoneCanDraw/index.tsx index 1e5e61ae..dd7a8e54 100644 --- a/apps/web/components/AnyoneCanDraw/index.tsx +++ b/apps/web/components/AnyoneCanDraw/index.tsx @@ -7,9 +7,6 @@ import { onGenerateDrawing } from '@/components/ChatInterface/actions'; export function AnyoneCanDraw() { const [result, setResult] = useState(null); - // TODO: make this dynamic - const playerId = 'anonymous'; - const playerName = 'Anonymous'; const handleSubmit = async (drawingData: string): Promise => { try { @@ -23,12 +20,6 @@ export function AnyoneCanDraw() { }; return ( - + ); } diff --git a/apps/web/components/DrawingCanvas/Components/Chat.tsx b/apps/web/components/DrawingCanvas/Components/Chat.tsx new file mode 100644 index 00000000..ca2bdc28 --- /dev/null +++ b/apps/web/components/DrawingCanvas/Components/Chat.tsx @@ -0,0 +1,38 @@ +import { GameState } from '../types'; + +export default function Chat({ + gameState, + onGuess, + isDrawer, +}: { + gameState: GameState; + onGuess?: (guess: string) => Promise; + isDrawer: boolean; +}) { + const handleGuess = async (e: React.FormEvent) => { + e.preventDefault(); + const formData = new FormData(e.currentTarget); + const guess = formData.get('guess') as string; + await onGuess?.(guess); + }; + + return ( +
+

Game Guesses:

+
+ {gameState.guesses.map((guess, index) => ( +
+ {guess.playerName}:{' '} + {guess.guess} +
+ ))} + {!isDrawer && TODO: Put a form here to guess} +
+
+ ); +} diff --git a/apps/web/components/DrawingCanvas/Components/GenerateDrawing.tsx b/apps/web/components/DrawingCanvas/Components/GenerateDrawing.tsx new file mode 100644 index 00000000..e89d376c --- /dev/null +++ b/apps/web/components/DrawingCanvas/Components/GenerateDrawing.tsx @@ -0,0 +1,42 @@ +import { Loader2 } from 'lucide-react'; + +import { Button } from '../../ui/button'; +import { GameState } from '../types'; + +export function GenerateDrawing({ + handleSubmit, + loading, + gameState, +}: { + handleSubmit: () => void; + loading: boolean; + gameState: GameState; +}) { + return ( +
+
+

Generate AI Art

+

+ Draw anything you like and get an AI-generated painting based on your + drawing. +

+
+ +
+ ); +} diff --git a/apps/web/components/DrawingCanvas/hooks/useGameState.ts b/apps/web/components/DrawingCanvas/hooks/useGameState.ts index 6fc88025..ad110945 100644 --- a/apps/web/components/DrawingCanvas/hooks/useGameState.ts +++ b/apps/web/components/DrawingCanvas/hooks/useGameState.ts @@ -253,6 +253,25 @@ export function useGameState( [gameState.gameId, playerId] ); + const submitGuess = useCallback( + async (guess: string) => { + if (!wsRef.current || wsRef.current.readyState !== WebSocket.OPEN) { + console.error('WebSocket not connected'); + return; + } + + wsRef.current.send( + JSON.stringify({ + action: 'guess', + gameId: gameState.gameId, + playerId, + guess, + }) + ); + }, + [gameState.gameId, playerId] + ); + return { isConnected, gameState, @@ -264,5 +283,6 @@ export function useGameState( endGame, leaveGame, updateDrawing, + submitGuess, }; } diff --git a/apps/web/components/DrawingCanvas/index.tsx b/apps/web/components/DrawingCanvas/index.tsx index b8dadbd9..07f9835a 100644 --- a/apps/web/components/DrawingCanvas/index.tsx +++ b/apps/web/components/DrawingCanvas/index.tsx @@ -1,7 +1,6 @@ 'use client'; import { useRef, useState, useEffect } from 'react'; -import { Loader2 } from 'lucide-react'; import { Button } from '@/components/ui/button'; @@ -14,15 +13,14 @@ import { Result } from './Components/Result'; import { Canvas } from './Components/Canvas'; import { useGameState } from './hooks/useGameState'; import { GameStatus } from './Components/GameStatus'; +import Chat from './Components/Chat'; +import { GenerateDrawing } from './Components/GenerateDrawing'; export function DrawingCanvas({ onSubmit, - onGuess, result, gameMode, gameId, - playerId, - playerName, }: DrawingCanvasProps) { const canvasRef = useRef(null); const [loading, setLoading] = useState(false); @@ -129,6 +127,10 @@ export function DrawingCanvas({ } }; + // TODO: make this dynamic (user should enter them) + const playerId = 'anonymous'; + const playerName = 'Anonymous'; + const { isConnected, gameState, @@ -140,12 +142,8 @@ export function DrawingCanvas({ endGame, leaveGame, updateDrawing, - } = useGameState( - gameId, - playerId || 'anonymous', - playerName || 'Anonymous', - clearCanvas - ); + submitGuess, + } = useGameState(gameId, playerId, playerName, clearCanvas); const handleDrawingComplete = async () => { if ( @@ -220,31 +218,11 @@ export function DrawingCanvas({
{!gameState.isActive && ( -
-
-

Generate AI Art

-

- Draw anything you like and get an AI-generated painting - based on your drawing. -

-
- -
+ )} {gameMode && ( @@ -265,26 +243,11 @@ export function DrawingCanvas({
{gameState.isActive && ( -
-

Game Guesses:

-
- {gameState.guesses.map((guess, index) => ( -
- - {guess.playerName}: - {' '} - {guess.guess} -
- ))} -
-
+ )} )} diff --git a/apps/web/components/DrawingCanvas/types.ts b/apps/web/components/DrawingCanvas/types.ts index 5d342fb9..06ac5313 100644 --- a/apps/web/components/DrawingCanvas/types.ts +++ b/apps/web/components/DrawingCanvas/types.ts @@ -18,9 +18,6 @@ interface DrawingCanvasProps { result: string | null; gameMode?: boolean; gameId?: string; - playerId?: string; - playerName?: string; - onGuess?: (drawingData: string) => Promise; clearCanvas?: () => void; }