next-step · kangjuyeon1 · May 10, 2024 · May 10, 2024 · May 10, 2024 · May 10, 2024
diff --git a/README.md b/README.md
@@ -1 +1,9 @@
-# javascript-baseball-precourse
+# javascript-baseball-precourse
+
+#기능
+1. 임의의 정답값 설정 및 게임 초기세팅
+2. 사용자가 입력한 값과 정답값을 비교하여 ball,strike 갯수 계산
+3. 결과 오답시 alert() / 정답 시 정답 메시지 출력
+4. 잘못된 입력 시 예외알리기
+5. 정답 시, 입력 못하도록 제한하기
+6. esLint, prettier 규칙에 따라 코드 정리.
diff --git a/index.html b/index.html
@@ -3,10 +3,22 @@
   <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><b>1~9까지의 수</b>를 중복없이<b>3</b>개 입력해주세요.</p>
+      <p>올바른 예)139<br>틀린 예)122</p>
+      <input id = "num" type="text">
+      <button id = "submit">확인</button>
+      <div class="result">
+        <H3>📄결과</H3>
+        <h4>🎉정답을 맞추셨습니다🎉</h4>
+        <p>게임을 새로 시작하시겠습니까?</p>
+        <button id = "restart">게임 재시작</button>
+      </div>
+    </div>
     <script type="module" src="/src/main.js"></script>
   </body>
 </html>
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -10,7 +10,7 @@
     "preview": "vite preview"
   },
   "devDependencies": {
-    "vite": "^5.2.0"
+    "vite": "^5.2.11"
   },
   "engines": {
     "npm": ">=9.6.7",

diff --git a/src/components/Ball.js b/src/components/Ball.js
@@ -0,0 +1,10 @@
+let balls = 0;
+export function Ball(inputValue,value){
+    balls = 0;
+    for(let i = 0; i<3;i++){
+        if(value.includes(parseInt(inputValue[i])))
+            balls++;
+    }
+}
+
+export {balls}
diff --git a/src/components/InputController.js b/src/components/InputController.js
@@ -0,0 +1,17 @@
+// components/InputController.js
+
+export function disableInput() {
+    const inputField = document.getElementById('num');
+    const submitButton = document.getElementById('submit');
+
+    inputField.disabled = true;
+    submitButton.disabled = true;
+}
+
+export function enableInput() {
+    const inputField = document.getElementById('num');
+    const submitButton = document.getElementById('submit');
+
+    inputField.disabled = false;
+    submitButton.disabled = false;
+}
diff --git a/src/components/InputValidator.js b/src/components/InputValidator.js
@@ -0,0 +1,22 @@
+export function validateInput(input) {
+    // 입력값이 숫자가 아닌 경우 에러
+    if (!/^\d+$/.test(input)) {
+        alert("입력값은 숫자만 입력해야 합니다.");
+        return false;
+    }
+
+    // 입력값이 3자리가 아닌 경우 에러
+    if (input.length !== 3) {
+        alert("입력값은 3자리여야 합니다.");
+        return false;
+    }
+
+    // 입력값이 중복된 숫자를 포함하는 경우 에러
+    if (new Set(input).size !== input.length) {
+        alert("입력값은 중복된 숫자를 포함해서는 안됩니다.");
+        return false;
+    }
+
+    // 모든 유효성 검사를 통과한 경우 true 반환
+    return true;
+}
diff --git a/src/components/Random.js b/src/components/Random.js
@@ -0,0 +1,16 @@
+let value = [];
+
+export function Random(){
+    const array = [1, 2, 3, 4, 5, 6, 7, 8, 9];
+    value.length=0;
+    for (let i = 0; i < 3; i++) {
+    const randomIndex = Math.floor(Math.random() * (array.length - i));
+    value.push(array[randomIndex]); 
+    array.splice(randomIndex, 1);// 중복 제거.
+    }
+
+    document.querySelector('.result').style.display = 'none';
+    document.getElementById('num').value = ' ';
+}
+
+export{value};
diff --git a/src/components/Strike.js b/src/components/Strike.js
@@ -0,0 +1,12 @@
+let strikes = 0;
+export function Strike(inputValue,value){
+    strikes = 0;
+    for(let i = 0; i<3;i++){
+        if(inputValue[i] == value[i])
+            strikes++;
+    }
+
+}
+
+
+export {strikes}
diff --git a/src/components/result.js b/src/components/result.js
@@ -0,0 +1,27 @@
+// components/result.js
+
+export function result(strikes, balls) {
+    let result;
+
+    switch (true) {
+        case strikes > 0 && balls > 0:
+            result = `${strikes} 스트라이크, ${balls} 볼`;
+            break;
+        case (strikes > 0 && strikes < 3) && balls === 0:
+            result = `${strikes} 스트라이크`;
+            break;
+        case strikes === 0 && balls > 0:
+            alert(`${balls} 볼`);
+            break;
+        case strikes === 3:
+            document.querySelector('.result').style.display = 'block';
+            break;
+        default:
+            result = '낫싱';
+            break;
+    }
+
+    if (result) {
+        alert(result);
+    }
+}
diff --git a/src/main.js b/src/main.js
@@ -0,0 +1,61 @@
+// main.js
+
+import { Random, value } from './components/Random.js';
+import { Strike, strikes } from './components/Strike.js';
+import { Ball, balls,  } from './components/Ball.js';
+import { result  } from './components/result.js';
+import { validateInput } from './components/InputValidator.js';
+import { disableInput, enableInput } from './components/InputController.js';
+
+// 임의의 정답 값 설정 및 게임 초기세팅
+Random();
+
+
+// 확인 버튼 클릭 시 stike, ball 계산
+const submitButton = document.getElementById("submit");
+
+
+submitButton.addEventListener('click', () => {
+    // value 배열이 비어 있는지 확인
+    if (value.length === 0) {
+        console.error("Value array is empty. Random function should be called first.");
+        return;
+    }
+
+    //strikes,balls 계산.
+    const input = document.getElementById('num').value.trim();
+
+
+    // 입력값 유효성 검사
+    if (!validateInput(input)) {
+        console.error("입력값이 유효하지 않습니다.");
+        return;
+    }
+
+
+    const inputValue = String(input);
+    Strike(inputValue, value);
+    Ball(inputValue, value);
+    let realballs = balls-strikes;
+    console.log(value, strikes,realballs)
+
+
+    //결과값 보여주기
+    result(strikes, realballs);
+
+    // 정답을 맞춘 경우 입력 비활성화
+    if (strikes === 3) {
+        disableInput();
+    }
+
+});
+
+
+
+//재시작.
+const restartButton = document.getElementById("restart");
+
+restartButton.addEventListener('click', () => {
+    Random(); // 새로운 랜덤 값 설정
+    document.querySelector('.result').style.display = 'none'; // 결과 창 숨기기
+});