Merge branch 'main' into feat/api

isd-sgcu · Mar 30, 2024 · cc099d7 · cc099d7
2 parents 8da88b8 + ee88b3c
commit cc099d7
Show file tree

Hide file tree

Showing 12 changed files with 180 additions and 132 deletions.
diff --git a/.github/workflows/cd.yaml b/.github/workflows/cd.yaml
@@ -2,12 +2,28 @@ name: 'CD'
 
 on:
   workflow_dispatch:
+    inputs:
+      tag:
+        description: 'Tag to change to'
+        default: 'latest'
+        required: false
+        type: string
+
+env:
+  IMAGE_NAME: registry.digitalocean.com/cutu2024/cutu2024-backend
 
 jobs:
   deploy:
     runs-on: ubuntu-latest
 
     steps:
+      - name: Set new image tag
+        uses: actions-hub/kubectl@master
+        env:
+          KUBE_CONFIG: ${{ secrets.KUBE_CONFIG }}
+        with:
+          args: set image deployment/cutu2024-backend cutu2024-backend=${{ env.IMAGE_NAME }}:${{ inputs.tag }}
+
       - name: Rollout new deployment
         uses: actions-hub/kubectl@master
         env:

diff --git a/.github/workflows/ci.yaml b/.github/workflows/ci.yaml
@@ -1,10 +1,13 @@
 name: 'CI'
 
 on:
-  push:
-    branches:
-      - main
   workflow_dispatch:
+    inputs:
+      tag:
+        description: 'Image tag'
+        default: 'latest'
+        required: false
+        type: string
 
 env:
   IMAGE_NAME: registry.digitalocean.com/cutu2024/cutu2024-backend
@@ -40,6 +43,6 @@ jobs:
         with:
           push: true
           context: "{{defaultContext}}:apps/server"
-          tags: ${{ env.IMAGE_NAME }}:latest
+          tags: ${{ env.IMAGE_NAME }}:${{ inputs.tag }}
           cache-from: type=gha,ref=${{ env.IMAGE_NAME }}:buildcache
           cache-to: type=gha,ref=${{ env.IMAGE_NAME }}:buildcache,mode=max
diff --git a/apps/web/package.json b/apps/web/package.json
@@ -13,15 +13,14 @@
     "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"
+    "universal-cookie": "^7.1.0",
+    "uuid": "^9.0.1"
   },
   "devDependencies": {
     "@types/js-cookie": "^3.0.6",

diff --git a/apps/web/pnpm-lock.yaml b/apps/web/pnpm-lock.yaml
diff --git a/apps/web/public/user/qrcode.svg b/apps/web/public/user/qrcode.svg
diff --git a/apps/web/src/app/(screen)/display/components/FootBallSlider.tsx b/apps/web/src/app/(screen)/display/components/FootBallSlider.tsx
@@ -52,7 +52,7 @@ const FootBallSlider = (props: FootBallSliderProps) => {
             transition: "left 0.3s ease",
           }}
         >
-          <div className="relative w-[150px] h-[150px]"><Image
+          <div className="relative w-[250px] h-[250px]"><Image
             src={"slider/ball.svg"}
             fill
             objectFit="contain"

diff --git a/apps/web/src/app/(screen)/screen/components/Display.tsx b/apps/web/src/app/(screen)/screen/components/Display.tsx
@@ -19,6 +19,8 @@ const Display= ({ data }: DisplayProps) => {
   const [state, setState] = useState<'cu' | 'tu' | 'none'>('none');
   const { status, tu, cu } = data;
 
+
+
   useEffect(() => {
         if (status == 'stop') {
             if (tu > cu) {

diff --git a/apps/web/src/app/(screen)/screen/components/Overlay.tsx b/apps/web/src/app/(screen)/screen/components/Overlay.tsx
@@ -10,9 +10,8 @@ interface OverLayProps {
 }
 
 const Page = ({data} : OverLayProps) => {
-    console.log(data)
     return (  
-        <div className="w-full h-full bg-[#3dff3d] text-white text-3xl font-bold flex flex-col justify-between p-[50px]">
+        <div className="w-full h-full bg-[#3dff3d] text-white text-3xl font-bold flex flex-col justify-between p-[50px] pb-[100px]">
             <div className="flex justify-between">
                 <div className="flex flex-col items-center gap-10">
                     <Image
@@ -50,7 +49,7 @@ const Page = ({data} : OverLayProps) => {
                 </div>
             </div>
             <div>
-                <div className="flex justify-between mb-4">
+                <div className="flex justify-between mb-[50px]">
                     <div className="flex flex-col items-center">
                         <Image
                             src="overlay/team-cu.svg"
@@ -78,6 +77,7 @@ const Page = ({data} : OverLayProps) => {
 
 
 const OverLay = ({data}: OverLayProps) => {
+
     return (  
         <div className="w-[3840px] h-[1080px] flex">
             <Page data = {data}/>

diff --git a/apps/web/src/app/(screen)/screen/page.tsx b/apps/web/src/app/(screen)/screen/page.tsx
@@ -4,26 +4,26 @@ import { useEffect, useState } from "react";
 import OverLay from "./components/Overlay";
 import Display from "./components/Display";
 import Cookies from "universal-cookie";
-import FingerprintJS from "@fingerprintjs/fingerprintjs";
 import { Socket, io } from "socket.io-client";
+import { v4 as uuidv4 } from 'uuid';
 
 const Screen = () => {
+    let fid: string | null = null;
     const [showedPage, setShowPage] = useState<"overlay" | "display">("overlay");
     const [ data, setData ] = useState({
         status: "waiting",
-        cu: 0,
-        tu: 0
+        cu: 50,
+        tu: 50
     })
-    const cookies = new Cookies( null, { path: "/" } )
-    //console.log(data)
+    const cookies = new Cookies( null, {httpOnly: true} )
+    console.log(data)
+    //console.log('show: ', showedPage)
 
     useEffect(() => {
         const handleConnect = (socket: Socket) => {
             console.log('Client has connected to the server!');
-            setTimeout(() => {
-                console.log('Subscribing');
-                socket.emit('subscribe', '123');
-            }, 3000);
+            console.log('Subscribing');
+            socket.emit('subscribe', '123');
         };
 
         const handleScoreBoard = (scoreString: string) => {
@@ -33,13 +33,13 @@ const Screen = () => {
             const cuScore = Math.round(parseFloat(parts[1]));
             const tuScore = Math.round(parseFloat(parts[3]));
 
-            //console.log({cuScore, tuScore}  )
-            setData({...data, cu: cuScore, tu: tuScore})
+            //console.log({cuScore, tuScore})
+            setData(data => ({...data, cu: cuScore, tu: tuScore}))
         }
 
         const handleScreen = (screen: string) => {
-            //console.log(screen);
-            //setShowPage('full' ? 'overlay' : 'display')
+            console.log(screen);
+            setShowPage(screen == 'overlay' ? 'overlay' : 'display')
         }
 
         const handleCid = (serverCid: string) => {
@@ -54,28 +54,25 @@ const Screen = () => {
 
         const handleEvents = (events: string) => {
             console.log(events)
-            setData({...data, status: events})
+            setData(data =>  ({...data, status: events}))
         }
 
         const handleDisconnect = () => {
             console.log('The client has disconnected!');
         };
 
         (async () => {
-            const savedCid = cookies.get('cid');
-
-            if(!cookies.get('fid')){
-                const fp = await FingerprintJS.load();
-                const result = await fp.get();
-                const fid = result.visitorId;
-                cookies.set('fid', fid)
+            fid = cookies.get('fid');
+            if (!fid) {
+                fid = uuidv4(); 
+                cookies.set('fid', fid);
             }
-
-            const fid = cookies.get('fid')
-            
+        
+            const savedCid = cookies.get('cid');
+
             const extraHeaders: { [key: string]: string } = {
-                fid: fid,
-                name: 'pun1'
+                fid: fid || '',
+                name: 'john'
             };
 
             if (savedCid) {
@@ -97,17 +94,17 @@ const Screen = () => {
             socket.on('events', handleEvents);
             socket.on('screen', handleScreen);
 
-
             return () => {
                 socket?.disconnect();
             };
+
         })();
     }, []);   
 
     return (  
-        <div>
+        <div className="bg-[#3dff3d]">
             {showedPage == "overlay" ? <OverLay data={data}/> : <Display data={data}/>}
-            <button className="w-[200px] h-[200px] bg-white" onClick={() => setShowPage(prev => prev == "overlay" ? "display" : "overlay")}>เปลี่ยนหน้า</button>
+            {/* <button className="w-[200px] h-[200px] bg-white" onClick={() => setShowPage(prev => prev == "overlay" ? "display" : "overlay")}>เปลี่ยนหน้า</button> */}
         </div>
     );
 }