INIT:GAME (#85)

backend/code/package.json

@@ -37,7 +37,7 @@
  "@nestjs/swagger": "^7.1.12",
  "@nestjs/throttler": "^5.0.0",
  "@nestjs/websockets": "^10.2.6",
- "@prisma/client": "^5.5.2",
+ "@prisma/client": "^5.2.0",
  "@types/qrcode": "^1.5.4",
  "bcrypt": "^5.1.1",
  "bull": "^4.11.3",
@@ -51,6 +51,7 @@
  "passport": "^0.6.0",
  "passport-42": "^1.2.6",
  "passport-jwt": "^4.0.1",
+ "prisma": "^5.2.0",
  "qrcode": "^1.5.3",
  "reflect-metadata": "^0.1.13",
  "rxjs": "^7.8.1",

backend/code/src/game/game.service.ts

@@ -10,7 +10,7 @@ export class GameService {
  private readonly prisma: PrismaService,
  private eventEmitter: EventEmitter2,
  ) {
- // this.launchGame();
+ this.launchGame();
  }
 
  private waitingPlayers: Socket[] = [];
@@ -28,7 +28,7 @@ export class GameService {
  console.log('Game launched!');
  const two_players = this.waitingPlayers.splice(0, 2);
  this.eventEmitter.emit('game.launched', two_players);
- // console.log(two_players);
+ console.log(two_players);
  }
  }, 5027);
  }

backend/code/src/game/game.ts

@@ -1,29 +1,41 @@
 import { EventEmitter2 } from '@nestjs/event-emitter';
-import { Socket } from 'socket.io';
+import { Server, Socket } from 'socket.io';
 
 export class Game {
- constructor(private readonly eventEmitter: EventEmitter2) {}
+ constructor(private readonly eventEmitter: EventEmitter2 , private readonly server: Server) {}
  private async loop() {
+
  console.log('loop');
  await this.sleep(5000);
+
  this.loop();
  }
 
- start(ngameid: string) {
+
+ private async sleepCounter(){
+ let timer = 3000;
+
+ for (let i = 0; i < 4; i++) {
+ await new Promise(resolve => setTimeout(resolve, 1000));
+ this.server.emit("timer", timer);
+ timer -= 1000;
+ }
+ }
+ async start(ngameid: string) {
  console.log('game started', ngameid);
  this.gameid = ngameid;
+ await this.sleepCounter()
  this.loop();
  }
 
- setplayerScokets(p1socket: Socket, p2socket: Socket) {
+ setplayerScokets(p1socket: Socket, p2socket: Socket ) {
  this.p1socket = p1socket;
  this.p2socket = p2socket;
-
- this.p1socket.on('move', (data) => {
+ this.p1socket.on('up', (data) => {
  console.log('heh');
  console.log(data);
  });
- this.p2socket.on('move', (data) => {
+ this.p2socket.on('down', (data) => {
  console.log('heh');
  console.log(data);
  });

backend/code/src/gateways/gateways.gateway.ts

@@ -205,7 +205,7 @@ export class Gateways implements OnGatewayConnection, OnGatewayDisconnect {
  clients.forEach((client: any) => {
  client.join(game_channel);
  });
- const new_game = new Game(this.eventEmitter);
+ const new_game = new Game(this.eventEmitter , this.server);
  new_game.setplayerScokets(clients[0], clients[1]);
  new_game.start(game_channel);
  this.games_map.set(game_channel, new_game);

frontend/code/src/Components/Chat/Services/SocketsServices.ts

@@ -4,6 +4,7 @@ import { create } from 'zustand'
 export const useSocketStore:any = create((set:any) => ({
  socket:null,
  setSocket : () => {
+
  const s = io("http://localhost:3004", {
  transports: ['websocket'],
  withCredentials: true,

frontend/code/src/Components/Layout/Assets/Modal.tsx

@@ -0,0 +1,24 @@
+import { useSocketStore } from "../../Chat/Services/SocketsServices"
+import { useState } from "react";
+export const Modal = () => {
+ const [opacity , setOpacity] = useState("");
+ const [timer , setTimer] = useState(0)
+ const socketStore = useSocketStore();
+ if (socketStore.socket !== null){
+ socketStore.socket.on("timer",(msg:any) => {
+ msg !== 0 && setOpacity("opacity-100")
+ msg === 0 && setOpacity("opacity-0")
+ setTimer(msg / 1000)
+ })
+ }
+ return (
+
+
+ <div className={`modal ${opacity}`}>
+ <div className="modal-box">
+ <h3 className="text-lg font-bold">Game Starting .... </h3>
+ <p className="py-4 flex items-center justify-center text-xl font-poppins font-bold">Game Start In {timer}</p>
+ </div>
+ </div>
+ )
+}

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

@@ -15,8 +15,9 @@ import { useUserStore } from "../../Stores/stores";
 import { useNavigate } from "react-router-dom";
 import { FirstLogin } from "../FirstLogin";
 import { useSocketStore } from "../Chat/Services/SocketsServices";
-import toast from "react-hot-toast";
 import { ShowLogoModal } from "../Chat/Components/RoomChatHelpers";
+import { Modal } from "./Assets/Modal";
+import toast from "react-hot-toast";
 
 const routes = [
  { path: "Profile/:id" },
@@ -43,7 +44,7 @@ export const Layout: FC<PropsWithChildren> = (): JSX.Element => {
  const user = useUserStore();
  const navigate = useNavigate();
  const socketStore = useSocketStore();
-
+ 
  useLayoutEffect(() => {
  const log = async () => {
  try {
@@ -59,8 +60,10 @@ export const Layout: FC<PropsWithChildren> = (): JSX.Element => {
 
 
  };
+
  socketStore.socket = socketStore.setSocket();
  socketStore.socket.on("connect", onConnect);
+
  socketStore.socket.on("message",(msg:any) => {
  toast.custom((t) => (
  <div
@@ -113,9 +116,10 @@ export const Layout: FC<PropsWithChildren> = (): JSX.Element => {
  <FirstLogin />
  ) : (
  <div
-  data-theme="mytheme"
-  className={`h-screen ${!user.profileComplet ? "blur-lg" : ""}`}
+ data-theme="mytheme"
+ className={`h-screen ${!user.profileComplet ? "blur-lg" : ""}`}
  >
+ <Modal/>
  <div className=" flex flex-row w-screen h-[9vh] bg-base-200">
  <div className="flex justify-start items-center z-50 pl-1 sm:pl-2 h-full w-full">
  <ShowLogoModal />

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

@@ -1,15 +1,16 @@
 import { VsBot } from './assets/VsBot'
-// import { useSocketStore } from '../Chat/Services/SocketsServices'
-import api from '../../Api/base'
+import { useSocketStore } from '../Chat/Services/SocketsServices'
 import toast from 'react-hot-toast'
 export const Play = () => {
- // const socketStore = useSocketStore();
+ const socketStore = useSocketStore();
  const subscribeToGame = async() => {
  // socketStore.socket.emit
  try {
- const res = await api.post("/game/start");
- console.log("res")
- console.log(res.data)
+ socketStore.socket.emit("startGame");
+ toast.success("Match making in Progress you can move until find opponent"
+ ,{
+ duration:5000
+ })
  } catch (error) {
  toast.error("can not start game") 
  }