ADD:Backend Linking

.gitignore

@@ -95,7 +95,7 @@ dist
 .cache/
 # Comment in the public line in if your project uses Gatsby and not Next.js
 # https://nextjs.org/blog/next-9-1#public-directory-support
-# public
+public
 
 # vuepress build output
 .vuepress/dist

backend/Dockerfile.dev

@@ -8,4 +8,4 @@ RUN npm install
 
 COPY ./code . 
 
-CMD ["sh", "-c","npx prisma studio & npm run start:dev"]
+CMD ["sh", "-c","npx prisma db push --force-reset &&  npx prisma studio & npm run start:dev"]

backend/code/src/auth/auth.controller.ts

@@ -49,14 +49,15 @@ export class AuthController {
   @ApiExcludeEndpoint()
   @Get('login/42/return')
   @UseGuards(FtOauthGuard)
-  @Redirect('/')
+  @Redirect(process.env.FRONT_URL + '/Home')
   login42Return() {
     return;
   }
 
   @Get('logout')
   @ApiCookieAuth('X-Refresh-Token')
   @UseGuards(RtGuard)
+  @Redirect(process.env.FRONT_URL)
   async logout(
     @GetCurrentUser('userId') userId: string,
     @Res({ passthrough: true }) res: Response,

frontend/code/package.json

@@ -25,6 +25,7 @@
     "react-hook-form": "^7.46.1",
     "react-hot-toast": "^2.4.1",
     "react-icons": "^4.10.1",
+    "react-konva": "^18.2.10",
     "react-scripts": "^5.0.1",
     "typescript": "^4.9.5",
     "web-vitals": "^2.1.4",

frontend/code/src/Api/base.tsx

@@ -2,9 +2,10 @@ import axios from 'axios'
 export const api = axios.create({
         baseURL: `${process.env.REACT_APP_API_ENDPOINT}`,
         timeout: 10000,
-        withCredentials:false,
+        withCredentials:true,
         headers: {
                 "Cache-Control": "no-cache",
-                "Content-Type": "application/x-www-form-urlencoded",
+                'Content-Type': 'application/json',
+
               },
 });

frontend/code/src/Components/Lobby/index.tsx → frontend/code/src/Components/FirstLogin/index.tsx

@@ -1,5 +1,5 @@
 
-export const Lobby =  () =>
+export const FirstLogin =  () =>
 {
     return (
         <div  className="flex h-screen bg-base-100">

frontend/code/src/Components/Game/States/GameState.ts

@@ -0,0 +1,49 @@
+import { create } from 'zustand'
+
+type GameStateType = {
+  width:number;
+  height:number;
+  mobile:boolean;
+  ball:{
+    x:number,
+    y:number,
+    speed:number,
+    cx:number,
+    cy:number,
+  };
+  lPaddle:number;
+  rPaddle:number;
+  p1Score:number;
+  p2Score:number;
+  ballOwner:number;
+}
+
+type GameActions = {
+  setHeight  : (h: GameStateType['height']) => void;
+  setWidth   : (w : GameStateType['width']) => void;
+  setLPaddle : (lp : GameStateType['lPaddle']) => void;
+  setRPaddle : (rp : GameStateType['rPaddle']) => void;
+  setBall    : (pos : GameStateType['ball']) => void;
+  setMobile  : (isMobile : GameStateType['mobile']) => void;
+
+}
+
+export const useGameState = create<GameStateType & GameActions>((set)=> ({
+  width : 0,
+  height : 0,
+  mobile : false,
+  ball : {x: 0,y:0,speed:0,cx:0,cy:0},
+  lPaddle : 0,
+  rPaddle : 0,
+  p1Score:0,
+  p2Score:0,
+  ballOwner:-1,
+  setHeight : (h) => set(() => ({height : h})),
+  setWidth : (w) => set(() => ({width : w})),
+  setLPaddle : (lp) => set(() => ({lPaddle : lp})),
+  setRPaddle : (rp) => set(() => ({rPaddle : rp})),
+  setMobile : (isMobile ) => set(() => ({mobile:isMobile})),
+  setBall : (pos) => set(() => ({ball:pos})),
+
+
+}))

frontend/code/src/Components/Game/index.tsx

@@ -0,0 +1,141 @@
+import { useEffect , useState} from "react"
+import { Rect, Stage , Layer , Circle, Line} from "react-konva"
+import { BsFillArrowRightCircleFill, BsFillArrowLeftCircleFill} from "react-icons/bs";
+import { useUserStore } from "../../Stores/stores";
+import { useGameState } from "./States/GameState";
+
+const DURATION = 20;
+type  ball ={
+  x:number,
+  y:number,
+  speed:number,
+  cx:number,
+  cy:number,
+};
+const throttle = (function() {
+  let timeout:any = undefined;
+  return function throttle(callback:any) {
+    if (timeout === undefined) {
+      callback();
+      timeout = setTimeout(() => {
+        timeout = undefined;
+      }, DURATION);
+    }
+  }
+})();
+
+
+function throttlify(callback : any) {
+  return function throttlified(event :any) {
+    throttle(() => {
+      callback(event);
+    });
+  }
+}
+
+export const Game = () => {
+    const gameState = useGameState();
+    const user = useUserStore();    
+    const [first , setFirest] = useState(false)
+    const handleMove = throttlify((e :any) => {
+
+        const margin = (gameState.height / 6) / 2;
+        if (e.evt.layerY  <= (gameState.height - margin) &&  e.evt.layerY >= margin)
+        gameState.setLPaddle(e.evt.layerY - margin)
+    })
+    // useEffect(() => {
+
+
+    // },[gameState.height, gameState.width])
+    useEffect(() => {
+        window.addEventListener('resize', () => {
+            const divh = document.getElementById('Game')?.offsetHeight
+            const divw = document.getElementById('Game')?.offsetWidth
+            if (divh) gameState.setHeight(divh);
+            if (divw) gameState.setWidth(divw);
+            if (divh) gameState.setLPaddle(divh / 2)
+        });
+        if(gameState.p1Score === 0 && gameState.p2Score === 0) {
+          gameState.setBall({x:0.5 * gameState.width,y:0.5 * gameState.height,speed:0,cx:gameState.height /100,cy:gameState.height /100})
+        }
+    },)
+
+    useEffect(() => {
+        const divh = document.getElementById('Game')?.offsetHeight
+        const divw = document.getElementById('Game')?.offsetWidth
+        if (divh) gameState.setHeight(divh);
+        if (divw) gameState.setWidth(divw);
+        if (divh && divw){
+          if (first === false)
+          {
+            setFirest(true)
+            gameState.setBall({x:0.5 * divw,y:0.5 * divh,speed:0,cx:gameState.height /100,cy:gameState.height /100})
+          }
+          const newx:number = (divw * gameState.ball.x) / gameState.width; 
+          const newy:number =  (divh * gameState.ball.y) / gameState.height;
+            console.log(`${divw} ${gameState.ball.x} ${gameState.height}`)
+          const n :ball = { x:newx , y:newy , speed:0, cx:divw / 100,cy:divh / 100}
+          console.log(n)
+          if(n.x)
+            gameState.setBall(n)
+          divw <= 742 ? gameState.setMobile(true) : gameState.setMobile(false)
+          console.log("old game")
+          console.log(gameState)
+
+          const oldinter = setInterval(() => {
+            let newball = gameState.ball;
+            if (newball.x +gameState.width / 40 > divw || newball.x - gameState.width / 40 < 0)
+              newball.cx *= -1
+            if (newball.y +gameState.width / 40> divh || newball.y - gameState.width / 40< 0)
+              newball.cy *= -1
+            if (Math.hypot((newball.x + newball.cx ) - (gameState.lPaddle) , (newball.y + newball.cy) - gameState.lPaddle) < 0)
+              newball.cx *= -1
+            console.log(Math.hypot((newball.x + newball.cx ) - (gameState.lPaddle) , (newball.y + newball.cy) - gameState.lPaddle))
+            console.log(gameState.lPaddle)
+
+            newball.x += newball.cx;
+            newball.y += newball.cy;
+            gameState.setBall(newball)
+              // clearInterval(oldinter)
+          },20);
+          return () => clearInterval(oldinter)
+      }
+    },[gameState.width , gameState.height , first , gameState])
+    console.log(gameState.lPaddle)
+    return ( 
+    <div className="flex flex-col gap-10 justify-start md:justify-center md:items-center items-center pt-12 md:pt-0  h-full w-full" >
+        <div className="flex items-center justify-center gap-x10 w-full xl:pt-4">
+            <div className="flex items-center justify-center w-1/4 gap-6">
+                <img alt="" className="rounded-full w-auto h-auto max-w-[10vw] md:max-w-[20vw]" src={user.picture.medium} />
+                <span className="font-lexend font-extrabold text-[4vw] xl:text-[2vw] text-current">1</span>
+            </div>
+            <div className="flex items-center justify-center w-1/4 gap-6">
+                <span className="font-lexend font-extrabold text-[4vw] xl:text-[2vw] text-current">5</span>
+                <img alt="" className="rounded-full w-auto h-auto max-w-[10vw] md:max-w-[20vw]" src={user.picture.medium} />
+            </div>
+        </div>
+        <div className="flex items-center justify-center min-h-16 max-h-[80%] max-w-[90%] min-w-16 w-[95%] rounded-xl aspect-video border-primary border-4" id="Game">
+            <Stage onMouseMove={handleMove}  width={gameState.width - 12} height={gameState.height - 12}  >
+                <Layer >
+                    <Rect height={gameState.height} width={gameState.width} fill="#151B26" x={0} y={0} />
+                    <Line points={[0, gameState.height , 0 , 0]} dash={[gameState.height / 30 , 10]} strokeWidth={2} stroke={"white"} height={gameState.height} width={20} fill="white" x={gameState.width / 2} y={0}  />
+                    <Rect cornerRadius={12} height={gameState.height / 6} width={gameState.width / 70} x={10} y={gameState.lPaddle} fill="white" />
+                    <Rect cornerRadius={12} height={gameState.height / 6} width={gameState.width / 70} x={gameState.width - 20 - (gameState.width / 70)} y={gameState.height  / 3} fill="white" />
+                    <Circle fill="white" height={gameState.width / 40} width={gameState.width / 40} x={gameState.ball.x} y={gameState.ball.y} />
+                </Layer>
+
+            </Stage>
+
+        </div>
+        {gameState.mobile && (
+        <div className="flex justify-around items-center w-full gap-20">
+            <BsFillArrowLeftCircleFill className="w-14 h-14 hover:cursor-pointer hover:fill-secondary hover:transition-colors delay-100 "/>
+            <BsFillArrowRightCircleFill  className="w-14 h-14 hover:cursor-pointer hover:fill-secondary hover:transition-colors delay-100"/>
+        </div>
+    )
+
+        }
+    </div>
+
+    )
+} 

frontend/code/src/Components/Home/index.tsx

@@ -16,7 +16,7 @@ export const Home : FC = () : JSX.Element =>{
                         <div className='absolute xl:text-4xl md:text-3xl sm:text-2xl   flex top-[15%] right-2/6 text-neutral font-lexend font-extrabold'>READY TO PLAY A GAME? </div>
 
                 </div>
-                <div className='flex justify-center relative items-start pt-6 h-3/6 w-[90vw] sm:h-3/4 sm:w-[85vw]'>
+                <div className='flex justify-center relative items-start pt-6 h-auto w-[90vw] sm:w-[85vw]  overflow-scroll no-scrollbar'>
                     <LeaderBoard/>
 
                 </div>