박지선 숫자야구

src/index.js

@@ -1,13 +1,92 @@
-export default function BaseballGame() {
-  this.play = function (computerInputNumbers, userInputNumbers) {
-    return "결과 값 String";
-  };
+// 1. 컴퓨터측 세 자리의 난수를 생성하여 배열로 리턴하는 함수: getMyNumber
+function getMyNumber() {
+  const myNumber = [];
+
+  //겹치지 않는 난수로 length:3의 배열 생성
+  while (myNumber.length < 3) {
+    const randomNumber = getRandomIntInclusive();
+
+    if (!myNumber.includes(randomNumber)) {
+      myNumber.push(randomNumber);
+    }
+  }
+
+  return myNumber;
+
+  function getRandomIntInclusive(min = 1, max = 9) {
+    min = Math.ceil(min);
+    max = Math.floor(max);
+    return Math.floor(Math.random() * (max - min + 1) + min); // The maximum is inclusive and the minimum is inclusive
+  }
 }
 
-// export default class BaseballGame {
-//   play(computerInputNumbers, userInputNumbers) {
-//     return "결과 값 String";
-//   }
-// }
+// 2. 사용자의 입력값 세 자리를 배열로 리턴하는 함수: getUserNumber (확인 필요)
+
+function getUserNumber() {
+  const $userInput = document.querySelector("#user-input");
+  const userInputValue = [...$userInput.value].map(Number);
+
+  if (userInputValue.includes(NaN)) {
+    alert("숫자만 입력해주세요.");
+    return;
+  }
+
+  // TODO 숫자가 아닌 값에 대한 validation 필요
+
+  return userInputValue;
+}
+
+// 3. myNumber과 userNumber을 비교하여 게임 실행 후 결과 출력: play
+function play(myNumber, userNumber) {
+  let strike = 0;
+  for (let i = 0; i < 3; i++) {
+    if (myNumber[i] === userNumber[i]) {
+      strike++;
+    }
+  }
+
+  let ball = 0;
+  for (let i = 0; i < 3; i++) {
+    if (myNumber[i] === userNumber[i]) {
+      continue;
+    }
+
+    if (myNumber.includes(userNumber[i])) {
+      ball++;
+    }
+  }
+
+  //결과 출력 ()
+  const $result = document.querySelector("#result");
+
+  if (strike === 3) {
+    $result.textContent = "축하합니다 정답을 맞추셨습니다.";
+  } else if (strike || ball) {
+    $result.textContent = `${strike} 스트라이크, ${ball} 볼`;
+  } else {
+    $result.textContent = "낫싱";
+  }
+}
+
+const myNumber = getMyNumber();
+const userNumber = getUserNumber();
+
+// 4. 확인 버튼 클릭 시 play를 실행하는 이벤트 핸들러
+
+const app = () => {
+  const myNumber = getMyNumber(); // 최초에 생성된 3자리 난수
+
+  const $submitButton = document.querySelector("#submit");
+  $submitButton.addEventListener("click", () => {
+    const userNumber = getUserNumber();
+
+    console.log("myNumber", myNumber);
+    console.log("userNumber", userNumber);
+
+    play(myNumber, userNumber);
+  });
+};
 
-new BaseballGame();
+document.addEventListener("DOMContentLoaded", () => {
+  app();
+});