Co-authored-by: Thanapat Chotipun <[email protected]…

….com> (#9)

Co-authored-by: tntons <[email protected]>
Co-authored-by: ImSoZRious <[email protected]>

Co-authored-by: tntons <[email protected]>

apps/web/package.json

@@ -7,24 +7,28 @@
     "pnpm": ">=3"
   },
   "scripts": {
-    "dev": "next dev",
+    "dev": "next dev -H 0.0.0.0 ",
     "build": "next build",
     "start": "next start",
     "lint": "next lint"
   },
   "dependencies": {
     "@fingerprintjs/fingerprintjs": "^4.2.2",
     "axios": "^1.6.8",
+    "js-cookie": "^3.0.5",
     "next": "14.1.4",
     "react": "^18",
     "react-dom": "^18",
     "socket.io-client": "^4.7.5",
+    "uuid": "^9.0.1"
     "universal-cookie": "^7.1.0"
   },
   "devDependencies": {
+    "@types/js-cookie": "^3.0.6",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
+    "@types/uuid": "^9.0.8",
     "autoprefixer": "^10.0.1",
     "postcss": "^8",
     "tailwindcss": "^3.3.0",

apps/web/src/app/(screen)/display/components/FootBallSlider.tsx

@@ -3,6 +3,10 @@
 import React, { useEffect } from "react";
 import Image from "next/image";
 import { useState } from "react";
+import { io } from "socket.io-client";
+import FingerprintJS from "@fingerprintjs/fingerprintjs";
+import Cookies from "js-cookie";
+import {v4 as uuidv4} from 'uuid';
 
 interface FootBallSliderProps {
   sliderHeight: string;
@@ -17,7 +21,59 @@ const FootBallSlider = (props: FootBallSliderProps) => {
   const [position, setPosition] = useState(0);
   const [tu, setTu] = useState(1);
   const [cu, setCu] = useState(1);
+  const [cid, setCid] = useState<string | null>(null);
+  let fid: string | null = null;
 
+  const socket = io("wss://api.cutu2024.sgcu.in.th", {
+    path: "/api/ws",
+    auth: { fid: "1234", name: "hehe", cid: '86ccc208-46ef-488c-acbe-f827629b502d' },
+    transports: ['websocket'],
+  });
+
+  function onConnect() {
+    console.log("connect")
+    console.log(socket.id, socket.connected)
+  }
+  function onDisconnect() {
+    console.log("disconnect")
+    console.log(socket.id, socket.connected)
+  }
+
+  useEffect(() => {
+    socket.on("cid", (serverCid) => {
+      console.log(serverCid);
+      setCid(serverCid);
+      Cookies.set("cid", serverCid, { expires: 365 * 100000 });
+    });
+
+    socket.on("connect", onConnect);
+    socket.on("disconnect", (reason, details) => {
+      console.log(reason);
+
+      // the low-level reason of the disconnection, for example "xhr post error"
+      console.log(details);
+    });
+
+    socket.on("events", (serverCid) => {
+      console.log(serverCid);
+    });
+
+    socket.on("state", (serverCid) => {
+      console.log(serverCid);
+    });
+
+    socket.on("scoreboard", (serverCid) => {
+      console.log(serverCid);
+      const part = serverCid.split(" ");
+
+      const cuScore = parseInt(part[1]);
+      const tuScore = parseInt(part[2]);
+
+      setCu(cuScore);
+      setTu(tuScore);
+      console.log(position, cu, tu);
+    });
+  }, [])
   useEffect(() => {
     //console.log((tu - cu)/(tu + cu) * MAX_LENGTH)
     setPosition((tu - cu)/(tu + cu) * MAX_LENGTH)