next-step · TAEHONG-LEE · May 7, 2024 · May 7, 2024 · May 7, 2024 · May 8, 2024
diff --git a/README.md b/README.md
@@ -1 +1,23 @@
-# javascript-baseball-precourse
+컴퓨터가 랜덤의 숫자 3자리 문제 제출 (서로 다른 3개의 수, 1~9)
+사용자가 서로 다른 수로 이루어진 3자리의 수 입력 (userInput값)
+
+입력받은 userInput값 검증 -> userInput값 조건문 작성
+userInput값 길이 - 숫자의 길이가 3인지 확인하기
+
+userInput값 숫자 - 모두 숫자인지 확인하기 
+userInput값 숫자의 범위 - 숫자의 범위가 1~9 사이인지 확인하기
+userInput값이 서로 다른가? - 모두 다른 수인지 확인하기
+
+답의 결과 출력 (볼, 스트라이크 판정) -> 각각 computerInput값과 userInput값 받기 (,) 이렇게?
+: 같은 수 같은 자리에 있을 시 스트라이크
+: 다른 자리에 있을 시 볼
+: 같은 수가 전혀 없으면 낫싱 (0볼, 0스트라이크)
+: 단, 스트라이크와 볼이 같이 있는 경우 출력 순서는 볼 -> 스트라이크
+
+정답여부 확인
+1. 정답일 경우 (3스트라이크) -> "정답을 맞추셨습니다" 결과 멘트 + "게임을 새로 시작하시겠습니까?" 결과 멘트 + 게임 재시작 버튼 출력 (버튼에 기능 부여)
+2.  정답이 아닐 경우 -> 판정 결과 각각 문자열 출력
+
+
+컴퓨터가 선택한 3개의 숫자를 사용자가 맞히면 게임 종료 + 재시작 버튼을 생성해 게임 재시작 가능하게 함
+사용자가 잘못된 값을 입력한 경우 alert 에러 메시지를 보여주고, 재입력 가능하게함
diff --git a/index.html b/index.html
@@ -1,12 +1,34 @@
 <!doctype html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title></title>
-  </head>
-  <body>
-    <div id="app"></div>
-    <script type="module" src="/src/main.js"></script>
-  </body>
-</html>
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>숫자 야구 게임</title>
+  <link rel="stylesheet" href="styles.css">
+</head>
+
+<body>
+  <div id="app">
+    <h1>⚾ 숫자 야구 게임</h1>
+    <p>
+      1~9까지의 수를 중복없이 <strong>3개</strong> 입력해주세요.<br>
+      올바른 예) 139<br>
+      틀린 예) 122
+    </p>
+    <input id="userInput" type="text" maxlength="3"/>
+    <button id="checkButton">확인</button>
+    <h2>📄결과</h2>
+    <h3 id="gameResult" styple="display: none"></h3>
+    <div id="restartPrompt" style="display: none">
+      <h3>
+        "🎉정답을 맞추셨습니다🎉"
+      </h3>
+      <p>게임을 새로 시작하시겠습니까?</p>
+    </div>
+    <button id="restartButton" style="display: none">게임 재시작</button>
+  </div>
+  <script type="module" src="/src/main.js"></script>
+</body>
+
+</html>
diff --git a/src.zip b/src.zip
diff --git a/src/controller/baseballGameController.js b/src/controller/baseballGameController.js
@@ -0,0 +1,20 @@
+import { BaseballGameModel } from '../model';
+import { BaseballGameView } from '../view';
+
+const checkAnswer = (playerNumber) => {
+    let strikes = 0, balls = 0;
+    const computerNumber = BaseballGameModel.getComputerNumber();
+    const playerDigits = playerNumber.split("").map(Number);
+
+    playerDigits.forEach((digit, index) => {
+        if (computerNumber[index] === digit) {
+            strikes++;
+        } else if (computerNumber.includes(digit)) {
+            balls++;
+        }
+    });
+    console.log(computerNumber);
+    BaseballGameView.displayGameResult(strikes, balls);
+};
+
+export default { checkAnswer };
diff --git a/src/main.js b/src/main.js
@@ -0,0 +1,49 @@
+import { generateComputerNumber, computerNumber } from './model/ComputerNumberModel.js';
+import { displayGameResult } from './view/baseballGameView.js';
+
+let playerNumber = "";
+
+const getPlayerNumber = () => {
+    const input = document.getElementById("userInput");
+    playerNumber = input.value.trim();
+
+    // 승리 메시지 입력 후 틀린 결과 입력 시 결과 초기화함
+    document.getElementById("gameResult").textContent = "";
+    document.getElementById("restartPrompt").style.display = 'none';
+    document.getElementById("restartButton").style.display = 'none';
+
+    if (playerNumber.length !== 3 || new Set(playerNumber).size !== 3) {
+        alert("잘못된 입력입니다. 1에서 9까지의 숫자를 중복 없이 정확히 3개 입력해주세요.");
+        input.value = "";
+        return;
+    }
+    checkAnswer();
+};
+
+
+const checkAnswer = () => {
+    let strikes = 0;
+    let balls = 0;
+    const playerDigits = playerNumber.split("").map(Number);
+    const computerDigits = computerNumber.map(Number);
+
+    playerDigits.forEach((digit, index) => {
+        if (computerDigits[index] === digit) {
+            strikes++;
+        } else if (computerDigits.includes(digit)) {
+            balls++;
+        }
+    });
+
+    displayGameResult(strikes, balls);
+};
+
+document.addEventListener("DOMContentLoaded", () => {
+    generateComputerNumber();
+    document.getElementById("checkButton").addEventListener("click", (event) => {
+        event.preventDefault();
+        getPlayerNumber();
+    });
+});
+
+export { computerNumber, generateComputerNumber };
diff --git a/src/model/ComputerNumberModel.js b/src/model/ComputerNumberModel.js
@@ -0,0 +1,13 @@
+let computerNumber = [];
+
+export const generateComputerNumber = () => {
+    computerNumber = [];
+    while (computerNumber.length < 3) {
+        const number = Math.floor(Math.random() * 9) + 1;
+        if (!computerNumber.includes(number)) {
+            computerNumber.push(number);
+        }
+    }
+};
+
+export { computerNumber };
diff --git a/src/model/PlayerNumberModel.js b/src/model/PlayerNumberModel.js
@@ -0,0 +1,41 @@
+import { computerNumber } from "../computerNumberModel.js";
+import { displayGameResult } from "../view/displayGameResultView.js";
+
+let playerNumber = "";
+
+export const getPlayerNumber = () => {
+    const input = document.getElementById("userInput");
+    playerNumber = input.value.trim();
+
+    // 승리 메시지 입력 후 틀린 결과 입력 시 결과 초기화함
+    document.getElementById("gameResult").textContent = "";
+    document.getElementById("restartPrompt").style.display = 'none';
+    document.getElementById("restartButton").style.display = 'none';
+
+    if (playerNumber.length !== 3 || new Set(playerNumber).size !== 3) {
+        alert("잘못된 입력입니다. 1에서 9까지의 숫자를 중복 없이 정확히 3개 입력해주세요.");
+        input.value = "";
+        return;
+    }
+    checkAnswer();
+};
+
+
+export const checkAnswer = () => {
+    let strikes = 0;
+    let balls = 0;
+    const playerDigits = playerNumber.split("").map(Number);
+    const computerDigits = computerNumber.map(Number);
+
+    playerDigits.forEach((digit, index) => {
+        if (computerDigits[index] === digit) {
+            strikes++;
+        } else if (computerDigits.includes(digit)) {
+            balls++;
+        }
+    });
+
+    displayGameResult(strikes, balls);
+};
+
+export { playerNumber };
diff --git a/src/view/baseballGameView.js b/src/view/baseballGameView.js
@@ -0,0 +1,38 @@
+import {computerNumber, generateComputerNumber } from '../main.js';
+
+export const displayGameResult = (strikes, balls) => {
+    const resultElement = document.getElementById("gameResult");
+    if (strikes === 3) {
+        resultElement.textContent = ""; // 기존 결과 텍스트 초기화 하고 결과 메시지 출력
+        showRestartOption();
+    } else {
+
+        if (balls === 0 && strikes === 0) {
+            resultElement.textContent = "낫싱";
+        } else if (balls > 0 && strikes === 0) {
+            resultElement.textContent = `${balls}볼`;
+        } else if (balls === 0 && strikes > 0) {
+            resultElement.textContent = `${strikes}스트라이크`;
+        } else {
+            resultElement.textContent = `${balls}볼 ${strikes}스트라이크`;
+        }
+    }
+};
+
+const showRestartOption = () => {
+    const restartPrompt = document.getElementById("restartPrompt");
+    const restartButton = document.getElementById("restartButton");
+    restartPrompt.style.display = 'block';
+    restartButton.style.display = 'block';
+    restartButton.onclick = restartGame;
+};
+
+const restartGame = () => {
+    // 배열의 내용을 비웁니다.
+    computerNumber.length = 0;
+    generateComputerNumber();
+    document.getElementById("userInput").value = "";
+    document.getElementById("gameResult").textContent = "";
+    document.getElementById("restartPrompt").style.display = 'none';
+    document.getElementById("restartButton").style.display = 'none';
+};