#135 first attempt to style timers

index.html

@@ -6,6 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
     <title>CodersCamp2021 | Harry potter API QUIZ</title>
+    <link rel="icon" type="image/x-icon" href="./static/assets/img/lightning.png">
     <link rel="stylesheet" href='./static/styles/index.scss'>
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
@@ -41,7 +42,6 @@
     </div>
 
     <script type="module" src="./src/index.js"></script>
-    <script type="module" src="./src/app/view/components/wand.js"></script>
 </body>
 
 </html>

src/app/view/components/displayTimerText.js

@@ -7,7 +7,7 @@ function displayTimerText(timeInSeconds) {
   const timer = elementCreator('p', { class: 'game-timer__text' });
 
   if (timeInSeconds <= 20) {
-    timer.style.color = 'rgba(255, 0, 0, 0.8)';
+    timer.style.color = '#E23336';
   }
 
   if (timeInSeconds < 10 || timeInSeconds % 60 === 0) {

src/app/view/components/wand.js

@@ -3,7 +3,7 @@ import img from '../../../../static/assets/img/wand.png';
 
 export default function displayWand(timeLeft, timeStart) {
   const timerWrapper = elementCreator('div', {
-    class: 'game-timer__text',
+    class: 'game-timer__text-wrapper',
   });
 
   const image = elementCreator('img', {

src/app/view/view.js

@@ -101,7 +101,7 @@ class View {
 
   renderTimer(timeInSeconds, initialTime) {
     this.render('.game-timer', ...displayWand(timeInSeconds, initialTime));
-    this.render('.game-timer__text', displayTimerText(timeInSeconds));
+    this.render('.game-timer__text-wrapper', displayTimerText(timeInSeconds));
   }
 
   renderModal() {

static/styles/_defaultButton.scss

@@ -2,7 +2,6 @@
 
 .game__button {
   height: $button-height;
-  width: clamp(100px, 49%, 49%);
   border: none;
   outline: none;
   background: $white-color;
@@ -11,6 +10,7 @@
   z-index: 0;
   border-radius: $default-radius;
   text-transform: uppercase;
+  flex: 1;
 
   &-icon {
     position: absolute;
@@ -63,11 +63,10 @@
   }
 
   &-settingsBtn {
-    width: 100%;
+    width: calc(100% - 24px);
     padding: 0 40px;
   }
   &--orange {
-    margin: 0 0 0 10px;
     color: $white-color;
     z-index: 0;
     &::after {

static/styles/_quitGame.scss

@@ -3,7 +3,7 @@
 .quit-game {
   position: fixed;
   top: 70px;
-  right: 140px;
+  right: 245px;
   color: $white-opacity;
   font-size: 35px;
   text-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);

static/styles/_timerText.scss

@@ -1,15 +1,12 @@
-.game-timer {
-
-    
-
-    &__text {
-        color:  rgba(255, 255, 255, 0.8);
-        text-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
-        font-weight: 800;
-        line-height: 50px;
-        letter-spacing: 3px;
-    }
+.game-timer__text-wrapper {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  .game-timer__text {
+    color: rgba(255, 255, 255, 0.8);
+    text-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
+    font-weight: 800;
+    line-height: 50px;
+    letter-spacing: 3px;
+  }
 }
-
-
-

static/styles/_wand.scss

@@ -5,19 +5,23 @@
 
   .game-timer {
     display: flex;
+    flex-direction: column;
     align-items: center;
-    position: relative;
+    justify-content: center;
     width: 100%;
+    &__wand-wrapper {
+      width: 100%;
+      display: flex;
+      align-items: center;
+    }
 
     &__wand {
       height: 26px;
-      width: 70%;
-      position: absolute;
-      left: 229px;
-      bottom: 34px;
+      width: 90%;
       background: url('../assets/img/burn.png');
       background-size: cover;
-      border-radius: 0 8px 8px 0;
+      background-position: -7px;
+      border-radius: 0px 8px 8px 0;
 
       &-inner {
         width: 100%;

static/styles/index.scss

@@ -10,21 +10,26 @@
   font-size: $primary-font-size;
 }
 
-.game-wrapper {
-  background-image: url('../assets/img/QuizBackground.png');
+body {
   background-size: cover;
+  background-image: url('../assets/img/QuizBackground.png');
+}
+
+.game-wrapper {
   height: 100vh;
+  width: 1400px;
   display: grid;
   grid-template-columns: 1fr 2fr;
-  grid-template-rows: 22% 65% 13%;
-  padding: 0 50px 0 0;
+  grid-template-rows: 1fr 4fr 1fr;
+  margin: 0 auto;
 
   .header {
     grid-column: 1/3;
     grid-row: 1/2;
     display: flex;
-    justify-content: space-around;
+    justify-content: space-between;
     align-items: center;
+    padding: 20px 0;
 
     &__game {
       &-logo {
@@ -40,7 +45,9 @@
       }
 
       &-nav {
-        width: 60%;
+        display: flex;
+        justify-content: space-between;
+        width: 67%;
         height: 70%;
       }
     }
@@ -58,19 +65,17 @@
       grid-row: 2/3;
       display: flex;
       justify-content: space-between;
-      align-items: center;
       flex-direction: column;
 
       &__content {
-        width: 60%;
-        height: 70%;
+        width: 250px;
 
         &-image {
-          width: 85%;
-          height: auto;
-          border: 16px solid rgba(173, 25, 132, 0.26);
+          width: 101%;
+          height: 100%;
+          border: 12px solid rgba(173, 25, 132, 0.26);
           filter: drop-shadow(13px 17px 11px rgba(0, 0, 0, 0.5));
-          border-radius: 32px;
+          border-radius: $default-radius;
         }
       }
     }
@@ -165,6 +170,7 @@
       display: flex;
       justify-content: space-between;
       align-items: flex-end;
+      gap: 24px;
 
       .game__button-icon {
         position: absolute;