[2단계 - 자동차 경주 구현] 지그(송지은) 미션 제출합니다.

README.md

@@ -17,7 +17,7 @@
   <img width="400" src="https://techcourse-storage.s3.ap-northeast-2.amazonaws.com/7c76e809d82a4a3aa0fd78a86be25427">
 </p>
 
-### ✅ Todos
+### ✅ Todos - 1단계
 - [x] eslint, prettier 세팅 
 - [x] cypress 세팅
 - [x] 자동차 이름 입력 받아서 배열에 저장한다. 
@@ -38,6 +38,10 @@
 - [x] 리팩토링: 테스트 코드 함수화
 - [x] 리팩토링: 모듈 분리 & 상수화
 
+### ✅ Todos - 2단계
+- [x] 자동차 경주 게임의 턴이 진행 될 때마다 1초의 텀(progressive 재생)을 두고 진행한다.  
+- [x] 정상적으로 게임의 턴이 다 동작된 후에는 결과를 보여주고, 2초 후에 축하의 alert 메세지를 띄운다.
+
 ### 🎯 step1
 - [ ] 주어진 횟수 동안 n대의 자동차는 전진 또는 멈출 수 있다.
 - [ ] 자동차에 이름을 부여할 수 있다. 전진하는 자동차를 출력할 때 자동차 이름을 같이 출력한다.

cypress/integration/racing.spec.js

@@ -1,4 +1,10 @@
+import { DELAY } from '../../src/js/constants.js';
+
 describe('자동차 경주', () => {
+  const DEFAULT_TRY_COUNT = 5
+  const DEFAULT_CAR_UNITS = 4
+  const DEFAULT_TRY_COUNT_TIME = DEFAULT_TRY_COUNT * DELAY.TURN_TIME;
+
   beforeEach(() => {
     cy.visit('http://localhost:5501');
   });
@@ -10,7 +16,7 @@ describe('자동차 경주', () => {
     cy.get('.car-name-btn').click();
   }
 
-  function clickAfterTypeTryCount(tryCount = 5) {
+  function clickAfterTypeTryCount(tryCount = DEFAULT_TRY_COUNT) {
     if (tryCount) {
       cy.get('.try-count').type(tryCount);
     }
@@ -88,10 +94,24 @@ describe('자동차 경주', () => {
     exceptionAlert('.try-count', '정수를 입력해주세요.');
   });
 
-  it('레이싱 진행 상황과 함께 우승자가 출력된다', () => {
+  it('자동차 이름과 시도 횟수 입력 후 확인 버튼을 누르면 1초마다 spinner와 결과가 출력된다', () => {
+    clickAfterTypeCar();
+    clickAfterTypeTryCount();
+
+    for (let i = 0; i < DEFAULT_TRY_COUNT; i++) {
+      cy.get('.spinner-container').should('have.length', DEFAULT_CAR_UNITS);
+      cy.wait(DELAY.SPINNER_SEC);
+      cy.get('.spinner-container').should('not.be.visible');
+      cy.get('.forward-icon').should('be.visible');
+      cy.wait(DELAY.ARROW_DISPLAYING_SEC);
+    }
+  })
+
+  it('진행 상황이 모두 출력된 후 우승자를 출력한다.', () => {
     clickAfterTypeCar();
     clickAfterTypeTryCount();
 
+    cy.wait(DEFAULT_TRY_COUNT_TIME);
     cy.get('.result-container').should('be.visible');
 
     cy.document().then(doc => {
@@ -114,11 +134,26 @@ describe('자동차 경주', () => {
     });
   });
 
-  it('다시 시작하기 버튼 클릭 시 게임이 리셋된다', () => {
+  it('우승자 출력 후 2초 후에 축하의 alert 메시지를 띄운다.', () => {
     clickAfterTypeCar();
     clickAfterTypeTryCount();
-    cy.get('.restart-btn').click();
 
+    cy.wait(DEFAULT_TRY_COUNT_TIME);
+
+    const alertStub = cy.stub();
+    cy.on('window:alert', alertStub);  
+    cy.wait(DELAY.WAIT_ALERT_SEC).then(() => {
+      expect(alertStub.getCall(0)).to.be.calledWith('축하합니다 🎉');
+    });
+  })
+
+  it('다시 시작하기 버튼 클릭 시 게임이 리셋된다.', () => {
+    clickAfterTypeCar();
+    clickAfterTypeTryCount();
+
+    cy.wait(DEFAULT_TRY_COUNT_TIME);
+
+    cy.get('.restart-btn').click();
     resetUI();
   });
 });

src/css/ui/spinner.css

@@ -1,6 +1,8 @@
 .spinner-container {
   width: 25px;
   height: 25px;
+  position: relative;
+  margin: 10px auto;
 }
 
 .spinner::after {

src/js/constants.js

@@ -16,4 +16,15 @@ export const CLASS_NAMES = {
   PROGRESS_CARS: '.progress-cars',
   RESULT_CONTAINER: '.result-container',
   RESTART_BTN: '.restart-btn',
+  SPINNER_CONTAINER: '.spinner-container',
+  FORWARD_ICON: '.forward-icon'
 };
+
+export const DELAY = {
+  SPINNER_SEC: 1000,
+  ARROW_DISPLAYING_SEC: 1000,
+  get TURN_TIME() {
+    return this.SPINNER_SEC + this.ARROW_DISPLAYING_SEC;
+  },
+  WAIT_ALERT_SEC: 2000,
+}

src/js/index.js

@@ -1,6 +1,6 @@
 import Car from './models/Car.js';
 import RacingUI from './racingUI.js';
-import { ALERT_MESSAGES, CLASS_NAMES } from './constants.js';
+import { ALERT_MESSAGES, CLASS_NAMES, DELAY } from './constants.js';
 import {
   isCarNameFilled,
   isCarNameUnderFive,
@@ -61,30 +61,42 @@ export default class Racing {
   };
 
   startRace = () => {
+    this.UIController.showResult(this.cars);
     this.moveCars();
-    this.getWinners();
   };
 
   moveCars = () => {
-    for (let i = 0; i < this.tryCount; i++) {
-      this.cars.forEach(car => car.move());
-    }
-    this.UIController.showProgress(this.cars);
+    const moveEverySecond = (interval) => {
+      if (this.tryCount === 0) {
+        interval && clearInterval(interval)
+        this.getWinners();
+        return;
+      }
+      this.tryCount--;
+      this.cars.forEach(car => {
+        car.move();
+        const isCarMoved = car.isMoved;
+        this.UIController.printProgress(car, isCarMoved);
+      })
+    };
+
+    moveEverySecond();
+    const moveInterval = setInterval(() => moveEverySecond(moveInterval), DELAY.TURN_TIME);
   };
 
   getWinners = () => {
     const sortedCars = this.cars.sort((a, b) => {
-      return b.getPosition() - a.getPosition();
+      return b.position - a.position;
     })
 
-    let maxPosition = sortedCars[0].getPosition();
+    let maxPosition = sortedCars[0].position;
     for (let car of this.cars) {
-      if (car.getPosition() === maxPosition) {
+      if (car.position === maxPosition) {
         car.wins();
       }
     }
 
-    const winners = this.cars.filter(car => car.getIsWinner()).map(car => car.getName());
+    const winners = this.cars.filter(car => car.isWinner).map(car => car.name);
     this.UIController.showWinners(winners);
     document.querySelector(CLASS_NAMES.RESTART_BTN).addEventListener('click', this.restartGame);
   };

src/js/models/Car.js

@@ -1,30 +1,38 @@
 export default class Car {
   constructor(name) {
-    this.name = name;
-    this.position = 0;
-    this.isWinner = false;
+    this._name = name;
+    this._position = 0;
+    this._isWinner = false;
+    this._isMoving = false;
   }
 
-  getName() {
-    return this.name;
+  get name() {
+    return this._name;
   }
-
-  getPosition() {
-    return this.position;
+  
+  get position() {
+    return this._position;
   }
 
-  getIsWinner() {
-    return this.isWinner;
+  get isWinner() {
+    return this._isWinner;
   }
 
   move() {
     const randNumber = Math.random() * 10;
     if (randNumber >= 4) {
-      this.position++;
+      this._position++;
+      this._isMoving = true;
+    } else {
+      this._isMoving = false;
     }
   }
 
+  get isMoved() {
+    return this._isMoving;
+  }
+
   wins() {
-    this.isWinner = true;
+    this._isWinner = true;
   }
 }

src/js/racingUI.js

@@ -14,8 +14,24 @@ export default class RacingUI {
     this.clearInput(CLASS_NAMES.TRY_COUNT);
   }
 
+  showElement(className) {
+    if (!document.querySelector(className)) {
+      return;
+    }
+    const allElements = document.querySelectorAll(className)
+    for (let i = 0; i < allElements.length; i++) {
+      allElements[i].style.display = '';
+    }
+  }
+
   hideElement(className) {
-    document.querySelector(className).style.display = 'none';
+    if (!document.querySelector(className)) {
+      return;
+    }
+    const allElements = document.querySelectorAll(className)
+    for (let i = 0; i < allElements.length; i++) {
+      allElements[i].style.display = 'none';
+    }
   }
 
   clearText(className) {
@@ -26,26 +42,36 @@ export default class RacingUI {
     document.querySelector(className).value = '';
   }
 
-  showElement(className) {
-    if (!document.querySelector(className)) {
-      return;
-    }
-    document.querySelector(className).style.display = '';
-  }
-
-  showProgress(cars) {
+  showResult(cars) {
     this.showElement(CLASS_NAMES.PROGRESS_CONTAINER);
 
     document.querySelector(CLASS_NAMES.PROGRESS_CARS).innerHTML 
       = cars.map(car => `
-          <div>
-            <div class="car-player mr-2">${car.getName()}</div>
-            ${`<div class="forward-icon mt-2">⬇️️</div>`.repeat(car.getPosition())}
+          <div class="car-player-container">
+            <div id="${car.name}" class="car-player mr-2">${car.name}</div>
+            <div class="spinner-container">
+              <div class="material spinner"></div>
+            </div>
           </div>
         `,
       ).join('');
   }
 
+  printProgress(car, isCarMoved) {
+    this.showElement(CLASS_NAMES.SPINNER_CONTAINER, true);
+
+    const carElement = document.querySelector(`#${car.name}`);
+
+    setTimeout(() => {
+      this.hideElement(CLASS_NAMES.SPINNER_CONTAINER, false);
+      if (isCarMoved) {
+        carElement.insertAdjacentHTML('afterend', `
+          <div class="forward-icon mt-2">⬇️️</div>
+        `)
+      }
+    }, 1000)
+  }
+
   showWinners(winners) {
     this.showElement(CLASS_NAMES.RESULT_CONTAINER);
 
@@ -57,5 +83,9 @@ export default class RacingUI {
         </div>
       </section>
     `;
+
+    setTimeout(() => {
+      alert('축하합니다 🎉')
+    }, 2000);
   }
 }