ssryoung / elice-study-game

[엘리스 SW엔지니어 트랙 2기] '이상한 나라의 게임'
3 stars 5 forks source link

변경사항 기록 #10

Open shinbian11 opened 2 years ago

shinbian11 commented 2 years ago

변경사항, 업데이트 기록

shinbian11 commented 2 years ago

4.25 저녁 회의 내용 반영하였습니다.

파일 구조 변경 / 기타 오타 수정 완료

  1. css id명 오타 수정 : btn_agian => btn_again
  2. <html lang="en"> : <html lang="ko"> 으로 수정
  3. <link rel="stylesheet" href="../reset.css" /> : reset.css 파일 가장 위로
  4. 프로젝트 파일 구조 재정립 (<head> 태그의 링크들 재설정 => 혹시 누락된 링크 있으면 추가하시면 됩니다.)

중요 사항 정리해놓겠습니다. (사실 제가 실수 할까봐 메모해놓겠습니다 ㅎㅎ)

shinbian11 commented 2 years ago

5.1 작업 내용 기록합니다. (이번 주 회의 이후 pull request 드리겠습니다)

HTML

  1. roulette.html의 이전/다음게임 화살표 hover시 이전/다음 게임에 해당되는 text가 보이게끔 함
  2. 룰렛 돌림판을 "game-box" class 내부의 왼쪽 부분에 이식함

CSS

  1. 룰렛 돌림판을 이식한 후, 알맞은 크기가 되게끔 CSS 효과들을 조정함
  2. 룰렛 결과 메세지를 보여주는 공통 모달 창이 display 될 때, 뒷 배경을 어둡게 만듦

JavaScript

  1. 룰렛 결과 메세지를 다윤&세령님이 만든 공통 모달 창에서 보이게끔 데이터를 전달하여 연결
    • innerHTML 등 엘리스 트랙에서 배운 것들을 이용하여 HTML 태그에 text 삽입함
  2. 돌림판 회전 메서드부터 결과 창 보여주기 메서드, 그리고 룰렛 원위치하기 메서드까지 구현함
    • 이 과정에서 비동기 API (setTimeout, setInterval)들을 사용하였고, Promise와 await/async를 이용하여 비동기 처리함.
  3. 룰렛 회전 방향 어색함 수정하기 (animation 이나 transition 효과 검토하기)
    • setInterval의 콜백 함수의 지연 속도를 조정하면서 테스트하여, 조금 더 적절한 타이밍을 찾아내긴 하였지만, 큰 차이는 없는 듯...😅
  4. 백엔드와 통신할 것을 대비하여, 당첨 정보 변수에 저장해놓고 준비하는 코드 작성하기
    • 당첨 정보 메세지를 displayResult()함수 내에서 message라는 배열 데이터에 보관해놓음. 나중에 필요할 때 사용하면 될 듯!

중요 사항 정리해놓겠습니다. (사실 제가 실수 할까봐 메모해놓겠습니다 ㅎㅎ)

shinbian11 commented 2 years ago

5월 2일 회의 이후 수정 사항

bananana0118 commented 2 years ago

효과음 기능 구현

  • contents 폴더 아래에 sound 폴더 추가
  • shinbian11 commented 2 years ago

    5월 8일 수정 사항

    shinbian11 commented 2 years ago

    5.12일 작업 내용

    $(document).ready(function () {
            $("#header").load("contents/header.html");
    });