next-step · sugoring · May 6, 2024 · May 6, 2024 · May 6, 2024 · May 6, 2024
diff --git a/README.md b/README.md
@@ -1 +1,65 @@
-# javascript-baseball-precourse
+# javascript-baseball-precourse
+
+- 숫자 야구 - 미니과제
+- [참고 주소](https://github.com/next-step/javascript-baseball-precourse)
+- node v20.11.1
+
+---
+
+## 구현 기능 목록
+
+### 1. 컴퓨터 랜덤 숫자 선택
+
+- 컴퓨터는 1에서 9까지의 숫자 중에서 서로 다른 임의의 수 세 개를 선택한다.
+- 선택된 숫자는 게임이 `재시작 및 종료`될 때까지 변경되지 않는다.
+
+### 2. 사용자 숫자 입력
+
+- 사용자는 세 자리의 숫자를 입력한다.
+
+### 3. 사용자 입력 유효성 판단
+
+- 세 자리의 숫자인지 확인한다.
+- 각 자리의 숫자가 1에서 9 사이인지 확인한다.
+- 각 자리의 숫자가 서로 중복되지 않는지 검사한다.
+- 위의 조건을 만족하지 않을 경우, alert()를 사용하여 오류 메시지를 출력한다.
+- 그 부분부터 사용자는 다시 숫자를 입력한다.
+
+### 4. 숫자 비교
+
+- `컴퓨터 랜덤 숫자`와 `사용자 숫자`를 비교한다.
+  - 숫자와 위치가 일치하면, "스트라이크"로 카운트한다.
+  - 숫자는 일치하지만 위치가 다르면, "볼"로 카운트한다.
+  - 일치하는 숫자가 없으면, "낫싱"으로 카운트한다.
+- 사용자가 `컴퓨터 랜덤 숫자`를 맞출 때까지 과정을 반복한다.
+
+### 5. 결과 출력
+
+- 비교 결과에 따라 "스트라이크", "볼", "낫싱"의 수를 화면에 출력한다.
+- 예: "1스트라이크 2볼", "낫싱" 등
+- 결과가 "3 스트라이크"라면, 게임 종료 메시지를 출력한다.
+
+### 6. 재시작
+
+- 게임 종료 메시지 후 재시작 버튼을 표시한다.
+- 재시작 버튼을 클릭하면, 컴퓨터는 새로운 숫자를 선택하고 게임을 다시 시작한다.
+
+### 7. 종료
+
+- 사용자가 게임을 종료할 수 있는 옵션을 제공한다.
+- 게임을 종료한다는 것은, 창을 닫는다는 의미로 해석한다.
+- 프로그래밍 요구 사항에 따라, 프로그램 종료 시 process.exit() 를 호출하지 않는다.
+
+### 8. 추가 기능 구현
+
+- 엔터 버튼으로 입력을 받는다.
+- 새로 입력하면, 기존의 입력되어 있던 값이 사라진다.
+
+---
+
+### 과제 진행 소감
+
+- 이번 개인 프로젝트를 통해 GitHub에서 버전 관리를 하고 처음으로 포크를 진행하면서 협업에 필요한 여러 기법을 배울 수 있었습니다. 🤓📚 특히, 프로그래밍 요구사항을 이해하면서 나중에 개발 협업 시 공통적으로 합의해야 할 사항들에 대해 학습할 수 있었습니다.
+- 또한, 구현할 목록을 단계별로 작성하고 이를 하나씩 완성해 가면서 체계적으로 학습할 수 있었습니다. 이전에 미니 프로젝트를 진행하면서 요구사항을 제대로 정의하지 않았던 경험을 되돌아보며 반성하게 되었습니다. 📝🛠 JavaScript를 활용하여 실제로 적용해본 경험은 학습에 많은 도움이 되었으며, 부족한 부분은 블로그와 문서를 참고하여 보완했습니다.
+- 게임을 종료하는 방식으로 창을 닫으려 했으나 정책상의 이유로 window.close() 함수를 사용할 수 없었습니다. 대신, 화면의 요소들을 보이지 않게 하여 게임이 종료된 것처럼 처리하였습니다. 이와 같은 방식으로 종료의 의미를 어떻게 해석할 수 있는지 궁금합니다. ❓🚪
+- CSS도 추가로 구현하고 싶었지만, 시간 관리가 부족하여 진행하지 못한 것이 아쉽습니다. ⏳🎨
diff --git a/index.html b/index.html
@@ -1,12 +1,37 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title></title>
+    <title>Baseball - Sugoring</title>
+    <!-- <link
+      href="
+https://cdn.jsdelivr.net/npm/reset-css@5.0.2/reset.min.css
+"
+      rel="stylesheet"
+    />
+    <link rel="stylesheet" href="/src/main.css" /> -->
   </head>
   <body>
-    <div id="app"></div>
-    <script type="module" src="/src/main.js"></script>
+    <div id="app">
+      <h1>⚾ Let's Play Ball! ⚾</h1>
+      <p>1 ~ 9까지의 수를 중복없이 3개 입력해주세요.</p>
+      <p>Example: 1️⃣3️⃣9️⃣</p>
+      <p>Try Again: 1️⃣2️⃣2️⃣</p>
+
+      <div class="input-container">
+        <input type="text" id="inputNumber" placeholder="숫자를 입력해주세요" />
+        <button class="inputButton">확인</button>
+      </div>
+
+      <h2>결과</h2>
+      <p class="displayResult">게임 진행 중 입니다... ⏳</p>
+
+      <button class="restartButton" style="display: none">재시작</button>
+
+      <button class="exitButton">게임 종료</button>
+    </div>
+
+    <script type="module" src="/src/main.js" defer></script>
   </body>
 </html>
diff --git a/src/main.css b/src/main.css
@@ -0,0 +1,7 @@
+body {
+    font-family: Arial, sans-serif;
+    margin: 0;
+    padding: 0;
+    background-color: #f0f0f0;
+  }
+
diff --git a/src/main.js b/src/main.js
@@ -0,0 +1,113 @@
+// 컴퓨터 랜덤 숫자 선택 ----------------------------------------------------------------------------------
+// 전역 변수로 선택된 숫자를 저장
+let computerNumbers = [];
+
+function randomNumbers() {
+  const digits = [1, 2, 3, 4, 5, 6, 7, 8, 9];
+  const chosenDigits = [];
+
+  while (chosenDigits.length < 3) {
+    const randomIndex = Math.floor(Math.random() * digits.length);
+    const digit = digits.splice(randomIndex, 1)[0];
+    chosenDigits.push(digit);
+  }
+
+  return chosenDigits;
+}
+
+function startGame() {
+  computerNumbers = randomNumbers(); // 게임 시작 시 숫자 생성
+  console.log("컴퓨터 랜덤 숫자 선택: ", computerNumbers);
+}
+
+// 게임 시작
+startGame();
+
+// 버튼 ----------------------------------------------------------------------------------
+document.addEventListener("DOMContentLoaded", () => {
+  const inputButton = document.querySelector(".inputButton"); // 확인 버튼
+  const restartButton = document.querySelector(".restartButton"); // 재시작 버튼
+
+  inputButton.addEventListener("click", checkInput); // 확인 버튼 클릭 이벤트
+  restartButton.addEventListener("click", restartGame); // 재시작 버튼 클릭 이벤트
+});
+
+// 재시작 버튼 ----------------------------------------------------------------------------------
+function restartGame() {
+  startGame(); // 게임 재시작
+  const resultElement = document.querySelector(".displayResult");
+  resultElement.textContent = "진행 중 입니다."; // 결과 표시 초기화
+  document.getElementById("inputNumber").value = ""; // 입력 필드 초기화
+
+  const restartButton = document.querySelector(".restartButton");
+  restartButton.style.display = "none"; // 재시작 버튼 숨김
+}
+
+// 사용자 숫자 입력 ----------------------------------------------------------------------------------
+function displayResult(message) {
+  const resultElement = document.querySelector(".displayResult");
+  resultElement.textContent = message;
+}
+
+function checkInput() {
+  const inputField = document.getElementById("inputNumber");
+  const inputValue = inputField.value;
+  const restartButton = document.querySelector(".restartButton");
+
+  if (isValidInput(inputValue)) {
+    const result = compareNumbers(computerNumbers, inputValue);
+
+    if (result.strikes == 0 && result.balls == 0) {
+      displayResult("닛싱 😔");
+    } else if (result.strikes == 0) {
+      displayResult(`볼 - ${result.balls} 🧢`);
+    } else if (result.balls == 0) {
+      displayResult(`스트라이크 - ${result.strikes} 💥`);
+    } else {
+      displayResult(
+        `스트라이크 - ${result.strikes} 💥, 볼 - ${result.balls} 🧢`
+      );
+    }
+    if (result.strikes === 3) {
+      displayResult(" 🥳 축하합니다! 🥳");
+      restartButton.style.display = "block";
+    }
+  } else {
+    alert(
+      "잘못된 입력입니다. 1부터 9까지 서로 다른 숫자 세 개를 입력해주세요."
+    );
+  }
+}
+
+function isValidInput(input) {
+  const uniqueDigits = new Set(input);
+  // 입력이 세 자리 숫자이고, 모든 자릿수가 1-9 사이이며, 중복된 숫자가 없어야 함
+  return (
+    input.length === 3 &&
+    [...uniqueDigits].every((digit) => digit >= "1" && digit <= "9") &&
+    uniqueDigits.size === 3
+  );
+}
+
+// 숫자 비교 ----------------------------------------------------------------------------------
+function compareNumbers(computerNumbers, userInput) {
+  let strikes = 0;
+  let balls = 0;
+  for (let i = 0; i < 3; i++) {
+    if (computerNumbers[i] === Number(userInput[i])) {
+      strikes++;
+    } else if (computerNumbers.includes(Number(userInput[i]))) {
+      balls++;
+    }
+  }
+  return { strikes, balls };
+}
+
+// 종료 ----------------------------------------------------------------------------------
+document.addEventListener("DOMContentLoaded", () => {
+  const exitButton = document.querySelector(".exitButton");
+  exitButton.addEventListener("click", function () {
+    document.getElementById("app").style.display = "none"; // 인터페이스 숨기기
+    alert("게임을 종료합니다. 창을 닫아주세요.");
+  });
+});