feat(collab): added collaborative canvas

backend/src/config/socket.js

@@ -4,7 +4,6 @@ const { Server } = require('socket.io');
 const { verifyToken } = require('../utils');
 const games = require('../models/game.model.js');
 const { createRoom, joinRoom, disconnected, generateWord, setCurrentWord, checkGuess } = require('../services/game.services.js');
-const { getData, storeData } = require('../config/redis.js');
 
 function socketConnection(server) {
 
@@ -156,6 +155,10 @@ function socketConnection(server) {
             callback(res);
         })
 
+        socket.on('draw-line', async(prevPoint, currentPoint, secretcode) => {
+            socket.to(secretcode).emit('draw-line', {prevPoint, currentPoint})
+        })
+
         // socket.onAny((event, ...args) => {
         //     console.log(event, args);
         // });

frontend/src/context/GameContext.tsx

@@ -1,4 +1,4 @@
-import { createContext, useContext, useState, ReactNode } from "react";
+import { createContext, useContext, useState, useRef, ReactNode, MutableRefObject } from "react";
 
 export type player = {
     username: string;
@@ -12,6 +12,11 @@ export type gameResponse = {
     error?: string;
 }
 
+type Point = {
+    x:number;
+    y:number;
+}
+
 type words = [string] | undefined
 
 export type GameContextType = {
@@ -21,6 +26,10 @@ export type GameContextType = {
     setOpenDialog: (open: boolean) => void;
     words: [string] | undefined;
     setWords: (words: words) => void;
+    canvasRef: MutableRefObject<HTMLCanvasElement | null>;
+    prevPoint: MutableRefObject<Point | null>;
+    mouseDown: boolean;
+    setMouseDown: (newValue: boolean) => void;
 }
 type ContextProps = {
     children: ReactNode;
@@ -33,10 +42,26 @@ function GameContextProvider({ children }: ContextProps) {
     const [gameDetails, setGameDetails] = useState<gameResponse | undefined>(undefined);
     const [openDialog, setOpenDialog] = useState<boolean>(false);
     const [words, setWords] = useState<words>(undefined);
+    const canvasRef = useRef<HTMLCanvasElement>(null);
+    const prevPoint = useRef<null | Point>(null);
+    const [mouseDown, setMouseDown] = useState<boolean>(false);
 
-    return <GameContext.Provider value={{ gameDetails, setGameDetails, openDialog, setOpenDialog, words, setWords }}>
-        {children}
-    </GameContext.Provider>
+    return (
+        <GameContext.Provider value={{
+            gameDetails,
+            setGameDetails,
+            openDialog,
+            setOpenDialog,
+            words,
+            setWords,
+            canvasRef,
+            prevPoint,
+            mouseDown,
+            setMouseDown,
+        }}>
+            {children}
+        </GameContext.Provider>
+    )
 }
 
 function useGameContext() {

frontend/src/hooks/useDraw.ts

@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from "react";
+import { useEffect } from "react";
 
 export type Draw = {
     ctx: CanvasRenderingContext2D;
@@ -16,10 +16,11 @@ export type Point = {
     y:number;
 }
 
+import { useGameContext, GameContextType } from "../context/GameContext.tsx";
+
 const useDraw = (drawLine:({currentPoint, prevPoint}:DrawPoints)=>void) =>{
-    const canvasRef = useRef<HTMLCanvasElement>(null);
-    const prevPoint = useRef<null | Point>(null);
-    const [mouseDown, setMouseDown] = useState<boolean>(false);
+
+    const { canvasRef, prevPoint, mouseDown, setMouseDown, } = useGameContext() as GameContextType;
 
     const onMouseDown =()=>{setMouseDown(true)}
     const mouseUphandler =()=>{

frontend/src/hooks/useSocket.ts

@@ -5,7 +5,7 @@ import { io, Socket } from 'socket.io-client';
 
 import { useAuthContext, AuthContextType } from "../context/AuthContext.tsx";
 import { gameResponse, useGameContext, GameContextType } from "../context/GameContext.tsx";
-import { useDraw, DrawPoints } from "./useDraw.ts";
+import { useDraw, DrawPoints, Draw } from "./useDraw.ts";
 
 export type roomCode = {
     error?: string;
@@ -30,7 +30,7 @@ function useSocket() {
 
     const { authUser } = useAuthContext() as AuthContextType;
     const { setGameDetails, setOpenDialog, setWords } = useGameContext() as GameContextType;
-    const { clearCanvas } = useDraw(drawLine);
+    const { clearCanvas, canvasRef } = useDraw(drawLine);
 
     const createSocketConnection = () => {
         if (socket) return;   // Prevent re-initialization
@@ -110,6 +110,38 @@ function useSocket() {
             }
         });
 
+        socket.on('draw-line', ({prevPoint, currentPoint}:DrawPoints)=>{
+            const canvas = canvasRef.current;
+            if(!canvas){
+                return;
+            }
+
+            const ctx = canvas.getContext('2d');
+            if(!ctx){
+                return;
+            }
+
+            function onDraw({ctx, currentPoint, prevPoint}:Draw){
+                const { x:currX, y:currY } = currentPoint;
+                const lineColor = '#ffff';
+                const lineWidth = 5;
+
+                const startPoint = prevPoint ?? currentPoint;
+                ctx.beginPath();
+                ctx.lineWidth = lineWidth;
+                ctx.strokeStyle = lineColor;
+                ctx.moveTo(startPoint.x , startPoint.y);
+                ctx.lineTo(currX, currY);
+                ctx.stroke();
+
+                ctx.fillStyle = lineColor;
+                ctx.beginPath();
+                ctx.arc(startPoint.x, startPoint.y, 2, 0, 2*Math.PI);
+                ctx.fill();
+            }
+            onDraw({ctx, currentPoint, prevPoint});
+        })
+
         socket.on("select-word", gameData => {
             setWords(gameData);
             setOpenDialog(true);

frontend/src/pages/Account.tsx

@@ -1,3 +1,5 @@
+import { memo } from 'react';
+
 import { Button } from "@/components/ui/button"
 import {
   Card,
@@ -106,4 +108,4 @@ function Account() {
   )
 }
 
-export default Account;
+export default memo(Account);

frontend/src/pages/Game.tsx

@@ -1,4 +1,4 @@
-import { useEffect } from 'react';
+import { useEffect, memo } from 'react';
 import { useNavigate } from 'react-router-dom';
 
 import { Input } from "@/components/ui/input"
@@ -161,4 +161,4 @@ function Game() {
   )
 }
 
-export default Game
+export default memo(Game)

frontend/src/pages/GameMenu.tsx

@@ -1,3 +1,4 @@
+import { memo } from 'react';
 import { useNavigate } from 'react-router-dom';
 
 import { Button } from "@/components/ui/button"
@@ -90,4 +91,4 @@ function GameMenu() {
   )
 }
 
-export default GameMenu
+export default memo(GameMenu)