Refine styling, add local storage saving

cassidoo · Dec 29, 2018 · ba26397 · ba26397
1 parent 230ed7b
commit ba26397
Show file tree

Hide file tree

Showing 3 changed files with 72 additions and 27 deletions.
diff --git a/game.js b/game.js
@@ -74,10 +74,14 @@ function win() {
   let win = `<div class="win"><div>`
           + `<h1>You win!</h1>`
           + `<div class="result">It took you ${clicks} clicks!</div>`
-          + `<a href="https://twitter.com/intent/tweet?text=${tweetString}&url=${website}&via=cassidoo" class="twitter-button"><img src="twitter.svg" />Tweet #FlapjackFlip</a>`
+          + `<a href="https://twitter.com/intent/tweet?text=${tweetString}&url=${website}&via=cassidoo" class="twitter-button"><img src="twitter.svg" />Tweet #FlapjackFwop</a>`
           + `</div></div>`;
   win = htmlToElement(win);
   document.getElementById('board').appendChild(win);
+
+  if (localStorage.getItem('ffbestscore') === null || clicks < localStorage.getItem('ffbestscore')) {
+    localStorage.setItem('ffbestscore', clicks);
+  }
 }
 
 function checkWin() {

diff --git a/index.html b/index.html
@@ -28,8 +28,12 @@
       </div>
     </div>
     <div class="score">
-      <span id="clicks">0</span>
-      Clicks
+      <div class="scored">
+        <span id="clicks">0</span>
+        Clicks
+      </div>
+      <div class="line hide"></div>
+      <div class="best scored hide">Best Score <span id="best"></span></div>
     </div>
     <div class="board" id="board">
     </div>
@@ -50,6 +54,12 @@
             audio = true;
           }
         });
+        if (localStorage.getItem('ffbestscore') !== null) {
+          Array.from(document.getElementsByClassName('hide')).forEach((e) => {
+            e.classList.remove('hide');
+          });
+          document.getElementById('best').innerHTML = localStorage.getItem('ffbestscore');
+        }
       })();
     </script>
     <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

diff --git a/main.css b/main.css
@@ -70,17 +70,27 @@ body {
   position: absolute;
   top: 40px;
   right: 40px;
-  padding: 20px;
+  padding: 0 20px 20px;
   background: #211931;
   border-radius: 20px;
   font-size: 2em;
   text-align: center;
 }
 
-.score span {
+.score #clicks {
   display: block;
   font-size: 2em;
-  line-height: .8em;
+}
+
+.score .scored {
+  font-size: .8em;
+}
+
+.score .line {
+  width: 100%;
+  height: 5px;
+  margin: 5px 0;
+  background: linear-gradient(to right, #f88f83 0%, #f56fe5 100%);
 }
 
 .volume {
@@ -201,6 +211,10 @@ body {
   animation: .5s butterdrop;
 }
 
+.hide {
+  display: none !important;
+}
+
 @keyframes butterdrop {
   0% {
     top: 0;
@@ -251,6 +265,30 @@ body {
   .banner {
     margin: 60px auto 20px;
   }
+  .score {
+    position: relative;
+    top: auto;
+    right: auto;
+    margin: 35px auto 10px;
+    padding: 20px;
+    width: 80%;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-around;
+  }
+  .score #clicks, .score #best {
+    display: inline;
+    font-size: 1.5em;
+  }
+  .score .line {
+    display: inline-block;
+    content: '';
+    width: 4px;
+    height: 50px;
+    margin: 0 5px;
+    background: linear-gradient(to bottom, #f88f83 0%, #f56fe5 100%);
+  }
   .board {
     grid-column-gap: 20px;
     grid-row-gap: 25px;
@@ -264,24 +302,28 @@ body {
 }
 
 @media (max-width: 800px) {
-  .score {
-    position: relative;
-    top: auto;
-    right: auto;
-    margin: 35px auto 10px;
-    width: 80%;
-  }
-  .score span {
-    display: inline;
-  }
   .board {
     width: 460px;
     box-shadow: 0 5px 0 10px #211931;
   }
+  .score {
+    padding: 10px;
+  }
   .fj {
     width: 60px;
     height: 36px;
   }
+  .volume {
+    position: absolute;
+    bottom: auto;
+    right: auto;
+    top: 5px;
+    left: 5px;
+    width: 60px;
+  }
+  .volume img {
+    width: 100%;
+  }
 }
 
 @media (max-width: 500px) {
@@ -309,15 +351,4 @@ body {
   .fj {
     width: 50px;
   }
-  .volume {
-    position: absolute;
-    bottom: auto;
-    right: auto;
-    top: 5px;
-    left: 5px;
-    width: 60px;
-  }
-  .volume img {
-    width: 100%;
-  }
 }