diff --git a/frontend/src/pages/match-up/page.js b/frontend/src/pages/match-up/page.js index 2594a5cb..cb45a0b9 100644 --- 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 index 6f231e06..4a64e820 100644 --- 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}`,