MNG-36 MNG-31 Design and style leaderboard modal (#26)

lukaszdutka · Jan 9, 2021 · d345f47 · d345f47
1 parent 77265cc
commit d345f47
Show file tree

Hide file tree

Showing 4 changed files with 180 additions and 26 deletions.
diff --git a/index.html b/index.html
@@ -63,9 +63,9 @@
 
         <div class='popUpScreen' id='helpScreen'>
 
-            <div class='popUpTitleArea'>
-            <h1 class='popUpTitle'>HELP</h1>
-            <p class='exitPopUpScreen'>&#10005;</p>
+            <div class='popUpTitleArea' id='popUpTitleAreaHelp'>
+                <h1 class='popUpTitle' id='popUpTitleHelp'>HELP</h1>
+                <p class='exitPopUpScreen' id='exitPopUpScreenHelp'>&#10005;</p>
             </div>
 
             <ul class='mainHelpTextSection'>
@@ -82,6 +82,38 @@ <h1 class='popUpTitle'>HELP</h1>
 
     </template>
 
+    <template id="leaderboard-modal-template">
+
+        <div class='popUpScreen' id='leaderboardScreen'>
+
+            <div class='popUpTitleArea' id='popUpTitleAreaLeaderBoard'>
+
+                <h1 class='popUpTitle' id='popUpTitleLeaderboard'>LEADERBOARD</h1>
+                <p class='exitPopUpScreen' id='exitPopUpScreenLeaderboard'>&#10005;</p>
+
+            </div>
+
+            <div id='chooseModeLeaderboardArea'>
+
+                <label id='chooseModeLeaderboardLabel' for='chooseModeLeaderboard'>Points per game in</label>
+                <select id='chooseModeLeaderboard'>
+                    <option value='whoIsThatPokemon'>Who's that pokemon?</option>
+                    <option value='whatItLooksLike'>What it looks like?</option>
+                    <option value='guessTheType'>Guess the type!</option>
+                </select>
+
+            </div>
+
+            <ul id='leaderboardResults'>
+                <li class='leaderboardItem'id='leaderFirstPlace'><img src='./static/assets/ui/hall-of-fame/gold.png' /><span class='leaderboardPlayerName'>Andrzej</span><span class='leaderboardPoints'>20</span></li>
+                <li class='leaderboardItem'id='leaderboardSecondPlace'><img src='./static/assets/ui/hall-of-fame/silver.png' /><span class='leaderboardPlayerName'>Władek</span><span class='leaderboardPoints'>15</span></li>
+                <li class='leaderboardItem' id='leaderboardThirdPlace'><img src='./static/assets/ui/hall-of-fame/bronze.png' /><span class='leaderboardPlayerName'>Ania</span><span class='leaderboardPoints'>10</span></li>
+            </ul>
+
+        </div>
+
+    </template>
+
     <template id="quiz-template">
         <div class="quiz-top-bar progress-bar">
             <div id="timer"></div>

diff --git a/src/app/App.js b/src/app/App.js
@@ -11,8 +11,9 @@ export const App = ({options}) => {
 
    //add event listener to the help button 
    document.querySelector('#helpOption').addEventListener('click', () => {
-      showAPopUpScreen(document.querySelector('#helpScreen'))
+      showAPopUpScreen(document.querySelector('#helpScreen'));
    });
+
    //add event listener to the select mode menu button 
    const help=document.querySelector('#helpScreen')
    const style = getComputedStyle(help);
@@ -30,10 +31,13 @@ export const App = ({options}) => {
       if(style.display=='none'||help.style.display == 'none')
          console.log("Guess the type!");
    });
+
    //ad event listener to the leaderboard button
    document.querySelector('#leaderboard').addEventListener('click',()=>{
-      if(style.display=='none'||help.style.display == 'none')
+      if(style.display=='none'||help.style.display == 'none') {
          console.log("Hall of Fame");
+         showAPopUpScreen(document.querySelector('#leaderboardScreen'))
+      }  
    });
 
    // start the game

diff --git a/src/app/showStartingPage.js b/src/app/showStartingPage.js
@@ -1,3 +1,4 @@
+import { doc } from "prettier";
 import { START_PAGE_STYLES } from "./appSettings.js"
 
 export const showStartingPage = () => {
@@ -12,4 +13,8 @@ export const showStartingPage = () => {
     const helpScreenTemplate = document.querySelector('#help-modal-template'); 
     appScreen.innerHTML += helpScreenTemplate.innerHTML;
 
+    // add leaderboard modal
+    const leaderboardTemplate = document.querySelector('#leaderboard-modal-template');
+    appScreen.innerHTML += leaderboardTemplate.innerHTML;
+
 }
diff --git a/styles/App.css b/styles/App.css
@@ -166,18 +166,10 @@ ul.bottomOfThePageOptions li {
 }
 
 .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;
@@ -186,19 +178,6 @@ ul.bottomOfThePageOptions li {
     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;
@@ -223,6 +202,127 @@ ul.bottomOfThePageOptions li {
     min-height: 100%;
 }
 
+/* help modal */
+
+#exitPopUpScreenHelp {
+    color: red;
+}
+
+.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;
+}
+
+
+#popUpTitleHelp {
+    background-color: #FFCB05;
+    color: black;
+    border: 2px solid black;
+    width: 50%;
+    font-size: 8vh;
+    margin: auto;
+    height: 15%;
+}
+
+/* leaderboard modal */
+
+#leaderboardScreen {
+    background-image: url(../static/assets/ui/hall-of-fame/background.png);
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: cover;
+}
+
+#popUpTitleAreaLeaderBoard {
+    height: 18%;
+    display: grid;
+    align-items: end;
+    justify-items: center;
+}
+
+#popUpTitleLeaderboard{
+    color: white;
+    width: 90%;
+    font-size: 7.2vh;   
+}
+
+#exitPopUpScreenLeaderboard {
+    color: white;
+}
+
+#chooseModeLeaderboardArea {
+    height: 7%;
+    display: grid;
+    grid-template-columns: auto auto;
+    align-items: center;
+}
+
+#chooseModeLeaderboardLabel {
+    color: white;
+    justify-self: end;
+    padding: 0vh 2vh;
+    font-size: 2.8vh;
+}
+
+#chooseModeLeaderboard {
+    justify-self: start;
+    padding: 0vh 2vh;
+    color: rgb(121, 121, 241);
+    background: none;
+    border: none;
+    font-size: 2.8vh;
+}
+
+#chooseModeLeaderboard option {
+    color:rgb(121, 121, 241);
+    font-size: 2.8vh;
+    background-color: black;
+}
+
+#leaderboardResults {
+    height: 75%;
+    text-align: center;
+    list-style-type: none;
+    display: grid;
+    justify-items: center;
+    align-items: center;
+    align-content: center;
+}
+
+.leaderboardItem {
+    background-color: rgb(68, 66, 66);
+    opacity: 80%;
+    height: 8vh;
+    width: 55%;
+    display: flex;
+    align-items: center;
+    margin: 3.5vh;
+}
+
+.leaderboardItem span {
+    flex: 1 1 100px;
+    color: white;
+    font-size: 3vh;
+
+}
+
+.leaderboardItem img {
+    height: 80%;
+    flex: 0 0 auto;
+}
+
+#leaderFirstPlace{
+    width: 70%;
+}
+
 @media(max-width:850px){
     #pikachuImg{
         justify-self: center;
@@ -231,6 +331,19 @@ ul.bottomOfThePageOptions li {
         width: 80vw;
         margin-left:-40vw;
     }
+    #popUpTitleLeaderboard{
+        font-size: 5.5vh;   
+    }
+    #chooseModeLeaderboardArea {
+        grid-template-columns: 1fr;
+    }
+    #chooseModeLeaderboardLabel {
+        justify-self: center;
+    }
+
+    #chooseModeLeaderboard {
+        justify-self: center;
+    }
 }
 
 @media(orientation:portrait) {