From d8ac253f918c8b7e3a25a91b995a921fe1beb448 Mon Sep 17 00:00:00 2001 From: yongrae Date: Fri, 26 Nov 2021 03:19:53 +0900 Subject: [PATCH 01/17] =?UTF-8?q?docs:=20=EA=B5=AC=ED=98=84=ED=95=A0=20?= =?UTF-8?q?=EA=B8=B0=EB=8A=A5=20=EB=AA=A9=EB=A1=9D=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: yongrae --- docs/README.md | 34 ++++++++++++++++++++++++++++++++++ 1 file changed, 34 insertions(+) create mode 100644 docs/README.md diff --git a/docs/README.md b/docs/README.md new file mode 100644 index 00000000..10cb42f2 --- /dev/null +++ b/docs/README.md @@ -0,0 +1,34 @@ +## 구현이 필요한 기능 + +### 컴퓨터가 생각할 숫자 결정하기 +> 1부터 9사이의 세 개의 숫자를 임의로 결정해야한다. +- [MissionUtils 라이브러리](https://github.com/woowacourse-projects/javascript-mission-utils#mission-utils) 의 Random.pickNumberInRange를 사용해 구한다. +```js +Random.pickNumberInRange(1, 10); // 1 +``` + +### 유저가 제시한 숫자를 판정하기 +> 입력한 값을 컴퓨터가 생각한 숫자와 비교하여 힌트 또는 정답을 출력한다. +- 입력된 숫자가 형식을 만족하는지 확인하는 `validateNumber` 메서드 +- **3개의 숫자** 형식을 만족하는 경우 + - 같은 수가 같은 자리에 있으면 `스트라이크` + - 같은 수가 다른 자리에 있으면 `볼` + - 같은 수가 없으면 `낫싱` + - 정확히 일치하는 경우엔 게임을 종료하고 재시작 버튼을 노출시킨다. +- 형식을 만족하지 않는 경우 + - `alert`로 에러 메시지를 보여주고, 다시 입력하도록 한다. + - 잘못된 값이 입력되어 있던 폼은 비워준다. + +### 현재 상태를 결과 영역에 표시하기 +> 현재 상태에 따라 결과 영역에 적절한 값을 출력한다. +- 유저가 **오답**을 입력한 경우 + - 스트라이크, 볼, 낫싱의 결과를 결과 영역에 출력한다. +- 유저가 **정답**을 입력한 경우 + - 축하 메시지와 함께 게임을 재시작 할 수 있는 버튼을 노출한다. +- 유저가 재시작 버튼을 클릭한 경우 + - 결과 영역에 출력된 메시지들을 지운다. + +### 게임 재시작하기 +> 게임을 재시작 할 수 있도록 현재 상태와 정답을 초기화 시킨다. +- **[컴퓨터가 생각할 숫자 결정하기]** 에서 만든 메서드를 통해 정답을 초기화 한다. +- **[현재 상태를 화면에 표시하기]** 에서 만든 메서드를 통해 결과 영역의 메시지들을 지운다. From 1456746bd3fae8ead3bded3652e5d5d48dd43ffa Mon Sep 17 00:00:00 2001 From: yongrae Date: Fri, 26 Nov 2021 18:38:30 +0900 Subject: [PATCH 02/17] =?UTF-8?q?feat:=20=EC=BB=B4=ED=93=A8=ED=84=B0?= =?UTF-8?q?=EA=B0=80=20=EC=83=9D=EA=B0=81=ED=95=A0=20=EC=88=AB=EC=9E=90=20?= =?UTF-8?q?=EA=B2=B0=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 1부터 9사이의 세 개의 숫자를 임의로 결정 --- index.html | 2 +- src/baseballgame.js | 12 ++++++++++++ src/index.js | 10 ++++++++++ 3 files changed, 23 insertions(+), 1 deletion(-) create mode 100644 src/baseballgame.js create mode 100644 src/index.js diff --git a/index.html b/index.html index dd1bc05c..88fc4a25 100644 --- a/index.html +++ b/index.html @@ -21,6 +21,6 @@

📄 결과

1볼 1스트라이크
- + diff --git a/src/baseballgame.js b/src/baseballgame.js new file mode 100644 index 00000000..6e9ecced --- /dev/null +++ b/src/baseballgame.js @@ -0,0 +1,12 @@ +export default class BaseballGame { + constructor() { + this.computerNumber = []; + } + + setComputerNumber() { + while(this.computerNumber.length < 3) { + const randomNumber = MissionUtils.Random.pickNumberInRange(1, 9); + if(!this.computerNumber.includes(randomNumber)) this.computerNumber.push(randomNumber); + } + } +} diff --git a/src/index.js b/src/index.js new file mode 100644 index 00000000..bf5777ff --- /dev/null +++ b/src/index.js @@ -0,0 +1,10 @@ +import BaseballGame from "./baseballgame.js"; + +function init() { + const baseballGame = new BaseballGame(); + + baseballGame.setComputerNumber(); + console.log(baseballGame.computerNumber); +} + +init(); From 0af3f0057806578515070a1de526f8d2de180aac Mon Sep 17 00:00:00 2001 From: yongrae Date: Fri, 26 Nov 2021 22:53:56 +0900 Subject: [PATCH 03/17] =?UTF-8?q?feat:=20=EC=9E=85=EB=A0=A5=ED=95=9C=20?= =?UTF-8?q?=EC=88=AB=EC=9E=90=EA=B0=80=20=ED=98=95=EC=8B=9D=EC=9D=84=20?= =?UTF-8?q?=EB=A7=8C=EC=A1=B1=ED=95=98=EB=8A=94=EC=A7=80=20=ED=99=95?= =?UTF-8?q?=EC=9D=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 입력한 값이 세 자리 숫자이고, 중복되지 않는 값인지 확인 --- index.html | 2 +- src/baseballgame.js | 8 +++++++- src/index.js | 9 ++++++++- src/validateNumber.js | 16 ++++++++++++++++ 4 files changed, 32 insertions(+), 3 deletions(-) create mode 100644 src/validateNumber.js diff --git a/index.html b/index.html index 88fc4a25..ef45f423 100644 --- a/index.html +++ b/index.html @@ -13,7 +13,7 @@

⚾ 숫자 야구 게임

올바른 예) 139
틀린 예) 122

-
+
diff --git a/src/baseballgame.js b/src/baseballgame.js index 6e9ecced..abcb0727 100644 --- a/src/baseballgame.js +++ b/src/baseballgame.js @@ -1,3 +1,9 @@ +function uniqueNumberPush(computerNumber, randomNumber) { + if(!computerNumber.includes(randomNumber)) { + computerNumber.push(randomNumber); + } +} + export default class BaseballGame { constructor() { this.computerNumber = []; @@ -6,7 +12,7 @@ export default class BaseballGame { setComputerNumber() { while(this.computerNumber.length < 3) { const randomNumber = MissionUtils.Random.pickNumberInRange(1, 9); - if(!this.computerNumber.includes(randomNumber)) this.computerNumber.push(randomNumber); + uniqueNumberPush(this.computerNumber, randomNumber); } } } diff --git a/src/index.js b/src/index.js index bf5777ff..39c90625 100644 --- a/src/index.js +++ b/src/index.js @@ -1,10 +1,17 @@ import BaseballGame from "./baseballgame.js"; +import validateNumber from "./validateNumber.js"; + +function playGame() { + const userInput = document.getElementById("user-input"); + alert(validateNumber(userInput.value)); +} function init() { const baseballGame = new BaseballGame(); + const submitButton = document.getElementById("submit"); baseballGame.setComputerNumber(); - console.log(baseballGame.computerNumber); + submitButton.addEventListener("click", playGame); } init(); diff --git a/src/validateNumber.js b/src/validateNumber.js new file mode 100644 index 00000000..4955444f --- /dev/null +++ b/src/validateNumber.js @@ -0,0 +1,16 @@ +function isThreeDigits(inputNumber) { + return inputNumber.length === 3; +} + +function isDuplicate(inputNumber) { + const firstDigit = inputNumber.charAt(0); + const secondDigit = inputNumber.charAt(1); + const thirdDigit = inputNumber.charAt(2); + return firstDigit === secondDigit || secondDigit === thirdDigit || thirdDigit === firstDigit; +} + +export default function validateNumber(inputNumbers) { + if(!Number.isInteger(Number(inputNumbers))) return false; + if(!isThreeDigits(inputNumbers)) return false; + return !isDuplicate(inputNumbers); +} From 45b481203dbf0d8a35b25ac448dd4f609ab9785a Mon Sep 17 00:00:00 2001 From: yongrae Date: Sat, 27 Nov 2021 02:35:13 +0900 Subject: [PATCH 04/17] =?UTF-8?q?feat:=20=EC=9E=85=EB=A0=A5=ED=95=9C=20?= =?UTF-8?q?=EA=B0=92=EC=9D=84=20=EB=B0=94=ED=83=95=EC=9C=BC=EB=A1=9C=20?= =?UTF-8?q?=ED=9E=8C=ED=8A=B8=20=EB=98=90=EB=8A=94=20=EC=A0=95=EB=8B=B5=20?= =?UTF-8?q?=EC=B6=9C=EB=A0=A5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 스트라이크, 볼, 낫싱, 정답을 출력 --- src/baseballgame.js | 8 ++++++++ src/index.js | 12 ++++++++++-- src/judgeNumber.js | 13 +++++++++++++ src/resultMessages.js | 17 +++++++++++++++++ 4 files changed, 48 insertions(+), 2 deletions(-) create mode 100644 src/judgeNumber.js create mode 100644 src/resultMessages.js diff --git a/src/baseballgame.js b/src/baseballgame.js index abcb0727..b922b857 100644 --- a/src/baseballgame.js +++ b/src/baseballgame.js @@ -1,3 +1,6 @@ +import judgeNumber from "./judgeNumber.js"; +import resultMessages from "./resultMessages.js"; + function uniqueNumberPush(computerNumber, randomNumber) { if(!computerNumber.includes(randomNumber)) { computerNumber.push(randomNumber); @@ -15,4 +18,9 @@ export default class BaseballGame { uniqueNumberPush(this.computerNumber, randomNumber); } } + + play(userInputNumber) { + let [strikes, balls] = judgeNumber(this.computerNumber, userInputNumber); + return resultMessages(strikes, balls); + } } diff --git a/src/index.js b/src/index.js index 39c90625..f9bdbe7c 100644 --- a/src/index.js +++ b/src/index.js @@ -1,13 +1,21 @@ import BaseballGame from "./baseballgame.js"; import validateNumber from "./validateNumber.js"; +const baseballGame = new BaseballGame(); + function playGame() { const userInput = document.getElementById("user-input"); - alert(validateNumber(userInput.value)); + let resultString; + + if(validateNumber(userInput.value)) { + resultString = baseballGame.play(userInput.value); + alert(resultString); + }else{ + alert("잘못된 값을 입력하였습니다!"); + } } function init() { - const baseballGame = new BaseballGame(); const submitButton = document.getElementById("submit"); baseballGame.setComputerNumber(); diff --git a/src/judgeNumber.js b/src/judgeNumber.js new file mode 100644 index 00000000..6c37e735 --- /dev/null +++ b/src/judgeNumber.js @@ -0,0 +1,13 @@ +export default function judgeNumber(computerInputNumbers, userInputNumbers) { + let strikes = 0, balls = 0; + console.log(computerInputNumbers, userInputNumbers); + for(let i = 0; i < 3; i++) { + if(computerInputNumbers[i] === Number(userInputNumbers.charAt(i))) { + strikes++; + }else if(computerInputNumbers.includes(Number(userInputNumbers.charAt(i)))) { + balls++; + } + } + + return [strikes, balls]; +} diff --git a/src/resultMessages.js b/src/resultMessages.js new file mode 100644 index 00000000..09ecb716 --- /dev/null +++ b/src/resultMessages.js @@ -0,0 +1,17 @@ +export default function resultMessages(strikes, balls) { + let messages; + + if(strikes === 0 && balls === 0) { + messages = "낫싱"; + }else if(strikes === 3) { + messages = "🎉 정답을 맞추셨습니다! 🎉"; + }else if(strikes === 0) { + messages = balls + "볼"; + }else if(balls === 0) { + messages = strikes + "스트라이크"; + }else { + messages = balls + "볼 " + strikes + "스트라이크"; + } + + return messages; +} From 18c36d1b959a84f955f1fa7fc1de95a1eb6672a7 Mon Sep 17 00:00:00 2001 From: yongrae Date: Sat, 27 Nov 2021 03:09:50 +0900 Subject: [PATCH 05/17] =?UTF-8?q?feat:=20=ED=98=84=EC=9E=AC=20=EC=83=81?= =?UTF-8?q?=ED=83=9C=EB=A5=BC=20=EA=B2=B0=EA=B3=BC=20=EC=98=81=EC=97=AD?= =?UTF-8?q?=EC=97=90=20=ED=91=9C=EC=8B=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 유저가 오답을 입력한 경우 힌트를 결과 영역에 표시 - 유저가 정답을 입력한 경우 축하 메시지와 재시작 버튼을 노출 --- src/displayResult.js | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) create mode 100644 src/displayResult.js diff --git a/src/displayResult.js b/src/displayResult.js new file mode 100644 index 00000000..0b1afbef --- /dev/null +++ b/src/displayResult.js @@ -0,0 +1,16 @@ +export default function displayResult(resultString) { + const resultDiv = document.getElementById("result"); + let state = true; // { true: playing, false :end } + + if(resultString === "🎉 정답을 맞추셨습니다! 🎉") { + resultDiv.innerHTML = "

" + resultString + "

" + + "게임을 새로 시작하시겠습니까? "; + state = false; + } + else{ + resultDiv.innerHTML = resultString; + } + + return state; +} + From 4fb7d6e764c7428b50d35f1d0058bfe19decf0fd Mon Sep 17 00:00:00 2001 From: yongrae Date: Sat, 27 Nov 2021 03:13:36 +0900 Subject: [PATCH 06/17] =?UTF-8?q?feat:=20=EA=B2=8C=EC=9E=84=20=EC=9E=AC?= =?UTF-8?q?=EC=8B=9C=EC=9E=91=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 결과 영여의 메시지 삭제 - 컴퓨터가 생각한 숫자 초기화 --- src/baseballgame.js | 5 +++++ src/displayResult.js | 3 +++ src/index.js | 24 ++++++++++++++++++++---- 3 files changed, 28 insertions(+), 4 deletions(-) diff --git a/src/baseballgame.js b/src/baseballgame.js index b922b857..919c654a 100644 --- a/src/baseballgame.js +++ b/src/baseballgame.js @@ -23,4 +23,9 @@ export default class BaseballGame { let [strikes, balls] = judgeNumber(this.computerNumber, userInputNumber); return resultMessages(strikes, balls); } + + replay() { + this.computerNumber = []; + this.setComputerNumber(); + } } diff --git a/src/displayResult.js b/src/displayResult.js index 0b1afbef..00a72844 100644 --- a/src/displayResult.js +++ b/src/displayResult.js @@ -7,6 +7,9 @@ export default function displayResult(resultString) { "게임을 새로 시작하시겠습니까? "; state = false; } + else if(resultString === "초기화") { + resultDiv.innerHTML = ""; + } else{ resultDiv.innerHTML = resultString; } diff --git a/src/index.js b/src/index.js index f9bdbe7c..d5c3b250 100644 --- a/src/index.js +++ b/src/index.js @@ -1,23 +1,39 @@ import BaseballGame from "./baseballgame.js"; import validateNumber from "./validateNumber.js"; +import displayResult from "./displayResult.js"; const baseballGame = new BaseballGame(); +const submitButton = document.getElementById("submit"); function playGame() { const userInput = document.getElementById("user-input"); - let resultString; + let resultString, state = true; if(validateNumber(userInput.value)) { resultString = baseballGame.play(userInput.value); - alert(resultString); + state = displayResult(resultString); + addReplayEvent(state); }else{ alert("잘못된 값을 입력하였습니다!"); } } -function init() { - const submitButton = document.getElementById("submit"); +function replayGame() { + const replayButton = document.getElementById("game-restart-button"); + + baseballGame.replay(); + replayButton.removeEventListener("click", replayGame); + displayResult("초기화"); +} +function addReplayEvent(state) { + if(!state) { + const replayButton = document.getElementById("game-restart-button"); + replayButton.addEventListener("click", replayGame); + } +} + +function init() { baseballGame.setComputerNumber(); submitButton.addEventListener("click", playGame); } From 45af802538c739cdd842006f7d3d579b126f8f2b Mon Sep 17 00:00:00 2001 From: yongrae Date: Sat, 27 Nov 2021 16:29:41 +0900 Subject: [PATCH 07/17] =?UTF-8?q?refactor:=20=EB=A7=8E=EC=9D=80=20?= =?UTF-8?q?=EC=B1=85=EC=9E=84=EC=9D=84=20=EA=B0=96=EB=8A=94=20=EB=A9=94?= =?UTF-8?q?=EC=86=8C=EB=93=9C=20=EB=B6=84=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 많은 책임을 가진 메소드를 별개의 메소드로 분리함 --- src/baseballgame.js | 12 ++++++++---- src/judgeNumber.js | 12 ++++++++++-- 2 files changed, 18 insertions(+), 6 deletions(-) diff --git a/src/baseballgame.js b/src/baseballgame.js index 919c654a..41401e29 100644 --- a/src/baseballgame.js +++ b/src/baseballgame.js @@ -7,16 +7,20 @@ function uniqueNumberPush(computerNumber, randomNumber) { } } +function generateNumber(computerNumber) { + while(this.computerNumber.length < 3) { + const randomNumber = MissionUtils.Random.pickNumberInRange(1, 9); + uniqueNumberPush(computerNumber, randomNumber); + } +} + export default class BaseballGame { constructor() { this.computerNumber = []; } setComputerNumber() { - while(this.computerNumber.length < 3) { - const randomNumber = MissionUtils.Random.pickNumberInRange(1, 9); - uniqueNumberPush(this.computerNumber, randomNumber); - } + generateNumber(this.computerNumber); } play(userInputNumber) { diff --git a/src/judgeNumber.js b/src/judgeNumber.js index 6c37e735..b66ff6c3 100644 --- a/src/judgeNumber.js +++ b/src/judgeNumber.js @@ -1,10 +1,18 @@ +function isStrike(computerInputNumbers, userInputNumbers, index) { + return computerInputNumbers[index] === Number(userInputNumbers.charAt(index)); +} + +function isBall(computerInputNumbers, userInputNumbers, index) { + return computerInputNumbers.includes(Number(userInputNumbers.charAt(index))); +} + export default function judgeNumber(computerInputNumbers, userInputNumbers) { let strikes = 0, balls = 0; console.log(computerInputNumbers, userInputNumbers); for(let i = 0; i < 3; i++) { - if(computerInputNumbers[i] === Number(userInputNumbers.charAt(i))) { + if(isStrike(computerInputNumbers, userInputNumbers, i)) { strikes++; - }else if(computerInputNumbers.includes(Number(userInputNumbers.charAt(i)))) { + }else if(isBall(computerInputNumbers, userInputNumbers, i)) { balls++; } } From 327c6e91782fd9ac3964ee8474368f1ceed0c8ae Mon Sep 17 00:00:00 2001 From: yongrae Date: Sat, 27 Nov 2021 17:26:53 +0900 Subject: [PATCH 08/17] =?UTF-8?q?refactor:=20=EA=B8=B0=EB=8A=A5=20?= =?UTF-8?q?=EB=8B=A8=EC=9C=84=EB=A1=9C=20=ED=8C=8C=EC=9D=BC=20=EC=9C=84?= =?UTF-8?q?=EC=B9=98=20=EB=B6=84=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 직접적인 게임에 관련된 로직은 game - 지엽적인 부분에만 관여하는 함수는 utils --- src/{baseballgame.js => game/baseballGame.js} | 6 +++--- src/{ => game}/displayResult.js | 0 src/{ => game}/resultMessages.js | 0 src/index.js | 8 ++++---- src/{judgeNumber.js => utils/judgeInputNumber.js} | 2 +- src/{validateNumber.js => utils/validateInputNumber.js} | 2 +- 6 files changed, 9 insertions(+), 9 deletions(-) rename src/{baseballgame.js => game/baseballGame.js} (79%) rename src/{ => game}/displayResult.js (100%) rename src/{ => game}/resultMessages.js (100%) rename src/{judgeNumber.js => utils/judgeInputNumber.js} (88%) rename src/{validateNumber.js => utils/validateInputNumber.js} (89%) diff --git a/src/baseballgame.js b/src/game/baseballGame.js similarity index 79% rename from src/baseballgame.js rename to src/game/baseballGame.js index 41401e29..661f0e96 100644 --- a/src/baseballgame.js +++ b/src/game/baseballGame.js @@ -1,4 +1,4 @@ -import judgeNumber from "./judgeNumber.js"; +import judgeInputNumber from "../utils/judgeInputNumber.js"; import resultMessages from "./resultMessages.js"; function uniqueNumberPush(computerNumber, randomNumber) { @@ -8,7 +8,7 @@ function uniqueNumberPush(computerNumber, randomNumber) { } function generateNumber(computerNumber) { - while(this.computerNumber.length < 3) { + while(computerNumber.length < 3) { const randomNumber = MissionUtils.Random.pickNumberInRange(1, 9); uniqueNumberPush(computerNumber, randomNumber); } @@ -24,7 +24,7 @@ export default class BaseballGame { } play(userInputNumber) { - let [strikes, balls] = judgeNumber(this.computerNumber, userInputNumber); + let [strikes, balls] = judgeInputNumber(this.computerNumber, userInputNumber); return resultMessages(strikes, balls); } diff --git a/src/displayResult.js b/src/game/displayResult.js similarity index 100% rename from src/displayResult.js rename to src/game/displayResult.js diff --git a/src/resultMessages.js b/src/game/resultMessages.js similarity index 100% rename from src/resultMessages.js rename to src/game/resultMessages.js diff --git a/src/index.js b/src/index.js index d5c3b250..d4948739 100644 --- a/src/index.js +++ b/src/index.js @@ -1,6 +1,6 @@ -import BaseballGame from "./baseballgame.js"; -import validateNumber from "./validateNumber.js"; -import displayResult from "./displayResult.js"; +import BaseballGame from "./game/baseballGame.js"; +import validateInputNumber from "./utils/validateInputNumber.js"; +import displayResult from "./game/displayResult.js"; const baseballGame = new BaseballGame(); const submitButton = document.getElementById("submit"); @@ -9,7 +9,7 @@ function playGame() { const userInput = document.getElementById("user-input"); let resultString, state = true; - if(validateNumber(userInput.value)) { + if(validateInputNumber(userInput.value)) { resultString = baseballGame.play(userInput.value); state = displayResult(resultString); addReplayEvent(state); diff --git a/src/judgeNumber.js b/src/utils/judgeInputNumber.js similarity index 88% rename from src/judgeNumber.js rename to src/utils/judgeInputNumber.js index b66ff6c3..e8f1e1a9 100644 --- a/src/judgeNumber.js +++ b/src/utils/judgeInputNumber.js @@ -6,7 +6,7 @@ function isBall(computerInputNumbers, userInputNumbers, index) { return computerInputNumbers.includes(Number(userInputNumbers.charAt(index))); } -export default function judgeNumber(computerInputNumbers, userInputNumbers) { +export default function judgeInputNumber(computerInputNumbers, userInputNumbers) { let strikes = 0, balls = 0; console.log(computerInputNumbers, userInputNumbers); for(let i = 0; i < 3; i++) { diff --git a/src/validateNumber.js b/src/utils/validateInputNumber.js similarity index 89% rename from src/validateNumber.js rename to src/utils/validateInputNumber.js index 4955444f..d920c4de 100644 --- a/src/validateNumber.js +++ b/src/utils/validateInputNumber.js @@ -9,7 +9,7 @@ function isDuplicate(inputNumber) { return firstDigit === secondDigit || secondDigit === thirdDigit || thirdDigit === firstDigit; } -export default function validateNumber(inputNumbers) { +export default function validateInputNumber(inputNumbers) { if(!Number.isInteger(Number(inputNumbers))) return false; if(!isThreeDigits(inputNumbers)) return false; return !isDuplicate(inputNumbers); From 8f605729cacaf0060f55dded9707b805b85ddb1f Mon Sep 17 00:00:00 2001 From: yongrae Date: Sat, 27 Nov 2021 18:18:56 +0900 Subject: [PATCH 09/17] =?UTF-8?q?refactor:=20raw=ED=95=9C=20string?= =?UTF-8?q?=EB=93=A4=EC=9D=84=20=EC=83=81=EC=88=98=EB=A1=9C=20=EB=B6=84?= =?UTF-8?q?=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 결과 메시지 상수로 분리 - innerHTML String 상수로 분리 --- src/constants/constants.js | 12 ++++++++++++ src/game/displayResult.js | 7 ++++--- src/game/resultMessages.js | 16 +++++++++------- src/index.js | 2 +- 4 files changed, 26 insertions(+), 11 deletions(-) create mode 100644 src/constants/constants.js diff --git a/src/constants/constants.js b/src/constants/constants.js new file mode 100644 index 00000000..79f4f628 --- /dev/null +++ b/src/constants/constants.js @@ -0,0 +1,12 @@ +export const Messages = { + nothing: "낫싱", + ball: "볼", + strike: "스트라이크", + correct: "🎉 정답을 맞추셨습니다! 🎉" +}; + +export const HTML = { + result: "

" + Messages.correct + "

" + "게임을 새로 시작하시겠습니까? " +}; + +export default {Messages, HTML}; diff --git a/src/game/displayResult.js b/src/game/displayResult.js index 00a72844..8b0d21e7 100644 --- a/src/game/displayResult.js +++ b/src/game/displayResult.js @@ -1,10 +1,11 @@ +import { Messages, HTML } from "../constants/constants.js"; + export default function displayResult(resultString) { const resultDiv = document.getElementById("result"); let state = true; // { true: playing, false :end } - if(resultString === "🎉 정답을 맞추셨습니다! 🎉") { - resultDiv.innerHTML = "

" + resultString + "

" + - "게임을 새로 시작하시겠습니까? "; + if(resultString === Messages.correct) { + resultDiv.innerHTML = HTML.result; state = false; } else if(resultString === "초기화") { diff --git a/src/game/resultMessages.js b/src/game/resultMessages.js index 09ecb716..f206dd47 100644 --- a/src/game/resultMessages.js +++ b/src/game/resultMessages.js @@ -1,17 +1,19 @@ +import { Messages } from "../constants/constants.js"; + export default function resultMessages(strikes, balls) { - let messages; + let msg; if(strikes === 0 && balls === 0) { - messages = "낫싱"; + msg = Messages.nothing; }else if(strikes === 3) { - messages = "🎉 정답을 맞추셨습니다! 🎉"; + msg = Messages.correct; }else if(strikes === 0) { - messages = balls + "볼"; + msg = balls + Messages.ball; }else if(balls === 0) { - messages = strikes + "스트라이크"; + msg = strikes + Messages.strike; }else { - messages = balls + "볼 " + strikes + "스트라이크"; + msg = balls + Messages.ball + " " + strikes + Messages.strike; } - return messages; + return msg; } diff --git a/src/index.js b/src/index.js index d4948739..7ca7bdd8 100644 --- a/src/index.js +++ b/src/index.js @@ -7,7 +7,7 @@ const submitButton = document.getElementById("submit"); function playGame() { const userInput = document.getElementById("user-input"); - let resultString, state = true; + let resultString = "", state = true; if(validateInputNumber(userInput.value)) { resultString = baseballGame.play(userInput.value); From 87c3971d8083ba4fc748e0c2aee4fff560aa6947 Mon Sep 17 00:00:00 2001 From: yongrae Date: Sat, 27 Nov 2021 19:33:26 +0900 Subject: [PATCH 10/17] =?UTF-8?q?feat:=20=EC=98=A4=EC=9E=85=EB=A0=A5=20?= =?UTF-8?q?=EB=B0=8F=20=EC=9E=AC=EC=8B=9C=EC=9E=91=20=EC=8B=9C=20=EC=9E=85?= =?UTF-8?q?=EB=A0=A5=EC=B0=BD=20=EB=B9=84=EC=9A=B0=EA=B8=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - clearUserInput() 메소드 추가 --- src/index.js | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/src/index.js b/src/index.js index 7ca7bdd8..bc46984c 100644 --- a/src/index.js +++ b/src/index.js @@ -4,9 +4,9 @@ import displayResult from "./game/displayResult.js"; const baseballGame = new BaseballGame(); const submitButton = document.getElementById("submit"); +const userInput = document.getElementById("user-input"); function playGame() { - const userInput = document.getElementById("user-input"); let resultString = "", state = true; if(validateInputNumber(userInput.value)) { @@ -15,6 +15,7 @@ function playGame() { addReplayEvent(state); }else{ alert("잘못된 값을 입력하였습니다!"); + clearUserInput(); } } @@ -24,6 +25,7 @@ function replayGame() { baseballGame.replay(); replayButton.removeEventListener("click", replayGame); displayResult("초기화"); + clearUserInput(); } function addReplayEvent(state) { @@ -33,6 +35,10 @@ function addReplayEvent(state) { } } +function clearUserInput() { + userInput.value = ""; +} + function init() { baseballGame.setComputerNumber(); submitButton.addEventListener("click", playGame); From 80199c205cda30a6ffe1ecc9f03e04b4e8034042 Mon Sep 17 00:00:00 2001 From: yongrae Date: Mon, 29 Nov 2021 10:04:40 +0900 Subject: [PATCH 11/17] =?UTF-8?q?refactor:=20module=EC=97=90=EC=84=9C=20?= =?UTF-8?q?=EC=84=A0=EC=96=B8=EA=B3=BC=20export=EB=A5=BC=20=EB=B6=84?= =?UTF-8?q?=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - airbnb commit convention에 따라 선언과 export를 분리 --- src/game/baseballGame.js | 4 +++- src/game/displayResult.js | 3 ++- src/game/resultMessages.js | 4 +++- src/utils/judgeInputNumber.js | 4 +++- src/utils/validateInputNumber.js | 4 +++- 5 files changed, 14 insertions(+), 5 deletions(-) diff --git a/src/game/baseballGame.js b/src/game/baseballGame.js index 661f0e96..39767263 100644 --- a/src/game/baseballGame.js +++ b/src/game/baseballGame.js @@ -14,7 +14,7 @@ function generateNumber(computerNumber) { } } -export default class BaseballGame { +class BaseballGame { constructor() { this.computerNumber = []; } @@ -33,3 +33,5 @@ export default class BaseballGame { this.setComputerNumber(); } } + +export default BaseballGame; diff --git a/src/game/displayResult.js b/src/game/displayResult.js index 8b0d21e7..8b3bb1dc 100644 --- a/src/game/displayResult.js +++ b/src/game/displayResult.js @@ -1,6 +1,6 @@ import { Messages, HTML } from "../constants/constants.js"; -export default function displayResult(resultString) { +function displayResult(resultString) { const resultDiv = document.getElementById("result"); let state = true; // { true: playing, false :end } @@ -18,3 +18,4 @@ export default function displayResult(resultString) { return state; } +export default displayResult; diff --git a/src/game/resultMessages.js b/src/game/resultMessages.js index f206dd47..7b00e002 100644 --- a/src/game/resultMessages.js +++ b/src/game/resultMessages.js @@ -1,6 +1,6 @@ import { Messages } from "../constants/constants.js"; -export default function resultMessages(strikes, balls) { +function resultMessages(strikes, balls) { let msg; if(strikes === 0 && balls === 0) { @@ -17,3 +17,5 @@ export default function resultMessages(strikes, balls) { return msg; } + +export default resultMessages; diff --git a/src/utils/judgeInputNumber.js b/src/utils/judgeInputNumber.js index e8f1e1a9..fc52d094 100644 --- a/src/utils/judgeInputNumber.js +++ b/src/utils/judgeInputNumber.js @@ -6,7 +6,7 @@ function isBall(computerInputNumbers, userInputNumbers, index) { return computerInputNumbers.includes(Number(userInputNumbers.charAt(index))); } -export default function judgeInputNumber(computerInputNumbers, userInputNumbers) { +function judgeInputNumber(computerInputNumbers, userInputNumbers) { let strikes = 0, balls = 0; console.log(computerInputNumbers, userInputNumbers); for(let i = 0; i < 3; i++) { @@ -19,3 +19,5 @@ export default function judgeInputNumber(computerInputNumbers, userInputNumbers) return [strikes, balls]; } + +export default judgeInputNumber; diff --git a/src/utils/validateInputNumber.js b/src/utils/validateInputNumber.js index d920c4de..95b8aa5e 100644 --- a/src/utils/validateInputNumber.js +++ b/src/utils/validateInputNumber.js @@ -9,8 +9,10 @@ function isDuplicate(inputNumber) { return firstDigit === secondDigit || secondDigit === thirdDigit || thirdDigit === firstDigit; } -export default function validateInputNumber(inputNumbers) { +function validateInputNumber(inputNumbers) { if(!Number.isInteger(Number(inputNumbers))) return false; if(!isThreeDigits(inputNumbers)) return false; return !isDuplicate(inputNumbers); } + +export default validateInputNumber; From b07c3c86638f103f4ae60c365bb0ed031bc7e1a8 Mon Sep 17 00:00:00 2001 From: yongrae Date: Mon, 29 Nov 2021 11:01:03 +0900 Subject: [PATCH 12/17] =?UTF-8?q?chore:=20=ED=95=84=EC=9A=94=EC=97=86?= =?UTF-8?q?=EB=8D=98=20=EA=B5=AC=EB=AC=B8=20=EC=82=AD=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - module에 대한 이해 부족으로 작성한 의미 없는 코드 삭제 --- src/constants/constants.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/constants/constants.js b/src/constants/constants.js index 79f4f628..9bdfec29 100644 --- a/src/constants/constants.js +++ b/src/constants/constants.js @@ -8,5 +8,3 @@ export const Messages = { export const HTML = { result: "

" + Messages.correct + "

" + "게임을 새로 시작하시겠습니까? " }; - -export default {Messages, HTML}; From 6d6c39d72b548c94917fd11d95483f379604f51f Mon Sep 17 00:00:00 2001 From: yongrae Date: Sat, 1 Jan 2022 22:09:43 +0900 Subject: [PATCH 13/17] =?UTF-8?q?docs:=20=EB=A6=AC=ED=8C=A9=ED=86=A0?= =?UTF-8?q?=EB=A7=81=20=ED=95=98=EA=B8=B0=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/README.md | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/docs/README.md b/docs/README.md index 10cb42f2..9f69f474 100644 --- a/docs/README.md +++ b/docs/README.md @@ -32,3 +32,9 @@ Random.pickNumberInRange(1, 10); // 1 > 게임을 재시작 할 수 있도록 현재 상태와 정답을 초기화 시킨다. - **[컴퓨터가 생각할 숫자 결정하기]** 에서 만든 메서드를 통해 정답을 초기화 한다. - **[현재 상태를 화면에 표시하기]** 에서 만든 메서드를 통해 결과 영역의 메시지들을 지운다. + +### 리팩토링 하기 +> MVC 패턴을 기반으로 프로젝트 구조를 변경한다. +- Model 구성하기 +- View 구성하기 +- Controller 구성하기 From ce85d43984105c36633e9360bc14a2683553667a Mon Sep 17 00:00:00 2001 From: yongrae Date: Wed, 5 Jan 2022 04:34:01 +0900 Subject: [PATCH 14/17] =?UTF-8?q?refactor:=20MVC=20=ED=8C=A8=ED=84=B4=20?= =?UTF-8?q?=EB=A6=AC=ED=8C=A9=ED=86=A0=EB=A7=81=20-=20Model=20=EA=B5=AC?= =?UTF-8?q?=EC=84=B1=ED=95=98=EA=B8=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/game/baseballGame.js | 17 ++++++++++++----- src/utils/judgeInputNumber.js | 18 +++++++++--------- 2 files changed, 21 insertions(+), 14 deletions(-) diff --git a/src/game/baseballGame.js b/src/game/baseballGame.js index 39767263..dedc6896 100644 --- a/src/game/baseballGame.js +++ b/src/game/baseballGame.js @@ -15,21 +15,28 @@ function generateNumber(computerNumber) { } class BaseballGame { + state = {}; + constructor() { - this.computerNumber = []; + this.state.computerNumber = []; } setComputerNumber() { - generateNumber(this.computerNumber); + generateNumber(this.state.computerNumber); + } + + getState() { + return this.state; } + play(userInputNumber) { - let [strikes, balls] = judgeInputNumber(this.computerNumber, userInputNumber); - return resultMessages(strikes, balls); + judgeInputNumber(this.state, userInputNumber); + return this.state; } replay() { - this.computerNumber = []; + this.state.computerNumber = []; this.setComputerNumber(); } } diff --git a/src/utils/judgeInputNumber.js b/src/utils/judgeInputNumber.js index fc52d094..ff85487d 100644 --- a/src/utils/judgeInputNumber.js +++ b/src/utils/judgeInputNumber.js @@ -6,18 +6,18 @@ function isBall(computerInputNumbers, userInputNumbers, index) { return computerInputNumbers.includes(Number(userInputNumbers.charAt(index))); } -function judgeInputNumber(computerInputNumbers, userInputNumbers) { - let strikes = 0, balls = 0; - console.log(computerInputNumbers, userInputNumbers); +function judgeInputNumber(state, userInputNumbers) { + state.strikes = 0; + state.balls = 0; + console.log(state.computerNumber, userInputNumbers); + for(let i = 0; i < 3; i++) { - if(isStrike(computerInputNumbers, userInputNumbers, i)) { - strikes++; - }else if(isBall(computerInputNumbers, userInputNumbers, i)) { - balls++; + if(isStrike(state.computerNumber, userInputNumbers, i)) { + state.strikes++; + }else if(isBall(state.computerNumber, userInputNumbers, i)) { + state.balls++; } } - - return [strikes, balls]; } export default judgeInputNumber; From 1b6d4dc802ffb1bac91f8c54979fff107a9e4feb Mon Sep 17 00:00:00 2001 From: yongrae Date: Thu, 6 Jan 2022 18:04:48 +0900 Subject: [PATCH 15/17] =?UTF-8?q?refactor:=20=EA=B8=B0=ED=83=80=20?= =?UTF-8?q?=ED=8C=8C=EC=9D=BC=EB=A1=9C=EB=B6=80=ED=84=B0=20Model=20?= =?UTF-8?q?=EC=9D=98=EC=A1=B4=EC=84=B1=20=EB=81=8A=EC=96=B4=EB=82=B4?= =?UTF-8?q?=EA=B8=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/game/baseballGame.js | 5 +++-- src/game/displayResult.js | 21 --------------------- src/game/resultMessages.js | 21 --------------------- 3 files changed, 3 insertions(+), 44 deletions(-) delete mode 100644 src/game/displayResult.js delete mode 100644 src/game/resultMessages.js diff --git a/src/game/baseballGame.js b/src/game/baseballGame.js index dedc6896..36cb8927 100644 --- a/src/game/baseballGame.js +++ b/src/game/baseballGame.js @@ -1,5 +1,4 @@ import judgeInputNumber from "../utils/judgeInputNumber.js"; -import resultMessages from "./resultMessages.js"; function uniqueNumberPush(computerNumber, randomNumber) { if(!computerNumber.includes(randomNumber)) { @@ -19,6 +18,7 @@ class BaseballGame { constructor() { this.state.computerNumber = []; + this.state.gameState = true; } setComputerNumber() { @@ -29,13 +29,14 @@ class BaseballGame { return this.state; } - play(userInputNumber) { judgeInputNumber(this.state, userInputNumber); + if(this.state.strikes === 3) this.state.gameState = false; return this.state; } replay() { + this.state.gameState = true; this.state.computerNumber = []; this.setComputerNumber(); } diff --git a/src/game/displayResult.js b/src/game/displayResult.js deleted file mode 100644 index 8b3bb1dc..00000000 --- a/src/game/displayResult.js +++ /dev/null @@ -1,21 +0,0 @@ -import { Messages, HTML } from "../constants/constants.js"; - -function displayResult(resultString) { - const resultDiv = document.getElementById("result"); - let state = true; // { true: playing, false :end } - - if(resultString === Messages.correct) { - resultDiv.innerHTML = HTML.result; - state = false; - } - else if(resultString === "초기화") { - resultDiv.innerHTML = ""; - } - else{ - resultDiv.innerHTML = resultString; - } - - return state; -} - -export default displayResult; diff --git a/src/game/resultMessages.js b/src/game/resultMessages.js deleted file mode 100644 index 7b00e002..00000000 --- a/src/game/resultMessages.js +++ /dev/null @@ -1,21 +0,0 @@ -import { Messages } from "../constants/constants.js"; - -function resultMessages(strikes, balls) { - let msg; - - if(strikes === 0 && balls === 0) { - msg = Messages.nothing; - }else if(strikes === 3) { - msg = Messages.correct; - }else if(strikes === 0) { - msg = balls + Messages.ball; - }else if(balls === 0) { - msg = strikes + Messages.strike; - }else { - msg = balls + Messages.ball + " " + strikes + Messages.strike; - } - - return msg; -} - -export default resultMessages; From 29db1506cac418b2f4f875423971950192017d4a Mon Sep 17 00:00:00 2001 From: yongrae Date: Thu, 6 Jan 2022 18:05:18 +0900 Subject: [PATCH 16/17] =?UTF-8?q?refactor:=20view=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/view/GameResult.js | 37 +++++++++++++++++++++++++++++++++++++ 1 file changed, 37 insertions(+) create mode 100644 src/view/GameResult.js diff --git a/src/view/GameResult.js b/src/view/GameResult.js new file mode 100644 index 00000000..89f0c9c3 --- /dev/null +++ b/src/view/GameResult.js @@ -0,0 +1,37 @@ +import { Messages, HTML } from "../constants/constants.js"; + +class gameResult { + + constructor(target) { + this.target = document.querySelector(target); + } + + template(state) { + let msg = ""; + + if(state !== "reset") { + if (state.strikes === 0 && state.balls === 0) { + msg = Messages.nothing; + } else if (state.strikes === 3) { + msg = HTML.result; + } else { + if (state.balls > 0) { + msg += state.balls + Messages.ball + " "; + } + + if (state.strikes > 0) { + msg += state.strikes + Messages.strike; + } + } + } + console.log(msg); + return `

${msg}

`; + } + + render(state) { + console.log(this.target.innerHTML); + this.target.innerHTML = this.template(state); + } +} + +export default gameResult; From eda262972a24b9bcad614f87d4ba311994cf336e Mon Sep 17 00:00:00 2001 From: yongrae Date: Thu, 6 Jan 2022 18:06:12 +0900 Subject: [PATCH 17/17] =?UTF-8?q?refactor:=20src/index.js=EB=A5=BC=20contr?= =?UTF-8?q?oller=EB=A1=9C=20=EA=B5=AC=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/index.js | 15 +++++++-------- 1 file changed, 7 insertions(+), 8 deletions(-) diff --git a/src/index.js b/src/index.js index bc46984c..c16d283a 100644 --- a/src/index.js +++ b/src/index.js @@ -1,18 +1,17 @@ import BaseballGame from "./game/baseballGame.js"; import validateInputNumber from "./utils/validateInputNumber.js"; -import displayResult from "./game/displayResult.js"; +import GameResult from "./view/GameResult.js"; const baseballGame = new BaseballGame(); +const gameResult = new GameResult("#result"); const submitButton = document.getElementById("submit"); const userInput = document.getElementById("user-input"); function playGame() { - let resultString = "", state = true; - if(validateInputNumber(userInput.value)) { - resultString = baseballGame.play(userInput.value); - state = displayResult(resultString); - addReplayEvent(state); + baseballGame.play(userInput.value); + gameResult.render(baseballGame.getState()); + addReplayEvent(baseballGame.getState().gameState); }else{ alert("잘못된 값을 입력하였습니다!"); clearUserInput(); @@ -22,9 +21,9 @@ function playGame() { function replayGame() { const replayButton = document.getElementById("game-restart-button"); - baseballGame.replay(); replayButton.removeEventListener("click", replayGame); - displayResult("초기화"); + baseballGame.replay(); + gameResult.render("reset"); clearUserInput(); }