1. 컴포넌트 개요 (MultiPlayConnect.ts)
- 역할: Host/Guest 분기, 방 생성·입장, 상태 폴링, MultiGameList 씬 전환
- 주요 상태: GameState.isHost, GameState.createdRoomId, GameState.incomingRoomId, localStorage(jwtToken/isHost)
2. 주요 함수 및 흐름
2.1. onLoad() & start()
onLoad() {
cc.debug.setDisplayStats(false);
}
start() {
cc.log("MultiPlayConnect start() 진입");
cc.log("GameState.isHost:", GameState.isHost);
**// 호스트가 아닐 경우 시작 버튼 비활성화**
if (this.StartButton) {
this.StartButton.active = GameState.isHost;
if (GameState.isHost) {
this.registerButtonEvents(this.StartButton, this.createRoomAndShowInviteLink.bind(this));
}
}
// 기본 닉네임/캐릭터 세팅
const nickname = GameState.nickname || '플레이어';
const character = GameState.character || 'dog';
**// 호스트**
if (GameState.isHost) {
...
if (GameState.createdRoomId) {
this.roomId = GameState.createdRoomId;
this.listenForGuestUpdate();
}
**// 게스트**
} else {
...
const incomingRoomId = GameState.incomingRoomId;
if (incomingRoomId) {
this.roomId = incomingRoomId;
this.joinRoomAsGuest();
}
}
}
2.2 호스트 방 생성 및 초대 링크 생성 : createRoomAndShowInviteLink()
- JWT 토큰 확인 → POST /multi/room/create-room 호출
- 응답 성공 시
roomId
, inviteUrl
저장 및 표시 → listenForGuestUpdate()
호출
- selectedGameSequence: ["MultiMoleGameScene"] → 추후 개발되는 다른 게임 씬들 추가해야 함
ts
async createRoomAndShowInviteLink() {
if (!GameState.isHost) return;
if (this.isRoomCreating) return;
this.isRoomCreating = true;
const token = localStorage.getItem('jwtToken');
if (!token) { this.isRoomCreating = false; return; }
try {
const response = await fetch(
'<http://43.203.243.173:3000/multi/room/create-room>',
{
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${token}`
},
body: JSON.stringify({
**selectedGameSequence: // 반드시 배열 형태로 포함시켜야 함
["MultiMoleGameScene",
"MultiBlockCountGameScene",
"MultiRememberGameScene",
"Rottenacorn_Multiscene",
"Reversecorrect_Multiscene",
"Maze_MultiScene"
],
})**
}
);
const result = await response.json();
if (result.success) {
this.roomId = result.roomId;
GameState.createdRoomId = this.roomId;
if (this.ConnectLinkLabel) this.ConnectLinkLabel.string = result.inviteUrl;
this.listenForGuestUpdate();
}
} catch (err) {
cc.log('서버 요청 실패:', err.message);
} finally {
this.isRoomCreating = false;
}
}
2.3 게스트 방 입장: joinRoomAsGuest()
- JWT 토큰 확인 → POST /multi/room/join-room/:roomId 호출
- 게스트 방 입장 응답 성공 시
listenForGuestUpdate()
호출, 실패 시 handleRoomJoinFail()
ts
async joinRoomAsGuest() {
const token = localStorage.getItem('jwtToken');
if (!token) { this.handleRoomJoinFail(); return; }
try {
const response = await fetch(
`http://43.203.243.173:3000/multi/room/join-room/${this.roomId}`,
{ method: 'POST', headers: { 'Authorization': `Bearer ${token}` } }
);
if (!response.ok) { this.handleRoomJoinFail(); return; }
const result = await response.json();
if (result.success) {
**this.listenForGuestUpdate();**
} else {
**this.handleRoomJoinFail();**
}
} catch (err) {
this.handleRoomJoinFail();
}
}
2.3 방 상태 폴링(변경) : listenForGuestUpdate() & checkGuestUpdate()
listenForGuestUpdate()
: 즉시 checkGuestUpdate()
한 번 → setInterval
로 3초마다 호출
checkGuestUpdate()
: GET /multi/room/room-status/:roomId 호출 → 방 상태에 따라 씬 전환
- 방 상태가 “ready” 로 바뀌면 “초대 링크 생성” 버튼이 “게임 시작” 버튼으로 변경