[Feature] 스토리라인 FlipBook 화면

[minzero31]

1. 웹사이트 스토리라인 만화 ✅

🛠 웹사이트 전체의 스토리 라인을 8컷 만화로 표현함.
➡ 사용자가 웹페이지의 컨셉과 게임내부에서의 몰입을 보다 잘 할 수 있도록 8컷의 만화를 통해 스토리라인을 이해할 수 있도록 함.
➡ 만화를 flipbook에 삽입함.
➡ 스토리 라인
학생은 졸업이 얼마 남지 않았다.
학생은 학점이 너무 낮아서 학사경고를 받았다.
교수는 A+을 너무 남발해서 A+의 비율이 넘쳐난 문제 상황이다.
그래서 학생은 A_을 원하고, 교수는 냅다 A+을 줄 수 없고, F를 늘려야 하는 상황.
🎨 로그인 페이지에서 소개한 캐릭터들이 등장인물로 등장하도록 함.
🎨 직접 그린 이슈..

2. flipbook 구현✅

🛠 책장이 넘어가는 flipbook을 구현함.
➡ jQuery와 turn.js를 사용함 : turn.js는 페이지 넘김 효과를 적용하기 위한 jQuery 플러그인임.
➡ 각 모서리에 마우스 커서를 올리면 일부분 색이 바뀌면서 페이지가 넘어가는 효과를 볼 수 있음.

3. 게임 내부 역할 공개 ✅

🛠 flipbook에서 만화 공개 이후에 [ 학생 / 교수 ] 둘 중에 사용자의 역할을 공개한다.
➡ 해당 역할로 main 화면에서 게임 진행할 때 본인의 역할과 상태를 확인하면 된다.

4. 게임 시작 버튼 ✅

🛠 Go to game 버튼을 누르면 입장 대기 화면으로 이동한다.
🎨 마우스 커서를 올리면 버튼 색이 반전된다.

❎✅🛠🎨➡