+
+
diff --git a/src/components/audio-challenge-game/game-api/game-api.ts b/src/components/audio-challenge-game/game-api/game-api.ts
new file mode 100644
index 0000000..c6cd02c
--- /dev/null
+++ b/src/components/audio-challenge-game/game-api/game-api.ts
@@ -0,0 +1,96 @@
+import { pagesCount, urlUsers, urlWords } from '../../utilites/consts';
+import { UserWord } from '../../../modules/types';
+
+export default class GameApi {
+ static getWordsByGroup(groupNumber: number) {
+ const myHeaders = new Headers();
+ myHeaders.append('Accept', 'application/json');
+
+ const requestOptions: RequestInit = {
+ method: 'GET',
+ headers: myHeaders,
+ redirect: 'follow',
+ };
+
+ const groupRequest = '?group=';
+ const pageRequest = '&page=';
+ const pageNumber = Math.floor(Math.random() * (pagesCount - 1));
+
+ return fetch(
+ `${urlWords}${groupRequest}${groupNumber}${pageRequest}${pageNumber}`,
+ requestOptions
+ );
+ }
+
+ static getUserWordStatusById() {
+ const myHeaders = new Headers();
+ myHeaders.append('Accept', 'application/json');
+ myHeaders.append(
+ 'Authorization',
+ 'Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjYxZmJkMDQyMzQ5NjVmMDAxNjE4NDhiYiIsImlhdCI6MTY0NDc2MDAyOCwiZXhwIjoxNjQ0Nzc0NDI4fQ.Re1mxnl3VoxfiGf0Pz7CcI5e_TPjaR1lz7o7-bd2REQ'
+ );
+
+ const requestOptions: RequestInit = {
+ method: 'GET',
+ headers: myHeaders,
+ redirect: 'follow',
+ };
+
+ fetch(
+ 'https://learnwords-app.herokuapp.com/users/61fbd04234965f00161848bb/words/5e9f5ee35eb9e72bc21af4a2',
+ requestOptions
+ )
+ .then((response) => response.text())
+ .then((result) => console.log(result))
+ .catch((error) => console.log('error', error));
+ }
+
+ static getUserWordById(userId: string, wordId: string, token: string) {
+ const myHeaders = new Headers();
+ myHeaders.append('Accept', 'application/json');
+ myHeaders.append('Authorization', `Bearer ${token}`);
+
+ const requestOptions: RequestInit = {
+ method: 'GET',
+ headers: myHeaders,
+ redirect: 'follow',
+ };
+
+ fetch(`${urlUsers}/${userId}/aggregatedWords/${wordId}`, requestOptions)
+ .then((response) => response.text())
+ .then((result) => console.log(result))
+ .catch((error) => console.log('error', error));
+ }
+
+ static updateWord(
+ userId: string,
+ wordId: string,
+ token: string,
+ userWord: UserWord
+ ) {
+ const myHeaders = new Headers();
+ myHeaders.append('Accept', 'application/json');
+ myHeaders.append('Content-Type', 'application/json');
+ myHeaders.append(
+ 'Authorization',
+ 'Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjYxZmJkMDQyMzQ5NjVmMDAxNjE4NDhiYiIsImlhdCI6MTY0NTIwNjE3NCwiZXhwIjoxNjQ1MjIwNTc0fQ.G7txpkbOSDrGfWZ0TAun84mqS7g5O8FS6GsSttKn6sc'
+ );
+
+ const raw = JSON.stringify(JSON.stringify(userWord));
+
+ const requestOptions: RequestInit = {
+ method: 'PUT',
+ headers: myHeaders,
+ body: raw,
+ redirect: 'follow',
+ };
+
+ fetch(
+ `https://learnwords-app.herokuapp.com/users/${userId}/words/${wordId}`,
+ requestOptions
+ )
+ .then((response) => response.text())
+ .then((result) => console.log(result))
+ .catch((error) => console.log('error', error));
+ }
+}
diff --git a/src/components/audio-challenge-game/game-class.ts b/src/components/audio-challenge-game/game-class.ts
new file mode 100644
index 0000000..b95f2a8
--- /dev/null
+++ b/src/components/audio-challenge-game/game-class.ts
@@ -0,0 +1,246 @@
+import { State, CurrentPageWord } from '../../modules/types';
+import GameApi from './game-api/game-api';
+import gameScreenElementAsString from './game-screen.html';
+import answerDivElementAsString from './answer-div/answer-div.html';
+import getHtmlFromString from '../utilites/getHtmlFromString';
+import {
+ defaultAudioVolume,
+ gameButtonInnerText,
+ urlServer,
+} from '../utilites/consts';
+import Button from '../universal-button/button';
+import ResultPage from './result-page/result-page';
+import { generateGameWordsForSelectPage } from '../games/game-words';
+import { classNameEnum } from '../utilites/types';
+
+// const resultPageInstance = new ResultPage();
+const audioButtonLink = 'audio-button';
+
+export default class Game {
+ private resultPageInstance: ResultPage;
+
+ constructor(state: State) {
+ this.resultPageInstance = new ResultPage(state);
+ }
+
+ // gameWindowElement = geHtmlFromString(gameScreenElementAsString).querySelector(
+ // '.audio-challenge-game-screen'
+ // ) as HTMLElement;
+ // answersElements = this.gameWindowElement.querySelectorAll(
+ // '.answers-list__li'
+ // ) as NodeListOf
+
+
+
+
+
diff --git a/src/components/audio-challenge-game/result-page/game-result.html b/src/components/audio-challenge-game/result-page/game-result.html
new file mode 100644
index 0000000..d61ddb0
--- /dev/null
+++ b/src/components/audio-challenge-game/result-page/game-result.html
@@ -0,0 +1,6 @@
+
+
+
+-
+
+
+
+
+
+
+
diff --git a/src/components/audio-challenge-game/result-page/list-element.html b/src/components/audio-challenge-game/result-page/list-element.html
new file mode 100644
index 0000000..cec05ae
--- /dev/null
+++ b/src/components/audio-challenge-game/result-page/list-element.html
@@ -0,0 +1,5 @@
+Ошибки
+Верные ответы
+
+
+ Audio Call Game
+
+
+
+
+ ${ + game === GameName.AudioCall ? AudioCall : Sprint + }
+Выберите
уровень сложности игры:
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + ${gameWords.words[questionNumb].word} + ${gameWords.answerVariants[questionNumb]} +
+ + +
+
+
+
+
+
+ + Все слова раздела изучены +
+ +
+
+
+
+
+ Изучаем английский
+ +
+
+
+
+
+ Возможности и Преимущества приложения
+
+
+
+ Учебник
+
+
+
+ ${ + props.authorized ? 'Выйти' : 'Войти - Зарегистрироваться' + }
+
+
+
+ Игра Аудиовызов
+
+
+
+ Игра Спринт
+
+
+
+
+ О команде
+
+
+
+
+`;
+};
+
+export function activateMenuItem(props: State): void {
+ const header = document.querySelector('#header') as HTMLElement;
+ const menuItems = header.querySelectorAll('.menu__item');
+
+ menuItems.forEach((item) => {
+ if ((
+ ${
+ userSett.authorized ? userSett.authData?.name : 'Unauthorized user'
+ }
+
+
+
+
+
+
+
+
+
+
+
+ ${
+ props.authorized
+ ? ''
+ : ''
+ }
+
+
+
+
+
+ Statistics
+-
+
- Новых слов: +
- Процент правильных ответов: +
- Лучшая серия: +
+
diff --git a/src/components/statistics/statistics-page.ts b/src/components/statistics/statistics-page.ts
new file mode 100644
index 0000000..331de31
--- /dev/null
+++ b/src/components/statistics/statistics-page.ts
@@ -0,0 +1,249 @@
+import statisticsPageAsString from './statistics-page.html';
+import gameStatisticsElementAsString from './game-statistics/game-statistics.html';
+import getHtmlFromString from '../utilites/getHtmlFromString';
+import {
+ Auth,
+ IDay,
+ IDayStatistic,
+ IGameStatistics,
+ IStatistics,
+ IStatisticsOptional,
+ State,
+} from '../../modules/types';
+import { gameName, gameNameEnum } from '../utilites/types';
+import StatisticsApi from './statistics-api/statistics-api';
+import getChart from './chart/chart';
+
+export default class StatisticsPage {
+ private state: State;
+
+ constructor(state: State) {
+ this.state = state;
+ }
+
+ static getStatisticsPageElement(param: State) {
+ const state = param;
+ const statisticsPageElement = getHtmlFromString(
+ statisticsPageAsString
+ ).querySelector('.statistics-page') as HTMLElement;
+ const radioAudioChallenge = statisticsPageElement.querySelector(
+ '.radio_audio-challenge'
+ ) as HTMLInputElement;
+ const radioSprint = statisticsPageElement.querySelector(
+ '.radio_sprint'
+ ) as HTMLInputElement;
+ const gameStatisticsBox = statisticsPageElement.querySelector(
+ '.game-statistics__results'
+ ) as HTMLElement;
+
+ const newWordsCountElement = statisticsPageElement.querySelector(
+ '.new-words'
+ ) as HTMLSpanElement;
+ const learnedCountElement = statisticsPageElement.querySelector(
+ '.learned'
+ ) as HTMLSpanElement;
+ const rightAnswersPercentElement = statisticsPageElement.querySelector(
+ '.rights'
+ ) as HTMLSpanElement;
+ const globalStatistics = statisticsPageElement.querySelector(
+ '.global-statistics'
+ ) as HTMLElement;
+ const statistics = state.userSettings.statistics as IStatistics;
+ if (!statistics.optional.day.statistic) {
+ statistics.optional.day.statistic = [] as IDayStatistic[];
+ const dayObject = {} as IDayStatistic;
+ dayObject.newWords = 0;
+ dayObject.learned = 0;
+ statistics.optional.day.statistic.push(dayObject);
+ }
+ newWordsCountElement.innerText = ` ${statistics.optional.day.statistic[0].newWords}`;
+ learnedCountElement.innerText = ` ${statistics.optional.day.statistic[0].learned}`;
+ const rightCount =
+ statistics.optional.audioChallenge.rightCount +
+ statistics.optional.sprint.rightCount;
+ const totalcount =
+ statistics.optional.audioChallenge.totalCount +
+ statistics.optional.sprint.totalCount;
+ let percent = (rightCount * 100) / totalcount;
+ if (percent === Infinity || Number.isNaN(percent)) {
+ percent = 0;
+ }
+ rightAnswersPercentElement.innerText = ` ${Math.round(percent)}%`;
+ gameStatisticsBox.innerHTML = '';
+ (
+
+ Статистика за день
+
+
+ Статистика по играм
+
+
+
+
+
+
+
+
+
+
+
+ Общая статистика за день
+-
+
- Новых слов: 0 +
- Изучено: 0 +
- Процент правильных ответов: 0 +
+
+
+
+Общая статистика изучения
+
+
+
+
+ Команда разработчиков
+
+
+
+ 
+
+
+ Александр
+
+
+ -
+
- Верстка главной страници и основный частей сайта +
- Учебник +
- Логика изучения слов, отображение прогресса изучения слов +
- Разработка игры Спринт +
+ 
+
+
+ Дмитрий
+
+
+ -
+
- Дизайн главной страници сайта +
- Страница авторизация пользователя +
- Вывод результатов игр +
- Разработка игры Аудиовызов +
+
+
diff --git a/src/components/user-authorization/login/login.ts b/src/components/user-authorization/login/login.ts
new file mode 100644
index 0000000..391414a
--- /dev/null
+++ b/src/components/user-authorization/login/login.ts
@@ -0,0 +1,101 @@
+import loginBoxElementAsString from './login.html';
+import getHtmlFromString from '../../utilites/getHtmlFromString';
+import Button from '../../universal-button/button';
+import { idNameEmailPasswordType } from '../../utilites/types';
+import User from '../userApi/userApi';
+import { RenderPage, State } from '../../../modules/types';
+import renderHeader, { activateMenuItem } from '../../header';
+import getErrorWindow from '../error-window/error-window';
+import { errorMessage } from '../../utilites/consts';
+import StatisticsApi from '../../statistics/statistics-api/statistics-api';
+
+const body = document.querySelector('body') as HTMLElement;
+
+export default class Login {
+ static state: State;
+
+ constructor(state: State) {
+ Login.state = state;
+ }
+
+ parentElement = body;
+
+ buttonInnerText = 'Enter';
+
+ onClickOnEnterButton = this.logIn;
+
+ boxElement = getHtmlFromString(loginBoxElementAsString).querySelector(
+ '.login-shell'
+ ) as HTMLDivElement;
+
+ get inputElements() {
+ return this.boxElement.querySelectorAll(
+ '.login-input'
+ ) as NodeListOf
+
+
+
+
+
+
diff --git a/src/components/user-authorization/signup/signup.ts b/src/components/user-authorization/signup/signup.ts
new file mode 100644
index 0000000..14382d2
--- /dev/null
+++ b/src/components/user-authorization/signup/signup.ts
@@ -0,0 +1,85 @@
+import signupBoxElementAsString from './signup.html';
+import Login from '../login/login';
+import { idNameEmailPasswordType } from '../../utilites/types';
+import getHtmlFromString from '../../utilites/getHtmlFromString';
+import User from '../userApi/userApi';
+import renderHeader from '../../header';
+import getErrorWindow from '../error-window/error-window';
+import { errorMessage } from '../../utilites/consts';
+
+export default class SignUp extends Login {
+ onClickOnEnterButton = this.signUp;
+
+ boxElement = getHtmlFromString(signupBoxElementAsString).querySelector(
+ '.login-shell'
+ ) as HTMLDivElement;
+
+ nameInputElement = this.boxElement.querySelector(
+ '.name_input'
+ ) as HTMLInputElement;
+
+ passwordRepeatInputElement = this.boxElement.querySelector(
+ '.password_repeat_input'
+ ) as HTMLInputElement;
+
+ returnObjectWithInfoFromInput(): idNameEmailPasswordType {
+ return {
+ name: this.nameInputElement.value,
+ email: this.emailInputElement.value,
+ password: this.passwordInputElement.value,
+ };
+ }
+
+ signUp() {
+ const loginWindow = document.querySelector(
+ '.authorization-window'
+ ) as HTMLDivElement;
+ if (
+ this.passwordInputElement.value !== this.passwordRepeatInputElement.value
+ ) {
+ loginWindow.append(
+ getErrorWindow(errorMessage.wrongPasswordRepeat, loginWindow)
+ );
+ } else if (this.passwordInputElement.value.length < 8) {
+ loginWindow.append(
+ getErrorWindow(errorMessage.wrongPasswordLength, loginWindow)
+ );
+ } else if (
+ !this.emailInputElement.value.includes('@') ||
+ !this.emailInputElement.value.includes('.')
+ ) {
+ loginWindow.append(getErrorWindow(errorMessage.wrongEmail, loginWindow));
+ } else if (this.nameInputElement.value.length < 1) {
+ loginWindow.append(getErrorWindow(errorMessage.wrongName, loginWindow));
+ } else {
+ User.createUser(this.returnObjectWithInfoFromInput())
+ .then((response) => {
+ if (response.ok) {
+ // this.parentElement.removeChild(loginWindow);
+
+ delete SignUp.state.userSettings.authData;
+ SignUp.state.userSettings.authorized = false;
+ const congratulationMessage = getErrorWindow(
+ errorMessage.registrationSuccess,
+ loginWindow
+ );
+ loginWindow.append(congratulationMessage);
+ congratulationMessage.addEventListener('click', () =>
+ this.parentElement.removeChild(loginWindow)
+ );
+ renderHeader(
+ document.querySelector('#header') as HTMLElement,
+ SignUp.state
+ );
+ } else if (response.status === 417) {
+ loginWindow.append(
+ getErrorWindow(errorMessage.userExist, loginWindow)
+ );
+ }
+ })
+ .catch((error) => {
+ console.log(error, error.status);
+ });
+ }
+ }
+}
diff --git a/src/components/user-authorization/user-authorization.html b/src/components/user-authorization/user-authorization.html
new file mode 100644
index 0000000..d0435bb
--- /dev/null
+++ b/src/components/user-authorization/user-authorization.html
@@ -0,0 +1,8 @@
+
diff --git a/src/components/user-authorization/user-authorization.ts b/src/components/user-authorization/user-authorization.ts
new file mode 100644
index 0000000..293a351
--- /dev/null
+++ b/src/components/user-authorization/user-authorization.ts
@@ -0,0 +1,98 @@
+import userAuthorizationElementString from './user-authorization.html';
+import getHtmlFromString from '../utilites/getHtmlFromString';
+import Login from './login/login';
+import SignUp from './signup/signup';
+import { State } from '../../modules/types';
+
+export default class UserAuthorization {
+ private loginInstance: Login;
+
+ private loginBoxElement: HTMLDivElement;
+
+ private signupInstance: SignUp;
+
+ private signupBoxElement: HTMLDivElement;
+
+ constructor(/* parentElement: HTMLElement, */ state: State) {
+ this.loginInstance = new Login(/* parentElement, */ state);
+ this.loginBoxElement = this.loginInstance.returnReadyBoxElement();
+ this.signupInstance = new SignUp(/* parentElement, */ state);
+ this.signupBoxElement = this.signupInstance.returnReadyBoxElement();
+ }
+
+ userAuthorizationElement = getHtmlFromString(
+ userAuthorizationElementString
+ ).querySelector('.authorization-window') as HTMLDivElement;
+
+ readonly buttonLogin = this.userAuthorizationElement.querySelector(
+ '.login_button'
+ ) as HTMLButtonElement;
+
+ readonly buttonSignUp = this.userAuthorizationElement.querySelector(
+ '.signup_button'
+ ) as HTMLButtonElement;
+
+ readonly buttonsLogAndSign = this.userAuthorizationElement.querySelectorAll(
+ '.log-buttons-shell__button'
+ ) as NodeListOf
+
+
+
+
+
+
+
+
+
diff --git a/src/components/user-authorization/user-window/user-window.ts b/src/components/user-authorization/user-window/user-window.ts
new file mode 100644
index 0000000..9c7de00
--- /dev/null
+++ b/src/components/user-authorization/user-window/user-window.ts
@@ -0,0 +1,61 @@
+import userWindowElementAsString from './user-window.html';
+import Login from '../login/login';
+import getHtmlFromString from '../../utilites/getHtmlFromString';
+import {
+ brokenAuthorizationMessage,
+ localStorageCurrentUserObjectName,
+} from '../../utilites/consts';
+import { localStorageCurrentUserObject } from '../../utilites/types';
+
+export default class UserWindow extends Login {
+ buttonInnerText = 'Exit';
+
+ boxElement = getHtmlFromString(userWindowElementAsString).querySelector(
+ '.user-window'
+ ) as HTMLDivElement;
+
+ userNameTitle = this.boxElement.querySelector(
+ '.user-window__user-name'
+ ) as HTMLTitleElement;
+
+ static get isUserLogIn() {
+ return !!localStorage.getItem(localStorageCurrentUserObjectName);
+ }
+
+ static get objectFromLS() {
+ return UserWindow.isUserLogIn
+ ? JSON.parse(
+ Раздел: Сложные слова
+
+ ${wordsOnThePage}
+
+ `;
+ }
+
+ if (
+ userSett.schoolbookCurrentPosition.chapter > unselectedChapter &&
+ userSett.schoolbookCurrentPosition.chapter < difficultWordChapter &&
+ userSett.schoolbookCurrentPosition.page !== unselectedPage
+ ) {
+ const wordsOnThePage = wordsListHTML(props);
+
+ return `
+
+
+ Раздел: ${ + userSett.schoolbookCurrentPosition.chapter + }, Страница: ${ + userSett.schoolbookCurrentPosition.page + }
+ ${ + userSett.authorized + ? '' + : '' + } + +
+ ${wordsOnThePage}
+
+ `;
+ }
+
+ if (
+ userSett.schoolbookCurrentPosition.chapter === unselectedChapter ||
+ (userSett.schoolbookCurrentPosition.chapter === difficultWordChapter &&
+ !userSett.authorized)
+ ) {
+ return `Выберите раздел учебника
`; + } + + let pages = ''; + for (let i = 0; i < totalPagesInChapter; i += 1) { + pages += `Страница ${i + 1}
`;
+ }
+
+ return `Раздел: ${userSett.schoolbookCurrentPosition.chapter}
+${pages}
+ `;
+};
+
+export default async function renderSchoolbookContent(
+ root: HTMLElement,
+ props: State
+): Promise
+
+ Progress: ${correctAnswers} correct out of ${numberOfStudies}
+
`;
+ }
+ } else {
+ easyBtnTitle = 'Пометить слово как Изучено';
+ difficultyBtnTitle = 'Добавить в Сложные слова';
+ }
+ }
+ return `
+ 
+
`;
+ })
+ .join('');
+
+ return wordsOnThePage;
+}
diff --git a/src/favicon.png b/src/favicon.png
new file mode 100644
index 0000000..487501c
Binary files /dev/null and b/src/favicon.png differ
diff --git a/src/index.html b/src/index.html
new file mode 100644
index 0000000..2d2c668
--- /dev/null
+++ b/src/index.html
@@ -0,0 +1,15 @@
+
+
+
+
+
+
+
+
+
+
+
+ ${item.word}
+
+ ${
+ userSett.authorized
+ ? ``
+ : ''
+ }
+
+ ${item.wordTranslate}
+ ${item.transcription}
+
+
+
+ ${item.textMeaning}
+ ${
+ item.textMeaningTranslate
+ }
+
+ ${item.textExample}
+ ${item.textExampleTranslate}
+
+
+
+
diff --git a/src/index.ts b/src/index.ts
new file mode 100644
index 0000000..2580c42
--- /dev/null
+++ b/src/index.ts
@@ -0,0 +1,29 @@
+import './sass/main.sass';
+import state, { defaultUserSettings } from './modules/state';
+import renderApp from './components/app';
+
+state.userSettings = defaultUserSettings;
+const storeKEY = 'rslangSettings';
+
+(async function start() {
+ function getLocalStorage(): void {
+ if (
+ !localStorage.getItem(storeKEY) ||
+ localStorage.getItem(storeKEY) === '{}'
+ ) {
+ const strSett = JSON.stringify(defaultUserSettings);
+ localStorage.setItem(storeKEY, strSett);
+ }
+
+ state.userSettings = JSON.parse(localStorage.getItem(storeKEY) as string);
+ state.currentMenuItem = state.userSettings.currentPage;
+ }
+
+ function setItemToLocalStorage(): void {
+ localStorage.setItem(storeKEY, JSON.stringify(state.userSettings));
+ }
+ window.addEventListener('beforeunload', setItemToLocalStorage);
+
+ getLocalStorage();
+ renderApp(document.getElementById('app') as HTMLElement, state);
+})();
diff --git a/src/modules/api.ts b/src/modules/api.ts
new file mode 100644
index 0000000..5030a4e
--- /dev/null
+++ b/src/modules/api.ts
@@ -0,0 +1,213 @@
+import {
+ aggregatedUserWord,
+ aggregatedUserWords,
+ UserWord,
+ Word,
+} from './types';
+import { convertToUserWord, convertUserWordToString } from './utils';
+
+const base = 'https://learnwords-app.herokuapp.com';
+
+const users = `${base}/users`;
+const words = `${base}/words`;
+
+// --- Words ---
+export const getWords = async (group: number, page: number): Promise