thirdmadman/hot fix/sprint

src/app/App.ts

@@ -41,7 +41,7 @@ export class App {
     this.router.addRoute(GlobalConstants.ROUTE_STATISTICS, (path: string) => statisticsController.resolve(path));
 
     if (!PathBus.getRealCurrentPath() || PathBus.getRealCurrentPath() === '') {
-      PathBus.setCurrentPath(GlobalConstants.ROUTE_MAIN);
+      PathBus.setCurrentPath(GlobalConstants.ROUTE_WORDBOOK);
     } else {
       PathBus.setCurrentPath(PathBus.getRealCurrentPath());
     }

src/app/controllers/AudiocallController.ts

@@ -1,21 +1,15 @@
 import { AbstractController } from './AbstractController';
-import { AudiocallStartPage } from '../views/audiocall/AudiocallStartPage';
 import { Menu } from '../views/menu/Menu';
+import { AudiocallPage } from '../views/audiocall/AudiocallPage';
 
 export class AudiocallController extends AbstractController {
   resolve(path: string) {
     this.rootNode.innerHTML = '';
     this.rootNode.append(new Menu().getElement());
-    const currentPage = +path.split('/')[2] || 1;
-    const currentGroup = +path.split('/')[1] || 1;
 
-    if (!path) {
-      const startPage = new AudiocallStartPage();
-      this.rootNode.append(startPage.getElement());
-    } else {
-      const startPage = new AudiocallStartPage(currentGroup, currentPage);
+    const currentGroup = Number(path.split('/')[1]) || -1;
+    const currentPage = Number(path.split('/')[2]) || -1;
 
-      this.rootNode.append(startPage.getElement());
-    }
+    this.rootNode.append(new AudiocallPage(currentGroup, currentPage).getElement());
   }
 }

src/app/controllers/SprintController.ts

@@ -1,21 +1,15 @@
 import { AbstractController } from './AbstractController';
-import { SprintStartPage } from '../views/sprint/SprintStartPage';
 import { Menu } from '../views/menu/Menu';
+import { SprintPage } from '../views/sprint/SprintPage';
 
 export class SprintController extends AbstractController {
   resolve(path: string) {
     this.rootNode.innerHTML = '';
     this.rootNode.append(new Menu().getElement());
-    const currentPage = +path.split('/')[2] || 1;
-    const currentGroup = +path.split('/')[1] || 1;
 
-    if (!path) {
-      const startPage = new SprintStartPage();
-      this.rootNode.append(startPage.getElement());
-    } else {
-      const startPage = new SprintStartPage(currentGroup, currentPage);
+    const currentGroup = Number(path.split('/')[1]) || -1;
+    const currentPage = Number(path.split('/')[2]) || -1;
 
-      this.rootNode.append(startPage.getElement());
-    }
+    this.rootNode.append(new SprintPage(currentGroup, currentPage).getElement());
   }
 }

src/app/controllers/WordbookController.ts

@@ -3,13 +3,20 @@ import { WordService } from '../services/WordService';
 import { Wordbook } from '../views/wordBook/Wordbook';
 import { GlobalConstants } from '../../GlobalConstants';
 import { Menu } from '../views/menu/Menu';
+import { PathBus } from '../services/PathBus';
 
 export class WordbookController extends AbstractController {
   resolve(path: string) {
     this.rootNode.innerHTML = '';
     this.rootNode.append(new Menu().getElement());
-    let currentPage = +path.split('/')[2];
-    let currentGroup = +path.split('/')[1];
+
+    let currentGroup = Number(path.split('/')[1]);
+    let currentPage = Number(path.split('/')[2]);
+
+    if (!currentGroup || !currentPage) {
+      PathBus.setCurrentPath(`${GlobalConstants.ROUTE_WORDBOOK}/1/1`);
+      return;
+    }
 
     if (currentPage < 1) {
       currentPage = 1;

src/app/interfaces/IAudiocallAnswer.ts → src/app/interfaces/IGameAnswer.ts

@@ -1,6 +1,6 @@
 import { IWord } from './IWord';
 
-export interface IAudiocallAnswer {
+export interface IGameAnswer {
   wordData: IWord,
   isCorrect: boolean,
 }

src/app/interfaces/IGameQuestion.ts

@@ -0,0 +1,7 @@
+import { IGameAnswer } from './IGameAnswer';
+import { IWord } from './IWord';
+
+export interface IGameQuestion {
+  wordData: IWord,
+  variants: Array<IGameAnswer>,
+}

src/app/interfaces/IGameQuestionArray.ts

@@ -0,0 +1,6 @@
+import { IGameQuestion } from './IGameQuestion';
+
+export interface IGameQuestionArray {
+  questions: Array<IGameQuestion>,
+  currentQuestion: number,
+}

src/app/services/UserWordService.ts

@@ -1,6 +1,7 @@
 import { GlobalConstants } from '../../GlobalConstants';
 import { IUserWord } from '../interfaces/IUserWord';
 import { IUserWordData } from '../interfaces/IUserWordData';
+import { IUserWordOptional } from '../interfaces/IUserWordOptional';
 import { axiosIntance } from './axiosIntance';
 
 export class UserWordService {
@@ -70,7 +71,11 @@ export class UserWordService {
       if (wordData) {
         return {
           difficulty: wordData.difficulty,
-          optional: { ...wordData.optional },
+          optional: {
+            successCounter: wordData.optional.successCounter,
+            failCounter: wordData.optional.failCounter,
+            isLearned,
+          } as IUserWordOptional,
         } as IUserWordData;
       }
       return null;

src/app/views/audiocall/AudiocallGameField.ts

@@ -1,77 +1,83 @@
 import { dch } from '../dch';
 import Renderable from '../Renderable';
-import { IAudiocallQuestionArray } from '../../interfaces/IAudiocallQuestionArray';
 import { AudiocallQuestion } from './AudiocallQuestion';
-import { IAudiocallQuestion } from '../../interfaces/IAudiocallQuestion';
-import './AudiocallGameField.scss';
 import { IResultData } from '../../interfaces/IResultData';
-import { AudiocallStatisticPage } from './AudiocallStatisticPage';
-import { TokenProvider } from '../../services/TokenProvider';
-import { UserWordService } from '../../services/UserWordService';
+import { IGameQuestionArray } from '../../interfaces/IGameQuestionArray';
+import { IGameQuestion } from '../../interfaces/IGameQuestion';
+
+import './AudiocallGameField.scss';
 
 export class AudiocallGameField extends Renderable {
-  page: number | undefined;
+  private questionsArray: IGameQuestionArray | null = null;
 
-  data: IAudiocallQuestionArray;
+  private result: Array<IResultData> = [];
 
-  result: IResultData[];
+  private answerChain = 0;
 
-  answerChain: number;
+  private maxAnswerChain = 0;
 
-  maxAnswerChain: number;
+  private title: HTMLElement;
 
-  userId: string | null;
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  onFinish = (result: IResultData[], answerChain: number) => {};
 
-  startQuestion: number;
+  constructor() {
+    super();
 
-  title: HTMLElement;
+    this.title = dch('h2', ['audiocall-page--title'], 'Audio decoding');
+    this.rootNode = dch('div', ['gamefield-container'], '', this.title);
+  }
 
-  constructor(questionArrayData: IAudiocallQuestionArray) {
-    super();
-    this.data = questionArrayData;
+  setQuestionsArray(questionsArray: IGameQuestionArray) {
+    this.questionsArray = questionsArray;
     this.answerChain = 0;
     this.maxAnswerChain = 1;
     this.result = [];
-    this.userId = TokenProvider.getUserId();
-    this.title = dch('h2', ['audiocall-page--title'], 'Audio decoding');
-    this.rootNode = dch('div', ['gamefield-container'], '', this.title);
-    this.startQuestion = 0;
-    this.gameCycle(this.data.questions, this.startQuestion);
   }
 
-  gameCycle(questionArray: IAudiocallQuestion[], index: number) {
-    if (index >= questionArray.length) {
-      this.onFinish(this.result, this.maxAnswerChain);
+  startGame() {
+    if (!this.questionsArray) {
       return;
     }
-    const cardQuestion = new AudiocallQuestion(this.data.questions[index]);
-    this.rootNode.append(cardQuestion.getElement());
+
+    this.answerChain = 0;
+    this.maxAnswerChain = 1;
+    this.result = [];
+
+    this.renderCard(this.questionsArray.questions[this.questionsArray.currentQuestion]);
+  }
+
+  nextQuestion() {
+    if (!this.questionsArray) {
+      return;
+    }
+
+    if (this.questionsArray.questions.length > this.questionsArray.currentQuestion + 1) {
+      this.questionsArray.currentQuestion += 1;
+      this.renderCard(this.questionsArray.questions[this.questionsArray.currentQuestion]);
+    } else {
+      this.onFinish(this.result, this.maxAnswerChain);
+    }
+  }
+
+  renderCard(question: IGameQuestion) {
+    const cardQuestion = new AudiocallQuestion(question);
     cardQuestion.onAnswer = (questionData, isCorrect) => {
-      if (isCorrect) {
-        if (this.userId && !TokenProvider.checkIsExpired()) {
-          UserWordService.setWordStatistic(this.userId, questionData.id, isCorrect)
-            .catch((e) => console.error(e));
-        }
-        this.answerChain += 1;
-        if (this.answerChain > this.maxAnswerChain) {
-          this.maxAnswerChain = this.answerChain;
-        }
-      } else if (!isCorrect) {
-        if (this.userId && !TokenProvider.checkIsExpired()) {
-          UserWordService.setWordStatistic(this.userId, questionData.id, isCorrect)
-            .catch((e) => console.error(e));
-        }
+      this.result.push({ questionData, isCorrect });
+      cardQuestion.destroy();
+      this.nextQuestion();
+
+      if (!isCorrect) {
         this.answerChain = 0;
+        return;
+      }
+
+      this.answerChain += 1;
+      if (this.answerChain > this.maxAnswerChain) {
+        this.maxAnswerChain = this.answerChain;
       }
-      cardQuestion.destroy();
-      this.result.push({ questionData, isCorrect });
-      this.gameCycle(questionArray, index + 1);
     };
-  }
 
-  onFinish = (result: IResultData[], answerChain: number) => {
-    this.rootNode.innerHTML = '';
-    const resultPage = new AudiocallStatisticPage(result, answerChain);
-    this.rootNode.append(this.title, resultPage.getElement());
-  };
+    this.rootNode.append(cardQuestion.getElement());
+  }
 }

src/app/views/audiocall/AudiocallPage.ts

@@ -0,0 +1,72 @@
+import { AudiocallStatisticPage } from './AudiocallStatisticPage';
+
+import { IWord } from '../../interfaces/IWord';
+import { WordService } from '../../services/WordService';
+import Renderable from '../Renderable';
+import { AudiocallGameField } from './AudiocallGameField';
+import { AudiocallStartPage } from './AudiocallStartPage';
+import { IResultData } from '../../interfaces/IResultData';
+import { IGameQuestionArray } from '../../interfaces/IGameQuestionArray';
+import { IGameQuestion } from '../../interfaces/IGameQuestion';
+import { IGameAnswer } from '../../interfaces/IGameAnswer';
+
+export class AudiocallPage extends Renderable {
+  constructor(group: number, page: number) {
+    super();
+    const startPage = new AudiocallStartPage(group - 1, page - 1);
+    const gameField = new AudiocallGameField();
+
+    startPage.onStartGame = (selectedGroup: number, selectedPage: number) => {
+      WordService.getWordsByGroupAndPage(selectedGroup, selectedPage)
+        .then((wordData) => {
+          const questionsData = {
+            questions: this.createQuestions(wordData.array),
+            currentQuestion: 0,
+          } as IGameQuestionArray;
+
+          this.rootNode.innerHTML = '';
+          gameField.setQuestionsArray(questionsData);
+          gameField.startGame();
+          this.rootNode.append(gameField.getElement());
+        })
+        .catch((e) => console.error(e));
+    };
+
+    gameField.onFinish = (result: IResultData[], answerChain: number) => {
+      this.rootNode.innerHTML = '';
+      const resultPage = new AudiocallStatisticPage(result, answerChain);
+      this.rootNode.append(resultPage.getElement());
+    };
+
+    this.rootNode = startPage.getElement();
+  }
+
+  createVariantsForAnswer = (wordsArray: Array<IWord>, count: number, currentWord: IWord) => {
+    const onlyDifferentWords = wordsArray.filter((word) => word.id !== currentWord.id);
+
+    const shuffledAndCutArray = [...onlyDifferentWords].sort(() => Math.random() - 0.5).slice(0, count - 1);
+
+    const incorrectVariants = shuffledAndCutArray.map((word) => ({
+      wordData: word,
+      isCorrect: false,
+    } as IGameAnswer));
+
+    const correctVariant = {
+      wordData: currentWord,
+      isCorrect: true,
+    } as IGameAnswer;
+
+    return incorrectVariants.concat(correctVariant).sort(() => Math.random() - 0.5);
+  };
+
+  createQuestions = (wordsArray: Array<IWord>) => {
+    const result = wordsArray.map(
+      (word) => ({
+        wordData: word,
+        variants: this.createVariantsForAnswer(wordsArray, 4, word),
+      } as IGameQuestion),
+    );
+
+    return result.sort(() => Math.random() - 0.5);
+  };
+}

src/app/views/audiocall/AudiocallQuestion.scss

@@ -9,6 +9,14 @@ $color-light-m: #f6f6f6;
     align-items: center;
     gap: 30px;
 
+    .word-container--question-text {
+      font-weight: 100;
+      font-size: 36px;
+      line-height: 60px;
+      text-align: center;
+      text-transform: uppercase;
+    }
+
     &--title {
         font-size: 36px;
         line-height: 50px;         
@@ -20,7 +28,8 @@ $color-light-m: #f6f6f6;
 .audio-btn {
     border: 1px solid #767676;
     background-image: url('../../../assets/img/svg/icon-audio.svg');
-    background-size: cover;
+    background-size: auto;
+    background-position: center;
     background-repeat: no-repeat;
     height: 62px;
     width: 62px;
@@ -33,7 +42,7 @@ $color-light-m: #f6f6f6;
 }
 
 .button-answer {
-    background: url('/src/assets/img/svg/corner-left-top.svg') top left no-repeat,
+  background: url('/src/assets/img/svg/corner-left-top.svg') top left no-repeat,
     url('/src/assets/img/svg/corner-right-bottom.svg') bottom right no-repeat;
   display: flex;
   padding: 10px 30px;