diff --git a/index.html b/index.html index 261d83eb..a14b4fe7 100644 --- a/index.html +++ b/index.html @@ -6,6 +6,7 @@ CodersCamp2021 | Harry potter API QUIZ + @@ -41,7 +42,6 @@ - \ No newline at end of file diff --git a/src/app/view/components/displayTimerText.js b/src/app/view/components/displayTimerText.js index 39a44b46..a48bb132 100644 --- 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 index 2143beca..e4c2931c 100644 --- 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 index a99b69c9..28b5fed1 100644 --- a/src/app/view/view.js +++ b/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() { diff --git a/static/assets/img/lightning.png b/static/assets/img/lightning.png new file mode 100644 index 00000000..e82cd51c Binary files /dev/null and b/static/assets/img/lightning.png differ diff --git a/static/assets/img/wand.png b/static/assets/img/wand.png index ab5042b3..af26ae78 100644 Binary files a/static/assets/img/wand.png and b/static/assets/img/wand.png differ diff --git a/static/styles/_defaultButton.scss b/static/styles/_defaultButton.scss index 24ab11f7..d5f9ce14 100644 --- 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: calc(100% - 24px); padding: 0 40px; } &--orange { - margin: 0 0 0 10px; color: $white-color; z-index: 0; &::after { diff --git a/static/styles/_quitGame.scss b/static/styles/_quitGame.scss index 20a2db89..cb228a1a 100644 --- a/static/styles/_quitGame.scss +++ b/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); diff --git a/static/styles/_timerText.scss b/static/styles/_timerText.scss index 6919f2e1..de9dd50b 100644 --- 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 index 902e66f5..ea7f2743 100644 --- 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 index 93d35567..1f306b2b 100644 --- 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%; + 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;