From 55b1674182f87f5e3bf11ceb114e24d559293917 Mon Sep 17 00:00:00 2001 From: donghyun Date: Tue, 12 Mar 2024 16:32:06 +0900 Subject: [PATCH 1/7] =?UTF-8?q?feat:=20online-game=20=EB=AA=A8=EB=93=A0=20?= =?UTF-8?q?=EB=A1=9C=EC=A7=81=20=EB=B9=84=EB=8F=99=EA=B8=B0=EB=A1=9C=20?= =?UTF-8?q?=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/pages/online-game/page.js | 115 +++++++++++++------------ 1 file changed, 59 insertions(+), 56 deletions(-) diff --git a/frontend/src/pages/online-game/page.js b/frontend/src/pages/online-game/page.js index 2f9ece98..56ae54af 100644 --- a/frontend/src/pages/online-game/page.js +++ b/frontend/src/pages/online-game/page.js @@ -23,8 +23,10 @@ export default function OnlineGame($container, info) { let myNickname = null; let myMatch = 1; + let bar1, bar2, ball, $toast, toastt, canvas, ctx; let initMyInfo = async () => { myNickname = await getUserMe().then((user) => user.data.nickname); + console.log(myNickname); if ( info.data.data.match2 && (info.data.data.match2[0].nickname === myNickname || @@ -37,10 +39,10 @@ export default function OnlineGame($container, info) { info.data.data.match3[1].nickname === myNickname) ) myMatch = 3; + console.log(myMatch); }; - - const init = () => { - initMyInfo(); + const init = async () => { + await initMyInfo(); hideHeader(); this.render(); this.renderScoreBoard(); @@ -51,10 +53,61 @@ export default function OnlineGame($container, info) { document.addEventListener("keydown", keyDownHandler); document.addEventListener("keyup", keyUpHandler); - const $toast = document.querySelector(".toast"); - const toast = new bootstrap.Toast($toast); - toast.show(); // Toast를 보여줍니다. + $toast = document.querySelector(".toast"); + toastt = new bootstrap.Toast($toast); + toastt.show(); // Toast를 보여줍니다. window.addEventListener("beforeunload", disconnectWebSocket); + canvas = $container.querySelector("#gameCanvas"); + ctx = canvas.getContext("2d"); + canvas.width = document.body.clientWidth; + canvas.height = document.body.clientHeight * 0.88; // header의 height가 12vh이므로 88%만큼의 height를 가짐 + console.log(canvas.width, canvas.height); + + bar1 = { x: 10, y: canvas.height / 2 - 50, width: 20, height: 100 }; + bar2 = { + x: canvas.width - 30, + y: canvas.height / 2 - 50, + width: 20, + height: 100, + }; + ball = { x: canvas.width / 2, y: canvas.height / 2, radius: 10 }; + ws.send( + JSON.stringify({ + type: myMatch === 3 ? "match3_start" : "start", + data: { + map_width: canvas.width, + map_height: canvas.height, + }, + }), + ); + + ws.onmessage = (event) => { + const data = JSON.parse(event.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; + bar1.width = 20; + bar1.height = 100; + bar2.x = data.data.right_side_player.x; + bar2.y = data.data.right_side_player.y; + bar2.width = 20; + bar2.height = 100; + ball.x = data.data.ball.x; + ball.y = data.data.ball.y; + draw(bar1, bar2, ball); + let score = getScore(); + let newScore = { + player1: data.data.left_side_player.score, + player2: data.data.right_side_player.score, + }; + if ( + score.player1 !== newScore.player1 || + score.player2 !== newScore.player2 + ) + setScore(newScore); + } else if (data.type === "game_end") endGame(data, ws); + }; }; const disconnectWebSocket = () => { @@ -173,57 +226,7 @@ export default function OnlineGame($container, info) { } init(); - const canvas = $container.querySelector("#gameCanvas"); - const ctx = canvas.getContext("2d"); - canvas.width = document.body.clientWidth; - canvas.height = document.body.clientHeight * 0.88; // header의 height가 12vh이므로 88%만큼의 height를 가짐 - console.log(canvas.width, canvas.height); - - let bar1 = { x: 10, y: canvas.height / 2 - 50, width: 20, height: 100 }; - let bar2 = { - x: canvas.width - 30, - y: canvas.height / 2 - 50, - width: 20, - height: 100, - }; - let ball = { x: canvas.width / 2, y: canvas.height / 2, radius: 10 }; - ws.send( - JSON.stringify({ - type: myMatch === 3 ? "match3_start" : "start", - data: { - map_width: canvas.width, - map_height: canvas.height, - }, - }), - ); - ws.onmessage = (event) => { - const data = JSON.parse(event.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; - bar1.width = 20; - bar1.height = 100; - bar2.x = data.data.right_side_player.x; - bar2.y = data.data.right_side_player.y; - bar2.width = 20; - bar2.height = 100; - ball.x = data.data.ball.x; - ball.y = data.data.ball.y; - draw(bar1, bar2, ball); - let score = getScore(); - let newScore = { - player1: data.data.left_side_player.score, - player2: data.data.right_side_player.score, - }; - if ( - score.player1 !== newScore.player1 || - score.player2 !== newScore.player2 - ) - setScore(newScore); - } else if (data.type === "game_end") endGame(data, ws); - }; let matchEndCnt = 0; function match3Logic(ws) { ws.onmessage = null; From 68cfbbb1b2e136cb7c39635bbbbb5820e27a5fb9 Mon Sep 17 00:00:00 2001 From: donghyun Date: Tue, 12 Mar 2024 17:26:18 +0900 Subject: [PATCH 2/7] =?UTF-8?q?feat:=20history=20=EC=9D=B4=EB=8F=99=20?= =?UTF-8?q?=EC=8B=9C=20=EC=9B=B9=EC=86=8C=EC=BC=93=20=EC=97=B0=EA=B2=B0=20?= =?UTF-8?q?=EB=81=8A=EC=96=B4=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 | 1 + 1 file changed, 1 insertion(+) diff --git a/frontend/src/pages/online-game/page.js b/frontend/src/pages/online-game/page.js index 56ae54af..69bd905b 100644 --- a/frontend/src/pages/online-game/page.js +++ b/frontend/src/pages/online-game/page.js @@ -259,6 +259,7 @@ export default function OnlineGame($container, info) { }; } } else { + ws.close(); navigate( `/histories/details?mode=${endData.game_mode}&gameId=${endData.game_id}`, { gameId: endData.game_id }, From 87565876a7560dae8e4514676fbb0711146cb8ee Mon Sep 17 00:00:00 2001 From: donghyun Date: Tue, 12 Mar 2024 17:54:01 +0900 Subject: [PATCH 3/7] =?UTF-8?q?feat:=20console.log=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/online-game/page.js | 5 ----- 1 file changed, 5 deletions(-) diff --git a/frontend/src/pages/online-game/page.js b/frontend/src/pages/online-game/page.js index 69bd905b..ca861ffd 100644 --- a/frontend/src/pages/online-game/page.js +++ b/frontend/src/pages/online-game/page.js @@ -26,7 +26,6 @@ export default function OnlineGame($container, info) { let bar1, bar2, ball, $toast, toastt, canvas, ctx; let initMyInfo = async () => { myNickname = await getUserMe().then((user) => user.data.nickname); - console.log(myNickname); if ( info.data.data.match2 && (info.data.data.match2[0].nickname === myNickname || @@ -39,7 +38,6 @@ export default function OnlineGame($container, info) { info.data.data.match3[1].nickname === myNickname) ) myMatch = 3; - console.log(myMatch); }; const init = async () => { await initMyInfo(); @@ -190,12 +188,10 @@ export default function OnlineGame($container, info) { 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" })); } }; @@ -237,7 +233,6 @@ export default function OnlineGame($container, info) { }; } function endGame(data, ws) { - console.log(myMatch, data); if (myMatch !== data.data.match) { matchEndCnt++; return; From 276f47c128c77e9c38906c3ede7c8d9069e78aa2 Mon Sep 17 00:00:00 2001 From: donghyun Date: Tue, 12 Mar 2024 20:02:54 +0900 Subject: [PATCH 4/7] =?UTF-8?q?chore:=20console.log=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 | 1 - frontend/src/pages/online-game/page.js | 2 -- frontend/src/pages/register/page.js | 1 - frontend/src/pages/waiting-room/page.js | 4 ---- 4 files changed, 8 deletions(-) diff --git a/frontend/src/pages/match-up/page.js b/frontend/src/pages/match-up/page.js index cb45a0b9..ebb11b79 100644 --- a/frontend/src/pages/match-up/page.js +++ b/frontend/src/pages/match-up/page.js @@ -7,7 +7,6 @@ export default function Matchup($container, info = null) { navigate("/game-mode"); return; } - console.log(info); // 이전 페이지로 부터 받아온 정보 처리 const ws = info.socket; ws.onmessage = null; diff --git a/frontend/src/pages/online-game/page.js b/frontend/src/pages/online-game/page.js index ca861ffd..4227e518 100644 --- a/frontend/src/pages/online-game/page.js +++ b/frontend/src/pages/online-game/page.js @@ -14,7 +14,6 @@ export default function OnlineGame($container, info) { navigate("/game-mode"); return; } - console.log(info); const ws = info.socket; let scoreInput = { player1: 0, player2: 0 }; let [getScore, setScore] = useState(scoreInput, this, "renderScoreBoard"); @@ -59,7 +58,6 @@ export default function OnlineGame($container, info) { ctx = canvas.getContext("2d"); canvas.width = document.body.clientWidth; canvas.height = document.body.clientHeight * 0.88; // header의 height가 12vh이므로 88%만큼의 height를 가짐 - console.log(canvas.width, canvas.height); bar1 = { x: 10, y: canvas.height / 2 - 50, width: 20, height: 100 }; bar2 = { diff --git a/frontend/src/pages/register/page.js b/frontend/src/pages/register/page.js index 2b07073c..6a9576c6 100644 --- a/frontend/src/pages/register/page.js +++ b/frontend/src/pages/register/page.js @@ -102,7 +102,6 @@ export default function Register($container) { }) .then((data) => { // response.json()이 null이 아닐 때만 아래 로직 실행 - console.log(data); if (data) { // token 값을 로컬 스토리지에 저장 if (data.token) { diff --git a/frontend/src/pages/waiting-room/page.js b/frontend/src/pages/waiting-room/page.js index 04b5c9af..3418c499 100644 --- a/frontend/src/pages/waiting-room/page.js +++ b/frontend/src/pages/waiting-room/page.js @@ -18,7 +18,6 @@ export default function WaitingRoom($container, info = null) { } let userNickname = null; let players = info.data.players; - console.log(players); getUserMe().then((user) => { userNickname = user.data.nickname; }); @@ -42,12 +41,10 @@ export default function WaitingRoom($container, info = null) { ); ws.onmessage = (msg) => { let data = JSON.parse(msg.data); - console.log(data); if (data.type === "game_info") { const player = info.data.players.find( (player) => player.nickname === userNickname, ); - console.log(player, userNickname); if ( ((data.data.mode === 1 && data.data.players.length === 4) || (data.data.mode === 0 && data.data.players.length === 2)) && @@ -60,7 +57,6 @@ export default function WaitingRoom($container, info = null) { players = data.data.players; setUserState(players); } else { - console.log(data); ws.close(); const newWs = new WebSocket(`${WEBSOCKET}${data.data}`); newWs.onmessage = (msg) => { From e727ec3481678b6055998491a6c7fefef3fa34e8 Mon Sep 17 00:00:00 2001 From: donghyun Date: Tue, 12 Mar 2024 20:03:47 +0900 Subject: [PATCH 5/7] =?UTF-8?q?feat:=20=EC=A4=91=EB=B3=B5=EB=A1=9C?= =?UTF-8?q?=EA=B7=B8=EC=9D=B8=20=EB=8B=A4=EC=8B=9C=20=EB=A7=89=EC=95=84?= =?UTF-8?q?=EC=A4=8C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/header/mainHeader/header.js | 17 +++++++++-------- 1 file changed, 9 insertions(+), 8 deletions(-) diff --git a/frontend/src/header/mainHeader/header.js b/frontend/src/header/mainHeader/header.js index afcd171c..e3ad852d 100644 --- a/frontend/src/header/mainHeader/header.js +++ b/frontend/src/header/mainHeader/header.js @@ -22,13 +22,12 @@ export default function MainHeader($container) { this.ws = new WebSocket(`${WEBSOCKET}/friend_status/`); this.ws.onmessage = (msg) => { let response = JSON.parse(msg.data); - // TODO: 중복로그인 임시로 풀어둠 - // if (response.type === 'alreadyLogin') { - // console.log(response.message); - // this.ws.close(); - // navigate("error", { errorCode: 4001 }); - // return; - // } + if (response.type === "alreadyLogin") { + console.log(response.message); + this.ws.close(); + navigate("error", { errorCode: 4001 }); + return; + } // 업데이트된 내용을 set 함수에 전달합니다. setFriendsList(response.data); @@ -271,7 +270,9 @@ export default function MainHeader($container) { // 상태 관리 시스템으로부터 현재 친구 목록 상태를 가져옴. const newFriendList = getFriendsList(); // friends가 배열인지 확인하고, 아니라면 빈 배열을 사용. - const friends = Array.isArray(newFriendList.friends) ? newFriendList.friends : []; + const friends = Array.isArray(newFriendList.friends) + ? newFriendList.friends + : []; // 새로운 친구 목록을 기반으로 친구 카드를 생성. const newFriendCards = friends From d479de7432c95dc9ee72fac6d0d7370c8c035f88 Mon Sep 17 00:00:00 2001 From: donghyun Date: Tue, 12 Mar 2024 20:07:22 +0900 Subject: [PATCH 6/7] feat: delete todo --- frontend/src/pages/local-game/page.js | 3 +-- frontend/src/pages/online-game/page.js | 1 - frontend/src/utils/clickEvent.js | 1 - 3 files changed, 1 insertion(+), 4 deletions(-) diff --git a/frontend/src/pages/local-game/page.js b/frontend/src/pages/local-game/page.js index b094708b..88d59a38 100644 --- a/frontend/src/pages/local-game/page.js +++ b/frontend/src/pages/local-game/page.js @@ -220,8 +220,7 @@ export default function LocalGame($container, info = null) { } drawFunction(bar1, bar2, ball); let moveBallEventId = window.requestAnimationFrame(moveBall); - if (getScore().player1 + getScore().player2 >= 1) { - // TODO: 게임 종료 스코어 나중에 고치기 + if (getScore().player1 + getScore().player2 >= 5) { cancelAnimationFrame(moveBallEventId); // 게임 종료 if (info.finalPlayer1 === null) { diff --git a/frontend/src/pages/online-game/page.js b/frontend/src/pages/online-game/page.js index 4227e518..dd4d1af3 100644 --- a/frontend/src/pages/online-game/page.js +++ b/frontend/src/pages/online-game/page.js @@ -118,7 +118,6 @@ export default function OnlineGame($container, info) { document.removeEventListener("keyup", keyUpHandler); window.removeEventListener("beforeunload", disconnectWebSocket); }; - // TODO: avatar 하드코딩된거 나중에 수정하기 중복 코드 gameutils.js로 따로 빼기 this.render = () => { $container.innerHTML = ` ${scoreBar(info.data.data, myMatch)} diff --git a/frontend/src/utils/clickEvent.js b/frontend/src/utils/clickEvent.js index 59e239c4..7cce6978 100644 --- a/frontend/src/utils/clickEvent.js +++ b/frontend/src/utils/clickEvent.js @@ -1,4 +1,3 @@ -// TODO => click 시의 동작은 여기서 정의 export const click = (element, func) => { element.addEventListener("click", func); }; From 7b3cd7aee2e0f53fb01f65697c6cf1438b748689 Mon Sep 17 00:00:00 2001 From: donghyun Date: Tue, 12 Mar 2024 20:22:10 +0900 Subject: [PATCH 7/7] =?UTF-8?q?feat:=20bar=20=EA=B8=B8=EC=9D=B4=20?= =?UTF-8?q?=EA=B3=A0=EC=A0=95=EA=B0=92=EC=9D=B4=EB=8D=98=EA=B1=B0=20?= =?UTF-8?q?=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/pages/online-game/page.js | 17 ++++++++--------- 1 file changed, 8 insertions(+), 9 deletions(-) diff --git a/frontend/src/pages/online-game/page.js b/frontend/src/pages/online-game/page.js index dd4d1af3..e6e62e24 100644 --- a/frontend/src/pages/online-game/page.js +++ b/frontend/src/pages/online-game/page.js @@ -19,10 +19,10 @@ export default function OnlineGame($container, info) { let [getScore, setScore] = useState(scoreInput, this, "renderScoreBoard"); let [getTime, setTime] = useState(0, this, "renderTime"); let keyState = { up: false, down: false }; - let myNickname = null; let myMatch = 1; - let bar1, bar2, ball, $toast, toastt, canvas, ctx; + let bar1, bar2, ball, $toast, toastObj, canvas, ctx; + let matchEndCnt = 0; let initMyInfo = async () => { myNickname = await getUserMe().then((user) => user.data.nickname); if ( @@ -51,8 +51,8 @@ export default function OnlineGame($container, info) { document.addEventListener("keyup", keyUpHandler); $toast = document.querySelector(".toast"); - toastt = new bootstrap.Toast($toast); - toastt.show(); // Toast를 보여줍니다. + toastObj = new bootstrap.Toast($toast); + toastObj.show(); // Toast를 보여줍니다. window.addEventListener("beforeunload", disconnectWebSocket); canvas = $container.querySelector("#gameCanvas"); ctx = canvas.getContext("2d"); @@ -83,12 +83,12 @@ export default function OnlineGame($container, info) { if (data.type === "in_game") { bar1.x = data.data.left_side_player.x; bar1.y = data.data.left_side_player.y; - bar1.width = 20; - bar1.height = 100; + bar1.width = data.data.width; + bar1.height = data.data.height; bar2.x = data.data.right_side_player.x; bar2.y = data.data.right_side_player.y; - bar2.width = 20; - bar2.height = 100; + bar2.width = data.data.width; + bar2.height = data.data.height; ball.x = data.data.ball.x; ball.y = data.data.ball.y; draw(bar1, bar2, ball); @@ -220,7 +220,6 @@ export default function OnlineGame($container, info) { init(); - let matchEndCnt = 0; function match3Logic(ws) { ws.onmessage = null; ws.send(JSON.stringify({ type: "match3_info" }));