[자동차 경주 게임] 김용래 미션 제출합니다.

docs/README.md

@@ -0,0 +1,43 @@
+## 🎯 구현이 필요한 기능
+
+- [x] n대의 자동차를 입력받기
+- [x] 시도할 횟수를 입력받기
+  - [x] 주어진 랜덤 함수를 통해 전진 여부 결정하기
+  - [x] 실행 결과 표시하기
+- [x] 경주가 끝나면 최종 결과 표시하기
+- [x] 사용자가 잘못된 입력 값을 작성하면 경고하기
+
+---
+
+## 💻 세부 사항
+
+### n개의 자동차를 입력받기
+- n대의 자동차는 **쉼표(,)** 를 기준으로 구분한다.
+- 각 자동차의 이름은 최대 5자까지이다.
+
+### 사용자가 잘못된 입력 값을 작성하면 경고하기
+> 아래의 경우 잘못된 입력 사유와 함께 alert창을 표시한다.
+- 자동차 이름을 잘못 입력한 경우
+  - 자동차의 이름이 5자를 초과하는 경우
+- 시도할 횟수를 잘못 입력한 경우
+  - 입력값이 숫자가 아닌 경우
+  - 입력값이 0이거나 음수인 경우
+
+### 주어진 랜덤 함수를 통해 전진 여부 결정하기
+- 전진 여부를 판단 할 랜덤 값은 [`MissionUtils` 라이브러리](https://github.com/woowacourse-projects/javascript-mission-utils#mission-utils)의 `Random.pickNumberInRange`를 사용해 구한다.
+
+```js
+Random.pickNumberInRange(1, 10);
+```
+
+### 실행 결과 표시하기
+- 실행 결과는 아래 형식대로 표시한다.
+```text
+자동차의 이름: - (단, 하이픈은 전진한 전체 거리)
+```
+
+### 경주가 끝나면 최종 결과 표시하기
+- 최종 우승자는 여러 명일 수 있으며 모두 표시한다.
+- 여러 명일 경우 **쉼표(,)** 로 구분하여 출력한다.
+- 최종 우승자가 표시되는 요소는 `span` 태그 안에 표시해야 하며 id 값으로 `racing-winners` 를 가진다.
+- 해당 span 태그 안에는 우승자 외의 다른 문자열이 들어와서는 안된다. ex) `최종 우승자: `

index.html

@@ -14,13 +14,13 @@ <h1>🏎️ 자동차 경주 게임</h1>
         올바른 예) east,west,south,north <br />
       </p>
       <form>
-        <input type="text" />
-        <button>확인</button>
+        <input type="text" id="car-names-input"/>
+        <button id="car-names-submit">확인</button>
       </form>
       <h4>시도할 횟수를 입력해주세요.</h4>
       <form>
-        <input type="number" />
-        <button>확인</button>
+        <input type="number" id="racing-count-input"/>
+        <button id="racing-count-submit">확인</button>
       </form>
       <h4>📄 실행 결과</h4>
     </div>

src/car/Car.js

@@ -0,0 +1,28 @@
+class Car {
+    constructor(name) {
+        this.name = name;
+        this.distance = 0;
+    }
+
+    getName() {
+        return this.name;
+    }
+
+    getDistance() {
+        return this.distance;
+    }
+
+    moveForward() {
+        this.distance++;
+    }
+
+    displayDistance() {
+        let distanceMark = "";
+        for (let i = 0; i < this.distance; i++) {
+            distanceMark += "-";
+        }
+        return distanceMark;
+    }
+}
+
+export default Car;

src/car/CarList.js

@@ -0,0 +1,107 @@
+import Car from "./Car.js";
+import isMovable from "../utils/isMovable.js";
+import makeResultElement from "../utils/makeResultElement.js";
+import isValidate from "../utils/isValidate.js";
+
+class CarList {
+    constructor() {
+        this.array = [];
+    }
+
+    push(item) {
+        this.array.push(item);
+    }
+
+    init(carNameArray) {
+        for(let i = 0; i<carNameArray.length; i++) {
+            if(isValidate("name", carNameArray[i])) {
+                this.push(new Car(carNameArray[i]));
+            }
+            else {
+                this.array = [];
+                alert("잘못된 이름입니다.");
+                return;
+            }
+        }
+    }
+
+    race() {
+        for(let i = 0; i<this.array.length; i++) {
+            this.move(i);
+        }
+        this.displayResult();
+    }
+
+    move(index) {
+        if(isMovable()) {
+            this.array[index].moveForward();
+        }
+    }
+
+    game(racingCountInput) {
+        makeResultElement();
+        for(let i = 0; i<racingCountInput; i++) {
+            this.race();
+        }
+        this.displayWinner();
+    }
+
+    displayResult() {
+        const racingResults = document.getElementById("racing-results");
+        let resultText = "";
+        for(let i = 0; i<this.array.length; i++) {
+            resultText += `\n${this.array[i].getName()}: ${this.array[i].displayDistance()}`;
+        }
+
+        racingResults.innerText += `${resultText}\n\n`;
+    }
+
+    displayWinner() {
+        const racingWinners = document.getElementById("racing-winners");
+        const winnerArray = this.getWinnerArray();
+        let resultString = "";
+
+        if(winnerArray.length > 1) {
+            resultString = this.makeResultString(winnerArray);
+        }
+        else {
+            resultString = winnerArray.toString();
+        }
+
+        racingWinners.innerText += resultString;
+    }
+
+    getWinnerArray() {
+        let winnerArray = [];
+        let maxDistance = 0;
+
+        for(let i = 0; i<this.array.length; i++) {
+            if(this.array[i].getDistance() > maxDistance) {
+                winnerArray = [this.array[i].getName()];
+                maxDistance = this.array[i].getDistance();
+            }
+            else if(this.array[i].getDistance() === maxDistance) {
+                winnerArray.push(this.array[i].getName());
+            }
+        }
+
+        return winnerArray;
+    }
+
+    makeResultString(winnerArray) {
+        let winnerResult = "";
+
+        for(let i = 0; i<winnerArray.length; i++) {
+            if(i === 0) {
+                winnerResult += winnerArray[i];
+            }
+            else {
+                winnerResult += `, ${winnerArray[i]}`;
+            }
+        }
+
+        return winnerResult;
+    }
+}
+
+export default CarList;

src/index.js

@@ -0,0 +1,33 @@
+import CarList from "./car/CarList.js";
+import isValidate from "./utils/isValidate.js";
+
+const formTag = document.querySelectorAll("form");
+const carNameButton = document.getElementById("car-names-submit");
+const racingCountButton = document.getElementById("racing-count-submit");
+const carList = new CarList();
+
+for(let i = 0; i<formTag.length; i++) {
+    formTag[i].addEventListener('submit', (event) => {
+        event.preventDefault();
+    })
+}
+
+carNameButton.addEventListener('click', event => {
+    const carNameInput = document.getElementById("car-names-input").value;
+    const carNameArray = carNameInput.split(",");
+
+    carList.init(carNameArray);
+    console.log(carNameInput);
+});
+
+racingCountButton.addEventListener('click', event => {
+    const racingCountInput = document.getElementById("racing-count-input").value;
+
+    if(!isValidate("count", racingCountInput)) {
+        alert("잘못된 숫자를 입력하셨습니다.");
+    }
+    else {
+        carList.game(racingCountInput);
+        console.log(carList);
+    }
+});

src/utils/isMovable.js

@@ -0,0 +1,6 @@
+function isMovable() {
+    const randomNumber = MissionUtils.Random.pickNumberInRange(0, 9);
+    return randomNumber >= 4;
+}
+
+export default isMovable;

src/utils/isValidate.js

@@ -0,0 +1,18 @@
+function isValidate(type, input) {
+    if(type === "name") {
+        return !isOverFiveSyllable(input);
+    }
+    else {
+        return isPositive(input);
+    }
+}
+
+function isOverFiveSyllable(input) {
+    return input.length > 5;
+}
+
+function isPositive(input) {
+    return input >= 1;
+}
+
+export default isValidate;

src/utils/makeResultElement.js

@@ -0,0 +1,22 @@
+function makeResultElement() {
+    if(!isExist()) {
+        const parentDiv = document.getElementById("app");
+        const racingResult = document.createElement("span");
+        const racingWinners = document.createElement("span");
+        const resultText = document.createElement("span");
+
+        racingResult.id = "racing-results";
+        racingWinners.id = "racing-winners";
+        parentDiv.appendChild(racingResult);
+        parentDiv.appendChild(resultText);
+        resultText.innerText = "최종 우승자: ";
+        resultText.appendChild(racingWinners);
+    }
+}
+
+function isExist() {
+    const customSpan = document.getElementById("racing-winners");
+    return customSpan != null;
+}
+
+export default makeResultElement;