From 5b213362d7a53b3fdba70103079c3f86fe45270d Mon Sep 17 00:00:00 2001 From: annettabel87 Date: Wed, 23 Feb 2022 21:32:12 +0500 Subject: [PATCH 1/2] feat: add styles to sprint page --- .../views/audiocall/AudiocallGameField.scss | 4 +- .../views/audiocall/AudiocallStartPage.scss | 1 + .../audiocall/AudiocallStatisticPage.scss | 8 +- .../views/audiocall/AudiocallStatisticPage.ts | 1 + src/app/views/sprint/SprintGameField.scss | 23 +++++ src/app/views/sprint/SprintGameField.ts | 1 + src/app/views/sprint/SprintQuestion.scss | 90 +++++++++++++++++++ src/app/views/sprint/SprintQuestion.ts | 16 ++-- src/app/views/sprint/SprintStartPage.scss | 80 +++++++++++++++++ src/app/views/sprint/SprintStartPage.ts | 9 +- src/app/views/sprint/SprintStatisticPage.ts | 76 ++++++++++++---- 11 files changed, 278 insertions(+), 31 deletions(-) create mode 100644 src/app/views/sprint/SprintGameField.scss create mode 100644 src/app/views/sprint/SprintQuestion.scss create mode 100644 src/app/views/sprint/SprintStartPage.scss diff --git a/src/app/views/audiocall/AudiocallGameField.scss b/src/app/views/audiocall/AudiocallGameField.scss index d74d8c1..f0acc5c 100644 --- a/src/app/views/audiocall/AudiocallGameField.scss +++ b/src/app/views/audiocall/AudiocallGameField.scss @@ -4,7 +4,7 @@ display: flex; flex-direction: column; justify-content: center; - align-content: center; - + align-items: center; + gap: 15px; } diff --git a/src/app/views/audiocall/AudiocallStartPage.scss b/src/app/views/audiocall/AudiocallStartPage.scss index 11b1daf..91f8df8 100644 --- a/src/app/views/audiocall/AudiocallStartPage.scss +++ b/src/app/views/audiocall/AudiocallStartPage.scss @@ -96,6 +96,7 @@ $color-light-m: #f6f6f6; display: flex; gap: 40px; flex-wrap: wrap; + justify-content: center; } .level-button { width: 50px; diff --git a/src/app/views/audiocall/AudiocallStatisticPage.scss b/src/app/views/audiocall/AudiocallStatisticPage.scss index 94a3ea4..1301b2a 100644 --- a/src/app/views/audiocall/AudiocallStatisticPage.scss +++ b/src/app/views/audiocall/AudiocallStatisticPage.scss @@ -7,7 +7,7 @@ $color-light-m: #f6f6f6; margin: 0 auto; display: flex; flex-direction: column; - gap: 50px; + gap: 10px; } .result-words-container { @@ -28,7 +28,7 @@ $color-light-m: #f6f6f6; url('/src/assets/img/svg/corner-right-bottom.svg') bottom right no-repeat; display: flex; padding-left: 30px; - gap: 6px; + justify-content: space-between; &--text { font-weight: 100; @@ -62,6 +62,7 @@ $color-light-m: #f6f6f6; justify-content: center; gap: 30px; align-items: center; + flex-wrap: wrap; } .result-words--title { @@ -76,3 +77,6 @@ $color-light-m: #f6f6f6; url('/src/assets/img/svg/corner-right-bottom.svg') bottom right no-repeat; padding: 15px; } +.result-text { + text-transform: uppercase; +} \ No newline at end of file diff --git a/src/app/views/audiocall/AudiocallStatisticPage.ts b/src/app/views/audiocall/AudiocallStatisticPage.ts index bf2457a..ae0fcd3 100644 --- a/src/app/views/audiocall/AudiocallStatisticPage.ts +++ b/src/app/views/audiocall/AudiocallStatisticPage.ts @@ -85,6 +85,7 @@ export class AudiocallStatisticPage extends Renderable { ['result-page'], '', this.title, + this.statisticContainer, rightTitleContainer, this.correctWordsContainer, wrongTitleContainer, diff --git a/src/app/views/sprint/SprintGameField.scss b/src/app/views/sprint/SprintGameField.scss new file mode 100644 index 0000000..78493a5 --- /dev/null +++ b/src/app/views/sprint/SprintGameField.scss @@ -0,0 +1,23 @@ +.sprint-page--sub-title { + font-size: 36px; + line-height: 50px; + text-transform: uppercase; + font-weight: 100; + + @media screen and (max-width: 768px) { + font-size: 30px + } +} + +.sprint-page--timer-text { + background: url('/src/assets/img/svg/corner-left-top.svg') top left no-repeat, + url('/src/assets/img/svg/corner-right-top.svg') top right no-repeat, + url('/src/assets/img/svg/corner-right-bottom.svg') bottom right no-repeat, + url('/src/assets/img/svg/corner-right-bottom.svg') bottom left no-repeat; + padding: 10px; + font-size: 48px; + line-height: 56px; + text-transform: uppercase; + width: 70px; + margin-bottom: 52px; +} \ No newline at end of file diff --git a/src/app/views/sprint/SprintGameField.ts b/src/app/views/sprint/SprintGameField.ts index 66424f3..a8a885f 100644 --- a/src/app/views/sprint/SprintGameField.ts +++ b/src/app/views/sprint/SprintGameField.ts @@ -5,6 +5,7 @@ import { IGameQuestionArray } from '../../interfaces/IGameQuestionArray'; import { IGameQuestion } from '../../interfaces/IGameQuestion'; import { SprintQuestion } from './SprintQuestion'; import { GlobalConstants } from '../../../GlobalConstants'; +import './SprintGameField.scss'; export class SprintGameField extends Renderable { private questionsArray: IGameQuestionArray | null = null; diff --git a/src/app/views/sprint/SprintQuestion.scss b/src/app/views/sprint/SprintQuestion.scss new file mode 100644 index 0000000..15814a4 --- /dev/null +++ b/src/app/views/sprint/SprintQuestion.scss @@ -0,0 +1,90 @@ +$color-dark-s: #767676; +$color-dark-m: #555555; +$color-dark-xl: #1b1b1b; +$color-light-m: #f6f6f6; + +.game-question { + display: flex; + flex-direction: column; + flex-wrap: wrap; + gap: 36px; + +} +.assumption { + display: flex; + justify-content: center; + align-items: center; + flex-wrap: wrap; + gap: 36px; + + &--text { + padding: 5px 20px; + 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; + font-size: 24px; + line-height: 28px; + text-transform: uppercase; + } + + &--separator { + background-image: url('../../../assets/img/svg/arrow-horizontal.svg'); + background-size: auto; + background-position: center; + background-repeat: no-repeat; + height: 25px; + width: 25px; + background-color: white; + } + + +} +.game-question--question-text { + font-weight: 100; + font-size: 36px; + line-height: 42px; + text-transform: uppercase; + margin-bottom: 40px; +} +.game-btn-container { + display: flex; + font-size: 24px; + line-height: 28px; + text-transform: uppercase; +} + +.question-container_btn { + 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; + padding-right: 0; + cursor: pointer; +} +.question-container_text { + all: unset; + font-weight: 100; + font-size: 24px; + line-height: 28px; + text-transform: uppercase; + text-align: center; + + &:hover { + font-weight: 300; + transition: all 0.1s; + } + &:active { + color: $color-dark-xl; + font-weight: 300; + } + } + + .question-container_count { + margin-left: 10px; + width: 20px; + line-height: 20px; + text-align: center; + font-size: 18px; + line-height: 0px; + text-transform: uppercase; +} + diff --git a/src/app/views/sprint/SprintQuestion.ts b/src/app/views/sprint/SprintQuestion.ts index 44b189f..703d315 100644 --- a/src/app/views/sprint/SprintQuestion.ts +++ b/src/app/views/sprint/SprintQuestion.ts @@ -2,6 +2,7 @@ import { dch } from '../dch'; import Renderable from '../Renderable'; import { IWord } from '../../interfaces/IWord'; import { IGameQuestion } from '../../interfaces/IGameQuestion'; +import './SprintQuestion.scss'; export class SprintQuestion extends Renderable { private questionData: IGameQuestion; @@ -17,21 +18,24 @@ export class SprintQuestion extends Renderable { const questionText = dch('h3', ['game-question--question-text'], 'Is correct match?'); const assumptionContainer = dch('div', ['assumption']); - const wordOriginal = dch('div', ['assumption--original'], this.questionData.wordData.word); + const wordOriginal = dch('div', ['assumption--text'], this.questionData.wordData.word); const wordSeparator = dch('div', ['assumption--separator']); - const wordQuestion = dch('div', ['assumption--question'], this.questionData.variants[0].wordData.wordTranslate); + const wordQuestion = dch('div', ['assumption--text'], this.questionData.variants[0].wordData.wordTranslate); assumptionContainer.append(wordOriginal, wordSeparator, wordQuestion); - - this.rightBtn = dch('button', ['question-container_btn'], 'true'); + const rightBtnNum = dch('div', ['question-container_count'], '1'); + this.rightBtn = dch('button', ['question-container_text'], 'true'); + const rightBtnContainer = dch('div', ['question-container_btn'], '', this.rightBtn, rightBtnNum); this.rightBtn.onclick = () => { this.onAnswer(this.questionData.wordData, this.questionData.variants[0].isCorrect === true); }; - this.wrongBtn = dch('button', ['question-container_btn'], 'false'); + const wrongBtnNum = dch('div', ['question-container_count'], '2'); + this.wrongBtn = dch('button', ['question-container_text'], 'false'); + const wrongBtnContainer = dch('div', ['question-container_btn'], '', this.wrongBtn, wrongBtnNum); this.wrongBtn.onclick = () => { this.onAnswer(this.questionData.wordData, this.questionData.variants[0].isCorrect === false); }; - const btnContainer = dch('div', ['game-btn-container'], '', this.rightBtn, this.wrongBtn); + const btnContainer = dch('div', ['game-btn-container'], '', rightBtnContainer, wrongBtnContainer); this.rootNode = dch('div', ['game-question'], '', assumptionContainer, questionText, btnContainer); document.addEventListener('keyup', this.handlerKey); diff --git a/src/app/views/sprint/SprintStartPage.scss b/src/app/views/sprint/SprintStartPage.scss new file mode 100644 index 0000000..70aa185 --- /dev/null +++ b/src/app/views/sprint/SprintStartPage.scss @@ -0,0 +1,80 @@ +$color-dark-s: #767676; +$color-dark-m: #555555; +$color-dark-xl: #1b1b1b; +$color-light-m: #f6f6f6; + +.sprint-page { + margin: 0 auto; + max-width: 1000px; + width: 100%; + height: 100vh; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 50px; + font-family: "Roboto"; + font-weight: 100; + text-align: center; + color: #767676; + + @media screen and (max-width: 768px) { + padding: 20px; + } + @media screen and (max-width: 555px) { + height: auto; + margin-top: 25%; + } + + &--main { + width: 100%; + display: flex; + flex-direction: column; + gap: 50px; + max-width: 600px; + } + + &--title { + font-size: 60px; + line-height: 70px; + text-transform: uppercase; + font-weight: 100; + + @media screen and (max-width: 768px) { + font-size: 40px + } + } + &--text { + font-size: 36px; + line-height: 50px; + } + &--title-container { + padding: 3px 20px; + 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; + } + &--button { + width: 300px; + height: 50px; + background-color: white; + border: 1px solid #dfdfdf; + font-weight: 200; + font-size: 24px; + line-height: 28px; + text-transform: uppercase; + color: $color-dark-s; + font-family: 'Roboto'; + cursor: pointer; + + &:hover { + font-weight: 300; + transition: all 0.1s; + } + &:active { + color: $color-dark-xl; + font-weight: 300; + transition: all 0.1s; + } + } + } + diff --git a/src/app/views/sprint/SprintStartPage.ts b/src/app/views/sprint/SprintStartPage.ts index ed713ee..29f179e 100644 --- a/src/app/views/sprint/SprintStartPage.ts +++ b/src/app/views/sprint/SprintStartPage.ts @@ -2,6 +2,7 @@ import { dch } from '../dch'; import Renderable from '../Renderable'; import { GlobalConstants } from '../../../GlobalConstants'; import { IGameAnswer } from '../../interfaces/IGameAnswer'; +import './SprintStartPage.scss'; export class SprintStartPage extends Renderable { gameDescription: HTMLElement; @@ -39,11 +40,11 @@ export class SprintStartPage extends Renderable { this.gameDescription = dch( 'div', ['sprint-page--text'], - `Your time is limited. + `Your time is limited. Make decisions - is it correct match of word meaning.`, ); - this.startButton = dch('button', ['audiocall-page--button'], 'START RESOLVING'); + this.startButton = dch('button', ['sprint-page--button'], 'START RESOLVING'); this.startButton.addEventListener('click', () => { this.onStartGame(this.group, this.page); }); @@ -86,7 +87,7 @@ export class SprintStartPage extends Renderable { this.startButton, ); - this.mainContainer = dch('div', ['audiocall-page--main'], '', this.titleContainer, this.gameDescription); - this.rootNode = dch('div', ['audiocall-page'], '', this.mainContainer, this.buttonsContainer); + this.mainContainer = dch('div', ['sprint-page--main'], '', this.titleContainer, this.gameDescription); + this.rootNode = dch('div', ['sprint-page'], '', this.mainContainer, this.buttonsContainer); } } diff --git a/src/app/views/sprint/SprintStatisticPage.ts b/src/app/views/sprint/SprintStatisticPage.ts index 51b8f96..3822de8 100644 --- a/src/app/views/sprint/SprintStatisticPage.ts +++ b/src/app/views/sprint/SprintStatisticPage.ts @@ -17,20 +17,27 @@ export class SprintStatisticPage extends Renderable { title: HTMLElement; - score: HTMLElement; + correctWordsContainer: HTMLElement; + + inCorrectWordsContainer: HTMLElement; constructor(resultData: IResultData[], answerChain: number) { super(); this.resultData = resultData; this.title = dch('h3', ['word-container--title'], 'results'); - const correctAnswers = this.resultData.filter((item) => item.isCorrect); - this.score = dch('div', ['word-container--subtitle'], `${correctAnswers.length}/${this.resultData.length}`); - this.statisticContainer = dch('p', ['result-text'], `The longest answer Chain - ${answerChain}`); - this.resultContainer = dch('div', ['result-container']); - this.rootNode = dch('div', ['result-page'], '', this.title, this.score, this.resultContainer); - // this.rootNode.append(new Menu().getElement()); - this.date = this.formatDate(new Date()); - resultData.forEach((item) => { + + const rightResult = this.resultData.filter((el) => el.isCorrect).length; + const wrongResult = this.resultData.length - rightResult; + const rightCount = dch('div', ['result-words--title', 'count'], `${rightResult}`); + const wrongCount = dch('div', ['result-words--title', 'count'], `${wrongResult}`); + const rightTitle = dch('div', ['result-words--title'], 'correct'); + const wrongTitle = dch('div', ['result-words--title'], 'incorrect'); + const rightTitleContainer = dch('div', ['title-container'], '', rightTitle, rightCount); + const wrongTitleContainer = dch('div', ['title-container'], '', wrongTitle, wrongCount); + this.correctWordsContainer = dch('div', ['result-words-container'], ''); + this.inCorrectWordsContainer = dch('div', ['result-words-container'], ''); + + this.resultData.forEach((item) => { const userId = TokenProvider.getUserId(); if (userId && !TokenProvider.checkIsExpired()) { @@ -38,18 +45,53 @@ export class SprintStatisticPage extends Renderable { .catch((e) => console.error(e)); } + const word = dch( + 'p', + ['button-word--text-item'], + `${item.questionData.wordTranslate}`, + ); + const wordTranslate = dch( + 'p', + ['button-word--text-item'], + `${item.questionData.word}`, + ); + const buttonWordText = dch( + 'div', + ['button-word--text'], + '', + word, + wordTranslate, + ); + const buttonWordAudio = dch( + 'button', + ['button-word--audio-btn'], + ); const audioWordData = `${GlobalConstants.DEFAULT_API_URL}/${item.questionData.audio}`; - const playAudioBtn = dch('button', ['result-audio-btn']); - playAudioBtn.onclick = () => { + buttonWordAudio.onclick = () => { this.playAudio(audioWordData); }; - const word = dch('p', ['word-container--item'], `${item.questionData.word}`); - const wordTranslate = dch('p', ['word-container_item'], `${item.questionData.wordTranslate}`); - const wordResult = dch('p', ['word-container_item'], `${item.isCorrect ? 'true' : 'false'}`); - const wordContainer = dch('div', ['result-word-container']); - wordContainer.append(playAudioBtn, word, wordTranslate, wordResult); - this.resultContainer.append(wordContainer, this.statisticContainer); + const buttonWord = dch('div', ['button-word'], '', buttonWordText, buttonWordAudio); + + if (item.isCorrect) { + this.correctWordsContainer.append(buttonWord); + } else { + this.inCorrectWordsContainer.append(buttonWord); + } }); + this.statisticContainer = dch('p', ['result-text'], `The longest answer Chain - ${answerChain}`); + this.resultContainer = dch('div', ['result-container']); + this.rootNode = dch( + 'div', + ['result-page'], + '', + this.title, + this.statisticContainer, + rightTitleContainer, + this.correctWordsContainer, + wrongTitleContainer, + this.inCorrectWordsContainer, + ); + this.date = this.formatDate(new Date()); } playAudio = (audio: string) => { From 9b2103356d3a46f3eb46efa6a47788d924d0c240 Mon Sep 17 00:00:00 2001 From: annettabel87 Date: Wed, 23 Feb 2022 22:59:02 +0500 Subject: [PATCH 2/2] fix: fix some styles --- src/app/views/audiocall/AudiocallQuestion.scss | 4 ++-- src/app/views/audiocall/AudiocallStatisticPage.scss | 2 +- src/app/views/sprint/SprintGameField.scss | 3 ++- src/app/views/sprint/SprintQuestion.scss | 6 +++--- src/app/views/sprint/SprintStartPage.scss | 2 +- 5 files changed, 9 insertions(+), 8 deletions(-) diff --git a/src/app/views/audiocall/AudiocallQuestion.scss b/src/app/views/audiocall/AudiocallQuestion.scss index 2deb933..1ea8220 100644 --- a/src/app/views/audiocall/AudiocallQuestion.scss +++ b/src/app/views/audiocall/AudiocallQuestion.scss @@ -45,14 +45,14 @@ $color-light-m: #f6f6f6; 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; + padding-left: 30px; padding-right: 0; cursor: pointer; &--text { font-weight: 100; font-size: 24px; - line-height: 28px; + line-height: 50px; text-transform: uppercase; text-align: center; diff --git a/src/app/views/audiocall/AudiocallStatisticPage.scss b/src/app/views/audiocall/AudiocallStatisticPage.scss index 1301b2a..f46c097 100644 --- a/src/app/views/audiocall/AudiocallStatisticPage.scss +++ b/src/app/views/audiocall/AudiocallStatisticPage.scss @@ -33,7 +33,7 @@ $color-light-m: #f6f6f6; &--text { font-weight: 100; font-size: 18px; - line-height: 21px; + line-height: 25px; text-transform: uppercase; text-align: center; } diff --git a/src/app/views/sprint/SprintGameField.scss b/src/app/views/sprint/SprintGameField.scss index 78493a5..f74b174 100644 --- a/src/app/views/sprint/SprintGameField.scss +++ b/src/app/views/sprint/SprintGameField.scss @@ -13,11 +13,12 @@ background: url('/src/assets/img/svg/corner-left-top.svg') top left no-repeat, url('/src/assets/img/svg/corner-right-top.svg') top right no-repeat, url('/src/assets/img/svg/corner-right-bottom.svg') bottom right no-repeat, - url('/src/assets/img/svg/corner-right-bottom.svg') bottom left no-repeat; + url('/src/assets/img/svg/corner-left-bottom.svg') bottom left no-repeat; padding: 10px; font-size: 48px; line-height: 56px; text-transform: uppercase; width: 70px; + height: 70px; margin-bottom: 52px; } \ No newline at end of file diff --git a/src/app/views/sprint/SprintQuestion.scss b/src/app/views/sprint/SprintQuestion.scss index 15814a4..f253d0b 100644 --- a/src/app/views/sprint/SprintQuestion.scss +++ b/src/app/views/sprint/SprintQuestion.scss @@ -18,7 +18,7 @@ $color-light-m: #f6f6f6; gap: 36px; &--text { - padding: 5px 20px; + padding: 11px 20px; 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; font-size: 24px; @@ -56,7 +56,7 @@ $color-light-m: #f6f6f6; 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; + padding-left: 30px; padding-right: 0; cursor: pointer; } @@ -64,7 +64,7 @@ $color-light-m: #f6f6f6; all: unset; font-weight: 100; font-size: 24px; - line-height: 28px; + line-height: 50px; text-transform: uppercase; text-align: center; diff --git a/src/app/views/sprint/SprintStartPage.scss b/src/app/views/sprint/SprintStartPage.scss index 70aa185..4a01c46 100644 --- a/src/app/views/sprint/SprintStartPage.scss +++ b/src/app/views/sprint/SprintStartPage.scss @@ -7,7 +7,7 @@ $color-light-m: #f6f6f6; margin: 0 auto; max-width: 1000px; width: 100%; - height: 100vh; + min-height: 100%; display: flex; flex-direction: column; align-items: center;