From 0a14d2703f55c127e2bcaf43d090361286d17975 Mon Sep 17 00:00:00 2001 From: KatarzynaChmielecka Date: Sun, 2 Jan 2022 11:06:48 +0100 Subject: [PATCH 1/6] Add favicon, change class name of timer-text wrapper, first attempt to style timers, improve display images --- index.html | 4 ++-- src/app/view/components/wand.js | 2 +- src/app/view/view.js | 2 +- static/assets/img/lightning.png | Bin 0 -> 2365 bytes static/styles/_timerText.scss | 13 ++++++++++--- static/styles/_wand.scss | 21 ++++++++++++++++----- static/styles/index.scss | 5 +++-- 7 files changed, 33 insertions(+), 14 deletions(-) create mode 100644 static/assets/img/lightning.png diff --git a/index.html b/index.html index 4bf096b7..92292940 100644 --- a/index.html +++ b/index.html @@ -6,6 +6,7 @@ CodersCamp2021 | Harry potter API QUIZ + @@ -34,14 +35,13 @@
-
+ - \ No newline at end of file diff --git a/src/app/view/components/wand.js b/src/app/view/components/wand.js index 0ae03e16..76edb08b 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 1ea95c95..b16c96d0 100644 --- a/src/app/view/view.js +++ b/src/app/view/view.js @@ -97,7 +97,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 0000000000000000000000000000000000000000..e82cd51cd9603e7fabdf9b19707fe88156e03546 GIT binary patch literal 2365 zcmW+&c|4SD7aq@;X%-U^W2+1$VJ4ELX|juCnKH=|O&H#C6Zmg-z6i-2UYY=i@UbA@`U&P8Lz(scG&|1D9Q{j?vNn zx@;(>RN##IhLPgT99CAi!P+0VM`u5n#(qW9=qlKc|DKqV;yrW?u1$9jyR>K+_Z4-% zqe!w0%bZzVGyDri;lOBY#g~@Iz(KvbtYq=d#mu0_H7;eZ5xF8Gu-uiX~8(ux{rM_yS{x?;b7w%QK{=b%!3V zM`C$~%&ER%iL2l!uiufIC2pY{UO&hkRAUj1tn?QqUkK07H$L$4q9NV!p3ATOd)jS$ zm@TP$Tv^y*l+Ir$4{K`p4Ak{5y`0(7i&HglX=fhIPu;ScRr3a=^U>I>b24{j_7Po} z#LVd%7E!M6jEZ|7#Czt#%6^N|8HEhh1;?4hi1^mtmWt+J^~%Zx;YwH&7!=}0 zk^5N3=^X^=0bX>MA$i(|Gcce`8CxerkH<~r8i=ael213Lo)J)wx>=Bwzt-6Luu%~9 zM(m~FoqBg~(QlvWLMa{VT^n}obkCQkw9PFK67DAKtip?Z*rUo3qRKVzBYcArcGb#8 z9Jw~JqKhwQ-Ii9#*oT-t=HR;dECfjpE1!OO$+>zV-p17mK?Xh=kuzp5z zryJgfiaVZJ+xkpU5{B%v#TbdOcv@9OVgl~*J^6KV(mf9_80_EHH!v1j+YHD~#17~= z>Tx{tu2|z{sv$MJ_8&_OMvfYw_?>hX|3k%Jh@{K-2LKtzEc9=M_faA*h0htDx{dt> zw$$G_IDTt91nn`n>U@oPTh&)o<>_e)z43i`%Rc}4p@)dht15NPpDzOD%hI#Deh#hp zAaV=TS^AQzS*Vh=%D2avWl>47p9^`K9cH?o0fc@ma}QjWQ>0eZ%V~QbC^jkuB@#Ia zQ!`jhS~;#ZNKOHmpWSQ$Ib4U-S7bMSf90>`Wwd@%JrMK5?BJU23IDd&d~PndLg9koRm6lcp>%&<^L^Z=!iW*L>RG-EJyr+&L` z&(yTEaNS!>G+{}_L%%!D^AtbK>w}gAD<>4tOd^vM24~h@>GXp6p=Iy_WSR^aFW@<8 z*~cgOf>gq-0QQTrHz;4|lp`v5k#vGCgPL)sX9#Awfh@d<0v;7H_)sReUj^&>LSen8 z#(8@ILPueTRy+k%CqnU4h;#=if8HUdS>!5Y54k#y=ZT6oo7>VV*055?G!YWj7#jvl z#d_v`7|plv)j@y9GdS#{>**rPxkG7TMBp8OH{Y9mmzkd0q(u8(_9lH25^bLw0kI0a z=1X|%ZH`CfFH=B|LBQ z>Nrvuo)9YKh6~91P)aAHLk_XQb`bU?ofh&6)tYsJ?s zJYxi~_RbaR(%(HkA5|2Rqu5}NL)tB_f0K`;=%w>|EP*02081qGBU%=$D zb1TJ*`AAV+1=M9|<>s>STR;eh>s9bvg_%~z`M9j((*OT8!`>8W_a6{sLKQODTe2-? zjfcH1vSGZRxA-&YF(I&w}kWF)ZKFQYSWwYdm3IglK)bSl?G$W6Tm1rdY+Zqwh=w!2%PgLfu+ z^TSfyOnM)~k^LIj+9Z-%@9|Z^{RLn1u#+LuP1Wm_hqdqZz~28lTWZ8Wi< Date: Sun, 2 Jan 2022 11:57:18 +0100 Subject: [PATCH 2/6] Change wand image, color of text timer for last 20s --- src/app/view/components/displayTimerText.js | 2 +- static/assets/img/wand.png | Bin 12592 -> 8202 bytes 2 files changed, 1 insertion(+), 1 deletion(-) 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/static/assets/img/wand.png b/static/assets/img/wand.png index ab5042b34fef079bfd24cb81723bb227d5b6f343..af26ae782b9104eb187718b31ee42d861cdbe9da 100644 GIT binary patch literal 8202 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 literal 12592 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 S^({jH0000 Date: Sun, 2 Jan 2022 21:56:21 +0100 Subject: [PATCH 3/6] Change grid-template-rows --- static/styles/index.scss | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/static/styles/index.scss b/static/styles/index.scss index 36928fe4..38f61522 100644 --- a/static/styles/index.scss +++ b/static/styles/index.scss @@ -15,7 +15,7 @@ height: 100vh; display: grid; grid-template-columns: 1fr 2fr; - grid-template-rows: 2fr 50% 1fr; + grid-template-rows: 1fr 60% 1fr; padding: 0 50px 0 0; .header { @@ -69,8 +69,9 @@ 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: 16px; + border-radius: $default-radius; object-fit: fill; + } } } From 16587da9cb15791ebdb3af74f7c2c79710dcea10 Mon Sep 17 00:00:00 2001 From: Tomasz Date: Mon, 3 Jan 2022 19:44:03 +0100 Subject: [PATCH 4/6] #135/UI/ Fix Position and other styles --- static/styles/_quitGame.scss | 2 +- static/styles/_timerText.scss | 2 -- static/styles/index.scss | 14 +++++++++----- 3 files changed, 10 insertions(+), 8 deletions(-) diff --git a/static/styles/_quitGame.scss b/static/styles/_quitGame.scss index 7eaa453d..df98a04f 100644 --- a/static/styles/_quitGame.scss +++ b/static/styles/_quitGame.scss @@ -4,7 +4,7 @@ cursor: pointer; 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 3d1a527e..de9dd50b 100644 --- a/static/styles/_timerText.scss +++ b/static/styles/_timerText.scss @@ -8,7 +8,5 @@ font-weight: 800; line-height: 50px; letter-spacing: 3px; - position: absolute; - bottom: 0; } } diff --git a/static/styles/index.scss b/static/styles/index.scss index 68d547eb..0fcddeee 100644 --- a/static/styles/index.scss +++ b/static/styles/index.scss @@ -9,14 +9,18 @@ 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: 1600px; display: grid; grid-template-columns: 1fr 2fr; - grid-template-rows: 1fr 60% 1fr; - padding: 0 50px 0 0; + grid-template-rows: 1fr 4fr 1fr; + margin: 0 auto; .header { grid-column: 1/3; @@ -24,6 +28,7 @@ display: flex; justify-content: space-around; align-items: center; + padding: 20px 0; &__game { &-logo { @@ -71,7 +76,6 @@ filter: drop-shadow(13px 17px 11px rgba(0, 0, 0, 0.5)); border-radius: $default-radius; object-fit: fill; - } } } From a780bc274d5359215eb63e72fb1c84bfb76482c7 Mon Sep 17 00:00:00 2001 From: Tomasz Date: Mon, 3 Jan 2022 23:24:38 +0100 Subject: [PATCH 5/6] #135/1/ Many new Style FIxes --- static/styles/_defaultButton.scss | 5 ++--- static/styles/index.scss | 15 ++++++++------- 2 files changed, 10 insertions(+), 10 deletions(-) diff --git a/static/styles/_defaultButton.scss b/static/styles/_defaultButton.scss index f052c3ad..dd5d9f8b 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; &::before { content: ''; @@ -58,11 +58,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/index.scss b/static/styles/index.scss index 0fcddeee..23ef5c23 100644 --- a/static/styles/index.scss +++ b/static/styles/index.scss @@ -16,7 +16,7 @@ body { .game-wrapper { height: 100vh; - width: 1600px; + width: 1400px; display: grid; grid-template-columns: 1fr 2fr; grid-template-rows: 1fr 4fr 1fr; @@ -26,7 +26,7 @@ body { grid-column: 1/3; grid-row: 1/2; display: flex; - justify-content: space-around; + justify-content: space-between; align-items: center; padding: 20px 0; @@ -44,7 +44,9 @@ body { } &-nav { - width: 60%; + display: flex; + justify-content: space-between; + width: 67%; height: 70%; } } @@ -62,12 +64,11 @@ body { grid-row: 2/3; display: flex; justify-content: space-between; - align-items: center; flex-direction: column; &__content { - width: 60%; - height: 70%; + width: 70%; + height: calc(100% - 124px); &-image { width: 100%; @@ -75,7 +76,6 @@ body { border: 12px solid rgba(173, 25, 132, 0.26); filter: drop-shadow(13px 17px 11px rgba(0, 0, 0, 0.5)); border-radius: $default-radius; - object-fit: fill; } } } @@ -172,6 +172,7 @@ body { display: flex; justify-content: space-between; align-items: flex-end; + gap: 24px; } } From 67b8066e407566fa620f51a322871aa03c3e1715 Mon Sep 17 00:00:00 2001 From: Tomasz Date: Tue, 4 Jan 2022 00:34:30 +0100 Subject: [PATCH 6/6] #135/ style fixes --- static/styles/_wand.scss | 9 +-------- static/styles/index.scss | 5 ++--- 2 files changed, 3 insertions(+), 11 deletions(-) diff --git a/static/styles/_wand.scss b/static/styles/_wand.scss index cf488e83..ea7f2743 100644 --- a/static/styles/_wand.scss +++ b/static/styles/_wand.scss @@ -11,20 +11,13 @@ width: 100%; &__wand-wrapper { width: 100%; - // height: fit-content; - // height: 1000px; - // position: relative; display: flex; - justify-content: center; align-items: center; } &__wand { height: 26px; - width: 70%; - // position: absolute; - // left: 227px; - // top: 27px; + width: 90%; background: url('../assets/img/burn.png'); background-size: cover; background-position: -7px; diff --git a/static/styles/index.scss b/static/styles/index.scss index 5d655b82..1f306b2b 100644 --- a/static/styles/index.scss +++ b/static/styles/index.scss @@ -68,11 +68,10 @@ body { flex-direction: column; &__content { - width: 70%; - height: calc(100% - 124px); + width: 250px; &-image { - width: 100%; + 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));