[feat] 미니게임 이동을 위한 frontend 처리

frontend/src/component/Game/Phaser/Player/player.ts

@@ -66,6 +66,7 @@ export class Player extends Phaser.Physics.Arcade.Sprite {
       }
     );
 
+    console.log('scene in player',scene);
     scene.physics.add.existing(this);
     this.getBody().setCollideWorldBounds(true).setSize(30, 50);
 

frontend/src/component/Game/Scene/onboard.ts

@@ -1,6 +1,6 @@
 import mazeJSON from '../../../assets/tilemaps/maze/maze.json';
-import zombieJSON from '../../../assets/tilemaps/zombie/zombie.json';
-import sprintJSON from '../../../assets/tilemaps/sprint/sprint.json';
+import survivalJSON from '../../../assets/tilemaps/survival/survival.json';
+import runningJSON from '../../../assets/tilemaps/running/running.json';
 import tileset3 from '../../../assets/tilemaps/tile/tileset3.png';
 import townJSON from '../../../assets/tilemaps/town.json';
 import town from '../../../assets/tilemaps/town.png';
@@ -44,10 +44,10 @@ export default class OnBoard extends Phaser.Scene {
     this.load.image('tileset3', tileset3);
 
     // 술래잡기(zombie)
-    this.load.tilemapTiledJSON('zombie', zombieJSON);
+    this.load.tilemapTiledJSON('survival', survivalJSON);
 
     // 달리기경주(sprint)
-    this.load.tilemapTiledJSON('sprint', sprintJSON);
+    this.load.tilemapTiledJSON('running', runningJSON);
 
     // 배경음악
     this.load.audio('christmas', [christmas]);

frontend/src/component/Game/Scene/sprint.ts → frontend/src/component/Game/Scene/running.ts

@@ -2,10 +2,11 @@ import { Socket } from 'socket.io-client';
 import { MyPlayer } from '../Phaser/Player/myPlayer';
 import { OtherPlayer } from '../Phaser/Player/otherPlayer';
 import { emitter } from '../util';
+import {  userType } from '../../../types/types';
 
 const backToTown = { x: 1600, y: 1900 };
 
-export default class Sprint extends Phaser.Scene {
+export default class Running extends Phaser.Scene {
   socket?: Socket;
   autoPlay?: boolean;
   background?: Phaser.Tilemaps.TilemapLayer;
@@ -14,14 +15,17 @@ export default class Sprint extends Phaser.Scene {
   otherPlayer: { [key: string]: OtherPlayer };
   gameEntry?: any;
   isEnterGameZone?: any;
+  roomId:string | undefined;
 
   constructor() {
-    super('Sprint');
+    super('Running');
 
     this.otherPlayer = {};
+
   }
 
   init(data: any) {
+    this.roomId = data.roomId;
     this.myPlayer = new MyPlayer(
       this,
       1750,
@@ -32,6 +36,11 @@ export default class Sprint extends Phaser.Scene {
       data.socket
     );
 
+    this.socket = data.socket
+    console.log(data.socket)
+    // this.socketInit()
+
+
     this.gameEntry = this.physics.add.staticGroup({
       key: 'portal',
       frameQuantity: 1,
@@ -79,12 +88,16 @@ export default class Sprint extends Phaser.Scene {
         this.changeScene('Town');
       }
     });
+
+    this.input.keyboard.manager.enabled = false;
   }
 
   create() {
+    this.socket?.emit('startGame', { gameRoomId:this.roomId, gameType:'Running'});
+
     this.cameras.main.setBounds(0, 0, 2000, 2000);
 
-    const map = this.make.tilemap({ key: 'sprint' });
+    const map = this.make.tilemap({ key: 'running' });
     const tileset3 = map.addTilesetImage('tileset3', 'tileset3');
 
     map.createLayer('background', tileset3, 0, 0).setScale(2.5);
@@ -119,4 +132,72 @@ export default class Sprint extends Phaser.Scene {
       autoPlay: this.autoPlay,
     });
   };
+
+  socketInit() {
+    console.log(this.socket)
+    if (!this.socket) return;
+    console.log('socket init!!!')
+
+    const userInitiated = (data: userType[]) => {
+      console.log(data)
+      if (!Array.isArray(data)) data = [data];
+
+      data.forEach((user: userType) => {
+        const id = user.id.toString().trim();
+        if (this.myPlayer?.id === id) return;
+        if (this.otherPlayer[id]) return;
+
+        this.otherPlayer[id] = new OtherPlayer(this, user);
+      });
+    };
+
+    const userCreated = (user: any) => {
+      const id = user.id.toString().trim();
+      this.otherPlayer[id] = new OtherPlayer(this, user);
+    };
+
+    const move = (data: userType) => {
+      const id = data.id.toString().trim();
+
+      if (!this.otherPlayer[id]) return;
+      const { state, x, y, direction } = data;
+      this.otherPlayer[id].update(state, x, y, direction);
+    };
+
+    const userLeaved = (data: userType) => {
+      const id = data.id.toString().trim();
+      console.log(this.otherPlayer[id], id)  
+      try{
+          this.otherPlayer[id].delete();
+          delete this.otherPlayer[id];
+        }catch(e){
+          console.log("이미 사라졌습니다.");
+        }
+    };
+
+    const userDataChanged = (data: userType) => {
+      const { id, nickname, characterName } = data;
+      this.otherPlayer[id].updateNickname(nickname);
+      this.otherPlayer[id].updateHair(characterName);
+    };
+
+    this.socket.on('userInitiated', userInitiated);
+    this.socket.on('userCreated', userCreated);
+    this.socket.on('move', move);
+    this.socket.on('userLeaved', userLeaved);
+    this.socket.on('userDataChanged', userDataChanged);
+
+    // this.socket.emit('startGame', { gameRoomId:this.roomId, gameType:'Running'});
+
+    // emitter.on('gameStart', (data: any) => {
+      // console.log('소켓 지워줌~~??')
+      // this.socket?.removeListener('userInitiated', userInitiated);
+      // this.socket?.removeListener('userCreated', userCreated);
+      // this.socket?.removeListener('move', move);
+      // this.socket?.removeListener('userLeaved', userLeaved);
+      // this.socket?.removeListener('userDataChanged', userDataChanged);
+
+    //   this.changeScene(data.gameName);
+    // });
+  }
 }

frontend/src/component/Game/Scene/zombie.ts → frontend/src/component/Game/Scene/survival.ts

@@ -5,7 +5,7 @@ import { emitter } from '../util';
 
 const backToTown = { x: 1000, y: 1580 };
 
-export default class Zombie extends Phaser.Scene {
+export default class Survival extends Phaser.Scene {
   socket?: Socket;
   autoPlay?: boolean;
   background?: Phaser.Tilemaps.TilemapLayer;
@@ -16,7 +16,7 @@ export default class Zombie extends Phaser.Scene {
   isEnterGameZone?: any;
 
   constructor() {
-    super('Zombie');
+    super('Survival');
 
     this.otherPlayer = {};
   }
@@ -84,7 +84,7 @@ export default class Zombie extends Phaser.Scene {
   create() {
     this.cameras.main.setBounds(0, 0, 2000, 2000);
 
-    const map = this.make.tilemap({ key: 'zombie' });
+    const map = this.make.tilemap({ key: 'survival' });
     const tileset3 = map.addTilesetImage('tileset3', 'tileset3');
 
     map.createLayer('other2', tileset3, 0, 0).setScale(2.5);

frontend/src/component/Game/Scene/town.ts

@@ -26,8 +26,8 @@ export default class Town extends Phaser.Scene {
   }
 
   init() {
-    emitter.on('gameStart', (data: any) => {
-      this.changeScene(data.gameName);
+    emitter.on('readyGame', (data: any) => {
+      this.changeScene(data.gameName, data.roomId);
     });
 
     emitter.on('init', (data: gameInitType) => {
@@ -56,9 +56,9 @@ export default class Town extends Phaser.Scene {
       });
 
       const gameZonePosition = [
-        { name: 'Zombie', x: 540, y: 810 },
+        { name: 'Survival', x: 540, y: 810 },
         { name: 'Maze', x: 980, y: 1270 },
-        { name: 'Sprint', x: 1480, y: 680 },
+        { name: 'Running', x: 1480, y: 680 },
       ];
 
       this.gameEntry
@@ -134,17 +134,20 @@ export default class Town extends Phaser.Scene {
     emitter.emit('game-start');
   }
 
-  changeScene = (gameName: string) => {
+  changeScene = (gameName: string, roomId:string) => {
     emitter.emit('closeContent');
 
     this.scene.pause();
     this.scene.start(gameName, {
       socket: this.socket,
       myPlayer: this.myPlayer,
+      otherPlayer:this.otherPlayer,
       autoPlay: this.autoPlay,
+      roomId: roomId
     });
 
     // 자신의 캐릭터 지워주기
+
     this.myPlayer?.delete();
     delete this.myPlayer;
 
@@ -248,6 +251,7 @@ export default class Town extends Phaser.Scene {
     };
 
     const userCreated = (user: any) => {
+      console.log(user)
       const id = user.id.toString().trim();
       this.otherPlayer[id] = new OtherPlayer(this, user);
     };
@@ -277,6 +281,16 @@ export default class Town extends Phaser.Scene {
     this.socket.on('move', move);
     this.socket.on('userLeaved', userLeaved);
     this.socket.on('userDataChanged', userDataChanged);
+
+    // emitter.on('readyGame', (data: any) => {
+      // this.socket?.removeListener('userInitiated', userInitiated);
+      // this.socket?.removeListener('userCreated', userCreated);
+      // this.socket?.removeListener('move', move);
+      // this.socket?.removeListener('userLeaved', userLeaved);
+      // this.socket?.removeListener('userDataChanged', userDataChanged);
+
+    //   this.changeScene(data.gameName, data.roomId);
+    // });
   }
 
   musicControll() {

frontend/src/component/Game/gameConfig.ts

@@ -1,9 +1,9 @@
 import Phaser from 'phaser';
 import Town from './Scene/town';
 import Maze from './Scene/maze';
-import Zombie from './Scene/zombie';
+import Survival from './Scene/survival';
 import OnBoard from './Scene/onboard';
-import Sprint from './Scene/sprint';
+import Running from './Scene/running';
 
 const gameConfig: Phaser.Types.Core.GameConfig = {
   type: Phaser.AUTO,
@@ -26,7 +26,7 @@ const gameConfig: Phaser.Types.Core.GameConfig = {
     forceSetTimeOut: true,
   },
   autoFocus: true,
-  scene: [OnBoard, Town, Maze, Zombie, Sprint],
+  scene: [OnBoard, Town, Maze, Survival, Running],
 };
 
 export default gameConfig;

frontend/src/component/MiniGame/FriendMode.tsx

@@ -1,6 +1,8 @@
-import { ChangeEvent, useState } from 'react';
+import { ChangeEvent, useEffect, useState } from 'react';
 import * as style from './miniGame.styled';
 import { v1 } from 'uuid';
+import { useRecoilValue } from 'recoil';
+import { socketState } from '../../store/atom/socket';
 
 const FriendMode = ({
   setRoomId,
@@ -12,6 +14,7 @@ const FriendMode = ({
   initGame: Function;
 }) => {
   const [inputRoom, setInputRoom] = useState('');
+  const socket = useRecoilValue(socketState);
 
   //
   const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
@@ -21,7 +24,10 @@ const FriendMode = ({
   const createRoom = () => {
     const id = v1();
     setRoomId(id);
-
+
+    socket.emit('createNewGameRoom',{
+      gameRoomId : id
+    })
     console.log('방생성!', id);
   };
 
@@ -30,11 +36,28 @@ const FriendMode = ({
       alert('방 id를 확인해주세요');
       return;
     }
+    socket.emit("joinGameRoom", {
+      gameRoomId : inputRoom
+    })
 
     console.log('방 아이디: ', inputRoom);
     console.log('친구방 입장!');
-    setIsReady(false);
   };
+
+  useEffect(()=>{
+    const gameAlert = ({status, message}:{status:string, message:any}) => {
+        if(status==='ROOM_NOT_EXIST'){
+          alert(message);
+        }else if (status==='JOIN_ROOM_SUCCESS'){
+          setRoomId(message)
+        }
+    }
+    socket.on('gameAlert',gameAlert)
+
+    return ()=>{
+      socket.removeListener('gameAlert',gameAlert)
+    }
+  }, []);
 
   return (
     <>