A basic painting demo with the functions below:

• Paint
• Clear canvas
• Download canvas
• Change the size and color of the pen
• Adjust the size of canvas
• Share link to others to draw together
• Enter & Leave room
• Chat

• Login
• Canvas

• Google login
  • If its the first time for player to use, then register then login
    • ifEmailExist
    • setCookie
  • Else:
    • Record the name, email, googleId, roomid to the session
    • Open Websocket for the room.
• autoLogin
  • Check cookies
• Entering a room with roomid(?) especially for the user

• states
  • startDraw
  • drawing
  • finishDraw
• Transferring data when paniting

{
    type:"draw",
    data: {
        color:string;
        size:number;
        start:{ x:number; y:number }
        end:{ x:number; y:number }
    }
}

• Claer canvas
• Download canvas
• Change the size and color of the pen
• Adjust the size of canvas
• Share link to others to draw together

• Player list
• Chat

• Enter room & Leave room
  • updatePlayers
• Paint
• Chat

• Input npm install in the terminal to install the dependencies
• Input npm start to run project

• React
• TypeScript
• react-color
• Antd
• react-google-login
• useWebsocket

• NodeJS
• ws module
• Mongoose

• There is a conflict in the peer dependencies required by the packages you are trying to install.
• Use the --legacy-peer-deps flag, which will allow npm to ignore the peer dependency conflicts and install the packages anyway. This may also cause issues if there are any incompatible dependencies.

npm install react-google-login --legacy-peer-deps