Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: match3 로직 추가 완료 #470

Merged
merged 3 commits into from
Mar 12, 2024
Merged

feat: match3 로직 추가 완료 #470

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
2729925
feat: match3 로직 추가 완료
donghyun1998 Mar 11, 2024
ca66e1d
feat: 기획 수정으로 onmessage 제거
donghyun1998 Mar 12, 2024
83960a3
feat: key 무한입력 다시 막아줌
donghyun1998 Mar 12, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 3 additions & 9 deletions frontend/src/pages/match-up/page.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) => {
Expand All @@ -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);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

여기서 info였군요 고쳐주셔서 감사합니다!

};

const init = () => {
Expand All @@ -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");
}
Expand Down Expand Up @@ -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 });
Expand Down
110 changes: 64 additions & 46 deletions frontend/src/pages/online-game/page.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 = () => {
Expand All @@ -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);
Expand All @@ -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로 따로 빼기
Expand Down Expand Up @@ -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" }));
// }
// };

/**
* 바 두 개와 공의 데이터를 받아서 화면에 그리는 함수.
Expand Down Expand Up @@ -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;
Expand All @@ -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}`,
Expand Down
Loading