Annettabel87/feature/sprint styles

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;
 }
 

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;
 

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;

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,12 +28,12 @@ $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;
     font-size: 18px;
-    line-height: 21px;
+    line-height: 25px;
     text-transform: uppercase;
     text-align: center;
   }
@@ -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;
+}

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,

src/app/views/sprint/SprintGameField.scss

@@ -0,0 +1,24 @@
+.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-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;
+}

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;

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: 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;
+        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-left: 30px;
+    padding-right: 0;
+    cursor: pointer;
+}
+.question-container_text {
+    all: unset;
+    font-weight: 100;
+    font-size: 24px;
+    line-height: 50px;
+    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;
+}
+

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);

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%;
+    min-height: 100%;
+    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;
+      }
+    }
+  }
+

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);
   }
 }