+
+
+
- 1~9까지의 수를 중복없이
- 3개 입력해주세요.
- 올바른 예) 139
- 틀린 예) 122
-
+ 1~9까지의 수를 중복없이
+ 3개 입력해주세요.
+ 올바른 예) 139
+ 틀린 예) 122
+
게임을 새로 시작하겠습니까?
'; + +const ALERT_MESSAGE = { + DUPLICATE: '중복된 숫자가 있습니다.', + INVALID_LENGTH: '3자리 숫자를 입력해주세요.', + SPACE: '공백을 제외해주세요.', + NAN: '숫자만 입력해주세요.', +}; + +const STRING = { + EMPTY: '', + NEW_LINE: '\n', +}; + +export { DOM_ID, HINT, RESTART_TEMPLATE, ALERT_MESSAGE, STRING }; diff --git a/src/domain/BaseballGame.mjs b/src/domain/BaseballGame.mjs new file mode 100644 index 00000000..a4567005 --- /dev/null +++ b/src/domain/BaseballGame.mjs @@ -0,0 +1,77 @@ +import { DOM_ID, HINT, RESTART_TEMPLATE, STRING } from '../constants.mjs'; +import { + pickComputerInputNumbers, + countBallandStrike, + joinHint, +} from '../utils.mjs'; + +import validateUserInput from '../validation.mjs'; + +export default class BaseballGame { + constructor(inputView, resultView, submitBtn) { + this.inputView = inputView; + this.resultView = resultView; + this.submitBtn = submitBtn; + this.computerInputNumbers = pickComputerInputNumbers(); + + this.submitBtn.addEventListener('click', this.inputSubmitEvent.bind(this)); + this.resultView.addEventListener('click', this.restartEvent.bind(this)); + } + + inputSubmitEvent(event) { + event.preventDefault(); + + const userInputNumbers = this.inputView.value; + const validateResult = validateUserInput(userInputNumbers); + + if (validateResult.isError) { + alert(validateResult.message.join(STRING.NEW_LINE)); + this.initInputView(); + return; + } + + const playResult = this.play(this.computerInputNumbers, userInputNumbers); + this.render(playResult); + } + + restartEvent(event) { + if (event.target.id === DOM_ID.RESTART) { + this.computerInputNumbers = pickComputerInputNumbers(); + this.initInputView(); + } + } + + initInputView() { + this.inputView.value = STRING.EMPTY; + this.inputView.focus(); + } + + initResultView() { + this.resultView.innerHTML = STRING.EMPTY; + } + + play(computerInputNumbers, userInputNumbers) { + if (computerInputNumbers === userInputNumbers) { + return HINT.CORRECT; + } + + const { ballCount, strikeCount } = countBallandStrike( + computerInputNumbers, + userInputNumbers + ); + + if (!strikeCount && !ballCount) { + return HINT.NOTHING; + } + + return joinHint(ballCount, strikeCount); + } + + render(result) { + this.resultView.innerHTML = result; + + if (result === HINT.CORRECT) { + this.resultView.innerHTML += RESTART_TEMPLATE; + } + } +} diff --git a/src/index.js b/src/index.js new file mode 100644 index 00000000..76cee6d1 --- /dev/null +++ b/src/index.js @@ -0,0 +1,8 @@ +import BaseballGame from './domain/BaseballGame.mjs'; +import { DOM_ID } from './constants.mjs'; + +const inputView = document.getElementById(DOM_ID.INPUT); +const resultView = document.getElementById(DOM_ID.RESULT); +const submitBtn = document.getElementById(DOM_ID.SUBMIT); + +new BaseballGame(inputView, resultView, submitBtn); diff --git a/src/utils.mjs b/src/utils.mjs new file mode 100644 index 00000000..26e2494d --- /dev/null +++ b/src/utils.mjs @@ -0,0 +1,40 @@ +import { HINT, STRING } from './constants.mjs'; + +const pickComputerInputNumbers = () => { + /* global MissionUtils */ + const { pickNumberInRange } = MissionUtils.Random; + const result = new Set(); + + while (result.size < 3) { + const pickedNumber = pickNumberInRange(1, 9); + result.add(pickedNumber.toString()); + } + + return Array.from(result).join(''); +}; + +const countBallandStrike = (computerInputNumbers, userInputNumbers) => { + let ballCount = 0; + let strikeCount = 0; + + for (let i = 0; i < computerInputNumbers.length; i += 1) { + if (computerInputNumbers[i] === userInputNumbers[i]) { + strikeCount += 1; + } else if (userInputNumbers.indexOf(computerInputNumbers[i]) !== -1) { + ballCount += 1; + } + } + + return { ballCount, strikeCount }; +}; + +const joinHint = (ballCount, strikeCount) => { + const ballHint = ballCount ? `${ballCount}${HINT.BALL}` : `${STRING.EMPTY}`; + const strikeHint = strikeCount + ? `${strikeCount}${HINT.STRIKE}` + : `${STRING.EMPTY}`; + + return `${ballHint} ${strikeHint}`; +}; + +export { pickComputerInputNumbers, countBallandStrike, joinHint }; diff --git a/src/validation.mjs b/src/validation.mjs new file mode 100644 index 00000000..f711d8ac --- /dev/null +++ b/src/validation.mjs @@ -0,0 +1,26 @@ +import { ALERT_MESSAGE } from './constants.mjs'; + +const isNaN = (value) => Number.isNaN(Number(value)); +const includeSpace = (value) => !!value.match(/ /gi); +const isDuplicated = (value) => new Set(value).size !== value.length; +const isInvalidLength = (value) => value.length !== 3; +const validateUserInput = (value) => { + const message = []; + + if (isNaN(value)) { + message.push(ALERT_MESSAGE.NAN); + } + if (includeSpace(value)) { + message.push(ALERT_MESSAGE.SPACE); + } + if (isDuplicated(value)) { + message.push(ALERT_MESSAGE.DUPLICATE); + } + if (isInvalidLength(value)) { + message.push(ALERT_MESSAGE.INVALID_LENGTH); + } + + return { isError: message.length !== 0, message }; +}; + +export default validateUserInput;