✨ classement

Author: Charles-Chrismann

backend/controllers/Chat.ts

@@ -1,3 +1,6 @@
+import {Socket} from 'socket.io'
+import ChatMessagePayload from '../../common/requests/ChatMessagePayload'
+
 class ChatController {
     /**
      * Broadcasts a message to all connected clients
@@ -6,7 +9,7 @@ class ChatController {
      * @param data The message data
      * @param socket The client socket
      */
-    public static async broadcastMessage(data: ChatMessagePayload, socket: SocketIO.Socket) {
+    public static async broadcastMessage(data: ChatMessagePayload, socket: Socket) {
         // TODO: Broadcast the message to all clients
         /**
          * VALIDATION

backend/index.ts

@@ -22,13 +22,11 @@ WSS.io.on("connection", (socket: Socket) => {
     const userAgent = socket.handshake.headers["user-agent"];
     console.log(`Socket connected from ${ip} using ${userAgent}`);
 
+    WSS.updateClassement(socket)
+
     socket.on("place-pixel", (data) => CanvasController.placePixel(data, socket));
     socket.on("message", (data) => ChatController.broadcastMessage(data, socket));
 
-    socket.on('ev', (data) => {
-      console.log(data)
-    })
-
     socket.on("disconnect", () => {
         console.log("Socket disconnected");
     });

backend/server/Websocket.ts

@@ -1,5 +1,8 @@
 import type http from "http";
 import SocketIO from "socket.io";
+import { PrismaClient } from '@prisma/client'
+
+const client = new PrismaClient()
 
 class WSS {
     public static io: SocketIO.Server;
@@ -11,6 +14,20 @@ class WSS {
           }
         });
     }
+
+    static async updateClassement(socket?: SocketIO.Socket) {
+      const classement = await client.account.findMany({
+        select: {
+          devinciEmail: true,
+          placedPixels: true
+        },
+        orderBy: {
+          placedPixels: 'desc'
+        }
+      });
+      if(!socket) this.io.emit('classementUpdate', classement)
+      else socket.emit('classementUpdate', classement)
+    }
 }
 
 export default WSS;

common/interfaces/classementItem.interface.ts

@@ -0,0 +1,6 @@
+interface classementItem {
+  devinciEmail: string;
+  placedPixels: number;
+}
+
+export default classementItem

frontend/src/App.tsx

@@ -1,8 +1,37 @@
 // import { useState } from 'react'
+import { useEffect, useState } from 'react';
 import './App.css'
 import LoginComponent from './pages/login'
+import { socket } from './socket';
+import classementItem from '../../common/interfaces/classementItem.interface'
 
 function App() {
+  const [classement, setClassement] = useState<classementItem[]>([])
+  const [isConnected, setIsConnected] = useState(socket.connected);
+
+  useEffect(() => {
+    function onConnect() {
+      setIsConnected(true);
+    }
+
+    function onDisconnect() {
+      setIsConnected(false);
+    }
+
+    function onclassementUpdate(data: classementItem[]) {
+      setClassement(data)
+    }
+
+    socket.on('connect', onConnect);
+    socket.on('disconnect', onDisconnect);
+    socket.on('classementUpdate', onclassementUpdate);
+
+    return () => {
+      socket.off('connect', onConnect);
+      socket.off('disconnect', onDisconnect);
+      socket.off('classementUpdate', onclassementUpdate);
+    };
+  }, []);
 
   // affichage (render)
   return (

frontend/src/socket.ts

@@ -0,0 +1,6 @@
+import { io } from 'socket.io-client';
+
+// "undefined" means the URL will be computed from the `window.location` object
+const URL = process.env.NODE_ENV === 'production' ? undefined : 'http://localhost:3000';
+
+export const socket = io(URL);