🤖
1973 in / 2000 out / 3973 total tokens
다리 건너기 미니게임의 베팅 UX를 경마처럼 바꿨다. 기존엔 호스트가 '게임 시작'을 누르면 15초 카운트다운이 돌면서 베팅을 받고, 시간이 다 되면 시나리오가 시작되는 구조였다. 이걸 방 입장 직후부터 자유롭게 베팅할 수 있게 열어두고, 호스트가 시작 버튼을 누르면 즉시 시나리오에 돌입하는 방식으로 바꿨다.
서버 쪽은 socket/bridge-cross.js의 bridge-cross:start 핸들러가 핵심이다. 기존에 있던 bettingTimeout 15초 타이머와 userColorBets 리셋 로직을 전부 날렸다. 대신 베팅 인원이 2명 미만이면 에러를 emit하고, 2명 이상이면 기존에 쌓여있는 베팅 데이터를 그대로 물려서 beginScenario를 즉시 호출한다. phase 'betting' 단계 자체를 생략한 게 포인트다. 불필요한 상태 전이를 하나 줄이니 서버 로직이 깔끔해졌다.
시나리오 종료 후 처리도 추가했다. endScenario 콜백 끝에 4초 setTimeout을 걸어서 userColorBets, phase, scenarios를 리셋하고 bridge-cross:bettingReady를 브로드캐스트한다. 결과 화면을 4초간 보여준 뒤 다음 라운드 베팅 UI를 초기화하는 거다. UE5에서 매치 종료 후 결과 화면 띄우고 로비로 돌려보내는 흐름이랑 똑같은 패턴이다.
클라이언트 js/bridge-cross.js 변경량이 1535줄이다. showBridgeBettingUI()를 roomCreated/roomJoined 직후에 자동 호출하도록 연결했다. 카운트다운 영역에 15초 숫자 대신 '베팅 받는 중' 텍스트를 띄운다. isBridgeCrossActive를 베팅 단계에서 false로 설정한 게 중요한데, 베팅 중엔 게임이 진행 중인 게 아니니까 상태 관리가 꼬이지 않게 하려는 의도다.
시작 버튼 업데이트 로직도 손봤다. isHost && !isGameActive && bettorCount >= 2 세 조건을 모두 만족해야 버튼이 활성화된다. 버튼 텍스트도 동적으로 바뀐다. '게임 시작 (베팅 N/2명)', '게임 시작 (베팅 N명)', '게임 진행 중' 세 가지 상태. selectionCount 핸들러에서 currentBettorCount를 갱신하고 updateStartButton을 재호출하는 구조다.
15초를 기다릴 필요 없이 베팅이 모이는 즉시 시작할 수 있어서 체감 대기 시간이 확 줄었다. horse-race 패턴이라고 부른 이유가 경마장에서 배당률 보면서 자유롭게 베팅하다가 경주 시작되면 그 즉시 달리는 것과 같은 흐름이라서 그렇다. 기존엔 게임 시작 버튼이 베팅 시작 트리거였는데, 이제 베팅은 입장과 동시에 열려 있고 시작 버튼은 시나리오 실행 트리거로만 동작한다. 책임이 명확해졌다.
기다림 없이 즉시 시작, 베팅은 방 입장과 동시에 — UX에서 불필요한 대기 시간은 적이다.