yujo11 · sung-eunji · Nov 25, 2023
diff --git a/README.md b/README.md
@@ -11,7 +11,7 @@
 - 위 숫자 야구게임에서 상대방의 역할을 컴퓨터가 한다. 컴퓨터는 1에서 9까지 서로 다른 임의의 수 3개를 선택한다. 게임 플레이어는 컴퓨터가 생각하고 있는 3개의 숫자를 입력하고, 컴퓨터는 입력한 숫자에 대한 결과를 출력한다.
 - 이 같은 과정을 반복해 컴퓨터가 선택한 3개의 숫자를 모두 맞히면 게임이 종료된다.
 - 게임을 종료한 후 게임을 다시 시작할 수 있다.
-- 게임을 종료한 후 id가 `game-restart-button`인 버튼을 클릭함으로써 게임을 다시 시작할 수 있다. 
+- 게임을 종료한 후 id가 `game-restart-button`인 버튼을 클릭함으로써 게임을 다시 시작할 수 있다.
   - `예) <button id="game-restart-button">재시작</button>`
 
 <br>
@@ -87,3 +87,51 @@ play(123, 124); // '2스트라이크'
 - event
   - [이벤트](https://ko.javascript.info/introduction-browser-events)
   - [이벤트 위임](https://ko.javascript.info/event-delegation)
+
+<br>
+상대방의 역할을 컴퓨터가 한다. 
+컴퓨터는 1에서 9까지 서로 다른 임의의 수 3개를 선택한다. 
+게임 플레이어는 컴퓨터가 생각하고 있는 3개의 숫자를 입력하고, 
+버튼을 눌렀을 때,
+
+- 사용자가 잘못된 입력 값을 작성한 경우 `alert`을 이용해 메시지를 보여주고, 재입력할 수 있게 한다. -제대로된 값을 입력했을 때,
+  컴퓨터의 랜덤값 3개가 나온다.
+  input값과 겹치는 숫자가 있을 때,
+
+컴퓨터는 입력한 숫자에 대한 결과를 출력한다.
+
+사용자인풋과 컴퓨터 랜덤 배열 중,
+
+1. 같은수 없으면 = 낫싱
+2. 같은 수, 같은 자리 = 스트라이크
+3. 같은 수, 다른 자리 = 볼 그 중에서 같은수 한개면 1볼, 두개면 2볼, 3개면 3볼
+   스트라이크와 볼은 합산 계산 가능
+   play(123, 134); // '1볼 1스트라이크' 1볼 불포함 계산 후 스트라이크 계산
+   play(123, 132); // '2볼 1스트라이크'
+   스트라이크와 볼이 같이 있는 경우 볼을 먼저쓰고, 스트라이크를 쓴다.
+
+4. 숫자를 모두 맞히면: 🎉정답을 맞추셨습니다!🎉
+   게임을 새로 시작하시겠습니까? 게임재시작 버튼
+   게임이 종료된다.
+
+## 필요한 함수 펼쳐보기
+
+### 인풋 버튼 클릭이벤트 함수
+
+### 사용자 인풋을 배열안에 넣는 함수
+
+### 겹치지 않는 세자리 난수 생성
+
+### 인풋 세자리 겹치지 않는 숫자로 제한
+
+### 게임이 승리했을 때 함수?
+
+- 축하메시지 문자열과 버튼 태그 div 생성
+- 버튼 누르면 게임 리셋
+
+## 리셋 버튼 클릭이벤트 함수
+
+### 게임결과를 문자열로 나타내는 함수
+
+- 볼, 스트라이크, 낫싱 출력 후
+- 각 결과에 맞는 문자열 생성
diff --git a/index.html b/index.html
@@ -3,6 +3,13 @@
   <head>
     <meta charset="UTF-8" />
     <title>숫자 야구 게임</title>
+    <link rel="stylesheet" href="./src/style.css" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR&display=swap"
+      rel="stylesheet"
+    />
   </head>
   <body>
     <div id="app">
@@ -13,11 +20,24 @@ <h1>⚾ 숫자 야구 게임</h1>
         올바른 예) 139 <br />
         틀린 예) 122
       </p>
-      <input type="text" id="user-input" />
+
+      <input
+        id="user-input"
+        type="number"
+        maxlength="3"
+        oninput="maxLengthCheck(this)"
+      />
       <button id="submit">확인</button>
       <h3>📄 결과</h3>
       <div id="result"></div>
+
+      <!--hidden reset message-->
+      <div class="new-game-message-box">
+        <h3>게임을 새로 시작하겠습니까?</h3>
+        <button>게임 재시작</button>
+      </div>
     </div>
-    <script type="module" src="src/index.js"></script>
+
+    <script src="src/index.js"></script>
   </body>
 </html>
diff --git a/src/index.js b/src/index.js
@@ -1,13 +1,68 @@
-export default function BaseballGame() {
-  this.play = function (computerInputNumbers, userInputNumbers) {
-    return "결과 값 String";
-  };
-}
-
 // export default class BaseballGame {
 //   play(computerInputNumbers, userInputNumbers) {
 //     return "결과 값 String";
 //   }
 // }
+// new BaseballGame();
+
+const userInput = document.getElementById("user-input");
+const btnSubmit = document.getElementById("submit");
+const Msgresult = document.getElementById("result");
+
+// 인풋 세자리 겹치지 않는 숫자로 제한
+function maxLengthCheck(userInput) {
+  if (userInput.value.length > userInput.maxLength) {
+    userInput.value = userInput.value.slice(0, userInput.maxLength);
+  }
+}
+
+//겹치지 않는 세자리 난수 생성
+let computerrArr = [];
+let num;
+
+function computerInputNumbers() {
+  while (computerrArr.length < 3) {
+    num = Math.floor(Math.random() * 9);
+    if (!computerrArr.includes(num)) {
+      computerrArr.push(num);
+    }
+  }
+
+  return computerrArr;
+}
+
+// 인풋 버튼 클릭이벤트 함수
+btnSubmit.addEventListener("click", userInputNumbers);
+
+// 사용자 인풋을 배열안에 넣는 함수
+let userArray = [];
+function userInputNumbers() {
+  let inputValue = userInput.value;
+  for (let i = 0; i < inputValue.length; i++) {
+    userArray.push(inputValue[i]);
+  }
+  userInput.value = null;
+
+  play(userArray, computerInputNumbers());
+}
 
-new BaseballGame();
+// 게임결과를 문자열로 나타내는 함수
+function play(userArray, computerrArr) {
+  const CountScore = {
+    strike: 0,
+    ball: 0,
+  };
+
+  for (let num of userArray) {
+    const indexNum = userArray.indexOf(num);
+    console.log(computerrArr.indexOf(num));
+
+    if (computerrArr.indexOf(num) === indexNum) {
+      CountScore.strike += 1;
+    } else if (computerrArr.includes(num)) {
+      CountScore.ball += 1;
+    }
+  }
+  console.log(userArray, computerrArr);
+  console.log(CountScore);
+}
diff --git a/src/style.css b/src/style.css
@@ -0,0 +1,20 @@
+* {
+  font-family: "Noto Sans KR", sans-serif;
+}
+
+.new-game-message-box {
+  display: none;
+  flex-direction: row;
+  align-items: center;
+  gap: 10px;
+}
+
+.new-game-message-box button {
+  height: 1.5rem;
+}
+
+input::-webkit-inner-spin-button {
+  appearance: none;
+  -moz-appearance: none;
+  -webkit-appearance: none;
+}