From 272992548110e5be7521b47c350bafc6179b55e1 Mon Sep 17 00:00:00 2001 From: donghyun Date: Mon, 11 Mar 2024 22:06:35 +0900 Subject: [PATCH 1/3] =?UTF-8?q?feat:=20match3=20=EB=A1=9C=EC=A7=81=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80=20=EC=99=84=EB=A3=8C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/pages/match-up/page.js | 12 +-- frontend/src/pages/online-game/page.js | 110 ++++++++++++++----------- 2 files changed, 67 insertions(+), 55 deletions(-) diff --git a/frontend/src/pages/match-up/page.js b/frontend/src/pages/match-up/page.js index 2594a5cb..969f23a5 100644 --- a/frontend/src/pages/match-up/page.js +++ b/frontend/src/pages/match-up/page.js @@ -8,11 +8,6 @@ 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) => { @@ -26,7 +21,7 @@ export default function Matchup($container, info = null) { } else { console.error("No match data available"); } - setCards(data.data.data.match3); + setCards(info.data.data.match3); }; const init = () => { @@ -36,9 +31,9 @@ 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"); } @@ -157,7 +152,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..7eb7b9e1 100644 --- a/frontend/src/pages/online-game/page.js +++ b/frontend/src/pages/online-game/page.js @@ -19,19 +19,24 @@ export default function OnlineGame($container, info) { let scoreInput = { player1: 0, player2: 0 }; let [getScore, setScore] = useState(scoreInput, this, "renderScoreBoard"); let [getTime, setTime] = useState(0, this, "renderTime"); - let keyState = { up: false, down: false }; - - let matchesHandler = {}; + // let keyState = { up: false, down: false }; let myNickname = null; let myMatch = 1; let initMyInfo = async () => { myNickname = await getUserMe().then((user) => user.data.nickname); if ( + info.data.data.match2 && ( info.data.data.match2[0].nickname === myNickname || - info.data.data.match2[1].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 = () => { @@ -43,8 +48,8 @@ export default function OnlineGame($container, info) { setTime(getTime() + 1); }, 1000); document.addEventListener("keydown", keyEventHandler); - document.addEventListener("keydown", keyDownHandler); - document.addEventListener("keyup", keyUpHandler); + // document.addEventListener("keydown", keyDownHandler); + // document.addEventListener("keyup", keyUpHandler); const $toast = document.querySelector(".toast"); const toast = new bootstrap.Toast($toast); @@ -60,8 +65,8 @@ export default function OnlineGame($container, info) { clearInterval(this.timeIntervalId); document.querySelector("#header").style.display = "block"; document.removeEventListener("keydown", keyEventHandler); - document.removeEventListener("keydown", keyDownHandler); - document.removeEventListener("keyup", keyUpHandler); + // document.removeEventListener("keydown", keyDownHandler); + // document.removeEventListener("keyup", keyUpHandler); window.removeEventListener("beforeunload", disconnectWebSocket); }; // TODO: avatar 하드코딩된거 나중에 수정하기 중복 코드 gameutils.js로 따로 빼기 @@ -108,39 +113,39 @@ export default function OnlineGame($container, info) { $container.querySelector(".in-game").style.backgroundImage = "url('../../../assets/images/ingame_background4.png')"; break; - // case "ArrowUp": - // if (keyState) console.log("up"); - // ws.send(JSON.stringify({ type: "keyboard", data: "up" })); - // break; - // case "ArrowDown": - // console.log("down"); - // ws.send(JSON.stringify({ type: "keyboard", data: "down" })); - // break; + case "ArrowUp": + // if (keyState) console.log("up"); + ws.send(JSON.stringify({ type: "keyboard", data: "up" })); + break; + case "ArrowDown": + // console.log("down"); + ws.send(JSON.stringify({ type: "keyboard", data: "down" })); + break; default: break; } }; - const keyDownHandler = (e) => { - if (e.key === "ArrowUp") { - keyState.up = true; - } else if (e.key === "ArrowDown") { - keyState.down = true; - } - }; - const keyUpHandler = (e) => { - if (e.key === "ArrowUp") { - if (keyState.up === false) return; - keyState.up = false; - console.log("up"); - ws.send(JSON.stringify({ type: "keyboard", data: "up" })); - } else if (e.key === "ArrowDown") { - if (keyState.down === false) return; - keyState.down = false; - console.log("down"); - ws.send(JSON.stringify({ type: "keyboard", data: "down" })); - } - }; + // const keyDownHandler = (e) => { + // if (e.key === "ArrowUp") { + // keyState.up = true; + // } else if (e.key === "ArrowDown") { + // keyState.down = true; + // } + // }; + // const keyUpHandler = (e) => { + // if (e.key === "ArrowUp") { + // if (keyState.up === false) return; + // keyState.up = false; + // console.log("up"); + // ws.send(JSON.stringify({ type: "keyboard", data: "up" })); + // } else if (e.key === "ArrowDown") { + // if (keyState.down === false) return; + // keyState.down = false; + // console.log("down"); + // ws.send(JSON.stringify({ type: "keyboard", data: "down" })); + // } + // }; /** * 바 두 개와 공의 데이터를 받아서 화면에 그리는 함수. @@ -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,38 @@ export default function OnlineGame($container, info) { setScore(newScore); } else if (data.type === "game_end") endGame(data, ws); }; - - function endGame(data, ws) { - console.log(data, myMatch, myNickname); - if (matchesHandler[data.data.match]) { - return; + 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(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}`, From ca66e1d09b022db8c5cb0d443d3095fcd8f3ec58 Mon Sep 17 00:00:00 2001 From: donghyun Date: Tue, 12 Mar 2024 13:14:20 +0900 Subject: [PATCH 2/3] =?UTF-8?q?feat:=20=EA=B8=B0=ED=9A=8D=20=EC=88=98?= =?UTF-8?q?=EC=A0=95=EC=9C=BC=EB=A1=9C=20onmessage=20=EC=A0=9C=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/pages/match-up/page.js | 33 +++++++++++++++-------------- 1 file changed, 17 insertions(+), 16 deletions(-) diff --git a/frontend/src/pages/match-up/page.js b/frontend/src/pages/match-up/page.js index 969f23a5..cb45a0b9 100644 --- a/frontend/src/pages/match-up/page.js +++ b/frontend/src/pages/match-up/page.js @@ -10,19 +10,20 @@ export default function Matchup($container, info = null) { console.log(info); // 이전 페이지로 부터 받아온 정보 처리 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(info.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 = []; @@ -38,9 +39,9 @@ export default function Matchup($container, info = null) { console.error("No match data available"); } - if (matchData.length > 0) { - setCards(matchData); - } + // if (matchData.length > 0) { + setCards(matchData); + // } // // 5초 후에 local-game 경로로 자동 이동 // setTimeout(() => { From 83960a3653e81ea3a0a068b7081011167ac782d6 Mon Sep 17 00:00:00 2001 From: donghyun Date: Tue, 12 Mar 2024 13:14:42 +0900 Subject: [PATCH 3/3] =?UTF-8?q?feat:=20key=20=EB=AC=B4=ED=95=9C=EC=9E=85?= =?UTF-8?q?=EB=A0=A5=20=EB=8B=A4=EC=8B=9C=20=EB=A7=89=EC=95=84=EC=A4=8C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/pages/online-game/page.js | 85 +++++++++++++------------- 1 file changed, 42 insertions(+), 43 deletions(-) diff --git a/frontend/src/pages/online-game/page.js b/frontend/src/pages/online-game/page.js index 7eb7b9e1..4a64e820 100644 --- a/frontend/src/pages/online-game/page.js +++ b/frontend/src/pages/online-game/page.js @@ -19,22 +19,22 @@ export default function OnlineGame($container, info) { let scoreInput = { player1: 0, player2: 0 }; let [getScore, setScore] = useState(scoreInput, this, "renderScoreBoard"); let [getTime, setTime] = useState(0, this, "renderTime"); - // let keyState = { up: false, down: false }; + let keyState = { up: false, down: false }; let myNickname = null; let myMatch = 1; let initMyInfo = async () => { myNickname = await getUserMe().then((user) => user.data.nickname); if ( - info.data.data.match2 && ( - 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) + info.data.data.match3 && + (info.data.data.match3[0].nickname === myNickname || + info.data.data.match3[1].nickname === myNickname) ) myMatch = 3; }; @@ -48,8 +48,8 @@ export default function OnlineGame($container, info) { setTime(getTime() + 1); }, 1000); document.addEventListener("keydown", keyEventHandler); - // document.addEventListener("keydown", keyDownHandler); - // document.addEventListener("keyup", keyUpHandler); + document.addEventListener("keydown", keyDownHandler); + document.addEventListener("keyup", keyUpHandler); const $toast = document.querySelector(".toast"); const toast = new bootstrap.Toast($toast); @@ -65,8 +65,8 @@ export default function OnlineGame($container, info) { clearInterval(this.timeIntervalId); document.querySelector("#header").style.display = "block"; document.removeEventListener("keydown", keyEventHandler); - // document.removeEventListener("keydown", keyDownHandler); - // document.removeEventListener("keyup", keyUpHandler); + document.removeEventListener("keydown", keyDownHandler); + document.removeEventListener("keyup", keyUpHandler); window.removeEventListener("beforeunload", disconnectWebSocket); }; // TODO: avatar 하드코딩된거 나중에 수정하기 중복 코드 gameutils.js로 따로 빼기 @@ -113,39 +113,39 @@ export default function OnlineGame($container, info) { $container.querySelector(".in-game").style.backgroundImage = "url('../../../assets/images/ingame_background4.png')"; break; - case "ArrowUp": - // if (keyState) console.log("up"); - ws.send(JSON.stringify({ type: "keyboard", data: "up" })); - break; - case "ArrowDown": - // console.log("down"); - ws.send(JSON.stringify({ type: "keyboard", data: "down" })); - break; + // case "ArrowUp": + // // if (keyState) console.log("up"); + // ws.send(JSON.stringify({ type: "keyboard", data: "up" })); + // break; + // case "ArrowDown": + // // console.log("down"); + // ws.send(JSON.stringify({ type: "keyboard", data: "down" })); + // break; default: break; } }; - // const keyDownHandler = (e) => { - // if (e.key === "ArrowUp") { - // keyState.up = true; - // } else if (e.key === "ArrowDown") { - // keyState.down = true; - // } - // }; - // const keyUpHandler = (e) => { - // if (e.key === "ArrowUp") { - // if (keyState.up === false) return; - // keyState.up = false; - // console.log("up"); - // ws.send(JSON.stringify({ type: "keyboard", data: "up" })); - // } else if (e.key === "ArrowDown") { - // if (keyState.down === false) return; - // keyState.down = false; - // console.log("down"); - // ws.send(JSON.stringify({ type: "keyboard", data: "down" })); - // } - // }; + const keyDownHandler = (e) => { + if (e.key === "ArrowUp") { + keyState.up = true; + } else if (e.key === "ArrowDown") { + keyState.down = true; + } + }; + const keyUpHandler = (e) => { + if (e.key === "ArrowUp") { + if (keyState.up === false) return; + keyState.up = false; + console.log("up"); + ws.send(JSON.stringify({ type: "keyboard", data: "up" })); + } else if (e.key === "ArrowDown") { + if (keyState.down === false) return; + keyState.down = false; + console.log("down"); + ws.send(JSON.stringify({ type: "keyboard", data: "down" })); + } + }; /** * 바 두 개와 공의 데이터를 받아서 화면에 그리는 함수. @@ -227,12 +227,11 @@ export default function OnlineGame($container, info) { let matchEndCnt = 0; function match3Logic(ws) { ws.onmessage = null; - ws.send(JSON.stringify( - {"type":"match3_info"})); + 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(myMatch, data); @@ -254,7 +253,7 @@ export default function OnlineGame($container, info) { if (data.type === "game_end") { match3Logic(ws); } - } + }; } } else { navigate(