Merge pull request #169 from CC2021-WBL/#135/UI/1-Fix-Timers-and-Gene…

…ral-Styles #135/UI/1 fix timers and general styles
CC2021-WBL · Jan 4, 2022 · f049662 · f049662
2 parents 2dd202f + f6a766b
commit f049662
Show file tree

Hide file tree

Showing 12 changed files with 64 additions and 50 deletions.
diff --git a/index.html b/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>
diff --git a/src/app/view/components/displayQuitGameButton.js b/src/app/view/components/displayQuitGameButton.js
@@ -5,10 +5,18 @@ export default function displayQuitGameButton() {
     class: 'far fa-times-circle',
   });
 
+  const quitElemText = elementCreator(
+    'p',
+    {
+      class: '.quit-game-text',
+    },
+    'Quit Game',
+  );
+
   const quitGameButton = elementCreator(
     'div',
     { class: 'quit-game' },
-    'Quit Game',
+    quitElemText,
     quitElem,
   );
 

diff --git a/src/app/view/components/displayTimerText.js b/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) {

diff --git a/src/app/view/components/wand.js b/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', {

diff --git a/src/app/view/view.js b/src/app/view/view.js
@@ -100,7 +100,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() {

diff --git a/static/assets/img/lightning.png b/static/assets/img/lightning.png
diff --git a/static/assets/img/wand.png b/static/assets/img/wand.png
diff --git a/static/styles/_defaultButton.scss b/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: 350px;
     padding: 0 40px;
   }
   &--orange {
-    margin: 0 0 0 10px;
     color: $white-color;
     z-index: 0;
     &::after {
@@ -101,9 +100,9 @@
     }
   }
   &--disabled {
-  pointer-events: none;
-  opacity: .5;
-}
+    pointer-events: none;
+    opacity: 0.5;
+  }
 }
 
 @keyframes glowing {

diff --git a/static/styles/_quitGame.scss b/static/styles/_quitGame.scss
@@ -1,21 +1,21 @@
 @import '_vars';
 
 .quit-game {
-  position: fixed;
-  top: 70px;
-  right: 140px;
   color: $white-opacity;
   font-size: 35px;
   text-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
   transition: all 0.3s ease-in-out;
+  display: flex;
+  align-items: center;
 
   &:hover {
     color: $lite-orange;
   }
 
+  &-text {
+  }
+
   .fa-times-circle {
-    position: absolute;
-    top: -11px;
     padding: 0 0 0 20px;
     font-size: 60px;
   }

diff --git a/static/styles/_timerText.scss b/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;
+  }
 }
-
-
-
diff --git a/static/styles/_wand.scss b/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%;

diff --git a/static/styles/index.scss b/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%;
-
         &-image {
-          width: 85%;
-          height: auto;
-          border: 16px solid rgba(173, 25, 132, 0.26);
+          width: 350px;
+          height: 448px;
+          object-position: top;
+          object-fit: cover;
+          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;