next-step · joojjang · May 6, 2024 · May 6, 2024 · May 6, 2024 · May 6, 2024
diff --git a/README.md b/README.md
@@ -1 +1,28 @@
-# javascript-baseball-precourse
+# javascript-baseball-precourse
+
+## 기능 요구 사항
+
+1. 1부터 9까지 서로 다른 수로 이루어진 3자리의 수를 맞추는 게임이다.
+2. 같은 수가 같은 자리에 있으면 스트라이크, 다른 자리에 있으면 볼, 같은 수가 전혀 없으면 낫싱이란 힌트를 얻고, 그 힌트를 이용해서 먼저 상대방(컴퓨터)의
+   수를 맞추면 승리한다.
+   > e.g. 상대방(컴퓨터)의 수가 425일 때,
+   >
+   > - 123을 제시한 경우: 1스트라이크
+   > - 456을 제시한 경우: 1볼 1스트라이크
+   > - 789를 제시한 경우: 낫싱
+3. 컴퓨터는 1에서 9까지 서로 다른 임의의 수 3개를 선택한다. 게임 플레이어는 컴퓨터가 생각하고 있는 3개의 숫자를 입력하고, 컴퓨터는 입력한 숫자에 대한 결과를 출력한다.
+4. 이 같은 과정을 반복해 컴퓨터가 선택한 3개의 숫자를 모두 맞히면 게임이 종료되고 재시작 버튼이 표시된다.
+5. 게임을 종료한 후 게임을 다시 시작하거나 완전히 종료할 수 있다.
+6. 사용자가 잘못된 값을 입력할 경우 alert() 으로 에러 메시지를 출력 후 그 부분부터 입력을 다시 받는다.
+
+## 구현할 기능
+
+1. 컴퓨터에서 랜덤값 생성
+   1. 서로 다른 임의의 수 3개로 구성
+2. 사용자 입력 받기 및 검증
+   1. 입력값이 유효하지 않을 시: alert() 으로 에러 메시지를 출력하고 그 부분부터 입력을 다시 받는다.
+3. 컴퓨터 값과 사용자 입력값 비교
+4. 결과 띄우기
+   1. 3개 모두 일치: 정답
+      1. 게임 재시작 버튼
+   2. 아니라면: 오답, 힌트 제공 (e.g. 1스트라이크)
diff --git a/index.html b/index.html
@@ -1,12 +1,31 @@
-<!doctype html>
-<html lang="en">
+<!DOCTYPE html>
+<html lang="ko">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title></title>
+    <title>숫자 야구 게임</title>
   </head>
   <body>
-    <div id="app"></div>
+    <div id="app">
+      <h1>⚾️ 숫자 야구 게임</h1>
+      <p><strong>1~9까지의 수</strong>를 중복 없이 <strong>3개</strong> 입력해주세요.</p>
+      <p>올바른 예: 139</p>
+      <p>틀린 예: 122</p>
+      <input type="text" id="userinput" />
+      <button id="inputbutton">확인</button>
+      <div id="correct">
+        <p>📄 결과</p>
+        <p>🎉정답을 맞히셨습니다🎉</p>
+        <p>게임을 새로 시작하시겠습니까?</p>
+        <button id="restartbutton">게임 재시작</button>
+      </div>
+      <div id="incorrect">
+        <p>📄 결과</p>
+        <p>틀렸습니다.</p>
+        <p>힌트: <span id="hint"></span></p>
+      </div>
+    </div>
+
     <script type="module" src="/src/main.js"></script>
   </body>
 </html>
diff --git a/src/functions/calculateResult.js b/src/functions/calculateResult.js
@@ -0,0 +1,17 @@
+export default function calculateResult(randomNumber, userInput) {
+  const randomDigits = randomNumber;
+  const userDigits = userInput.split("").map(Number);
+
+  let strikes = 0;
+  let balls = 0;
+
+  for (let i = 0; i < randomDigits.length; i++) {
+    if (randomDigits[i] === userDigits[i]) {
+      strikes++;
+    } else if (randomDigits.includes(userDigits[i])) {
+      balls++;
+    }
+  }
+
+  return { strikes, balls };
+}
diff --git a/src/functions/generateRandomNumber.js b/src/functions/generateRandomNumber.js
@@ -0,0 +1,13 @@
+export default function generateRandomNumber() {
+  let digits = [];
+
+  while (digits.length < 3) {
+    let randomNumber = Math.floor(Math.random() * 9) + 1;
+
+    if (!digits.includes(randomNumber)) {
+      digits.push(randomNumber);
+    }
+  }
+
+  return digits;
+}
diff --git a/src/functions/handleInput.js b/src/functions/handleInput.js
@@ -0,0 +1,18 @@
+import calculateResult from "../functions/calculateResult.js";
+
+export default function handleInput(randomNumber, userInput) {
+  const userInputValue = userInput.value;
+
+  if (validateInput(userInputValue)) {
+    const result = calculateResult(randomNumber, userInputValue);
+    // console.log(result);
+    return result; // { strikes, balls }
+  } else {
+    alert("잘못된 입력입니다. 다시 입력해주세요.");
+    userInput.value = "";
+  }
+}
+
+function validateInput(input) {
+  return /^[1-9]{3}$/.test(input) && new Set(input).size === 3;
+}
diff --git a/src/main.js b/src/main.js
@@ -0,0 +1,54 @@
+import generateRandomNumber from "./functions/generateRandomNumber.js";
+import handleInput from "./functions/handleInput.js";
+
+// 시작
+window.onload = function () {
+  let randomNumber = generateRandomNumber();
+  //   console.log("random number: ", randomNumber);
+  let strikes = 0;
+  let balls = 0;
+
+  const inputButton = document.getElementById("inputbutton");
+  const userInput = document.getElementById("userinput");
+  const hintElement = document.getElementById("hint");
+  const correctResultEl = document.getElementById("correct");
+  const incorrectResultEl = document.getElementById("incorrect");
+  correctResultEl.style.display = "none";
+  incorrectResultEl.style.display = "none";
+
+  const handleInputEvent = function () {
+    ({ strikes, balls } = handleInput(randomNumber, userInput));
+    // console.log(strikes, ", ", balls);
+
+    if (strikes === 3) {
+      correctResultEl.style.display = "block";
+      incorrectResultEl.style.display = "none";
+    } else if (strikes === 0 && balls === 0) {
+      correctResultEl.style.display = "none";
+      incorrectResultEl.style.display = "block";
+      hintElement.textContent = "낫싱";
+    } else {
+      correctResultEl.style.display = "none";
+      incorrectResultEl.style.display = "block";
+      hintElement.textContent = `${balls}볼 ${strikes}스트라이크`;
+    }
+  };
+
+  // 사용자 인풋 입력 시
+  inputButton.addEventListener("click", handleInputEvent);
+  userInput.addEventListener("keydown", function (event) {
+    if (event.key === "Enter") {
+      handleInputEvent();
+    }
+  });
+
+  // 게임 재시작
+  document.getElementById("restartbutton").addEventListener("click", function () {
+    correctResultEl.style.display = "none";
+    incorrectResultEl.style.display = "none";
+    userInput.value = "";
+    randomNumber = generateRandomNumber();
+    console.log(randomNumber);
+    userInput.focus(); // 입력 필드에 포커스 설정
+  });
+};