vigdorov/examples-for-kids
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Добавил сложность

Browse Source
This commit is contained in:
nvigdorov
2022-09-15 18:21:27 +03:00
parent e9db2de189
commit af483eb60a
4 changed files with 48 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
public/index.html
View File

@ -10,7 +10,7 @@
<body class="h-100"> <body class="h-100">
<div class="container h-100"> <div class="container h-100">
<div class="d-flex justify-content-end pt-3"> <div class="d-flex justify-content-end pt-3">
<button class="btn btn-primary" type="button" id="reset-button"><i class="fas fa-sync"></i></button> <button class="btn btn-primary" type="button" id="reset-button"><i class="fas fa-sync"></i> Сбросить</button>
</div> </div>
<div class="row align-items-center justify-content-center h-100"> <div class="row align-items-center justify-content-center h-100">
@ -22,7 +22,14 @@
<input class="form-control" id="startPageNameInput" /> <input class="form-control" id="startPageNameInput" />
</div> </div>
<button class="btn btn-success" id="start-button" type="submit" disabled>Старт</button> <div class="mb-3">
<div>Выберите сложность:</div>
<div class="row">
<button class="btn btn-info" type="submit" id="start-button-easy" disabled>Легко (10)</button>
<button class="btn btn-warning" type="submit" id="start-button-normal" disabled>Нормально (20)</button>
<button class="btn btn-danger" type="submit" id="start-button-hard" disabled>Сложно (100)</button>
</div>
</div>
</form> </form>
</div> </div>

14
src/consts.js
View File

@ -1,13 +1,18 @@
export const LOCAL_DATA_KEY = 'example-for-kids'; export const LOCAL_DATA_KEY = 'example-for-kids';
export const START_PAGE = 'StartPage'; export const START_PAGE = 'StartPage';
export const GAME_PAGE = 'GamePage'; export const GAME_PAGE = 'GamePage';
export const RESULT_PAGE = 'ResultPage'; export const RESULT_PAGE = 'ResultPage';
export const NO_DISPLAY_CLASS = 'd-none'; export const NO_DISPLAY_CLASS = 'd-none';
export const TEXT_SUCCESS_CLASS = 'text-success'; export const TEXT_SUCCESS_CLASS = 'text-success';
export const TEXT_DANGER_CLASS = 'text-danger'; export const TEXT_DANGER_CLASS = 'text-danger';
export const NAME_INPUT_ID = 'startPageNameInput'; 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 CHECK_BUTTON_ID = 'check-button';
export const REPEAT_BUTTON_ID = 'repeat-button'; export const REPEAT_BUTTON_ID = 'repeat-button';
export const RESET_BUTTON_ID = 'reset-button'; export const RESET_BUTTON_ID = 'reset-button';
@ -32,7 +37,12 @@ export const EVENTS = {
SUBMIT: 'submit', 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 MAX_COUNT_EXAMPLES = 10;
export const DEFAULT_STORE = { export const DEFAULT_STORE = {

38
src/script.js
View File

@ -9,14 +9,15 @@ import {
SUM_INPUT_ID, SUM_INPUT_ID,
NAME_INPUT_ID, NAME_INPUT_ID,
CHECK_BUTTON_ID, CHECK_BUTTON_ID,
START_BUTTON_ID, START_BUTTON_EASY_ID,
START_BUTTON_NORMAL_ID,
START_BUTTON_HARD_ID,
REPEAT_BUTTON_ID, REPEAT_BUTTON_ID,
RESULT_CONTAINER_ID, RESULT_CONTAINER_ID,
SIGN_SPAN_ID, SIGN_SPAN_ID,
TEXT_SUCCESS_CLASS, TEXT_SUCCESS_CLASS,
TEXT_DANGER_CLASS, TEXT_DANGER_CLASS,
NO_DISPLAY_CLASS, NO_DISPLAY_CLASS,
MAX_NUMBER,
EXAMPLE_TYPE, EXAMPLE_TYPE,
MAX_COUNT_EXAMPLES, MAX_COUNT_EXAMPLES,
EVENTS, EVENTS,
@ -24,6 +25,7 @@ import {
EXAMPLE_FORM_ID, EXAMPLE_FORM_ID,
RESET_BUTTON_ID, RESET_BUTTON_ID,
DEFAULT_STORE, DEFAULT_STORE,
DIFFICULTY,
} from './consts'; } from './consts';
import './style.css'; import './style.css';
@ -39,7 +41,11 @@ const secondInput = document.querySelector(`#${SECOND_INPUT_ID}`);
const sumInput = document.querySelector(`#${SUM_INPUT_ID}`); const sumInput = document.querySelector(`#${SUM_INPUT_ID}`);
const nameInput = document.querySelector(`#${NAME_INPUT_ID}`); const nameInput = document.querySelector(`#${NAME_INPUT_ID}`);
const checkButton = document.querySelector(`#${CHECK_BUTTON_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 repeatButton = document.querySelector(`#${REPEAT_BUTTON_ID}`);
const resetButton = document.querySelector(`#${RESET_BUTTON_ID}`); const resetButton = document.querySelector(`#${RESET_BUTTON_ID}`);
const resultContainer = document.querySelector(`#${RESULT_CONTAINER_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 getRandomNumber = maxNumber => Math.round(Math.random() * maxNumber);
const getPlusExample = () => { const getPlusExample = () => {
const first = getRandomNumber(MAX_NUMBER); const first = getRandomNumber(store.difficulty);
const second = getRandomNumber(MAX_NUMBER - first); const second = getRandomNumber(store.difficulty - first);
return { return {
first, first,
@ -62,7 +68,7 @@ const getPlusExample = () => {
}; };
const getMinusExample = () => { const getMinusExample = () => {
const first = getRandomNumber(MAX_NUMBER); const first = getRandomNumber(store.difficulty);
const second = getRandomNumber(first); const second = getRandomNumber(first);
return { return {
@ -83,6 +89,10 @@ const getExample = () => {
} }
}; };
const getDifficulty = id => {
return DIFFICULTY[id];
};
const removeRandom = ({first, second, sum, type}) => { const removeRandom = ({first, second, sum, type}) => {
const miss = getRandomNumber(2); const miss = getRandomNumber(2);
return { return {
@ -181,7 +191,7 @@ const renderPage = () => {
} }
}; };
const startGame = () => { const startGame = id => {
const userName = nameInput.value; const userName = nameInput.value;
if (userName) { if (userName) {
store = { store = {
@ -190,6 +200,7 @@ const startGame = () => {
results: [], results: [],
answerCount: 0, answerCount: 0,
currentExample: {}, currentExample: {},
difficulty: id ? getDifficulty(id) : store.difficulty,
}; };
renderPage(); renderPage();
setExample(); setExample();
@ -209,13 +220,17 @@ firstInput.addEventListener(EVENTS.INPUT, checkInput);
secondInput.addEventListener(EVENTS.INPUT, checkInput); secondInput.addEventListener(EVENTS.INPUT, checkInput);
sumInput.addEventListener(EVENTS.INPUT, checkInput); sumInput.addEventListener(EVENTS.INPUT, checkInput);
nameInput.addEventListener(EVENTS.INPUT, () => { const validateNameInput = () => {
startButton.disabled = !nameInput.value; startButtonEasy.disabled = !nameInput.value;
}); startButtonNormal.disabled = !nameInput.value;
startButtonHard.disabled = !nameInput.value;
};
nameInput.addEventListener(EVENTS.INPUT, validateNameInput);
startForm.addEventListener(EVENTS.SUBMIT, event => { startForm.addEventListener(EVENTS.SUBMIT, event => {
event.preventDefault(); event.preventDefault();
startGame(); startGame(event.submitter.id);
}); });
exampleForm.addEventListener(EVENTS.SUBMIT, event => { exampleForm.addEventListener(EVENTS.SUBMIT, event => {
@ -246,6 +261,7 @@ resetButton.addEventListener(EVENTS.CLICK, () => {
...DEFAULT_STORE, ...DEFAULT_STORE,
}; };
nameInput.value = ''; nameInput.value = '';
validateNameInput();
renderPage(); renderPage();
}); });

0
src/services/ExampleService.js
View File