MNG-16 Add a help screen, style it (has to be polished, the scrollbar…

… is not… (#16) * Add a help screen, style it (has to be polished, the scrollbar is not styled). Add help screen HTML the the page, add an event listener for the help screen and a reusable function showAPopUpScreen (can be used to display hall of fame) * Remove event listener from the exit button every time it is clicked, correct spelling mistakes
lukaszdutka · Jan 5, 2021 · e5d2ea6 · e5d2ea6
1 parent 53f8e96
commit e5d2ea6
Show file tree

Hide file tree

Showing 5 changed files with 143 additions and 12 deletions.
diff --git a/src/app/App.js b/src/app/App.js
@@ -1,8 +1,17 @@
 import { doc } from "prettier";
-import { showStartingPage } from './showStartingPage.js'
+import { showStartingPage } from './showStartingPage.js';
+import { showAPopUpScreen } from './showAPopUpScreen';
+import { addHelpScreenTemplate } from "./addHelpScreenTemplate.js";
 
 export const App = ({options}) => { 
+
    showStartingPage();
+   addHelpScreenTemplate();
+
+   //add event listener to the help button 
+   document.querySelector('#helpOption').addEventListener('click', () => {
+      showAPopUpScreen(document.querySelector('#helpScreen'))
+   });
 }
 
 
diff --git a/src/app/addHelpScreenTemplate.js b/src/app/addHelpScreenTemplate.js
@@ -0,0 +1,19 @@
+export const addHelpScreenTemplate = () => {
+    const appScreen = document.querySelector('#pokequiz-app');
+    const helpScreenTemplate = 
+   `<div class='popUpScreen' id='helpScreen'>
+        <div class='popUpTitleArea'>
+        <h1 class='popUpTitle'>HELP</h1>
+        <p class='exitPopUpScreen'>&#10005;</p>
+        </div>
+        <ul class='mainHelpTextSection'>
+            <li><span class='helpTitle'>Who's that pokemon?</span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum lacinia, arcu vel accumsan rhoncus, sapien dolor commodo purus, gravida rhoncus massa leo eu quam. Etiam pulvinar bibendum gravida. Aliquam eu augue arcu. Sed lacus dui, tempus sed libero non, posuere mattis ex. Suspendisse dictum metus et laoreet ultricies. Praesent ac pharetra risus. Maecenas risus diam, eleifend non dolor id, tristique facilisis urna.</li>
+            <li><span class='helpTitle'>What it looks like?</span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum lacinia, arcu vel accumsan rhoncus, sapien dolor commodo purus, gravida rhoncus massa leo eu quam. Etiam pulvinar bibendum gravida. Aliquam eu augue arcu. Sed lacus dui, tempus sed libero non, posuere mattis ex. Suspendisse dictum metus et laoreet ultricies. Praesent ac pharetra risus. Maecenas risus diam, eleifend non dolor id, tristique facilisis urna.</li>
+            <li><span class='helpTitle'>Guess the type!</span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum lacinia, arcu vel accumsan rhoncus, sapien dolor commodo purus, gravida rhoncus massa leo eu quam. Etiam pulvinar bibendum gravida. Aliquam eu augue arcu. Sed lacus dui, tempus sed libero non, posuere mattis ex. Suspendisse dictum metus et laoreet ultricies. Praesent ac pharetra risus. Maecenas risus diam, eleifend non dolor id, tristique facilisis urna.</li>
+        </ul>
+        <div class='popUpImgArea'>
+            <img src='../static/assets/ui/pikachu2.png' alt='Pikachu' id='littlePikachu' class='popUpImg'/>
+        </div>
+    </div>`
+    appScreen.innerHTML += helpScreenTemplate;
+}
diff --git a/src/app/showAPopUpScreen.js b/src/app/showAPopUpScreen.js
@@ -0,0 +1,17 @@
+export const showAPopUpScreen = (screenToDisplay) => {
+   // display the help screen
+    screenToDisplay.style.display = 'initial';
+    // add blur to the rest of the page
+    document.querySelectorAll('.disableWithPopUpScreen').forEach(e => e.style.filter = 'blur(4px)');
+   // function which gets called when the exit button is clicked
+    const exitPopUpFunction = () => {
+              //hide the screen
+              screenToDisplay.style.display = 'none';
+              // remove the blur
+              document.querySelectorAll('.disableWithPopUpScreen').forEach(e => e.style.filter = 'blur(0)');
+              // remove the event listener
+              screenToDisplay.querySelector('.exitPopUpScreen').removeEventListener('click', exitPopUpFunction);
+    };
+        // add event listener to the exit button;
+    screenToDisplay.querySelector('.exitPopUpScreen').addEventListener('click', exitPopUpFunction);
+ };
diff --git a/src/app/showStartingPage.js b/src/app/showStartingPage.js
@@ -1,34 +1,35 @@
 export const showStartingPage = () => {
     const appScreen = document.querySelector('#pokequiz-app');
     const startingPageTemplate = 
-    `<div id="headerWithLogo" class="firstColumn spanInPortrait">
+    `<div id="headerWithLogo" class="firstColumn spanInPortrait disableWithPopUpScreen">
         <img src="./static/assets/ui/logo.png" alt='Pokemon' id='pokemonLogo'/>
         <p id='quizLogo' class='fancyFontStyle'>Quiz</p>
     </div>
 
-        <ul id="selectModeMenu" class="firstColumn spanInPortrait">
-            <li id='whoIsThatPokemonOption' class="buttonWithText">Who's that pokemon?</li>
-            <li id='whatItLooksLikeOption' class="buttonWithText">What it looks like?</li>
-            <li id='guessTheTypeOption' class="buttonWithText">Guess the type!</li>
-        </ul>
+    <ul id="selectModeMenu" class="firstColumn spanInPortrait disableWithPopUpScreen">
+        <li id='whoIsThatPokemonOption' class="buttonWithText">Who's that pokemon?</li>
+        <li id='whatItLooksLikeOption' class="buttonWithText">What it looks like?</li>
+        <li id='guessTheTypeOption' class="buttonWithText">Guess the type!</li>
+    </ul>
 
-    <div id='enterNameAndPlayMenu' class="secondColumn spanInPortrait">
+    <div id='enterNameAndPlayMenu' class="secondColumn spanInPortrait disableWithPopUpScreen">
         <p id='enterYourName' class='fancyFontStyle'>ENTER YOUR NAME</p>
         <div id='enterYourNameArea'>
             <img src='https://cdn4.iconfinder.com/data/icons/small-n-flat/24/user-alt-512.png' alt='playerIcon' id='playerIcon'/>
             <input type='text' id='enterYourNameInput'>
         </div>
     </div>
 
-    <div id='startGame' class="secondColumn spanInPortrait">
+    <div id='startGame' class="secondColumn spanInPortrait disableWithPopUpScreen">
         <input type='button' id='startGameButton' class="buttonWithText" value='PLAY'>
     </div>
 
-    <ul class='bottomOfThePageOptions firstColumn'>
+    <ul class='bottomOfThePageOptions firstColumn disableWithPopUpScreen'>
         <li id='helpOption'>?</li>
         <li id='leaderboard'><i class="fa fa-trophy"></i></li>
     </ul>
 
-    <img src='./static/assets/ui/pikach1.png' alt='Pikachu' id='pikachuImg' class="secondColumn"/>`
+    <img src='./static/assets/ui/pikach1.png' alt='Pikachu' id='pikachuImg' class="secondColumn disableWithPopUpScreen"/>
+    `
     appScreen.innerHTML = startingPageTemplate;
 }
diff --git a/styles/App.css b/styles/App.css
@@ -14,6 +14,7 @@
     font-weight: 600;
     color: #FFCB05;
 }
+
 body {
     max-height: 100vh;
     padding: 1.5vh 5vw ;
@@ -30,6 +31,7 @@ body {
     display: grid;
     grid-template-columns: 50% 50%;
     grid-template-rows: 1fr 25vh 10vh 28vh;
+    border: 1px solid black;
 }
 
 .firstColumn{
@@ -126,6 +128,7 @@ ul.bottomOfThePageOptions li{
     text-align: center;
     line-height: 8.5vh;
     font-weight: 900;
+    cursor: pointer;
 }
 
 /* pikachu */
@@ -136,10 +139,92 @@ ul.bottomOfThePageOptions li{
     height: 100%;
 }
 
+/* hidden screens */
+
+.popUpScreen {
+    display: none;
+    width: 50vw;
+    height: 80vh;
+    position: absolute;
+    left: 50%;
+    bottom: 50%;
+    margin-left: -25vw;
+    margin-bottom: -40vh;
+    justify-items: center;
+    background-color: lightgray;
+    border-radius: 5%;
+}
+
+.popUpTitleArea {
+    width: 100%;
+}
+
+.popUpTitle {
+    width: 50%;
+    margin: auto;
+    background-color: #FFCB05;
+    color: black;
+    font-size: 8vh;
+    height: 15%;
+    text-align: center;
+    border: 2px solid black;
+}
+
+.exitPopUpScreen {
+    color: red;
+    position: absolute;
+    top: 0.5vh;
+    right: 2vw;
+    font-size: 5vh;
+    font-weight: lighter;
+    cursor: pointer;
+}
+
+.mainHelpTextSection {
+    background-color: white;
+    color: black;
+    font-size: 3vh;
+    height: 70%;
+    width: 85%;
+    margin: auto;
+    overflow-y: scroll;
+    padding: 2vh 2vw;
+    list-style: url(../static/assets/ui/lightning.svg);
+    list-style-position: inside;
+}
+
+.mainHelpTextSection > * {
+    color: black;
+    font-weight: normal;
+    padding: 1vh 0vw;
+}
+
+.helpTitle {
+    color: black;
+    font-weight: 700;
+}
+
+.popUpImgArea {
+    height: 15%;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+}
+
+.popUpImg {
+    padding-top: 1vh;
+    max-height: 100%;
+    min-height: 100%;
+}
+
 @media(max-width:850px){
     #pikachuImg{
         justify-self: center;
     }
+    .popUpScreen {
+        width: 80vw;
+        margin-left:-40vw;
+    }
 }
 
 @media(orientation:portrait){
@@ -167,4 +252,4 @@ ul.bottomOfThePageOptions li{
     #pikachuImg{
         justify-self: end;
     }
-}
+}