diff --git a/public/index.html b/public/index.html index f3ca9c8..adb092d 100644 --- a/public/index.html +++ b/public/index.html @@ -10,7 +10,7 @@
- +
@@ -22,7 +22,14 @@
- +
+
Выберите сложность:
+
+ + + +
+
diff --git a/src/consts.js b/src/consts.js index f99a83f..8b97e5a 100644 --- a/src/consts.js +++ b/src/consts.js @@ -1,13 +1,18 @@ export const LOCAL_DATA_KEY = 'example-for-kids'; + export const START_PAGE = 'StartPage'; export const GAME_PAGE = 'GamePage'; export const RESULT_PAGE = 'ResultPage'; + export const NO_DISPLAY_CLASS = 'd-none'; export const TEXT_SUCCESS_CLASS = 'text-success'; export const TEXT_DANGER_CLASS = 'text-danger'; export const NAME_INPUT_ID = 'startPageNameInput'; -export const START_BUTTON_ID = 'start-button'; +export const START_BUTTON_EASY_ID = 'start-button-easy'; +export const START_BUTTON_NORMAL_ID = 'start-button-normal'; +export const START_BUTTON_HARD_ID = 'start-button-hard'; + export const CHECK_BUTTON_ID = 'check-button'; export const REPEAT_BUTTON_ID = 'repeat-button'; export const RESET_BUTTON_ID = 'reset-button'; @@ -32,7 +37,12 @@ export const EVENTS = { SUBMIT: 'submit', }; -export const MAX_NUMBER = 10; +export const DIFFICULTY = { + [START_BUTTON_EASY_ID]: 10, + [START_BUTTON_NORMAL_ID]: 20, + [START_BUTTON_HARD_ID]: 100, +}; + export const MAX_COUNT_EXAMPLES = 10; export const DEFAULT_STORE = { diff --git a/src/script.js b/src/script.js index 478f4f3..633f3dc 100644 --- a/src/script.js +++ b/src/script.js @@ -9,14 +9,15 @@ import { SUM_INPUT_ID, NAME_INPUT_ID, CHECK_BUTTON_ID, - START_BUTTON_ID, + START_BUTTON_EASY_ID, + START_BUTTON_NORMAL_ID, + START_BUTTON_HARD_ID, REPEAT_BUTTON_ID, RESULT_CONTAINER_ID, SIGN_SPAN_ID, TEXT_SUCCESS_CLASS, TEXT_DANGER_CLASS, NO_DISPLAY_CLASS, - MAX_NUMBER, EXAMPLE_TYPE, MAX_COUNT_EXAMPLES, EVENTS, @@ -24,6 +25,7 @@ import { EXAMPLE_FORM_ID, RESET_BUTTON_ID, DEFAULT_STORE, + DIFFICULTY, } from './consts'; import './style.css'; @@ -39,7 +41,11 @@ const secondInput = document.querySelector(`#${SECOND_INPUT_ID}`); const sumInput = document.querySelector(`#${SUM_INPUT_ID}`); const nameInput = document.querySelector(`#${NAME_INPUT_ID}`); const checkButton = document.querySelector(`#${CHECK_BUTTON_ID}`); -const startButton = document.querySelector(`#${START_BUTTON_ID}`); + +const startButtonEasy = document.querySelector(`#${START_BUTTON_EASY_ID}`); +const startButtonNormal = document.querySelector(`#${START_BUTTON_NORMAL_ID}`); +const startButtonHard = document.querySelector(`#${START_BUTTON_HARD_ID}`); + const repeatButton = document.querySelector(`#${REPEAT_BUTTON_ID}`); const resetButton = document.querySelector(`#${RESET_BUTTON_ID}`); const resultContainer = document.querySelector(`#${RESULT_CONTAINER_ID}`); @@ -50,8 +56,8 @@ const exampleForm = document.querySelector(`#${EXAMPLE_FORM_ID}`); const getRandomNumber = maxNumber => Math.round(Math.random() * maxNumber); const getPlusExample = () => { - const first = getRandomNumber(MAX_NUMBER); - const second = getRandomNumber(MAX_NUMBER - first); + const first = getRandomNumber(store.difficulty); + const second = getRandomNumber(store.difficulty - first); return { first, @@ -62,7 +68,7 @@ const getPlusExample = () => { }; const getMinusExample = () => { - const first = getRandomNumber(MAX_NUMBER); + const first = getRandomNumber(store.difficulty); const second = getRandomNumber(first); return { @@ -83,6 +89,10 @@ const getExample = () => { } }; +const getDifficulty = id => { + return DIFFICULTY[id]; +}; + const removeRandom = ({first, second, sum, type}) => { const miss = getRandomNumber(2); return { @@ -181,7 +191,7 @@ const renderPage = () => { } }; -const startGame = () => { +const startGame = id => { const userName = nameInput.value; if (userName) { store = { @@ -190,6 +200,7 @@ const startGame = () => { results: [], answerCount: 0, currentExample: {}, + difficulty: id ? getDifficulty(id) : store.difficulty, }; renderPage(); setExample(); @@ -209,13 +220,17 @@ firstInput.addEventListener(EVENTS.INPUT, checkInput); secondInput.addEventListener(EVENTS.INPUT, checkInput); sumInput.addEventListener(EVENTS.INPUT, checkInput); -nameInput.addEventListener(EVENTS.INPUT, () => { - startButton.disabled = !nameInput.value; -}); +const validateNameInput = () => { + startButtonEasy.disabled = !nameInput.value; + startButtonNormal.disabled = !nameInput.value; + startButtonHard.disabled = !nameInput.value; +}; + +nameInput.addEventListener(EVENTS.INPUT, validateNameInput); startForm.addEventListener(EVENTS.SUBMIT, event => { event.preventDefault(); - startGame(); + startGame(event.submitter.id); }); exampleForm.addEventListener(EVENTS.SUBMIT, event => { @@ -246,6 +261,7 @@ resetButton.addEventListener(EVENTS.CLICK, () => { ...DEFAULT_STORE, }; nameInput.value = ''; + validateNameInput(); renderPage(); }); diff --git a/src/services/ExampleService.js b/src/services/ExampleService.js deleted file mode 100644 index e69de29..0000000