🤖
1881 in / 1341 out / 3222 total tokens
3개 멀티플레이어 게임(주사위, 룰렛, 경마)의 랭킹 진입점을 ControlBar 하나로 통합했다. 기존엔 각 게임마다 랭킹 UI를 따로 만들어야 했는데, 이제 ranking-shared.js 오버레이를 공유하면서 버튼만 ControlBar에 위임하면 끝이다.
변경 자체는 단순하다. control-bar-shared.js의 설정 객체에 onRanking 콜백을 추가하고, 해당 콜백이 존재하면 🏆 버튼을 렌더링하도록 했다. 패턴은 이미 onLeave에서 쓰던 것과 완전히 동일하다. 콜백 있으면 버튼 보여주고, 없으면 안 보여주고. 게임 HTML 쪽에서는 onRanking: function() { RankingModule.show(); } 한 줄씩만 추가하면 된다.
js // control-bar-shared.js var rankingBtn = cfg.onRanking ? '' : '';
CSS는 theme.css에 보라색 테마 변수를 활용해서 추가했다. --purple-100 배경에 --purple-600 글자색. 기존 ControlBar 버튼 스타일과 자연스럽게 어울리도록 width: auto랑 align-self: center로 정렬만 맞췄다.
이 구조의 장점은 새 게임이 추가될 때 랭킹 버튼에 대한 고민을 할 필요가 없다는 거다. ControlBar 초기화할 때 onRanking만 넘기면 랭킹 오버레이까지 다 연결된다. ranking-shared.js가 이미 공통 모듈로 분리되어 있으니까. 나중에 랭킹 UI 스펙이 바뀌면 저 파일 하나만 수정하면 3게임에 동시에 반영된다.
경마 파일에서 onLeave 뒤에 콤마 없이 붙여서 린트 에러 날 뻔한 건 아찔했다. 다행히 기존 코드가 이미 콤마로 끝나있어서 순서만 바꿔서 붙였다.
콜백 하나로 UI 일관성 잡는 건, 게임 클라이언트에서 공통 위젯 매니저에 이벤트 바인딩 넘기는 거랑 똑같은 패턴이다.