[2단계 - 자동차 경주 구현] 유조(조윤호) 미션 제출합니다.

.eslintrc.json

@@ -19,6 +19,6 @@
     "import/extensions": "off",
     "import/prefer-default-export": "off",
     "max-depth": ["error", 1],
-    "max-lines-per-function": ["error", 15]
+    "max-lines-per-function": ["error", 20]
   }
 }

README.md

@@ -29,39 +29,9 @@
 
 ### 🎯🎯 step2
 
-- [ ] 자동차 경주 게임의 턴이 진행 될 때마다 1초의 텀(progressive 재생)을 두고 진행한다.
-  - [ ] 애니메이션 구현을 위해 setInterval, setTimeout, requestAnimationFrame 을 활용한다.
-- [ ] 정상적으로 게임의 턴이 다 동작된 후에는 결과를 보여주고, 2초 후에 축하의 alert 메세지를 띄운다.
-- [ ] 위 기능들이 정상적으로 동작하는지 Cypress를 이용해 테스트한다.
+- [x] 자동차 경주 게임의 턴이 진행 될 때마다 1초의 텀(progressive 재생)을 두고 진행한다.
+  - [x] 애니메이션 구현을 위해 setInterval, setTimeout, requestAnimationFrame 을 활용한다.
+- [x] 정상적으로 게임의 턴이 다 동작된 후에는 결과를 보여주고, 2초 후에 축하의 alert 메세지를 띄운다.
+- [x] 위 기능들이 정상적으로 동작하는지 Cypress를 이용해 테스트한다.
 
 <br>
-
-## 📝 구현 기능 목록
-
-- 자동차 이름 입력
-  - [x] 올바른 자동차 이름을 입력한 후 확인버튼을 누르면 시도횟수 입력창을 화면에 출력한다.
-    > - X ] 'EAST, WEST, SOUTH, NORTH'를 입력하면 화면에 시도횟수 입력창이 표시되는지 테스트를 한다.
-  - [x] 올바르지 않은 자동차 이름을 입력한 경우 경고메세지를 출력한다.
-    > - [x] 'YUJOYOONHO'을 입력한 경우 '이름은 5글자 이하로 입력해 주세요.' 경고메세지를 출력하는 테스트를 한다.
-    > - [x] 공백만 입력된 경우나 아무것도 입력되지 않은 경우 '공백만으로는 이름을 구성할 수 없습니다.' 경고메세지를 출력하는 테스트를 한다.
-    > - [x] 이 때, 자동차 이름 입력창을 초기화 하는지 테스트를 한다.
-- 시도 횟수 입력
-  - [x] 양의 정수만을 시도횟수로 입력할 수 있다.
-    > - [x] '-7'을 입력한 경우 '1 이상의 숫자를 입력해주세요.' 경고메세지를 출력하는 테스트를 한다.
-    > - [x] 공백만 입력된 경우나 아무것도 입력되지 않은 경우 '1 이상의 숫자를 입력해주세요.' 경고메세지를 출력하는 테스트를 한다.
-    > - [x] 이 때, 시도횟수 입력창을 초기화 하는지 테스트를 한다.
-  - [x] 확인버튼을 누르면 앞서 입력된 자동차를 화면에 표시해준다.
-    > - [x] 입력된 자동차 대수와 화면에 보이는 자동차 대수가 일치하는지 테스트를 한다.
-    > - [x] 입력된 자동차 이름과 화면에 보이는 자동차 이름이 일치하는지 테스트를 한다.
-- 자동자 경주 진행
-  - [x] 자동차 경주가 정상적으로 진행되는지 테스트 한다.
-    > - [x] 난수를 생성하는 함수가 0 ~ 9 사이의 정수를 반환하는지 확인하는 테스트를 한다.
-    > - [x] 전진횟수를 결정하는 함수가 '[1, 3, 3, 7]'을 입력받았을 때 '1'을 반환하는지 확인하는 테스트를 한다.
-    > - [ X 각 자동차의 이름과 화살표 갯수가 제대로 표시되는지 확인하는 테스트를 한다.
-- 결과 출력
-  - [x] 자동차 경주 게임을 완료한 후 누가 우승했는지를 화면에 출력한다. 우승자가 여러명일 경우 ,를 이용하여 구분해서 출력한다.
-    > - [x] 최종 우승자가 `🏆 최종 우승자: ${쉼표로 구분된 우승자 목록} 🏆`와 일치하는지 확인하는 테스트를 한다.
-  - [x] 다시 시작버튼을 누르면 초기 화면을 출력해서 게임을 다시시작할 수 있도록 한다.
-    > - [x] '#racing-count-section', '#game-process-section', '#game-result-section'이 hidden 속성을 가지고 있는지 테스트를 한다.
-    > - [x] '#racing-count-section' 노드가 비어있는지 테스트를 한다.
-    > - [x] '#car-name-input', '#racing-count-input'의 입력창이 비어있는지 테스트를 한다.

cypress/integration/racingGame.spec.js

@@ -3,11 +3,8 @@ import { isEffectiveScore } from '../../src/js/game/isEffectiveScore.js';
 import { GAME } from '../../src/js/utils/constant.js';
 
 describe('racing-game', () => {
-  beforeEach(() => {
-    cy.visit('http://localhost:5500/');
-  });
-
   const carNames = ['EAST', 'WEST', 'SOUTH', 'NORTH'];
+  const TEST_RACE_TIME = GAME.RACE_TIME * 5;
 
   const typeCarNameAndClickToSubmitButton = (
     carNames = ['EAST', 'WEST', 'SOUTH', 'NORTH'],
@@ -21,6 +18,27 @@ describe('racing-game', () => {
     return cy.get('#racing-count-submit').click();
   };
 
+  const waitRaceTime = (raceTime = TEST_RACE_TIME) => {
+    cy.clock();
+    cy.wait(raceTime);
+  };
+
+  const waitTimeAndcheckElementShow = (time, element) => {
+    cy.clock();
+    cy.wait(time);
+    cy.get(element).should('be.visible');
+  };
+
+  const waitTimeAndcheckElementHide = (time, element) => {
+    cy.clock();
+    cy.wait(time);
+    cy.get(element).should('not.be.visible');
+  };
+
+  beforeEach(() => {
+    cy.visit('http://localhost:5500/');
+  });
+
   it('자동차 이름 입력 시, 화면에 시도 횟수 입력창이 표시되는지 테스트 한다.', () => {
     typeCarNameAndClickToSubmitButton();
     cy.get('#racing-count-section').should('be.visible');
@@ -59,8 +77,8 @@ describe('racing-game', () => {
   it('음수와 공백을 시도 횟수로 입력 시, 경고메세지가 출력되는지 테스트 한다.', () => {
     const negativeRacingCount = -7;
     const alertStub = cy.stub();
-
     cy.on('window:alert', alertStub);
+
     typeCarNameAndClickToSubmitButton();
     typeRacingCountAndClickToSubmitButton(negativeRacingCount).then(() => {
       expect(alertStub.getCall(0)).to.be.calledWith(
@@ -82,44 +100,61 @@ describe('racing-game', () => {
   it('올바른 시도 횟수 입력 시, 화면에 자동차 경주 섹션이 표시되는지 테스트 한다.', () => {
     typeCarNameAndClickToSubmitButton();
     typeRacingCountAndClickToSubmitButton();
+
     cy.get('.car-player')
       .should('have.length', carNames.length)
       .each(($div, index) => cy.get($div).should('have.text', carNames[index]));
     cy.get('#game-process-section').should('be.visible');
   });
 
   it('랜덤 함수가 정상적으로 동작하는지 테스트 한다.', () => {
-    const possibleScores = Array.from({
-      length: GAME.MAX_SCORE - GAME.MIN_SCORE + 1,
-    }).map((v, i) => i);
+    const randomNumbers = [...Array(100)]
+      .map(() => getRandomNumber(GAME.MIN_SCORE, GAME.MAX_SCORE))
+      .filter((num) => GAME.MIN_SCORE <= num && num <= GAME.MAX_SCORE);
 
-    for (let i = 0; i < 100; i++) {
-      expect(possibleScores).to.include(
-        getRandomNumber(GAME.MIN_SCORE, GAME.MAX_SCORE),
-      );
-    }
+    expect(randomNumbers.length).to.equal(100);
   });
 
   it('자동차가 정상적으로 전진, 멈춤하는지 테스트한다.', () => {
-    for (let i = GAME.MAX_SCORE; i < GAME.MAX_SCORE; i++) {
+    for (let i = GAME.MAX_SCORE; i <= GAME.MAX_SCORE; i++) {
       if (i < GAME.EFFECTIVE_SCORE) {
         return expect(isEffectiveScore(i)).to.equal(false);
       }
       return expect(isEffectiveScore(i)).to.equal(true);
     }
   });
 
+  it('자동차 경주 진행 중 턴마다 1초의 지연시간이 생기는지 테스트 한다.', () => {
+    typeCarNameAndClickToSubmitButton();
+    typeRacingCountAndClickToSubmitButton(5);
+
+    waitTimeAndcheckElementHide(2500, '#game-result-section');
+    waitTimeAndcheckElementShow(2500, '#game-result-section');
+  });
+
+  it('자동차 경주 진행 중 지연시간마다 Anmiation이 출력되는지 테스트 한다.', () => {
+    typeCarNameAndClickToSubmitButton();
+    typeRacingCountAndClickToSubmitButton();
+
+    waitTimeAndcheckElementShow(2000, '.spinner-container');
+    waitTimeAndcheckElementShow(2000, '.spinner-container');
+    waitTimeAndcheckElementHide(1000, '.spinner-container');
+  });
+
   it('자동차 경주가 정상적으로 진행되는지 테스트 한다.', () => {
     typeCarNameAndClickToSubmitButton();
     typeRacingCountAndClickToSubmitButton();
+
+    waitRaceTime();
+
     cy.get('.car-player').each(($div, index) => {
       cy.get($div)
         .should('have.text', carNames[index])
         .parent()
         .children('div')
         .its('length')
         .then((childrenNum) => {
-          cy.get($div).should('have.data', 'forwardCount', childrenNum - 1);
+          cy.get($div).should('have.data', 'forwardCount', childrenNum - 2);
         });
     });
   });
@@ -128,6 +163,8 @@ describe('racing-game', () => {
     typeCarNameAndClickToSubmitButton();
     typeRacingCountAndClickToSubmitButton();
 
+    waitRaceTime();
+
     cy.get('.car').then(($cars) => {
       const counts = [...$cars].map(($car) => {
         return $car.querySelectorAll('.forward-icon').length;
@@ -148,9 +185,23 @@ describe('racing-game', () => {
     });
   });
 
+  it('자동차 경주가 모두 끝났을 때, 2초 후 축하의 alert메세지가 출력되는지 테스트 한다.', () => {
+    typeCarNameAndClickToSubmitButton(['yujo']);
+    typeRacingCountAndClickToSubmitButton();
+
+    // 자동차 경주 진행시간 5000ms + alert 출력 대기시간 2000ms
+    waitRaceTime(TEST_RACE_TIME + GAME.RESULT_ALERT_DELAY);
+    cy.on('window:alert', (txt) => {
+      expect(txt).to.equal('🎉 축하드립니다! 우승자는 yujo입니다! 🎉');
+    });
+  });
+
   it('다시 시작버튼을 눌렀을 때 화면이 초기화 되는지 테스트한다.', () => {
     typeCarNameAndClickToSubmitButton();
     typeRacingCountAndClickToSubmitButton();
+
+    waitRaceTime();
+
     cy.get('#game-restart-button').click();
     cy.get('#racing-count-section').should('not.be.visible');
     cy.get('#game-process-section').should('not.be.visible');

src/js/game/printGameResult.js

@@ -1,10 +1,23 @@
+import { GAME } from '../utils/constant.js';
 import { getWinners } from './getWinners.js';
 import { restartGame } from './restartGame.js';
 
+const alertGameResult = (winners) => {
+  if (!winners) {
+    alert('❌ Error : 우승자를 찾지 못 했습니다. ❌');
+    throw new Error('우승자를 찾지 못 했습니다.');
+  }
+
+  alert(`🎉 축하드립니다! 우승자는 ${winners}입니다! 🎉`);
+};
+
 export const printGameResult = () => {
   const $gameResultText = document.querySelector('#game-result-text');
   const $gameRestartButton = document.querySelector('#game-restart-button');
+  const winners = getWinners();
 
-  $gameResultText.innerHTML = `🏆 최종 우승자: ${getWinners()} 🏆`;
+  $gameResultText.innerHTML = `🏆 최종 우승자: ${winners} 🏆`;
   $gameRestartButton.addEventListener('click', restartGame);
+
+  setTimeout(() => alertGameResult(winners), GAME.RESULT_ALERT_DELAY);
 };

src/js/game/restartGame.js

@@ -1,5 +1,4 @@
-import { toggleDisabled } from '../utils/toggleDisabled.js';
-import { toggleVisibility } from '../utils/toggleVisibility.js';
+import { enabledElement, hideElement } from '../utils/setAttribute.js';
 
 const resetGame = () => {
   const $carNameInput = document.querySelector('#car-name-input');
@@ -12,11 +11,17 @@ const resetGame = () => {
 };
 
 export const restartGame = () => {
-  toggleVisibility('$racingCountSection');
-  toggleVisibility('$gameProcessSection');
-  toggleVisibility('$gameResultSection');
-  toggleDisabled('$carNameSubmit');
-  toggleDisabled('$racingCountSubmit');
+  const $carNameSubmit = document.querySelector('#car-name-submit');
+  const $racingCountSubmit = document.querySelector('#racing-count-submit');
+  const $racingCountSection = document.querySelector('#racing-count-section');
+  const $gameProcessSection = document.querySelector('#game-process-section');
+  const $gameResultSection = document.querySelector('#game-result-section');
+
+  hideElement($racingCountSection);
+  hideElement($gameProcessSection);
+  hideElement($gameResultSection);
+  enabledElement($carNameSubmit);
+  enabledElement($racingCountSubmit);
 
   resetGame();
 };

src/js/game/startGame.js

@@ -1,8 +1,16 @@
 import { isEffectiveScore } from './isEffectiveScore.js';
 import { getRandomNumber } from '../utils/getRandomNumber.js';
 import { printGameResult } from './printGameResult.js';
-import { toggleVisibility } from '../utils/toggleVisibility.js';
 import { GAME } from '../utils/constant.js';
+import { hideElement, showElement } from '../utils/setAttribute.js';
+
+const setHiddenWaitRacingAnimation = () => {
+  const $spinnerContainers = document.querySelectorAll('.spinner-container');
+
+  $spinnerContainers.forEach(($spinnerContainer) =>
+    hideElement($spinnerContainer),
+  );
+};
 
 const arrowTemplate = () => {
   return `<div class="forward-icon mt-2">⬇️️</div>`;
@@ -13,21 +21,28 @@ const updateRacingCount = (cars) => {
     const isForward = isEffectiveScore(
       getRandomNumber(GAME.MIN_SCORE, GAME.MAX_SCORE),
     );
-
     if (isForward) {
       $car.dataset.forwardCount = Number($car.dataset.forwardCount) + 1;
-      $car.parentNode.insertAdjacentHTML('beforeend', arrowTemplate());
+      $car.insertAdjacentHTML('afterend', arrowTemplate());
     }
   });
 };
 
 export const startGame = (racingCount) => {
   const cars = document.querySelectorAll('.car-player');
+  const $gameResultSection = document.querySelector('#game-result-section');
+  const totalRacingDurationTime = racingCount * GAME.RACE_TIME;
 
-  for (let i = 0; i < racingCount; i++) {
+  const gameProcess = setInterval(() => {
+    if (racingCount-- === 1) {
+      clearInterval(gameProcess);
+    }
     updateRacingCount(cars);
-  }
+  }, GAME.RACE_TIME);
 
-  toggleVisibility('$gameResultSection');
-  printGameResult();
+  setTimeout(() => {
+    showElement($gameResultSection);
+    setHiddenWaitRacingAnimation();
+    printGameResult();
+  }, totalRacingDurationTime);
 };

src/js/index.js

@@ -9,10 +9,10 @@ const init = () => {
   $racingCountSubmit.addEventListener('click', handleRacingCountInput);
 };
 
-export default function RacingGame() {
+export const racingGame = () => {
   init();
-}
+};
 
 window.onload = () => {
-  new RacingGame();
+  racingGame();
 };

src/js/input/handleCarNameInput.js

@@ -1,10 +1,14 @@
-import { VALIDATOR, ERR_MESSAGE } from '../utils/constant.js';
-import { toggleDisabled } from '../utils/toggleDisabled.js';
-import { toggleVisibility } from '../utils/toggleVisibility.js';
+import { GAME, ERR_MESSAGE } from '../utils/constant.js';
+import { disabledElement, showElement } from '../utils/setAttribute.js';
 
 const carTemplate = (carName) => {
   return `<div class="car" data-name=${carName}>
             <div class="car-player mr-2" data-forward-count="0">${carName}</div>
+            <div class="d-flex justify-center mt-4">
+              <div class="relative spinner-container">
+                <span class="material spinner"></span>
+              </div>
+            </div>
           </div>`;
 };
 
@@ -17,11 +21,11 @@ const createCars = (carNames) => {
 };
 
 const isValidLength = (name) => {
-  return name.length <= VALIDATOR.MAX_NAME_LENGTH;
+  return name.length <= GAME.MAX_CAR_NAME_LENGTH;
 };
 
 const isBlank = (name) => {
-  return name.length >= VALIDATOR.MIN_NAME_LENGTH;
+  return name.length >= GAME.MIN_CAR_NAME_LENGTH;
 };
 
 const isValidCarName = (carNames) => {
@@ -30,21 +34,24 @@ const isValidCarName = (carNames) => {
     return false;
   }
   if (!carNames.every((carName) => isBlank(carName))) {
-    alert(ERR_MESSAGE.NAME_BLANK);
+    alert(ERR_MESSAGE.NAME_CANNOT_BE_BLANK);
     return false;
   }
   return true;
 };
 
 export const handleCarNameInput = () => {
   const $carNameInput = document.querySelector('#car-name-input');
+  const $carNameSubmit = document.querySelector('#car-name-submit');
+  const $racingCountSection = document.querySelector('#racing-count-section');
 
   const carNames = $carNameInput.value.split(',').map((car) => car.trim());
   if (!isValidCarName(carNames)) {
-    return ($carNameInput.value = '');
+    $carNameInput.value = '';
+    return;
   }
 
-  toggleVisibility('$racingCountSection');
-  toggleDisabled('$carNameSubmit');
+  showElement($racingCountSection);
+  disabledElement($carNameSubmit);
   createCars(carNames);
 };