Merge pull request #470 from GunGonGamLee/469-feat-match3-로직-갈아엎기

feat: match3 로직 추가 완료
GunGonGamLee · Mar 12, 2024 · 113d555 · 113d555
2 parents 49a0865 + 83960a3
commit 113d555
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 40 deletions.
diff --git a/frontend/src/pages/match-up/page.js b/frontend/src/pages/match-up/page.js
@@ -8,26 +8,22 @@ export default function Matchup($container, info = null) {
     return;
   }
   console.log(info);
-  if (info.remainMatch === true) {
-    alert("이전 경기가 아직 끝나지 않았음 기다리셈");
-    // TODO: match 다른거 끝나면 send쏘게 처리 필요함
-    return;
-  } //////////////////////////
   // 이전 페이지로 부터 받아온 정보 처리
   const ws = info.socket;
-  ws.onmessage = (msg) => {
-    let data = JSON.parse(msg.data);
-    let matchData = [];
-
-    // 파이널 대기 때 받아올 데이터 set
-    if (info.data.data.match3) {
-      renderFinal();
-      matchData.concat(info.data.data.match3);
-    } else {
-      console.error("No match data available");
-    }
-    setCards(data.data.data.match3);
-  };
+  ws.onmessage = null;
+  // ws.onmessage = (msg) => {
+  //   let data = JSON.parse(msg.data);
+  //   let matchData = [];
+  //
+  //   // 파이널 대기 때 받아올 데이터 set
+  //   if (info.data.data.match3) {
+  //     renderFinal();
+  //     matchData.concat(info.data.data.match3);
+  //   } else {
+  //     console.error("No match data available");
+  //   }
+  //   setCards(info.data.data.match3);
+  // };
 
   const init = () => {
     let matchData = [];
@@ -36,16 +32,16 @@ export default function Matchup($container, info = null) {
       renderSemifinal();
       matchData = matchData.concat(info.data.data.match1);
       matchData = matchData.concat(info.data.data.match2);
-    } else if (info.data.data.match1) {
+    } else if (info.data.data.match3) {
       renderFinal();
-      matchData = matchData.concat(info.data.data.match1);
+      matchData = matchData.concat(info.data.data.match3);
     } else {
       console.error("No match data available");
     }
 
-    if (matchData.length > 0) {
-      setCards(matchData);
-    }
+    // if (matchData.length > 0) {
+    setCards(matchData);
+    // }
 
     // // 5초 후에 local-game 경로로 자동 이동
     // setTimeout(() => {
@@ -157,7 +153,6 @@ export default function Matchup($container, info = null) {
   let [getCards, setCards] = useState({}, this, "renderCards");
 
   init();
-  // TODO: 여기서 5초 후에 online-game으로 이동하지만, match3의 경우엔 onmessage를 기다려야함
   setTimeout(() => {
     ws.onmessage = null;
     navigate("/online-game", { socket: ws, data: info.data });

diff --git a/frontend/src/pages/online-game/page.js b/frontend/src/pages/online-game/page.js
@@ -21,17 +21,22 @@ export default function OnlineGame($container, info) {
   let [getTime, setTime] = useState(0, this, "renderTime");
   let keyState = { up: false, down: false };
 
-  let matchesHandler = {};
-
   let myNickname = null;
   let myMatch = 1;
   let initMyInfo = async () => {
     myNickname = await getUserMe().then((user) => user.data.nickname);
     if (
-      info.data.data.match2[0].nickname === myNickname ||
-      info.data.data.match2[1].nickname === myNickname
+      info.data.data.match2 &&
+      (info.data.data.match2[0].nickname === myNickname ||
+        info.data.data.match2[1].nickname === myNickname)
     )
       myMatch = 2;
+    else if (
+      info.data.data.match3 &&
+      (info.data.data.match3[0].nickname === myNickname ||
+        info.data.data.match3[1].nickname === myNickname)
+    )
+      myMatch = 3;
   };
 
   const init = () => {
@@ -109,11 +114,11 @@ export default function OnlineGame($container, info) {
           "url('../../../assets/images/ingame_background4.png')";
         break;
       // case "ArrowUp":
-      //   if (keyState) console.log("up");
+      //   // if (keyState) console.log("up");
       //   ws.send(JSON.stringify({ type: "keyboard", data: "up" }));
       //   break;
       // case "ArrowDown":
-      //   console.log("down");
+      //   // console.log("down");
       //   ws.send(JSON.stringify({ type: "keyboard", data: "down" }));
       //   break;
       default:
@@ -194,7 +199,7 @@ export default function OnlineGame($container, info) {
 
   ws.onmessage = (event) => {
     const data = JSON.parse(event.data);
-    console.log(data);
+    // console.log(data);
     if (data.type === "in_game") {
       bar1.x = data.data.left_side_player.x;
       bar1.y = data.data.left_side_player.y;
@@ -219,25 +224,37 @@ export default function OnlineGame($container, info) {
         setScore(newScore);
     } else if (data.type === "game_end") endGame(data, ws);
   };
-
+  let matchEndCnt = 0;
+  function match3Logic(ws) {
+    ws.onmessage = null;
+    ws.send(JSON.stringify({ type: "match3_info" }));
+    ws.onmessage = (msg) => {
+      let data = JSON.parse(msg.data);
+      navigate(`/match-up`, { socket: ws, data: data, remainMatch: true });
+    };
+  }
   function endGame(data, ws) {
-    console.log(data, myMatch, myNickname);
-    if (matchesHandler[data.data.match]) {
-      return;
-    }
-
+    console.log(myMatch, data);
     if (myMatch !== data.data.match) {
+      matchEndCnt++;
       return;
     }
 
     let endData = data.data;
     let isWinner = endData.winner === myNickname;
-    matchesHandler[data.data.match] = true;
 
     if (!endData.final) {
       if (isWinner) {
-        ws.onmessage = null;
-        navigate(`/match-up`, { socket: ws, data: endData, remainMatch: true });
+        if (matchEndCnt === 1) {
+          match3Logic(ws);
+        } else {
+          ws.onmessage = (msg) => {
+            const data = JSON.parse(msg.data);
+            if (data.type === "game_end") {
+              match3Logic(ws);
+            }
+          };
+        }
       } else {
         navigate(
           `/histories/details?mode=${endData.game_mode}&gameId=${endData.game_id}`,