버젼 3 페이지 설계

헤더

PC

1. 로고와 테마 생성 메뉴가 존재한다.
2. 로고 클릭 시 랜딩페이지로 이동한다.
3. 테마 생성클릭 시, 테마 생성 페이지로 이동한다.
4. hover시 색상이 변경된다.
5. 현재 페이지에 따라 색상이 변경된다.
6. 게임 play시 테마 생성 버튼은 disabled 된다.

Mobile

1. 우측에 햄버거 버튼만 존재한다.
2. 햄버거버튼 클릭시, 로고, 테마 생성 메뉴 존재
3. 메뉴는 전체화면을 가린다.
4. 플레이 중에는 햄버거 버튼이 disabled 된다.

랜딩페이지 (방 입장 전)

PC / Mobile 공통

1. URL: /
2. 닉네임 input
3. 프로필 이미지

• 랜덤으로 설정할 수 있다.
• 좌우 버튼을 눌러 자유롭게 바꿀 수 있다.

4. 시작하기(아무방이나 들어가기),방 생성 버튼 두개가 존재한다
5. how to play, alert가 카드형식으로 존재한다.
6. 로컬스토리지에 프로필이미지와 닉네임을 저장하여 로드한다.
7. 게임 설정 버튼을 클릭하여 모달이 열린다

• 화면테마, 효과음 on/off, 효과음 크기, 게임시작 알림음, 플레이어 접속 알림음, stats을 설정할 수 있다.
• 설정을 저장하고 닫기 / 초기화 버튼이 있다.
• 게임키 !!, ??에 대한 자세한 설명이 나와있다.
• stats: 제일 빨리 맞춘시간, 점수, 시간, 최고점, 평균점 등을 on/off 할수있다 (일단 hold)

에러처리

에러코드 400, 404, 500 등

• 에러코드에 따라 에러문구를 화면에 노출한다.
• 에러코드를 서버에서 작성 필요

404페이지

• 404페이지를 노출한다.

게임 방 생성 페이지 (로비 페이지)

PC / Mobile 공통

1. URL: /:room-id?role=chief (고민 좀 해봐야 할 듯)
2. 다음과 같은 설정을 요구한다.

• numberOfRounds, timeOutSec(최대 70초), theme, difficulty 이 순서대로 존재한다.
• (한글: 판수, 판별 게임 시간, 테마, 난이도)
• theme: 가수별, 년도별, 이번주, 사용자 생성 테마 (DB에 저장된 커스텀테마)
• difficulty: 상,중,하 로 존재하며 상:100, 중: 50, 하: 10 곡 중에 선택한다.
• 커스텀테마일 경우 테마 안에 존재하는 노래갯수에 따라 disabled가 되는 옵션이 존재한다.
• 모두 선택되어야 게임시작 버튼이 활성화 된다.

3. API: (GET) /theme-list

• response body 예시

{[
  {
    themeTitle: '유저 생성 테마 01',
    themeId: 'adfadzxddsfa12asda', // mongoDB의 theme스키마의 _id
  },{
    // ... 다른 theme...
  }
]}

4. 입장한 플레이어들이 모두 시작하기 버튼을 눌렀을 때, 3초 뒤에(카운트하는게 화면에 표시될 것) 동시에 게임이 시작한다.
5. custom theme은 드랍다운으로 선택가능하다. 검색할 수 있다. arrow키로 현재 focus 설정 가능.
6. custom theme list 에서 자주 선택되는 인기 테마는 상위에서 볼 수 있다. (theme list sorting은 인기순 > 가나다순)

PC

1. 왼쪽에는 설정옵션 작성 카드가 있고, 오른쪽에는 players 리스트가 있다. (프로필 이미지, 닉네임)
2. 방장은 왕관이 프로필이미지에 씌어져있다.
3. 오른쪽 하단에 채팅창이 존재한다.
4. 최하단에는 친구들을 초대할 수 있는 링크가 적혀져 있고 클릭시, 클립보드에 복사할 수 있다.

• 초대링크 URL: :room-id

Mobile

1. column으로 설정 옵션 작성 카드, 초대링크, 채팅리스트가 있다.
2. 유저리스트는 없다.
3. 초대링크가 적혀져 있고 클릭시, 클립보드에 복사할 수 있다.

초대링크로 접속한 랜딩페이지 (방 입장 전)

PC / Mobile 공통

1. URL: /:room-id
2. 기본적으로 랜딩페이지와 같다.
3. 방 생성 버튼만 없을 뿐!
4. 시작하기 버튼을 클릭 시, 해당 로비 페이지로 이동된다. (URL 변동없음)

게임 플레이 페이지

PC / Mobile 공통

1. URL: /:room-id
2. 채팅창에서 채팅을 통해 답 제출 가능
3. 정답을 먼저 맞춘 사람이 맞춘 시간에 의거해 점수를 획득한다.
4. 투표로 어떤 인원을 강퇴시킬 수 있다. 프로필을 클릭시 작은 메뉴가 나타남.
5. 매 라운드 마다 정답을 3초간 보여준다 (노래는 계속 나옴)
6. !! 키워드로 해당 라운드를 넘길 수 있다. (점수 0점 획득)
7. ?? 키워드로 해당 라운드가 이상함을 서버에 전달한다.

• ?? 노래가 다름 와 같이 뒤에 에러코멘트를 작성할 수 있다. 없을 경우 그냥 공백으로 전달.
• 해당 라운드를 넘긴다. (점수 0점 획득)
• API: (POST) /alert-error
• request body 예시>

{
  errorTrack: 'adfadzxddsfa12asda', // mongoDB의 urls스키마의 _id
  errorComment: '노래가 다름',
  // 이하 아래는 필요 없을 것 같은데 일단 넣어봄
  trackName:'On the ground', 
  artistName: '로제',
  videoId: 'zxcf7adz',
}

• response body 예시>

{
  message: '에러 접수 완료! 수 일 내로 수정하겠습니다.' 
  // 중복시: '이미 접수된 에러입니다', db에 저장하진 않음
}

• body message를 채팅창에 표기한다. alert 색상
• 위의 에러리스트는 설계자(나)만 볼 수 있는 페이지에서 리스트로 볼 수 있다.

8. 방장이 설정한 총 라운드가 끝나면 획득한 점수에 따라 순위가 공개된다.
9. 게임이 끝나면, 다시 로비 페이지로 이동된다.
10. 상단에 헤더, 중앙엔 플레이어 리스트, 하단엔 채팅창
11. 라운드 count와 시간 count가 표시됨 (레이아웃은 미정)
12. 각 플레이어의 왼쪽에 현재 등수와 점수가 표시된다.
13. 헤더와 플레이어 리스트 사이에 현재 플레이 중인 게임의 셋팅 값이 보인다. (theme title / year 등등)
14. 인풋에서 arrow up, down 을 통해 이전에 채팅한 기록을 input에 셋팅할 수 있다.
15. 해당 라운드가 끝날때마다, songScore(가명) 스키마에 전송한다. API: (put) /track-score

// 이거 아닌거같은데.. 암튼 대충 작성함..
{
  trackId: 'adfadzxddsfa12asda', // mongoDB의 urls스키마의 _id
  totalCount: 0, // 방에 있는 인원 수대로 prev++ 할 것
  successCount: 0, // 맞춘사람만 prev++
  highScore: 0, // update. 제일 빨리 맞춘 시간
  lowScore: 0, // update. 제일 늦게 맞춘 시간
}

Mobile

1. 최상단에 현재 라운드, 시간이 count down.
2. 상단에 유저리스트 (프로필 - 유저이름 - 획득점수)
3. 하단에 채팅리스트 ☆ 모바일스크린에서 키보드가 가려지는 화면의 비율을 생각할 것!!

커스텀 테마 생성 페이지

PC / Mobile 공통

1. URL: /theme
2. 작성시 다음과 같은 값을 input으로 수집한다.

• themeTitle, trackName, artistName, videoId(optional)
• 각항목은 위에서 아래로 배치된다.
• 해당 목록을 다수 생성할 수도 있다. (최소 10개가 필수)
• videoId 에 대한 힌트를 왼쪽에 small 태그로 작성한다.

3. 하단에 생성 버튼과 함께 reCATCHA 로 로봇인지 판별한다.
4. API: (POST) /custom-theme