[feat] #185 게임 랜덤 대기열 기능

boostcampwm-2022 · Dec 15, 2022 · fd41a50 · fd41a50
1 parent 92f624f
commit fd41a50
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 14 deletions.
diff --git a/backend/src/socket/socket.gateway.ts b/backend/src/socket/socket.gateway.ts
@@ -99,6 +99,14 @@ export class SocketGateway implements OnGatewayConnection, OnGatewayDisconnect {
     this.walkCountByUser.clear();
   }
 
+  @SubscribeMessage('getUserInitiated')
+  handleGetUserInitiated(@ConnectedSocket() client: sleepySocket) {
+    const roomName = client.userData.roomName;
+    this.server
+      .to(client.id)
+      .emit('userInitiated', this.getRoomUserData(roomName + ''));
+  }
+
   @SubscribeMessage('userDataChanged')
   handleUserDataChanged(
     @ConnectedSocket() client: sleepySocket,
@@ -462,15 +470,13 @@ export class SocketGateway implements OnGatewayConnection, OnGatewayDisconnect {
 
     if (this.server.sockets.adapter.rooms.get(waitingRoomName).size >= 4) {
       const uuid = v1();
-      this.server.to(waitingRoomName).emit('gameRoomUserListChanged', {});
-
-      const { gameRoomId } = payload;
 
       // 게임 룸으로 이동이되도, 서로 보이거나 하려면 그안에 가서도 userIni creatd ????
-      this.server.to(gameRoomId).emit('gameAlert', {
+      this.server.to(waitingRoomName).emit('gameAlert', {
         status: 'READY_GAME',
-        message: gameRoomId,
+        message: uuid,
       });
+      this.server.in(waitingRoomName).socketsLeave(waitingRoomName);
     }
   }
 }
diff --git a/frontend/src/component/MiniGame/index.tsx b/frontend/src/component/MiniGame/index.tsx
@@ -32,25 +32,30 @@ const MiniGame = () => {
   const [winnerGame, setWinnerGame] = useState<any>(undefined);
 
   useEffect(() => {
-    emitter.on('game', ({ gameName }: { gameName: string }) => {
+    const game = ({ gameName }: { gameName: string }) => {
       setIsShowModal(true);
       setSelectGame(gameName);
-    });
+    };
 
-    emitter.on('closeContent', () => {
+    const closeContent = () => {
       setIsShowModal(false);
       initGame();
-    });
+    };
 
-    socket.on('finishGame', data => {
+    const finishGame = (data: any) => {
       setWinnerGame(data);
       setIsShowModal(true);
       setIsGameFinish(true);
-    });
+    };
+
+    emitter.on('game', game);
+    emitter.on('closeContent', closeContent);
+    socket.on('finishGame', finishGame);
 
     return () => {
-      emitter.removeListener('closeContent');
-      emitter.removeListener('game');
+      emitter.removeListener('game', game);
+      emitter.removeListener('closeContent', closeContent);
+      socket.removeListener('finishGame', finishGame);
     };
   }, []);
 
@@ -76,7 +81,10 @@ const MiniGame = () => {
             <h3 css={style.header}>🎮 {gamesName[selectGame]}</h3>
             <div css={style.game}>
               {isGameFinish ? (
-                <GameResult winnerGame={winnerGame} />
+                <GameResult
+                  setIsGameFinish={setIsGameFinish}
+                  winnerGame={winnerGame}
+                />
               ) : (
                 <>
                   <div css={style.gameInfo}>{games[selectGame]}</div>