From 4cc6ded27739805512c7ff2f4321039f577a9d4f Mon Sep 17 00:00:00 2001 From: Sirawit Chanaburanasak Date: Fri, 29 Mar 2024 05:08:54 +0700 Subject: [PATCH] Co-authored-by: Thanapat Chotipun (#9) Co-authored-by: tntons Co-authored-by: ImSoZRious Co-authored-by: tntons <108630823+tntons@users.noreply.github.com> --- apps/web/package.json | 6 +- apps/web/pnpm-lock.yaml | 29 ++++++++++ .../display/components/FootBallSlider.tsx | 56 +++++++++++++++++++ 3 files changed, 90 insertions(+), 1 deletion(-) diff --git a/apps/web/package.json b/apps/web/package.json index b6c77e3..416e04e 100644 --- a/apps/web/package.json +++ b/apps/web/package.json @@ -7,7 +7,7 @@ "pnpm": ">=3" }, "scripts": { - "dev": "next dev", + "dev": "next dev -H 0.0.0.0 ", "build": "next build", "start": "next start", "lint": "next lint" @@ -15,16 +15,20 @@ "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", diff --git a/apps/web/pnpm-lock.yaml b/apps/web/pnpm-lock.yaml index d15324d..fba1781 100644 --- a/apps/web/pnpm-lock.yaml +++ b/apps/web/pnpm-lock.yaml @@ -11,6 +11,9 @@ dependencies: axios: specifier: ^1.6.8 version: 1.6.8 + js-cookie: + specifier: ^3.0.5 + version: 3.0.5 next: specifier: 14.1.4 version: 14.1.4(react-dom@18.2.0)(react@18.2.0) @@ -23,11 +26,17 @@ dependencies: socket.io-client: specifier: ^4.7.5 version: 4.7.5 + uuid: + specifier: ^9.0.1 + version: 9.0.1 universal-cookie: specifier: ^7.1.0 version: 7.1.0 devDependencies: + '@types/js-cookie': + specifier: ^3.0.6 + version: 3.0.6 '@types/node': specifier: ^20 version: 20.11.30 @@ -37,6 +46,9 @@ devDependencies: '@types/react-dom': specifier: ^18 version: 18.2.22 + '@types/uuid': + specifier: ^9.0.8 + version: 9.0.8 autoprefixer: specifier: ^10.0.1 version: 10.4.19(postcss@8.4.38) @@ -228,6 +240,9 @@ packages: tslib: 2.6.2 dev: false + /@types/js-cookie@3.0.6: + resolution: {integrity: sha512-wkw9yd1kEXOPnvEeEV1Go1MmxtBJL0RR79aOTAApecWFVu7w0NNXNqhcWgvw2YgZDYadliXkl14pa3WXw5jlCQ==} + dev: true /@types/cookie@0.6.0: resolution: {integrity: sha512-4Kh9a6B2bQciAhf7FSuMRRkUWecJgJu9nPnx3yzpsfXX/c50REIqpHY4C82bXP90qrLtXtkDxTZosYO3UpOwlA==} dev: false @@ -260,6 +275,10 @@ packages: resolution: {integrity: sha512-YIoDCTH3Af6XM5VuwGG/QL/CJqga1Zm3NkU3HZ4ZHK2fRMPYP1VczsTUqtsf43PH/iJNVlPHAo2oWX7BSdB2Hw==} dev: true + /@types/uuid@9.0.8: + resolution: {integrity: sha512-jg+97EGIcY9AGHJJRaaPVgetKDsrTgbRjQ5Msgjh/DQKEFl0DtyRr/VCOyD1T2R1MNeWPK/u7JoGhlDZnKBAfA==} + dev: true + /ansi-regex@5.0.1: resolution: {integrity: sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==} engines: {node: '>=8'} @@ -664,6 +683,11 @@ packages: hasBin: true dev: true + /js-cookie@3.0.5: + resolution: {integrity: sha512-cEiJEAEoIbWfCZYKWhVwFuvPX1gETRYPw6LlaTKoxD3s2AkXzkCjnp6h0V77ozyqj0jakteJ4YqDJT830+lVGw==} + engines: {node: '>=14'} + dev: false + /js-tokens@4.0.0: resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==} dev: false @@ -1198,6 +1222,11 @@ packages: resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==} dev: true + /uuid@9.0.1: + resolution: {integrity: sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA==} + hasBin: true + dev: false + /which@2.0.2: resolution: {integrity: sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==} engines: {node: '>= 8'} diff --git a/apps/web/src/app/(screen)/display/components/FootBallSlider.tsx b/apps/web/src/app/(screen)/display/components/FootBallSlider.tsx index 034ac8b..156e47a 100644 --- a/apps/web/src/app/(screen)/display/components/FootBallSlider.tsx +++ b/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(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)