From 8c23ded9df81f3b09896222bec0027542843f9bb Mon Sep 17 00:00:00 2001
From: JJongBin <gghkdu2@gmail.com>
Date: Wed, 14 Dec 2022 17:12:39 +0900
Subject: [PATCH 1/5] =?UTF-8?q?[feat]=20#185=20=EA=B2=8C=EC=9E=84=20scene?=
 =?UTF-8?q?=20=EC=9D=B4=EB=8F=99=EC=8B=9C=20=EC=97=B4=EB=A0=A4=EC=9E=88?=
 =?UTF-8?q?=EB=8A=94=20=EC=B0=BD=20=EB=8B=AB=EC=95=84=EC=A3=BC=EA=B8=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/component/Game/Scene/town.ts    |  2 ++
 frontend/src/component/MiniGame/index.tsx    |  6 ++++++
 frontend/src/component/Sidebar/index.tsx     | 11 +++++++++++
 frontend/src/component/SleepyBoard/index.tsx | 12 ++++++++++++
 4 files changed, 31 insertions(+)

diff --git a/frontend/src/component/Game/Scene/town.ts b/frontend/src/component/Game/Scene/town.ts
index 22e1be2..c774a61 100644
--- a/frontend/src/component/Game/Scene/town.ts
+++ b/frontend/src/component/Game/Scene/town.ts
@@ -137,6 +137,8 @@ export default class Town extends Phaser.Scene {
 
   changeScene = (gameName: string) => {
     console.log(gameName);
+    emitter.emit('closeContent');
+
     this.scene.pause();
     this.scene.start(gameName, {
       socket: this.socket,
diff --git a/frontend/src/component/MiniGame/index.tsx b/frontend/src/component/MiniGame/index.tsx
index 645f957..23d5d60 100644
--- a/frontend/src/component/MiniGame/index.tsx
+++ b/frontend/src/component/MiniGame/index.tsx
@@ -31,7 +31,13 @@ const MiniGame = () => {
       setSelectGame(gameName);
     });
 
+    emitter.on('closeContent', () => {
+      setIsShowModal(false);
+      initGame();
+    });
+
     return () => {
+      emitter.removeListener('closeContent');
       emitter.removeListener('game');
     };
   }, []);
diff --git a/frontend/src/component/Sidebar/index.tsx b/frontend/src/component/Sidebar/index.tsx
index 97f9a37..8d76dfc 100644
--- a/frontend/src/component/Sidebar/index.tsx
+++ b/frontend/src/component/Sidebar/index.tsx
@@ -16,6 +16,7 @@ import Setting from './Setting';
 import Chat from './Chat';
 import { useRecoilState } from 'recoil';
 import { sidebarState } from '../../store/atom/sidebar';
+import { emitter } from '../Game/util';
 
 type componentType = {
   [key: string]: EmotionJSX.Element;
@@ -49,6 +50,16 @@ const Sidebar = () => {
     });
   };
 
+  useEffect(() => {
+    emitter.on('closeContent', () => {
+      setOpen(false);
+    });
+
+    return () => {
+      emitter.removeListener('closeContent');
+    };
+  }, []);
+
   return (
     <aside css={sidebarWrapper(isOpen, currentTab)}>
       <div css={sidebar}>
diff --git a/frontend/src/component/SleepyBoard/index.tsx b/frontend/src/component/SleepyBoard/index.tsx
index c81f165..589dba3 100644
--- a/frontend/src/component/SleepyBoard/index.tsx
+++ b/frontend/src/component/SleepyBoard/index.tsx
@@ -1,4 +1,5 @@
 import { useEffect, useState } from 'react';
+import { emitter } from '../Game/util';
 import RankContainer from './RankContainer';
 import * as style from './sleepyboard.styled';
 import SleepyBoardContainer from './SleepyBoardContainer';
@@ -19,6 +20,17 @@ const SleepyBoard = () => {
     }
   };
 
+  useEffect(() => {
+    emitter.on('closeContent', () => {
+      setAnimation('close');
+      setIsShowModal(false);
+    });
+
+    return () => {
+      emitter.removeListener('closeContent');
+    };
+  }, []);
+
   return (
     <>
       {isShowModal && (

From be15fb7d6dc4ee80e4ce172ac54ae65af1978f6b Mon Sep 17 00:00:00 2001
From: JJongBin <gghkdu2@gmail.com>
Date: Wed, 14 Dec 2022 23:39:59 +0900
Subject: [PATCH 2/5] =?UTF-8?q?[feat]=20#185=20=EA=B2=8C=EC=9E=84=EC=97=90?=
 =?UTF-8?q?=EC=84=9C=20town=EC=9C=BC=EB=A1=9C=20=EB=8F=8C=EC=95=84?=
 =?UTF-8?q?=EA=B0=80=EB=8A=94=20=ED=8F=AC=ED=83=88=20=EC=83=9D=EC=84=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 소켓 연결 이전
---
 frontend/src/component/Game/Scene/maze.ts   | 69 +++++++++++++++++++++
 frontend/src/component/Game/Scene/sprint.ts | 67 ++++++++++++++++++++
 frontend/src/component/Game/Scene/town.ts   | 20 +++++-
 frontend/src/component/Game/Scene/zombie.ts | 67 ++++++++++++++++++++
 4 files changed, 221 insertions(+), 2 deletions(-)

diff --git a/frontend/src/component/Game/Scene/maze.ts b/frontend/src/component/Game/Scene/maze.ts
index e61df72..0c5de8c 100644
--- a/frontend/src/component/Game/Scene/maze.ts
+++ b/frontend/src/component/Game/Scene/maze.ts
@@ -1,11 +1,19 @@
+import { Socket } from 'socket.io-client';
 import { MyPlayer } from '../Phaser/Player/myPlayer';
 import { OtherPlayer } from '../Phaser/Player/otherPlayer';
+import { emitter } from '../util';
+
+const backToTown = { x: 1000, y: 1580 };
 
 export default class Maze extends Phaser.Scene {
+  socket?: Socket;
+  autoPlay?: boolean;
   background?: Phaser.Tilemaps.TilemapLayer;
   otherLayer?: Phaser.Tilemaps.TilemapLayer;
   myPlayer?: MyPlayer;
   otherPlayer: { [key: string]: OtherPlayer };
+  gameEntry?: any;
+  isEnterGameZone?: any;
 
   constructor() {
     super('Maze');
@@ -14,6 +22,8 @@ export default class Maze extends Phaser.Scene {
   }
 
   init(data: any) {
+    this.socket = data.socket;
+    this.autoPlay = data.autoPlay;
     this.myPlayer = new MyPlayer(
       this,
       1000,
@@ -25,6 +35,54 @@ export default class Maze extends Phaser.Scene {
     );
 
     this.myPlayer.fixState(true, 'swimming', 1);
+
+    this.gameEntry = this.physics.add.staticGroup({
+      key: 'portal',
+      frameQuantity: 1,
+    });
+
+    this.gameEntry
+      .getChildren()[0]
+      .setPosition(backToTown.x, backToTown.y)
+      .setDepth(3);
+
+    this.gameEntry.refresh();
+
+    const keyG = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.G);
+
+    this.physics.add.overlap(this.myPlayer, this.gameEntry, () => {
+      const { x, y } = backToTown;
+      const text: (
+        | Phaser.GameObjects.Graphics
+        | Phaser.GameObjects.Text
+        | undefined
+      )[] = [];
+
+      if (!this.isEnterGameZone) {
+        text.push(
+          this.add
+            .graphics()
+            .fillStyle(0xffffff, 50)
+            .fillRoundedRect(x - 140, y - 70, 265, 40, 20),
+          this.add.text(x - 130, y - 60, 'push G key for back to Town!', {
+            color: '#000',
+            font: '700 18px Arial',
+          })
+        );
+
+        this.isEnterGameZone = true;
+
+        setTimeout(() => {
+          text[0]?.destroy();
+          text[1]?.destroy();
+          this.isEnterGameZone = false;
+        }, 500);
+      }
+
+      if (Phaser.Input.Keyboard.JustDown(keyG)) {
+        this.changeScene('Town');
+      }
+    });
   }
 
   create() {
@@ -59,4 +117,15 @@ export default class Maze extends Phaser.Scene {
   update() {
     this.myPlayer?.update();
   }
+
+  changeScene = (gameName: string) => {
+    emitter.emit('closeContent');
+
+    this.scene.pause();
+    this.scene.start(gameName, {
+      socket: this.socket,
+      myPlayer: this.myPlayer,
+      autoPlay: this.autoPlay,
+    });
+  };
 }
diff --git a/frontend/src/component/Game/Scene/sprint.ts b/frontend/src/component/Game/Scene/sprint.ts
index f737e98..dc5d244 100644
--- a/frontend/src/component/Game/Scene/sprint.ts
+++ b/frontend/src/component/Game/Scene/sprint.ts
@@ -1,11 +1,19 @@
+import { Socket } from 'socket.io-client';
 import { MyPlayer } from '../Phaser/Player/myPlayer';
 import { OtherPlayer } from '../Phaser/Player/otherPlayer';
+import { emitter } from '../util';
+
+const backToTown = { x: 1600, y: 1900 };
 
 export default class Sprint extends Phaser.Scene {
+  socket?: Socket;
+  autoPlay?: boolean;
   background?: Phaser.Tilemaps.TilemapLayer;
   otherLayer?: Phaser.Tilemaps.TilemapLayer;
   myPlayer?: MyPlayer;
   otherPlayer: { [key: string]: OtherPlayer };
+  gameEntry?: any;
+  isEnterGameZone?: any;
 
   constructor() {
     super('Sprint');
@@ -23,6 +31,54 @@ export default class Sprint extends Phaser.Scene {
       data.myPlayer.nickname,
       data.socket
     );
+
+    this.gameEntry = this.physics.add.staticGroup({
+      key: 'portal',
+      frameQuantity: 1,
+    });
+
+    this.gameEntry
+      .getChildren()[0]
+      .setPosition(backToTown.x, backToTown.y)
+      .setDepth(3);
+
+    this.gameEntry.refresh();
+
+    const keyG = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.G);
+
+    this.physics.add.overlap(this.myPlayer, this.gameEntry, () => {
+      const { x, y } = backToTown;
+      const text: (
+        | Phaser.GameObjects.Graphics
+        | Phaser.GameObjects.Text
+        | undefined
+      )[] = [];
+
+      if (!this.isEnterGameZone) {
+        text.push(
+          this.add
+            .graphics()
+            .fillStyle(0xffffff, 50)
+            .fillRoundedRect(x - 140, y - 70, 265, 40, 20),
+          this.add.text(x - 130, y - 60, 'push G key for back to Town!', {
+            color: '#000',
+            font: '700 18px Arial',
+          })
+        );
+
+        this.isEnterGameZone = true;
+
+        setTimeout(() => {
+          text[0]?.destroy();
+          text[1]?.destroy();
+          this.isEnterGameZone = false;
+        }, 500);
+      }
+
+      if (Phaser.Input.Keyboard.JustDown(keyG)) {
+        this.changeScene('Town');
+      }
+    });
   }
 
   create() {
@@ -52,4 +108,15 @@ export default class Sprint extends Phaser.Scene {
   update() {
     this.myPlayer?.update();
   }
+
+  changeScene = (gameName: string) => {
+    emitter.emit('closeContent');
+
+    this.scene.pause();
+    this.scene.start(gameName, {
+      socket: this.socket,
+      myPlayer: this.myPlayer,
+      autoPlay: this.autoPlay,
+    });
+  };
 }
diff --git a/frontend/src/component/Game/Scene/town.ts b/frontend/src/component/Game/Scene/town.ts
index c774a61..4689126 100644
--- a/frontend/src/component/Game/Scene/town.ts
+++ b/frontend/src/component/Game/Scene/town.ts
@@ -27,7 +27,6 @@ export default class Town extends Phaser.Scene {
 
   init() {
     emitter.on('gameStart', (data: any) => {
-      console.log(data.userList);
       this.changeScene(data.gameName);
     });
 
@@ -136,7 +135,6 @@ export default class Town extends Phaser.Scene {
   }
 
   changeScene = (gameName: string) => {
-    console.log(gameName);
     emitter.emit('closeContent');
 
     this.scene.pause();
@@ -145,6 +143,16 @@ export default class Town extends Phaser.Scene {
       myPlayer: this.myPlayer,
       autoPlay: this.autoPlay,
     });
+
+    // 자신의 캐릭터 지워주기
+    this.myPlayer?.delete();
+    delete this.myPlayer;
+
+    // emitter 이벤트 지워주기
+    emitter.removeListener('init');
+    emitter.removeListener('updateNickname');
+    emitter.removeListener('updateHair');
+    emitter.removeListener('gameStart');
   };
 
   create() {
@@ -252,6 +260,14 @@ export default class Town extends Phaser.Scene {
       this.otherPlayer[id].update(state, x, y, direction);
     });
 
+    this.socket.on('motion', (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);
+    });
+
     this.socket.on('userLeaved', (data: userType) => {
       const id = data.id.toString().trim();
       this.otherPlayer[id].delete();
diff --git a/frontend/src/component/Game/Scene/zombie.ts b/frontend/src/component/Game/Scene/zombie.ts
index 6934187..6a7d18d 100644
--- a/frontend/src/component/Game/Scene/zombie.ts
+++ b/frontend/src/component/Game/Scene/zombie.ts
@@ -1,11 +1,19 @@
+import { Socket } from 'socket.io-client';
 import { MyPlayer } from '../Phaser/Player/myPlayer';
 import { OtherPlayer } from '../Phaser/Player/otherPlayer';
+import { emitter } from '../util';
+
+const backToTown = { x: 1000, y: 1580 };
 
 export default class Zombie extends Phaser.Scene {
+  socket?: Socket;
+  autoPlay?: boolean;
   background?: Phaser.Tilemaps.TilemapLayer;
   otherLayer?: Phaser.Tilemaps.TilemapLayer;
   myPlayer?: MyPlayer;
   otherPlayer: { [key: string]: OtherPlayer };
+  gameEntry?: any;
+  isEnterGameZone?: any;
 
   constructor() {
     super('Zombie');
@@ -23,6 +31,54 @@ export default class Zombie extends Phaser.Scene {
       data.myPlayer.nickname,
       data.socket
     );
+
+    this.gameEntry = this.physics.add.staticGroup({
+      key: 'portal',
+      frameQuantity: 1,
+    });
+
+    this.gameEntry
+      .getChildren()[0]
+      .setPosition(backToTown.x, backToTown.y)
+      .setDepth(3);
+
+    this.gameEntry.refresh();
+
+    const keyG = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.G);
+
+    this.physics.add.overlap(this.myPlayer, this.gameEntry, () => {
+      const { x, y } = backToTown;
+      const text: (
+        | Phaser.GameObjects.Graphics
+        | Phaser.GameObjects.Text
+        | undefined
+      )[] = [];
+
+      if (!this.isEnterGameZone) {
+        text.push(
+          this.add
+            .graphics()
+            .fillStyle(0xffffff, 50)
+            .fillRoundedRect(x - 140, y - 70, 265, 40, 20),
+          this.add.text(x - 130, y - 60, 'push G key for back to Town!', {
+            color: '#000',
+            font: '700 18px Arial',
+          })
+        );
+
+        this.isEnterGameZone = true;
+
+        setTimeout(() => {
+          text[0]?.destroy();
+          text[1]?.destroy();
+          this.isEnterGameZone = false;
+        }, 500);
+      }
+
+      if (Phaser.Input.Keyboard.JustDown(keyG)) {
+        this.changeScene('Town');
+      }
+    });
   }
 
   create() {
@@ -56,4 +112,15 @@ export default class Zombie extends Phaser.Scene {
   update() {
     this.myPlayer?.update();
   }
+
+  changeScene = (gameName: string) => {
+    emitter.emit('closeContent');
+
+    this.scene.pause();
+    this.scene.start(gameName, {
+      socket: this.socket,
+      myPlayer: this.myPlayer,
+      autoPlay: this.autoPlay,
+    });
+  };
 }

From 8760554b06ace41ce4f823e10c5247e2c4b7680a Mon Sep 17 00:00:00 2001
From: JJongBin <gghkdu2@gmail.com>
Date: Wed, 14 Dec 2022 23:40:44 +0900
Subject: [PATCH 3/5] =?UTF-8?q?[fix]=20#199=20=EB=A7=88=EC=9A=B0=EC=8A=A4?=
 =?UTF-8?q?=20=EC=9A=B0=ED=81=B4=EB=A6=AD=20=EB=A7=89=EA=B8=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/index.html | 30 +++++++++++++++++++-----------
 1 file changed, 19 insertions(+), 11 deletions(-)

diff --git a/frontend/index.html b/frontend/index.html
index 9708b6f..cf3d648 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -1,13 +1,21 @@
 <!DOCTYPE html>
 <html lang="ko">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>SleepyWoods</title>
-  </head>
-
-  <body>
-    <div id="root"></div>
-    <script type="module" src="./src/index.tsx"></script>
-  </body>
-</html>
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+
+  <script type="text/javascript">
+    document.oncontextmenu = function () {
+      return false;
+    }
+  </script>
+  <title>SleepyWoods</title>
+</head>
+
+<body>
+  <div id="root"></div>
+  <script type="module" src="./src/index.tsx"></script>
+</body>
+
+</html>
\ No newline at end of file

From 0db697c3d644d992d68789cab8d215e771c315f0 Mon Sep 17 00:00:00 2001
From: JJongBin <gghkdu2@gmail.com>
Date: Wed, 14 Dec 2022 23:43:30 +0900
Subject: [PATCH 4/5] =?UTF-8?q?[fix]=20=EB=AF=B8=EB=8B=88=EA=B2=8C?=
 =?UTF-8?q?=EC=9E=84=20=EB=AA=A8=EB=8B=AC=EA=B3=BC=20=EB=B3=B4=EB=93=9C=20?=
 =?UTF-8?q?=EB=AA=A8=EB=8B=AC=EC=9D=B4=20=EA=B2=B9=EC=B3=A4=EC=9D=84?=
 =?UTF-8?q?=EB=95=8C=20=EB=B3=B4=EB=93=9C=EA=B0=80=20=EC=83=81=EB=8B=A8?=
 =?UTF-8?q?=EC=97=90=20=EC=9C=84=EC=B9=98=ED=95=98=EB=8F=84=EB=A1=9D=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/page/Town/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/page/Town/index.tsx b/frontend/src/page/Town/index.tsx
index 3b01545..9925f48 100644
--- a/frontend/src/page/Town/index.tsx
+++ b/frontend/src/page/Town/index.tsx
@@ -48,8 +48,8 @@ const Town = () => {
       <Sidebar />
       <Game />
       {isSnowing && <Snow />}
-      <SleepyBoard />
       <MiniGame />
+      <SleepyBoard />
       <Chat />
       <Info />
 

From 01987bb13078df09b253207431f88a18d954fd79 Mon Sep 17 00:00:00 2001
From: JJongBin <gghkdu2@gmail.com>
Date: Wed, 14 Dec 2022 23:44:08 +0900
Subject: [PATCH 5/5] =?UTF-8?q?[fix]=20#200=20=EC=A0=9C=EC=9E=90=EB=A6=AC?=
 =?UTF-8?q?=20=EA=B1=B8=EC=9D=8C=20=EB=B2=84=EA=B7=B8=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/component/Game/Phaser/Player/myPlayer.ts | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

diff --git a/frontend/src/component/Game/Phaser/Player/myPlayer.ts b/frontend/src/component/Game/Phaser/Player/myPlayer.ts
index 5005917..d748d32 100644
--- a/frontend/src/component/Game/Phaser/Player/myPlayer.ts
+++ b/frontend/src/component/Game/Phaser/Player/myPlayer.ts
@@ -47,6 +47,7 @@ export class MyPlayer extends Player {
 
   update() {
     const prevState = this.state;
+    const prevPos = { x: this.x, y: this.y };
 
     if (!this.isCanMove) {
       this.state = 'wait';
@@ -112,12 +113,15 @@ export class MyPlayer extends Player {
     if (prevState !== this.state) changeState(this);
 
     if (prevState !== this.state || this.heldDirection.length) {
-      this.socket.emit('move', {
-        state: this.state,
-        direction: this.direction,
-        x: this.x,
-        y: this.y,
-      });
+      this.socket.emit(
+        prevPos.x !== this.x || prevPos.y !== this.y ? 'move' : 'motion',
+        {
+          state: this.state,
+          direction: this.direction,
+          x: this.x,
+          y: this.y,
+        }
+      );
     }
   }
 }