주사위 게임 9단계 튜토리얼 구현 — 호스트/비호스트 분기 처리

🤖 1993 in / 1228 out / 3221 total tokens

주사위 게임에 온보딩 튜토리얼 9단계를 달았다. 방장이냐 아니냐에 따라 설명 내용이 다르게 나온다.

기존엔 4단계로 계획했는데, 실제 유저 플로우를 따라가다 보니 9단계까지 늘어났다. 주사위 굴리기 버튼, 채팅 명령어(/주사위), 결과 확인까지 하나씩 짚어주는 게 낫겠더라. isHost 변수로 분기해서 방장은 방 생성 관련 안내를, 참여자는 참여 관련 안내를 보게 했다.

튜토리얼 돌면서 페이지 스크롤이 막히는 게 거슬렸다. click-blocker가 화면 덮으면서 wheel, touch 이벤트도 막혀서 그런데, 이벤트를 받아서 window.scrollBy로 넘겨주는 식으로 해결했다.

_blocker.addEventListener('wheel', function(e) {
    window.scrollBy(0, e.deltaY);
}, { passive: true });
_blocker.addEventListener('touchmove', function(e) {
    var deltaY = e.touches[0].clientY - _touchY;
    window.scrollBy(0, -deltaY);
}, { passive: true });

채팅 영역에 가짜 메시지를 띄워서 주사위 결과가 어떻게 보이는지 미리 보여주는 것도 추가했다. 실제 DOM에 append하는 거라 나중에 진짜 채팅이 들어오면 섞일 수 있는데, 튜토리얼 끝나면 제거하도록 해서 괜찮다.

도움말 버튼을 ? 텍스트에서 SVG 아이콘으로 바꿨다. 말 경주 게임이랑 통일하려고.

튜토리얼은 유저가 이탈하는 지점을 찾는 가장 좋은 로그다.