+ {fullScreenIcon}
+
+ );
+};
+
+export default FullScreenWrapper;
diff --git a/rslang/src/components/Games/AudioCall/AudioCall.scss b/rslang/src/components/Games/AudioCall/AudioCall.scss
new file mode 100644
index 000000000..c34094e80
--- /dev/null
+++ b/rslang/src/components/Games/AudioCall/AudioCall.scss
@@ -0,0 +1,105 @@
+.audio-call {
+ min-height: 70vh;
+ width: 100%;
+
+ &-game {
+ background: linear-gradient(#7d5db0, #c584a4);
+ width: 100%;
+
+ &__wrapper {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ height: 100%;
+ flex-direction: column;
+ }
+ }
+
+ &__image {
+ width: 10vw;
+ margin-bottom: 3%;
+ height: 10vw;
+ }
+
+ &__listen-btn {
+ background: rgba(255, 255, 255, 0.2);
+ border: unset;
+ border-radius: 50%;
+
+ &_icon_big {
+ width: 8vw;
+ height: 8vw;
+ padding: 14%;
+ }
+
+ &_icon {
+ width: 4vw;
+ height: 4vw;
+ padding: 4%;
+ }
+ }
+
+ &__answer-btn {
+ width: 16%;
+ min-width: fit-content;
+ margin-top: 4%;
+ padding: 1%;
+ }
+
+ &__answer {
+ display: flex;
+ align-items: center;
+ }
+
+ &__answer-word {
+ font-size: 2rem;
+ color: white;
+ font-weight: bold;
+ margin-left: 3%;
+ }
+
+ &__words {
+ margin-top: 4%;
+ font-size: 1.4rem;
+ display: flex;
+ flex-wrap: wrap;
+ width: 90%;
+ justify-content: center;
+
+ &__word {
+ display: flex;
+ padding: 25px;
+ width: fit-content;
+ margin-right: 2%;
+
+ &_active {
+ cursor: pointer;
+ &:hover {
+ background-color: rgba(255, 255, 255, 0.2);
+ }
+ }
+
+ &_index {
+ padding-right: 12%;
+ color: rgba(255, 255, 255, 0.3);
+
+ &_icon {
+ color: rgb(115, 253, 182);
+ }
+ }
+ &_text {
+ color: white;
+ &_inactive {
+ color: rgba(255, 255, 255, 0.3);
+ }
+ &_crossed {
+ text-decoration: line-through;
+ }
+ }
+ }
+ }
+}
+
+.translucent-word-color {
+ color: rgba(255, 255, 255, 0.3);
+}
diff --git a/rslang/src/components/Games/AudioCall/AudioCall.tsx b/rslang/src/components/Games/AudioCall/AudioCall.tsx
new file mode 100644
index 000000000..8214e0a83
--- /dev/null
+++ b/rslang/src/components/Games/AudioCall/AudioCall.tsx
@@ -0,0 +1,409 @@
+import "bootstrap/dist/css/bootstrap.min.css";
+import "./AudioCall.scss";
+import React, { useState, useEffect } from "react";
+import { VolumeUp, CheckCircleFill, ArrowRight } from "react-bootstrap-icons";
+import { Button, Image, ProgressBar } from "react-bootstrap";
+
+import FullScreenWrapper from "./../../FullScreenWrapper/FullScreenWrapper";
+import Preview from "./../Preview/Preview";
+import RioImg from "../../../assets/img/games/audio_rio.jpg";
+import { url, numOfPages } from "../../../api/defData";
+import { playAudioWord, playAudio } from "../../../utils/AudioWord";
+import getWords from "../../../api/getWords";
+import Results from "./../Results/Results";
+
+import getUserData from "../../../api/getUserData";
+import setUserData from "../../../api/setUserData";
+
+const correctAudio = require("./../../../assets/audio/correct.mp3");
+const errorAudio = require("./../../../assets/audio/error.mp3");
+
+const PREVIEW_HEADING = "Аудиовызов";
+const PREVIEW__DESCRIPTION =
+ "Ты слышишь слово и видишь 5 вариантов его перевода. При этом не видишь, как это слово пишется по-английски. Твоя задача выбрать правильный перевод озвученного слова.";
+
+type WordType = {
+ id: string;
+ word: string;
+ wordTranslate: string;
+ image: string;
+ audio: string;
+};
+
+type WordGameType = {
+ word: WordType;
+ isCorrect: boolean | null;
+ isPassed: boolean;
+ selectedWord: string | null;
+ displayedWords: string[];
+};
+
+// type Statistics = {
+// [key: string]: DayInfo;
+// };
+
+// type DayInfo = {
+// correctAnswers: number;
+// wrongAnswers: number;
+// };
+
+const AudioCall = () => {
+ const [words, setWords] = useState{children}
+
+
+ );
+ } else {
+ return (
+
+
+ );
+ }
+ };
+
+ const gameScene = defineGameScene();
+
+ return (
+
+ {currentWord.isCorrect === null ? (
+
+
+ {gameScene}
+
+ );
+};
+
+const TaskMode = ({ currentWord, setDefeatWord, setAnswerWord }: any) => {
+ return (
+
+
+
+
+ setAnswerWord(e.currentTarget.lastElementChild!.textContent)
+ }
+ key={index}
+ >
+
+ {indexElement ? (
+ indexElement
+ ) : (
+
+ );
+ }
+ );
+
+ return {wordElements}
;
+};
+
+const getRandomFourWords = (wordArr: WordType[]) => {
+ const shuffled = wordArr.sort(() => 0.5 - Math.random());
+ return shuffled.slice(0, 4).map((shuffledWord) => shuffledWord.wordTranslate);
+};
+
+const mapWordsToWordsGameType = (words: WordType[]): WordGameType[] => {
+ return words.map((word: WordType) => {
+ return { word: word, isCorrect: null, isPassed: false } as WordGameType;
+ });
+};
+
+export default AudioCall;
diff --git a/rslang/src/components/Games/Games.scss b/rslang/src/components/Games/Games.scss
new file mode 100644
index 000000000..ae5bb5bd0
--- /dev/null
+++ b/rslang/src/components/Games/Games.scss
@@ -0,0 +1,56 @@
+.img-mini-game {
+ width: 130px;
+ margin: 20px auto 0px auto;
+}
+
+.text-mini-game {
+ font-size: 25px;
+ font-family: cursive;
+ text-align: center;
+ color: white;
+}
+
+.btn-mini-game {
+ margin: 15px 82px;
+ font-size: 16px;
+ border-radius: 15px;
+ background-color: #117a8b;
+ font-family: cursive;
+}
+
+.games-link {
+ margin: 0 30px;
+}
+
+.card-mini-game {
+ border-radius: 50px;
+ animation: all 0.3s;
+}
+
+.card-mini-game:hover {
+ transform: scale(1.05);
+}
+
+.card-mini-game-1 {
+ background-color: rgb(252, 214, 2);
+}
+
+.card-mini-game-2 {
+ background-color: rgb(42, 72, 206);
+}
+
+.card-mini-game-3 {
+ background-color: rgb(90, 221, 38);
+}
+
+.card-mini-game-4 {
+ background-color: rgb(230, 23, 137);
+}
+
+.card-mini-game-5 {
+ background-color: rgb(35, 226, 178);
+}
+
+.card-mini-game-6 {
+ background-color: rgb(228, 42, 42);
+}
\ No newline at end of file
diff --git a/rslang/src/components/Games/Games.tsx b/rslang/src/components/Games/Games.tsx
new file mode 100644
index 000000000..adaf252d5
--- /dev/null
+++ b/rslang/src/components/Games/Games.tsx
@@ -0,0 +1,94 @@
+import "bootstrap/dist/css/bootstrap.min.css";
+import "./Games.scss";
+import React from "react";
+import { Route, Switch } from "react-router-dom";
+import { Link } from "react-router-dom";
+import { Container, Card, Button } from "react-bootstrap";
+import Sprint from "../../assets/img/sprint.png";
+import Puzzle from "../../assets/img/puzzle.png";
+import Call from "../../assets/img/call.png";
+import OurGameImg from "../../assets/img/our-game.png";
+import Savanna from "../../assets/img/savanna.png";
+import SpeakIt from "../../assets/img/speak-it.png";
+
+import AudioCall from "./AudioCall/AudioCall";
+import Savannah from "./Savanna/Savanna";
+import SprintGame from "./Sprint/SprintGame";
+import Speakit from "./Speakit/Speakit";
+
+interface InterfaceGames {}
+
+type GameCardType = {
+ name: string;
+ image: any;
+ url: string;
+ styleClass: string;
+};
+
+const Games: React.FC
+
+ Ваш результат:
+
+
+ Верных ответов:
+ {statistics.correctAnswers} +Неверных ответов:
+ {statistics.wrongAnswers} +Необходимо повторить слова:
+{wrongAnswersWords}
+
+ {wordsCards}
+
+ );
+
+ const Game = (
+ <>
+
+ {progressBar}
+
+ {gameWrapper}
+
+ );
+
+return (
+
+ {buttonsBar}
+
+
+
+ {exit &&
+
+ );
+};
+
+export default OurGame;
\ No newline at end of file
diff --git a/rslang/src/components/Games/OurGame/OurGame.scss b/rslang/src/components/Games/OurGame/OurGame.scss
new file mode 100644
index 000000000..d658f1a5e
--- /dev/null
+++ b/rslang/src/components/Games/OurGame/OurGame.scss
@@ -0,0 +1,54 @@
+.ourgame {
+ min-height: 70vh;
+ min-width: 100%;
+
+ .menu {
+ margin-bottom: 10px;
+
+ .menu-wrapper {
+ display: flex;
+ justify-content: space-between;
+
+ .btns-toolbar{
+ margin: 5px;
+ width: 100%;
+
+ .attempts{
+ margin: 10px 10px 10px auto;
+ width: 30%;
+ height: 30px;
+ border-radius: 10px;
+ font-size: 1.5rem;
+ }
+
+ .btn-group {
+ margin: 0 10px;
+ }
+ }
+ }
+ }
+
+ .ourgame-cards {
+ background-position: center;
+ background-repeat: no-repeat;
+ background-size: cover;
+ position: relative;
+ height: 85%;
+ width: 100%;
+ border-radius: 10px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ flex-wrap: wrap;
+ padding: 5px;
+
+ .card {
+ text-align: center;
+ width: 230px;
+ margin: 10px;
+ font-size: 1.5rem;
+ padding: 2px;
+ }
+ }
+
+};
\ No newline at end of file
diff --git a/rslang/src/components/Games/OurGame/OurGame.tsx b/rslang/src/components/Games/OurGame/OurGame.tsx
new file mode 100644
index 000000000..5b22eae55
--- /dev/null
+++ b/rslang/src/components/Games/OurGame/OurGame.tsx
@@ -0,0 +1,269 @@
+import "bootstrap/dist/css/bootstrap.min.css";
+import './OurGame.scss';
+import { useState, useEffect } from "react";
+import {
+ Button,
+ ButtonGroup,
+ ButtonToolbar,
+ Toast,
+ Card,
+ Modal,
+ ProgressBar } from "react-bootstrap";
+import { BsVolumeMute, BsFillVolumeUpFill, BsArrowRepeat } from "react-icons/bs";
+import { BiBell, BiBellOff, BiExit } from "react-icons/bi";
+import { CountdownCircleTimer } from 'react-countdown-circle-timer';
+
+import FullScreenWrapper from "../../FullScreenWrapper/FullScreenWrapper";
+import { Redirect } from "react-router";
+import Preview from "../Preview/Preview";
+import getUserData from "../../../api/getUserData";
+import setUserData from "../../../api/setUserData";
+import SavannahImg from "../../../assets/img/games/savannah.jpg";
+import { url } from "../../../api/defData";
+
+type Statistics = { correctAnswers: number; wrongAnswers: number };
+type Settings = { sound: boolean; speak: boolean };
+type AllStatistics = { [index: number]: Statistics };
+type AllSettings = { [index: string]: Settings };
+type wordsAnswersType = { [index: string]: string };
+
+type word = {
+ audio: string,
+ audioExample: string,
+ audioMeaning: string,
+ group: number,
+ id: string,
+ image: string,
+ page: number,
+ textExample: string,
+ textExampleTranslate: string,
+ textMeaning: string,
+ textMeaningTranslate: string,
+ transcription: string,
+ word: string,
+ wordTranslate: string,
+};
+
+const OurGame = () => {
+const PREVIEW_HEADING = "Концентрация";
+const PREVIEW__DESCRIPTION =
+ "Найди все верные пары Слово - Перевод, переворачивая карточки.";
+const NUM_OF_ANSWERS = 10;
+const TIMEOUT_TIME = 450;
+const NUM_OF_ATTEMPTS = 20;
+const dateNow = new Date().getDate();
+const defAllStatistics: AllStatistics = {
+ [dateNow]: { correctAnswers: 0, wrongAnswers: 0 },
+};
+const defWordsCards = (
+ {!wordsSet && "Набор слов отсутствует"}
+ {wordsSet && Game}
+
+ )}
+ Нет ничего
)
+
+const settingsLocal:string | null = localStorage.getItem('settings');
+ const locSettings:AllSettings = settingsLocal ? JSON.parse(settingsLocal) : {savanna: {sound: true, speak: true}};
+ const settings:Settings = locSettings.ourgame;
+ const {sound, speak} = settings;
+ const [words, setWords] = useState
+
+ Ваш результат:
+
+
+ Верных ответов:
+ {statistics.correctAnswers} +Неверных ответов:
+ {statistics.wrongAnswers} +Необходимо повторить слова:
+{wrongAnswersWords}
+
+ {wordsCards}
+
+ );
+
+ const Game = (
+ <>
+
+ {progressBar}
+
+ {gameWrapper}
+
+ );
+
+return (
+
+ {buttonsBar}
+
+
+
+ {exit &&
+
+ );
+};
+
+export default OurGame;
\ No newline at end of file
diff --git a/rslang/src/components/Games/Preview/Preview.scss b/rslang/src/components/Games/Preview/Preview.scss
new file mode 100644
index 000000000..0a70fc006
--- /dev/null
+++ b/rslang/src/components/Games/Preview/Preview.scss
@@ -0,0 +1,37 @@
+.preview {
+ background-position: center;
+ background-repeat: no-repeat;
+ background-size: cover;
+ position: relative;
+ height: 100%;
+ width: 100%;
+
+ display: flex;
+ justify-content: center;
+ align-items: center;
+
+ &__jumbotron {
+ color: white;
+ font-weight: 600;
+ text-align: center;
+
+ &__heading {
+ font-size: 4rem;
+ }
+
+ &__description {
+ font-size: 1.2rem;
+ }
+
+ &__level {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ font-size: 1.2rem;
+
+ &__title {
+ margin-right: 1%;
+ }
+ }
+ }
+}
diff --git a/rslang/src/components/Games/Preview/Preview.tsx b/rslang/src/components/Games/Preview/Preview.tsx
new file mode 100644
index 000000000..743430447
--- /dev/null
+++ b/rslang/src/components/Games/Preview/Preview.tsx
@@ -0,0 +1,92 @@
+import "bootstrap/dist/css/bootstrap.min.css";
+import "./Preview.scss";
+import React, { useState } from "react";
+import { Jumbotron, Button, OverlayTrigger, Tooltip } from "react-bootstrap";
+import Rating from "react-rating";
+import getWords from "../../../api/getWords";
+import { url, numOfPages } from "../../../api/defData";
+
+type PreviewProps = {
+ backgroundImg: any;
+ heading: string;
+ description: string;
+ level: number | null;
+ setUserWords: (words: any) => void;
+};
+
+const Preview = ({
+ backgroundImg,
+ heading,
+ description,
+ level,
+ setUserWords,
+}: PreviewProps) => {
+ const [levelRating, setLevelRating] = useState(level || 0);
+ const [wordsPage, setWordsPage] = useState(0);
+
+ const onStarRatingPress = (newLevel: any) => {
+ setLevelRating(newLevel);
+ const randPage = Math.floor(Math.random() * numOfPages)
+ setWordsPage(randPage)
+ };
+
+ const uploadWords = async ():Promise
+ {!wordsSet && "Набор слов отсутствует"}
+ {wordsSet && Game}
+
+ )}
+
+
+
+
+ );
+};
+
+export default Preview;
diff --git a/rslang/src/components/Games/Preview/assets/img/articles.jpg b/rslang/src/components/Games/Preview/assets/img/articles.jpg
new file mode 100644
index 000000000..cfe6a94cd
Binary files /dev/null and b/rslang/src/components/Games/Preview/assets/img/articles.jpg differ
diff --git a/rslang/src/components/Games/Preview/assets/img/ava_1.jpg b/rslang/src/components/Games/Preview/assets/img/ava_1.jpg
new file mode 100644
index 000000000..d704daad0
Binary files /dev/null and b/rslang/src/components/Games/Preview/assets/img/ava_1.jpg differ
diff --git a/rslang/src/components/Games/Preview/assets/img/ava_2.jpg b/rslang/src/components/Games/Preview/assets/img/ava_2.jpg
new file mode 100644
index 000000000..b1b1e5d6e
Binary files /dev/null and b/rslang/src/components/Games/Preview/assets/img/ava_2.jpg differ
diff --git a/rslang/src/components/Games/Preview/assets/img/ava_3.jpg b/rslang/src/components/Games/Preview/assets/img/ava_3.jpg
new file mode 100644
index 000000000..65053629a
Binary files /dev/null and b/rslang/src/components/Games/Preview/assets/img/ava_3.jpg differ
diff --git a/rslang/src/components/Games/Preview/assets/img/ava_4.jpg b/rslang/src/components/Games/Preview/assets/img/ava_4.jpg
new file mode 100644
index 000000000..bf3f21050
Binary files /dev/null and b/rslang/src/components/Games/Preview/assets/img/ava_4.jpg differ
diff --git a/rslang/src/components/Games/Preview/assets/img/background_features.jpg b/rslang/src/components/Games/Preview/assets/img/background_features.jpg
new file mode 100644
index 000000000..73348c875
Binary files /dev/null and b/rslang/src/components/Games/Preview/assets/img/background_features.jpg differ
diff --git a/rslang/src/components/Games/Preview/assets/img/call.png b/rslang/src/components/Games/Preview/assets/img/call.png
new file mode 100644
index 000000000..bc0aa9896
Binary files /dev/null and b/rslang/src/components/Games/Preview/assets/img/call.png differ
diff --git a/rslang/src/components/Games/Preview/assets/img/games.jpg b/rslang/src/components/Games/Preview/assets/img/games.jpg
new file mode 100644
index 000000000..7fef2342d
Binary files /dev/null and b/rslang/src/components/Games/Preview/assets/img/games.jpg differ
diff --git a/rslang/src/components/Games/Preview/assets/img/games/audio_rio.jpg b/rslang/src/components/Games/Preview/assets/img/games/audio_rio.jpg
new file mode 100644
index 000000000..7109f5f99
Binary files /dev/null and b/rslang/src/components/Games/Preview/assets/img/games/audio_rio.jpg differ
diff --git a/rslang/src/components/Games/Preview/assets/img/games/savannah.jpg b/rslang/src/components/Games/Preview/assets/img/games/savannah.jpg
new file mode 100644
index 000000000..bfa7c7b57
Binary files /dev/null and b/rslang/src/components/Games/Preview/assets/img/games/savannah.jpg differ
diff --git a/rslang/src/components/Games/Preview/assets/img/hard_words.jpg b/rslang/src/components/Games/Preview/assets/img/hard_words.jpg
new file mode 100644
index 000000000..aa6bb0aaa
Binary files /dev/null and b/rslang/src/components/Games/Preview/assets/img/hard_words.jpg differ
diff --git a/rslang/src/components/Games/Preview/assets/img/main.jpg b/rslang/src/components/Games/Preview/assets/img/main.jpg
new file mode 100644
index 000000000..95bea538d
Binary files /dev/null and b/rslang/src/components/Games/Preview/assets/img/main.jpg differ
diff --git a/rslang/src/components/Games/Preview/assets/img/new_words.jpg b/rslang/src/components/Games/Preview/assets/img/new_words.jpg
new file mode 100644
index 000000000..92d18e6bd
Binary files /dev/null and b/rslang/src/components/Games/Preview/assets/img/new_words.jpg differ
diff --git a/rslang/src/components/Games/Preview/assets/img/our-game.png b/rslang/src/components/Games/Preview/assets/img/our-game.png
new file mode 100644
index 000000000..7234ff5c0
Binary files /dev/null and b/rslang/src/components/Games/Preview/assets/img/our-game.png differ
diff --git a/rslang/src/components/Games/Preview/assets/img/progress.jpg b/rslang/src/components/Games/Preview/assets/img/progress.jpg
new file mode 100644
index 000000000..db11b63eb
Binary files /dev/null and b/rslang/src/components/Games/Preview/assets/img/progress.jpg differ
diff --git a/rslang/src/components/Games/Preview/assets/img/puzzle.png b/rslang/src/components/Games/Preview/assets/img/puzzle.png
new file mode 100644
index 000000000..63593f338
Binary files /dev/null and b/rslang/src/components/Games/Preview/assets/img/puzzle.png differ
diff --git a/rslang/src/components/Games/Preview/assets/img/repeat_words.jpg b/rslang/src/components/Games/Preview/assets/img/repeat_words.jpg
new file mode 100644
index 000000000..b6b84dd59
Binary files /dev/null and b/rslang/src/components/Games/Preview/assets/img/repeat_words.jpg differ
diff --git a/rslang/src/components/Games/Preview/assets/img/savanna.png b/rslang/src/components/Games/Preview/assets/img/savanna.png
new file mode 100644
index 000000000..252c1c015
Binary files /dev/null and b/rslang/src/components/Games/Preview/assets/img/savanna.png differ
diff --git a/rslang/src/components/Games/Preview/assets/img/speak-it.png b/rslang/src/components/Games/Preview/assets/img/speak-it.png
new file mode 100644
index 000000000..6007d5f81
Binary files /dev/null and b/rslang/src/components/Games/Preview/assets/img/speak-it.png differ
diff --git a/rslang/src/components/Games/Preview/assets/img/sprint.png b/rslang/src/components/Games/Preview/assets/img/sprint.png
new file mode 100644
index 000000000..f616f8c55
Binary files /dev/null and b/rslang/src/components/Games/Preview/assets/img/sprint.png differ
diff --git a/rslang/src/components/Games/Preview/assets/img/statistics.jpg b/rslang/src/components/Games/Preview/assets/img/statistics.jpg
new file mode 100644
index 000000000..17dafeddc
Binary files /dev/null and b/rslang/src/components/Games/Preview/assets/img/statistics.jpg differ
diff --git a/rslang/src/components/Games/Preview/assets/img/tests.jpg b/rslang/src/components/Games/Preview/assets/img/tests.jpg
new file mode 100644
index 000000000..8a66461be
Binary files /dev/null and b/rslang/src/components/Games/Preview/assets/img/tests.jpg differ
diff --git a/rslang/src/components/Games/Preview/assets/img/tests_2.jpg b/rslang/src/components/Games/Preview/assets/img/tests_2.jpg
new file mode 100644
index 000000000..eb8632766
Binary files /dev/null and b/rslang/src/components/Games/Preview/assets/img/tests_2.jpg differ
diff --git a/rslang/src/components/Games/Preview/assets/img/video.jpg b/rslang/src/components/Games/Preview/assets/img/video.jpg
new file mode 100644
index 000000000..c101418fd
Binary files /dev/null and b/rslang/src/components/Games/Preview/assets/img/video.jpg differ
diff --git a/rslang/src/components/Games/Preview/assets/img/words.jpg b/rslang/src/components/Games/Preview/assets/img/words.jpg
new file mode 100644
index 000000000..49f846b59
Binary files /dev/null and b/rslang/src/components/Games/Preview/assets/img/words.jpg differ
diff --git a/rslang/src/components/Games/Preview/assets/sounds/correct.mp3 b/rslang/src/components/Games/Preview/assets/sounds/correct.mp3
new file mode 100644
index 000000000..62cafb037
Binary files /dev/null and b/rslang/src/components/Games/Preview/assets/sounds/correct.mp3 differ
diff --git a/rslang/src/components/Games/Preview/assets/sounds/error.mp3 b/rslang/src/components/Games/Preview/assets/sounds/error.mp3
new file mode 100644
index 000000000..6016de129
Binary files /dev/null and b/rslang/src/components/Games/Preview/assets/sounds/error.mp3 differ
diff --git a/rslang/src/components/Games/Preview/assets/svg/rss.svg b/rslang/src/components/Games/Preview/assets/svg/rss.svg
new file mode 100644
index 000000000..0e8b27c12
--- /dev/null
+++ b/rslang/src/components/Games/Preview/assets/svg/rss.svg
@@ -0,0 +1,5 @@
+
+
diff --git a/rslang/src/components/Games/Results/Results.scss b/rslang/src/components/Games/Results/Results.scss
new file mode 100644
index 000000000..31680417a
--- /dev/null
+++ b/rslang/src/components/Games/Results/Results.scss
@@ -0,0 +1,86 @@
+.results {
+ margin: 5%;
+ height: 88%;
+ width: 90%;
+ border-radius: 5px 5px 5px 5px;
+ background-color: white;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+
+ &__final-tittle {
+ font-size: 2rem;
+ margin: 7%;
+ }
+
+ &__info {
+ height: 33vh;
+ overflow: scroll;
+ }
+
+ &__tabs-control {
+ display: flex;
+ width: 100%;
+ justify-content: center;
+
+ &__dot {
+ height: 12px;
+ width: 12px;
+ border-radius: 50%;
+ cursor: pointer;
+ background-color: rgba(0, 0, 0, 0.2);
+ margin-right: 1%;
+
+ &-active {
+ background-color: #2582e7;
+ }
+ }
+ }
+
+ &__continue_btn {
+ background-color: #eef5fd;
+ color: #2582e7;
+ border: none;
+ font-weight: bold;
+ margin: 3%;
+ &:hover {
+ background-color: #4d77a4;
+ }
+ }
+
+ &__list-games {
+ margin-bottom: 5%;
+ }
+}
+
+.fullness {
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-evenly;
+ align-items: center;
+
+ &__link {
+ font-size: 1.2rem;
+ color: #2582e7;
+ cursor: pointer;
+ text-decoration: underline;
+ }
+}
+
+.words-info {
+ min-width: 30vw;
+ &__words {
+ margin-left: 5%;
+ }
+
+ &__wrong {
+ color: red;
+ font-weight: bold;
+ }
+
+ &__correct {
+ color: green;
+ font-weight: bold;
+ }
+}
diff --git a/rslang/src/components/Games/Results/Results.tsx b/rslang/src/components/Games/Results/Results.tsx
new file mode 100644
index 000000000..a6f1cb52c
--- /dev/null
+++ b/rslang/src/components/Games/Results/Results.tsx
@@ -0,0 +1,95 @@
+import "bootstrap/dist/css/bootstrap.min.css";
+import "./Results.scss";
+
+import React, { useState } from "react";
+import { Button } from "react-bootstrap";
+import GaugeChart from "react-gauge-chart";
+import { Link } from "react-router-dom";
+
+type ResultsProps = {
+ correctWords: string[];
+ wrongWords: string[];
+ continueGame: () => void;
+};
+
+const Results = ({ correctWords, wrongWords, continueGame }: ResultsProps) => {
+ const [isOverviewMode, setIsOverviewMode] = useState(true);
+
+ const toggleOverviewMode = () => {
+ const currentState = isOverviewMode;
+ setIsOverviewMode(!currentState);
+ };
+ const percent =
+ correctWords.length / (correctWords.length + wrongWords.length);
+
+ const dotClass = "results__tabs-control__dot";
+ const dotClassActive = dotClass + " results__tabs-control__dot-active";
+
+ const correctWordElements = correctWords.map((word, index) => (
+ {heading}
+{description}
+
+
+ Уровень сложности
+
+
{startBtn}
++ {word} +
+ )); + const wrongWordElements = wrongWords.map((word, index) => ( ++ {word} +
+ )); + + return ( +
+
+ );
+};
+
+export default Results;
diff --git a/rslang/src/components/Games/Savanna/Savanna.scss b/rslang/src/components/Games/Savanna/Savanna.scss
new file mode 100644
index 000000000..f60107a99
--- /dev/null
+++ b/rslang/src/components/Games/Savanna/Savanna.scss
@@ -0,0 +1,107 @@
+.savanna {
+ min-height: 70vh;
+ min-width: 100%;
+
+ .savanna-game {
+ background-position: center;
+ background-repeat: no-repeat;
+ background-size: cover;
+ position: relative;
+ height: 100%;
+ width: 100%;
+ border-radius: 10px;
+ }
+
+ .menu {
+ margin-bottom: 10px;
+
+ .menu-wrapper {
+ display: flex;
+ justify-content: space-between;
+
+ .rating{
+ margin: 10px;
+ width: 200px;
+ height: 30px;
+ border-radius: 10px;
+ font-size: 1.5rem;
+ }
+
+ .btns-toolbar{
+ margin: 5px;
+
+ .btn-group {
+ margin: 0 10px;
+ }
+ }
+ }
+ }
+
+ .game-wrapper {
+ height: 85%;
+ width: 100%;
+ display: flex;
+ flex-wrap: wrap;
+ overflow: hidden;
+
+ .question-wrapper{
+ height: 100%;
+ width: 50%;
+ text-align: center;
+ overflow: hidden;
+ }
+
+ .answers-wrapper{
+ height: 100%;
+ width: 50%;
+
+ .answers-btns {
+ position: relative;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ height: 100%;
+
+ .word-answer{
+ display: flex;
+ height: fit-content;
+ min-width: fit-content;
+ text-transform: uppercase;
+ width: 15%;
+ margin: 7% 5%;
+ font-size: 1.3rem;
+ padding: 7px
+ }
+
+ .button-icons {
+ margin-right: auto;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+
+
+ .hotkey {
+ width: 25px;
+ height: 25px;
+ font-weight: 450;
+ background-color: #777;
+ border-radius: 5px;
+ margin-right: 10px;
+ }
+ }
+
+ }
+ }
+ }
+
+ .word-quest{
+ font-size: 2rem;
+ position: relative;
+ left: 0vw;
+ border-radius: 30px;
+ text-transform: uppercase;
+ padding: 20px;
+ overflow: hidden;
+ }
+
+}
\ No newline at end of file
diff --git a/rslang/src/components/Games/Savanna/Savanna.tsx b/rslang/src/components/Games/Savanna/Savanna.tsx
new file mode 100644
index 000000000..f085f351e
--- /dev/null
+++ b/rslang/src/components/Games/Savanna/Savanna.tsx
@@ -0,0 +1,459 @@
+import "bootstrap/dist/css/bootstrap.min.css";
+import "./Savanna.scss";
+import { useState, useEffect } from "react";
+import {
+ Button,
+ Badge,
+ Modal,
+ ButtonToolbar,
+ ButtonGroup,
+ ProgressBar } from "react-bootstrap";
+import { BsVolumeMute, BsFillVolumeUpFill, BsArrowRepeat } from "react-icons/bs";
+import { BiBell, BiBellOff, BiExit } from "react-icons/bi";
+
+import FullScreenWrapper from "../../FullScreenWrapper/FullScreenWrapper";
+import { Redirect } from "react-router";
+import Preview from "../Preview/Preview";
+import useLocalStorage from "../../../hooks/useLocalStorage";
+import getUserData from "../../../api/getUserData";
+import setUserData from "../../../api/setUserData";
+import SavannahImg from "../../../assets/img/games/savannah.jpg";
+import { url } from "../../../api/defData";
+
+type Statistics = { correctAnswers: number; wrongAnswers: number };
+type Settings = { sound: boolean; speak: boolean };
+type AllStatistics = { [index: number]: Statistics };
+type AllSettings = { [index: string]: Settings };
+
+const PREVIEW_HEADING = "Саванна";
+const PREVIEW__DESCRIPTION =
+ "Слово спускается в саванну, предлагается 5 вариантов его перевода, правильный только один. Твоя задача выбрать правильный перевод слова раньше чем слово коснётся земли.";
+const NUM_OF_ANSWERS = 4;
+const TIMEOUT_TIME = 450;
+const NUM_OF_ATTEMPTS = 20;
+const dateNow = new Date().getDate();
+const defStatistics: Statistics = { correctAnswers: 0, wrongAnswers: 0 };
+const defAllStatistics: AllStatistics = {
+ [dateNow]: { correctAnswers: 0, wrongAnswers: 0 },
+};
+
+const Savannah = () => {
+ const settingsLocal:string | null = localStorage.getItem('settings');
+ const locSettings:AllSettings = settingsLocal ? JSON.parse(settingsLocal) : {savanna: {sound: true, speak: true}};
+ const settings:Settings = locSettings.savanna;
+ const {sound, speak} = settings;
+ const questWordStyleDef = {top: "-2vw"};
+ const defButtonsVariants = [
+ "primary",
+ "primary",
+ "primary",
+ "primary",
+ "primary",
+ ];
+ const defButtons = [
+ "Отсутствуют",
+ "данные",
+ "с",
+ "сервера",
+ "!",
+ ];
+ const [words, setWords] = useState(null);
+ const [wordsSet, setWordsSet] = useState+ Неплохо, но есть над чем поработать +
+
+ {isOverviewMode ? (
+
+
+
+ ) : (
+ + {correctWords.length} слов изучено, {wrongWords.length} на + изучении +
+
+
+
+ )}
+ ОШИБОК: {wrongWords.length}
+ {wrongWordElements} ++
ЗНАЮ: {correctWords.length}
+ {correctWordElements} +
+
+
+
+
+
+ К списку тренировок
+ ++ {el[0]} - {el[1]} +
+ ); + if (wrongWords.indexOf(word) === -1) modalWrongWords.push(word); + }); + setWrongAnswersWords(modalWrongWords); + handleShow(); + }; + }, [lives, attempt, wrongWords]); + + async function getUserStatistics() { + if (token && userId) { + const fullUrl = `${url}users/${JSON.parse(userId)}/statistics`; + const bearerToken = JSON.parse(token); + await getUserData(fullUrl, bearerToken) + .then((responseData: any) => { + if (responseData.savanna) setAllStatistics(responseData.savanna); + }) + .catch((error) => { + console.log(error.message); + }); + } + } + + async function setUserStatistics() { + if (token && userId && allStatistics) { + const newStatistics = { savanna: allStatistics }; + const fullUrl = `${url}users/${JSON.parse(userId)}/statistics`; + const bearerToken = JSON.parse(token); + await setUserData(fullUrl, bearerToken, newStatistics) + .then((responseData: any) => {}) + .catch((error) => { + console.log(error.message); + }); + } + } + + const allStatisticsCompare = (statistics: Statistics) => { + if (!allStatistics[dateNow]) allStatistics[dateNow] = statistics; + else { + allStatistics[dateNow].correctAnswers = + allStatistics[dateNow].correctAnswers + statistics.correctAnswers; + allStatistics[dateNow].wrongAnswers = + allStatistics[dateNow].wrongAnswers + statistics.wrongAnswers; + } + setAllStatistics(allStatistics); + setUserStatistics(); + }; + + const buttonsBar = ( +
+
+
+ );
+
+ const gameWrapper = (
+
+ {question}
+
+
+
+
);
+
+
+ const Game = (
+ <>
+
+
+
+ {answersButtons()}
+
+
+ {questionWord}
+
+
+ {progressBar}
+
+ {gameWrapper}
+
+ );
+
+ return (
+
+ {buttonsBar}
+ {attemptsBar}
+
+
+
+ {exit &&
+
+ Игра окончена
+
+
+
+
+
+
+
+
+
+ {words === null ? (
+
+
+ );
+};
+
+export default Savannah;
diff --git a/rslang/src/components/Games/Speakit/Speakit.scss b/rslang/src/components/Games/Speakit/Speakit.scss
new file mode 100644
index 000000000..abb590fdc
--- /dev/null
+++ b/rslang/src/components/Games/Speakit/Speakit.scss
@@ -0,0 +1,167 @@
+.speak-it {
+ min-height: 70vh;
+ min-width: 100%;
+
+ .speak-it-game {
+ background-position: center;
+ background-repeat: no-repeat;
+ background-size: cover;
+ position: relative;
+ height: 100%;
+ width: 100%;
+ border-radius: 10px;
+ }
+
+ .menu {
+ margin-bottom: 10px;
+
+ .menu-wrapper {
+ display: flex;
+ justify-content: space-between;
+
+ .rating{
+ margin: 10px;
+ width: 200px;
+ height: 30px;
+ border-radius: 10px;
+ font-size: 1.5rem;
+ }
+
+ .btns-toolbar{
+ margin: 5px;
+
+ .btn-group {
+ margin: 0 10px;
+ }
+ }
+ }
+ }
+
+ .training-wrapper,
+ .game-wrapper {
+ display: block;
+ height: 85%;
+ width: 100%;
+
+ .info-wrapper {
+ display: flex;
+ // height: 400px;
+ width: 100%;
+ align-items: center;
+ justify-content: center;
+ text-align: center;
+ margin: 0 auto 10px auto;
+
+ .card-info:hover {
+ cursor: none;
+ }
+
+ p {
+ font-size: 20px;
+ font-weight: 700;
+ width: fit-content;
+ height: fit-content;
+ vertical-align: middle;
+ background-color: #aeaeae;
+ border-radius: 20px;
+ padding: 8px 30px;
+ margin: 20px auto 0 auto;
+ }
+ .card-body {
+ cursor: default;
+ max-height: 450px;
+ max-width: 400px;
+
+ .card-image-wrapper {
+ width: 355px;
+ height: 236px;
+ margin: 0 auto;
+
+ .card-img-top {
+ max-height: 100%;
+ max-width: 100%;
+ }
+ }
+
+ .text1 {
+ min-height: 45px;
+ }
+
+ }
+
+ .answer,
+ .true-answer {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ width: fit-content;
+ background-color: #ccc;
+ padding: 10px;
+ border-radius: 20px;
+ cursor: pointer;
+ font-size: 1.5rem;
+ font-weight: 500;
+ margin: 10px auto 0 auto;
+ }
+
+ .true-answer {
+ background-color: #28a728;
+ }
+ }
+
+ .training-button {
+ display: block;
+ width: 30rem;
+ margin: 10px auto;
+ }
+
+ .words-wrapper{
+ height: fit-content;
+ width: 100%;
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
+ align-items: center;
+
+ .toast:hover {
+ cursor: pointer;
+ }
+
+ .toast {
+ font-size: 18px;
+ border-radius: 10px;
+ justify-content: space-between;
+ margin: 0 10px 0.5rem 10px;
+ }
+
+ .toast-body {
+ display: flex;
+ text-align: center;
+ justify-content: space-between;
+ align-items: center;
+
+ .toast-icons {
+ display: flex;
+ margin-right: auto;
+ }
+ }
+
+ }
+
+ .hotkey {
+ width: 25px;
+ height: 25px;
+ font-weight: 450;
+ background-color: #777;
+ border-radius: 5px;
+ margin-right: 10px;
+ padding: 3px;
+ font-size: 1.3rem;
+ }
+
+ }
+}
+
+
+
+
diff --git a/rslang/src/components/Games/Speakit/Speakit.tsx b/rslang/src/components/Games/Speakit/Speakit.tsx
new file mode 100644
index 000000000..dbd461dec
--- /dev/null
+++ b/rslang/src/components/Games/Speakit/Speakit.tsx
@@ -0,0 +1,490 @@
+import "bootstrap/dist/css/bootstrap.min.css";
+import "./Speakit.scss";
+import { useState, useEffect } from "react";
+import {
+ Button,
+ ButtonGroup,
+ ButtonToolbar,
+ Card,
+ Modal,
+ ProgressBar,
+ Toast } from "react-bootstrap";
+import { BsFillVolumeUpFill, BsArrowRepeat } from "react-icons/bs";
+import { BiBell, BiBellOff, BiExit, BiMicrophone, BiMicrophoneOff } from "react-icons/bi";
+import FullScreenWrapper from "../../FullScreenWrapper/FullScreenWrapper";
+import { Redirect } from 'react-router';
+import SpeechRecognition, { useSpeechRecognition } from 'react-speech-recognition';
+import { playAudioWord } from "../../../utils/AudioWord";
+import Preview from "../Preview/Preview";
+import useLocalStorage from "../../../hooks/useLocalStorage";
+import getUserData from "../../../api/getUserData";
+import setUserData from "../../../api/setUserData";
+import SpeakitImg from "../../../assets/img/games/speakitImg.png";
+import { url } from "../../../api/defData";
+
+type word = {
+ audio: string,
+ audioExample: string,
+ audioMeaning: string,
+ group: number,
+ id: string,
+ image: string,
+ page: number,
+ textExample: string,
+ textExampleTranslate: string,
+ textMeaning: string,
+ textMeaningTranslate: string,
+ transcription: string,
+ word: string,
+ wordTranslate: string,
+}
+
+type card = {
+ word: string,
+ wordTranslate: string,
+ transcription: string,
+ audio: string,
+ image: string
+}
+
+type Statistics = {correctAnswers: number, wrongAnswers: number};
+type AllStatistics = {[index:number]: Statistics};
+
+const PREVIEW_HEADING = "Скажи это";
+const PREVIEW__DESCRIPTION =
+ "Нажмите на карточку со словом, чтобы увидеть его перевод и услышать звучание. Нажмите на кнопку 'Тренировка произношения' и произнесите слово в микрофон.";
+const NUM_OF_ANSWERS = 10;
+const dateNow = new Date().getDate();
+const defStatistics:Statistics = {correctAnswers: 0, wrongAnswers: 0};
+const defAllStatistics:AllStatistics = {[dateNow]: {correctAnswers: 0, wrongAnswers: 0}};
+const defActiveCard = {
+ word: "",
+ wordTranslate: "",
+ transcription: "",
+ audio: "",
+ image: "files/02_0628.jpg"
+};
+
+const Speakit = () => {
+ const [words, setWords] = useState(null);
+ const [wordsSet, setWordsSet] = useState
+
+ Ваш результат:
+
+
+ Верных ответов:
+ {statistics.correctAnswers} +Неверных ответов:
+ {statistics.wrongAnswers} +Необходимо повторить слова:
+{wrongAnswersWords}
+
+ {!wordsSet && "Набор слов отсутствует"}
+ {wordsSet && Game}
+
+ )}
+
+
+ Ваш результат:
+
+
+ Верных ответов:
+ {statistics.correctAnswers} +Неверных ответов:
+ {statistics.wrongAnswers} +
+
+ {button.transcription} -
+ { button.word }
+ {i}
+
+
+
+
+ {activeCard.wordTranslate}
+
+ )}
+ {isTraining &&
+ (<>
+ { playAudioWord(activeCard.audio) }}
+ >
+ {activeCard.word.toUpperCase()}
+
+
+ {activeCard.transcription}
+
+ )}
+ {isMic && (
+
+
+ ) : (<>);
+
+ const nextWordButton = (
+ <>
+
+ )
+
+ const gameWrapper = (
+
+ {!isTraining &&
+ ( {
+ setAnswer('');
+ SpeechRecognition.startListening({language: 'en-US'})
+ }}>
+
)}
+ M
+
+ {wordCard}
+
+ );
+
+ const speaking = (
+
+ {wordsButtons()}
+
+
+
+
+ );
+
+ const trainingeWrapper = (
+ <>
+
+ { wordCard }
+ { speaking }
+ { nextWordButton }
+
+
+ );
+
+ const Game = (
+ <>
+
+ {progressBar}
+
+ {isTraining ? trainingeWrapper : gameWrapper}
+
+ )
+
+ return (
+
+ {buttonsBar}
+
+
+
+ {exit &&
+
+ );
+};
+
+export default Speakit;
+
\ No newline at end of file
diff --git a/rslang/src/components/Games/Sprint/Sprint.scss b/rslang/src/components/Games/Sprint/Sprint.scss
new file mode 100644
index 000000000..2faf425b6
--- /dev/null
+++ b/rslang/src/components/Games/Sprint/Sprint.scss
@@ -0,0 +1,254 @@
+.sprint-game {
+ background-position: center;
+ background-size: cover;
+ background-repeat: no-repeat;
+ min-height: 70vh;
+ display: flex;
+ align-items: center;
+ color: black;
+}
+
+.area-game {
+ background-position: center;
+ background-size: cover;
+ background-repeat: no-repeat;
+ background-image: url("../../../assets/img/Run.jpg");
+ width: 100%;
+ min-width: 700px;
+ height: 100%;
+ display: flex;
+ position: relative;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ background-color: white;
+}
+
+.score {
+ font-size: 25px;
+ margin-left: 45px;
+ font-weight: 500;
+ color: #d3b2ff;
+ text-shadow: 4px -2px 5px black;
+ margin-bottom: 25px;
+}
+
+.bonus-score {
+ color: rgb(78, 180, 78);
+ text-shadow: 4px -2px 5px black;
+ opacity: 0;
+ transition: all 0.1s;
+}
+
+.active-bonus-score {
+ opacity: 1;
+}
+
+.wordTranslate {
+ font-size: 30px;
+ font-weight: 500;
+ margin-bottom: 25px;
+ color: white;
+ text-shadow: 4px -2px 5px black;
+}
+
+.wrapBtn {
+ width: 280px;
+ display: flex;
+ justify-content: space-between;
+ button {
+ font-size: 16px;
+ color: white;
+ background-color: #007bff;
+ padding: 10px;
+ border-radius: 5px;
+ outline: none;
+ }
+}
+
+.wrapCircles {
+ width: 150px;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin-bottom: 25px;
+ span {
+ display: block;
+ width: 25px;
+ height: 25px;
+ background-color: rgb(219, 217, 217);
+ border-radius: 50%;
+ }
+}
+
+.circle {
+ background-color: #ff0000 !important;
+}
+
+.sound-btn {
+ width: 30px;
+ height: 30px;
+ position: absolute;
+ cursor: pointer;
+ transition: all 0.2s;
+ top: 10px;
+ left: 10px;
+ background-size: 100%;
+ background-image: url('../../../assets/img/soundOn.jpg');
+}
+
+.sound-btn:hover {
+ transform: scale(1.1);
+}
+
+.sound-off {
+ background-image: url('../../../assets/img/soundOff.jpg');
+}
+
+.statistic-sprint {
+ width: 90%;
+ height: 90%;
+ display: none;
+ flex-direction: column;
+ padding: 30px;
+ font-size: 16px;
+ position: absolute;
+ border-radius: 10px;
+ overflow-y: scroll;
+ background-color: rgb(227, 223, 231);
+ div {
+ font-size: 14px;
+ }
+ h4 {
+ margin: auto;
+ }
+}
+
+.statistic-sprint-active {
+ display: flex;
+}
+
+.statistic-sprint::-webkit-scrollbar {
+ width: 10px;
+ background-color: #f9f9fd;
+ }
+
+ .statistic-sprint::-webkit-scrollbar-thumb {
+ border-radius: 10px;
+ background-color: #18aaaa;
+ }
+
+ .statistic-sprint::-webkit-scrollbar-track {
+ -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.2);
+ border-radius: 10px;
+ background-color: #f9f9fd;
+ }
+
+ .wrap-btns-statistic {
+ display: flex;
+ position: sticky;
+ justify-content: space-between;
+ width: 300px;
+ margin: 0px 0px 0px auto;
+ bottom: 0px;
+ button {
+ font-size: 14px;
+ color: white;
+ background-color: #007bff;
+ padding: 10px;
+ border-radius: 5px;
+ outline: none;
+ transition: all 0.1s;
+ }
+
+ button:hover {
+ transform: scale(1.03);
+ }
+ }
+
+ .btn-close-statistic {
+ width: 20px;
+ height: 20px;
+ background-image: url("../../../assets/img/close.png");
+ background-size: 100%;
+ display: block;
+ position: absolute;
+ top: 10px;
+ right: 10px;
+ transition: all 0.1s;
+ cursor: pointer;
+ }
+
+ .btn-close-statistic:hover {
+ transform: scale(1.1);
+ }
+
+ .base-timer {
+ position: relative;
+ width: 100px;
+ height: 100px;
+ margin-bottom: 20px;
+ }
+
+ .base-timer__svg {
+ transform: scaleX(-1);
+ }
+
+ .base-timer__circle {
+ fill: none;
+ stroke: none;
+ }
+
+ .base-timer__path-elapsed {
+ stroke-width: 7px;
+ stroke: grey;
+ }
+
+ .base-timer__path-remaining {
+ stroke-width: 7px;
+ stroke-linecap: round;
+ transform: rotate(90deg);
+ transform-origin: center;
+ transition: 1s linear all;
+ fill-rule: nonzero;
+ stroke: currentColor;
+ }
+
+ .base-timer__path-remaining.green {
+ color: rgb(65, 184, 131);
+ }
+
+ .base-timer__path-remaining.orange {
+ color: orange;
+ }
+
+ .base-timer__path-remaining.red {
+ color: red;
+ }
+
+ .base-timer__label {
+ position: absolute;
+ width: 100px;
+ height: 100px;
+ top: 0;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: 35px;
+ font-weight: 700;
+ color: white;
+ text-shadow: 4px -2px 5px black;
+ }
+
+@media screen and (max-width: 991px) {
+ .area-game {
+ min-width: 500px;
+ }
+}
+
+@media screen and (max-width: 768px) {
+ .area-game {
+ min-width: 300px;
+ width: 400px;
+ }
+}
\ No newline at end of file
diff --git a/rslang/src/components/Games/Sprint/SprintGame.tsx b/rslang/src/components/Games/Sprint/SprintGame.tsx
new file mode 100644
index 000000000..8b21cf25e
--- /dev/null
+++ b/rslang/src/components/Games/Sprint/SprintGame.tsx
@@ -0,0 +1,352 @@
+import "bootstrap/dist/css/bootstrap.min.css";
+import "./Sprint.scss";
+import SprintImg from "../../../assets/img/Run.jpg";
+import React, { useState, useEffect } from "react";
+import { Route, Switch } from "react-router-dom";
+import { Link } from "react-router-dom";
+import { url } from "../../../api/defData";
+import FullScreenWrapper from "../../FullScreenWrapper/FullScreenWrapper";
+import Preview from "../Preview/Preview";
+
+import getUserData from "../../../api/getUserData";
+import setUserData from "../../../api/setUserData";
+
+const PREVIEW_HEADING = "Спринт";
+const PREVIEW__DESCRIPTION =
+ "На экране есть слово на английском и перевод. Вы должны определить правильный перевод или неправильный";
+
+const FULL_DASH_ARRAY = 283;
+const WARNING_THRESHOLD = 10;
+const ALERT_THRESHOLD = 5;
+const COLOR_CODES = {
+ info: {
+ color: "green"
+ },
+ warning: {
+ color: "orange",
+ threshold: WARNING_THRESHOLD
+ },
+ alert: {
+ color: "red",
+ threshold: ALERT_THRESHOLD
+ }
+};
+let remainingPathColor = COLOR_CODES.info.color;
+
+const SprintGame = () => {
+ const [words, setWords] = useState(null);
+ const level = null; //TODO: get level from book page
+ const [count, setCount] = useState(60);
+ const [countStart, setCountStart] = useState(false);
+ const [word, changeWord] = useState(null);
+ const [trueTranslate, setTrueTranslate] = useState();
+ const [wordTranslate, changeWordTranslate] = useState(null);
+ const [score, changeScore] = useState(0);
+ const [valueResponse, changeValueResponse] = useState(true);
+ const [indexWord, changeIndexWord] = useState(0);
+ const [countTrueAnswers, changeCountTrueAnswers] = useState(0);
+ const [countAllAnswers, changeCountAllAnswers] = useState(0);
+ const [bonusScore, changeBonusScore] = useState(1);
+ const [soundOn, changeSoundOn] = useState(true);
+ const [classSound, changeClassSound] = useState('sound-btn');
+ const [classBonusScore, changeClassBonusScore] = useState('bonus-score');
+ const [classStatistic, changeClassStatistic] = useState('statistic-sprint');
+ const [arrWrongAnswer, changeArrWrongAnswer] = useState
+ {!wordsSet && ('Набор слов отсутствует')}
+ {wordsSet && Game}
+
+ )}
+ {elem[0]} - {elem[1]}
) + }); + + const timerAnimation = +
+
+ {count}
+
+
+ return (
+
+
+ {words === null ? (
+
+
+ );
+};
+
+export default SprintGame;
\ No newline at end of file
diff --git a/rslang/src/components/HomePage/HomePage.scss b/rslang/src/components/HomePage/HomePage.scss
new file mode 100644
index 000000000..a8e14f359
--- /dev/null
+++ b/rslang/src/components/HomePage/HomePage.scss
@@ -0,0 +1,111 @@
+.link-logo-block:hover {
+ text-decoration: none;
+}
+.logo {
+ font-weight: 900;
+ font-size: 2rem;
+ margin-top: 25px;
+ text-align: end;
+ padding-right: 20px;
+ font-family: "Chango", cursive;
+}
+.main-block {
+ min-height: 650px;
+}
+.main-img {
+ background: url(../../assets/img/main.jpg) no-repeat;
+ background-size: 100%;
+ margin-top: 50px;
+ margin-right: -60px;
+ float: right;
+ z-index: 100;
+ overflow: overlay;
+}
+.header {
+ margin-top: 25px;
+}
+.nav-link {
+ font-size: 1rem;
+ font-weight: 500;
+}
+.login-button {
+ font-weight: 300;
+ padding: 7px 27px;
+ font-weight: 400;
+}
+.description-block {
+ float: right;
+}
+.description-head {
+ text-align: end;
+ font-size: 1.5rem;
+ font-weight: 900;
+ p {
+ font-weight: 900;
+ font-size: 1.5rem;
+ text-align: end;
+ font-family: "Chango", cursive;
+ }
+}
+.description-text {
+ font-size: 1rem;
+ line-height: 20px;
+}
+.description-btn {
+ width: 150px;
+ height: 50px;
+}
+.teaching-head {
+ font-size: 1.5rem;
+ font-weight: 800;
+}
+.card {
+ transition: 1s;
+}
+.card:hover {
+ cursor: pointer;
+ box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;
+}
+.card-team-tilte {
+ text-align: end;
+}
+.card-title {
+ font-weight: 600;
+}
+.card-text {
+ text-align: center;
+}
+.team-card-profession-text {
+ text-align: end;
+}
+
+.rss {
+ display: block;
+ position: relative;
+ // font-family: "Open Sans", sans-serif;
+ width: 86px;
+ height: 32px;
+ background-image: url("../../assets/svg/rss.svg");
+ background-size: contain;
+ background-repeat: no-repeat;
+ background-position: left center;
+ padding-right: 111px;
+}
+.rss-year {
+ position: absolute;
+ bottom: 0;
+ right: 0;
+ font-size: 21px;
+ letter-spacing: -2px;
+ color: #343a40;
+ line-height: 0.9;
+ font-weight: bold;
+ transition: 0.3s;
+}
+.rss:hover .rss-year {
+ right: -5px;
+ letter-spacing: 0;
+}
+.footer-link-git {
+ font-weight: 500;
+}
diff --git a/rslang/src/components/HomePage/HomePage.tsx b/rslang/src/components/HomePage/HomePage.tsx
new file mode 100644
index 000000000..d963e3c86
--- /dev/null
+++ b/rslang/src/components/HomePage/HomePage.tsx
@@ -0,0 +1,380 @@
+import "bootstrap/dist/css/bootstrap.min.css";
+import "./HomePage.scss";
+import React from "react";
+import { Container, Nav, Card } from "react-bootstrap";
+import { Link } from "react-router-dom";
+import Signin from "../Signin/SignIn";
+import Words from "../../assets/img/words.jpg";
+import Articles from "../../assets/img/articles.jpg";
+import Tests from "../../assets/img/tests.jpg";
+import Games from "../../assets/img/games.jpg";
+import Progress from "../../assets/img/progress.jpg";
+import BackgroundFeatures from "../../assets/img/background_features.jpg";
+import Video from "../../assets/img/video.jpg";
+import Ava_1 from "../../assets/img/ava_1.jpg";
+import Ava_2 from "../../assets/img/ava_2.jpg";
+import Ava_3 from "../../assets/img/ava_3.jpg";
+import Ava_4 from "../../assets/img/ava_4.jpg";
+
+interface InterfaceHomePage {}
+
+const HomePage: React.FC
+ {
+ changeImgSound();
+ }}
+ >
+ {timerAnimation}
+
+ )}
+ + Очки: {score} + +{10 * bonusScore} +
+
+ {blockCircles(countTrueAnswers)}
+
+ {word} - {wordTranslate}
+
+
+
+
+
+
+
+
+
+ Игра окончена
+Ваш результат: {score}
+Верных ответов - {countAllAnswers - arrWrongAnswer.length}
+Неверных ответов - {arrWrongAnswer.length}
+Необходимо повторить слова:
+{wrongAnswers}
+
+
+
+
+
+
+
+
+ RS Lang
+ + +
+
+ + Изучайте Английский вместе с
RS Lang.
+ ++ Ресурс позволяет учить английский онлайн при помощи метода + интервального повторения, отслеживания индивидуального прогресса и + мини-играми. +
++ Мы рекомендуем сделать упор именно на изучении новых слов. +
++ Метод интервального повторения. +
++ Первый раз вы должны повторить это слово где-нибудь через пару + минут, потом — через час, далее — на следующий день, затем — через + 2 дня, 5 дней, 10 дней, 3 недели, 6 недель, 3 месяца, 6 месяцев и + т.д. И вуаля: вы на всю жизнь запомните, что за словом «cat» + скрывается некто пушистый и мурлыкающий.{" "} +
+Особенности приложения
+Видео о работе приложения
+О команде
+
+
+
+
+
+
+
+ 
+
+
+
+
+
+ + {" "} + Aliaksei Savastsyanau +
++ Front-end Developer +
++ Разработал дизайн проекта. Реализовал "Стартовую + страницу", страницы: "Электронного учебника", + "Словаря", "Статистики", "Загрузки" их функционал и + адаптивность. +
+
+
+
+
+
+
+
+ 
+
+
+
+
+
+ + Mitry Nayezzhy +
++ + Front-end, Back-end Developer, DevOps + +
++ Реализовал игры "Саванна" и "Скажи это", Авторизацию и + разавторизацию пользователя. Страницу настроек. + Расширил функционал Бэкэнда. Размещение и поддержка проекта. +
+
+
+
+
+
+
+
+ 
+
+
+
+
+
+ + Anastasiya Ivanova{" "} +
++ Front-end Developer +
++ Реализовала мини-игру "Аудиовызов", блок выбора уровня + сложности, стартовый экран игры, результаты. +
+
+
+
+
+
+
+ 
+
+
+
+
+
+ Stas Tom
++ Front-end Developer +
++ Реализовал мини-игру "Спринт", экран выбора игры. +
+
+
+
+
+
+
+
+
+
+
+
+ Настройки
+
+
+
+
+ 
}
+
+ {username}
+ {avatarUrl &&
+ Я хочу учить
+
+ {wordsPerDayNew}
+
+ слов в день
+
+
+
+ Настройки раздела Изучение
+ +
+
+ Настройки игры Саванна
+ + +
+
+ Настройки игры Скажи это
+ +Статистика
+{"Статистика пользователя - " + username}
+ +| # | +{"Статистика пользователя - " + username} | +Результат | +
|---|---|---|
| 1 | +Пройдено карточек за все время | +{learnedWords} | +
| 2 | +Лучшая серия | +{bestSeries} | +
| 3 | +Процент правильных ответов | +{correctAnswer} % | +
| 4 | +Изучено новых слов | +{statisticUser.vocabulary.learnedWordToday} | +
Привет.
++ Приступим к обучению! +
++ На этой странице вы можете следить за своим прогрессом и выбирать + желаемый набор слов для изучения, например,{" "} + “Новые слова” , “Повторить слова” + или “Сложные слова” . Удачи! +
+Сегодня изучено
++ Сегодня изучено: {props.learnedWordToday.length} из{" "} + {props.words.length * (props.page + 1)} слов +
++ Сегодня изучено: {cardNumber} из {newWords.length} слов +
++ Сегодня изучено: {cardNumber} из {newWords.length} слов +
++ Слов для повторения: {cardNumber} из {newWords.length} слов +
+RS Lang
+ + + {userpic &&{JSON.parse(username)}
} + +Словарь.
++ Выбрано {selectedWords.length} слов +
+-
+ {wordList}
+
+ Выбрано {selectedWords.length} слов +
+-
+ {wordList}
+
+ Выбрано {selectedWords.length} слов +
+-
+ {wordList}
+