Merge pull request #1 from gocivici/result-image

Result image

autoComplete.css

@@ -0,0 +1,129 @@
+.autoComplete_wrapper {
+  display: inline-block;
+  position: relative;
+  width: 100%;
+}
+
+.autoComplete_wrapper > input {
+  height: 40px;
+  width: 100%;
+  margin: 0;
+  padding: 0 2rem 0 3rem;
+  box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  font-size: 1rem;
+  text-overflow: ellipsis;
+  color: black;
+  outline: none;
+  /* border-radius: 10rem; */
+  /* border: 0.05rem solid rgba(255, 0, 9, 0.5); */
+  background-image: url(./images/search.svg);
+  background-size: 1.4rem;
+  background-position: left 0.8rem top 0.5rem;
+  background-repeat: no-repeat;
+  background-origin: border-box;
+  background-color: #fff;
+  transition: all 0.4s ease;
+  -webkit-transition: all -webkit-transform 0.4s ease;
+}
+
+.autoComplete_wrapper > input::placeholder {
+  color: grey;
+  transition: all 0.3s ease;
+  -webkit-transition: all -webkit-transform 0.3s ease;
+}
+
+.autoComplete_wrapper > input:hover::placeholder {
+  color: grey;
+  transition: all 0.3s ease;
+  -webkit-transition: all -webkit-transform 0.3s ease;
+}
+
+.autoComplete_wrapper > input:focus::placeholder {
+  padding: 0.1rem 0.6rem;
+  font-size: 0.95rem;
+  color: rgb(224, 224, 224);
+}
+
+.autoComplete_wrapper > input:focus::selection {
+  background-color: rgba(255, 122, 122, 0.15);
+}
+
+.autoComplete_wrapper > input::selection {
+  background-color: rgba(255, 122, 122, 0.15);
+}
+
+.autoComplete_wrapper > input:hover {
+  color: grey;
+  transition: all 0.3s ease;
+  -webkit-transition: all -webkit-transform 0.3s ease;
+}
+
+.autoComplete_wrapper > input:focus {
+  color: grey;
+  border: 0.06rem solid grey;
+}
+
+.autoComplete_wrapper > ul {
+  position: absolute;
+  max-height: 226px;
+  overflow-y: scroll;
+  box-sizing: border-box;
+  left: 0;
+  right: 0;
+  margin: 0.5rem 0 0 0;
+  padding: 0;
+  z-index: 1;
+  list-style: none;
+  border-radius: 0.6rem;
+  background-color: #fff;
+  border: 1px solid rgba(33, 33, 33, 0.07);
+  box-shadow: 0 3px 6px rgba(149, 157, 165, 0.15);
+  outline: none;
+  transition: opacity 0.15s ease-in-out;
+  -moz-transition: opacity 0.15s ease-in-out;
+  -webkit-transition: opacity 0.15s ease-in-out;
+}
+
+.autoComplete_wrapper > ul[hidden],
+.autoComplete_wrapper > ul:empty {
+  display: block;
+  opacity: 0;
+  transform: scale(0);
+}
+
+.autoComplete_wrapper > ul > li {
+  margin: 0.3rem;
+  padding: 0.3rem 0.5rem;
+  text-align: left;
+  font-size: 1rem;
+  color: #212121;
+  border-radius: 0.35rem;
+  background-color: rgba(255, 255, 255, 1);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  transition: all 0.2s ease;
+}
+
+.autoComplete_wrapper > ul > li mark {
+  background-color: transparent;
+  color: #B91C1C;
+  font-weight: bold;
+}
+
+.autoComplete_wrapper > ul > li:hover {
+  cursor: pointer;
+  background-color: rgba(255, 122, 122, 0.15);
+}
+
+.autoComplete_wrapper > ul > li[aria-selected="true"] {
+  background-color: rgba(255, 122, 122, 0.15);
+}
+
+ /* @media only screen and (max-width: 600px) {
+  .autoComplete_wrapper > input {
+    width: 90%;
+  }
+}  */

images/Group.svg

@@ -0,0 +1,8 @@
+<svg width="640" height="220" viewBox="0 0 640 220" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M639.04 12.6266C639.04 6.20996 633.79 0.959961 627.373 0.959961H453.827C447.41 0.959961 442.16 6.20996 442.16 12.6266V208.04C442.16 214.457 447.41 219.707 453.827 219.707H627.373C633.79 219.707 639.04 214.457 639.04 208.04V12.6266ZM465.493 24.2933H615.707V196.373H465.493V24.2933Z" fill="white"/>
+<path d="M418.84 12.6266C418.84 6.20996 413.59 0.959961 407.173 0.959961H233.627C227.21 0.959961 221.96 6.20996 221.96 12.6266V208.04C221.96 214.457 227.21 219.707 233.627 219.707H407.173C413.59 219.707 418.84 214.457 418.84 208.04V12.6266ZM394.048 196.373H245.301V24.2933H394.048V196.373Z" fill="white"/>
+<path d="M197.16 12.6266C197.16 6.20996 191.91 0.959961 185.493 0.959961H11.9467C5.53003 0.959961 0.280029 6.20996 0.280029 12.6266V208.04C0.280029 214.457 5.53003 219.707 11.9467 219.707H185.493C191.91 219.707 197.16 214.457 197.16 208.04V12.6266ZM23.6134 24.2933H173.827V196.373H23.6134V24.2933Z" fill="white"/>
+<path d="M113.676 61V165H91.6875V81.8711H91.0781L67.2617 96.8008V77.3008L93.0078 61H113.676Z" fill="white"/>
+<path d="M281.43 165V149.156L318.449 114.879C321.598 111.832 324.238 109.09 326.371 106.652C328.538 104.215 330.18 101.828 331.297 99.4922C332.414 97.1224 332.973 94.5664 332.973 91.8242C332.973 88.7773 332.279 86.1536 330.891 83.9531C329.503 81.7187 327.607 80.0091 325.203 78.8242C322.799 77.6055 320.074 76.9961 317.027 76.9961C313.845 76.9961 311.069 77.6393 308.699 78.9258C306.329 80.2122 304.501 82.0573 303.215 84.4609C301.928 86.8646 301.285 89.7253 301.285 93.043H280.414C280.414 86.2383 281.954 80.3307 285.035 75.3203C288.116 70.3099 292.432 66.4336 297.984 63.6914C303.536 60.9492 309.935 59.5781 317.18 59.5781C324.628 59.5781 331.111 60.8984 336.629 63.5391C342.181 66.1458 346.497 69.7682 349.578 74.4062C352.659 79.0443 354.199 84.3594 354.199 90.3516C354.199 94.2786 353.421 98.1549 351.863 101.98C350.34 105.806 347.615 110.055 343.688 114.727C339.76 119.365 334.225 124.934 327.082 131.434L311.898 146.312V147.023H355.57V165H281.43Z" fill="white"/>
+<path d="M540.871 166.422C533.288 166.422 526.534 165.118 520.609 162.512C514.719 159.871 510.064 156.249 506.645 151.645C503.259 147.007 501.516 141.658 501.414 135.598H523.555C523.69 138.137 524.52 140.371 526.043 142.301C527.6 144.197 529.665 145.669 532.238 146.719C534.811 147.768 537.706 148.293 540.922 148.293C544.273 148.293 547.236 147.701 549.809 146.516C552.382 145.331 554.396 143.689 555.852 141.59C557.307 139.491 558.035 137.07 558.035 134.328C558.035 131.552 557.257 129.098 555.699 126.965C554.176 124.798 551.975 123.105 549.098 121.887C546.254 120.668 542.868 120.059 538.941 120.059H529.242V103.91H538.941C542.259 103.91 545.188 103.335 547.727 102.184C550.299 101.033 552.297 99.4414 553.719 97.4102C555.141 95.3451 555.852 92.9414 555.852 90.1992C555.852 87.5924 555.225 85.3073 553.973 83.3437C552.754 81.3464 551.027 79.7891 548.793 78.6719C546.592 77.5547 544.02 76.9961 541.074 76.9961C538.095 76.9961 535.37 77.5378 532.898 78.6211C530.427 79.6706 528.447 81.1771 526.957 83.1406C525.467 85.1042 524.672 87.4062 524.57 90.0469H503.496C503.598 84.0547 505.307 78.7734 508.625 74.2031C511.943 69.6328 516.411 66.0612 522.031 63.4883C527.685 60.8815 534.066 59.5781 541.176 59.5781C548.353 59.5781 554.633 60.8815 560.016 63.4883C565.398 66.095 569.579 69.6159 572.559 74.0508C575.572 78.4518 577.061 83.3945 577.027 88.8789C577.061 94.7018 575.25 99.5599 571.594 103.453C567.971 107.346 563.249 109.818 557.426 110.867V111.68C565.077 112.661 570.9 115.319 574.895 119.652C578.923 123.952 580.921 129.335 580.887 135.801C580.921 141.725 579.211 146.99 575.758 151.594C572.339 156.198 567.616 159.82 561.59 162.461C555.564 165.102 548.658 166.422 540.871 166.422Z" fill="white"/>
+</svg>

images/search.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" focusable="false" x="0px" y="0px" width="30" height="30" viewBox="0 0 171 171" style=" fill:#000000;">
+    <g fill="none" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal">
+        <path d="M0,171.99609v-171.99609h171.99609v171.99609z" fill="none"></path>
+        <g fill="grey">
+            <path d="M74.1,17.1c-31.41272,0 -57,25.58728 -57,57c0,31.41272 25.58728,57 57,57c13.6601,0 26.20509,-4.85078 36.03692,-12.90293l34.03301,34.03301c1.42965,1.48907 3.55262,2.08891 5.55014,1.56818c1.99752,-0.52073 3.55746,-2.08067 4.07819,-4.07819c0.52073,-1.99752 -0.0791,-4.12049 -1.56818,-5.55014l-34.03301,-34.03301c8.05215,-9.83182 12.90293,-22.37682 12.90293,-36.03692c0,-31.41272 -25.58728,-57 -57,-57zM74.1,28.5c25.2517,0 45.6,20.3483 45.6,45.6c0,25.2517 -20.3483,45.6 -45.6,45.6c-25.2517,0 -45.6,-20.3483 -45.6,-45.6c0,-25.2517 20.3483,-45.6 45.6,-45.6z"></path>
+        </g>
+    </g>
+</svg>

index.html

@@ -7,13 +7,14 @@
   <link rel="stylesheet" href="style.css">
   <!-- <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> -->
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
+  <link rel="stylesheet" href="autoComplete.css">
   <title> test </title>
 </head>
 <div class="topnav">
   <div class="subnav">
   <div class="topnav-left">
   <a class="wideInfo" href="#info"><i class="fa fa-question"></i></a>
-  <a class="wideInfo" href="#support"><i class="fa fa-heart"></i></a>
+  
   </div>
 
   <img class="title"  width="300" src="title.png" alt="horror">
@@ -23,8 +24,8 @@
   <div class="topnav-right">
     <a class="mobileInfo" href="#info"><i class="fa fa-question"></i></a>
     <a class="mobileInfo" href="#support"><i class="fa fa-heart"></i></a>
+    <a class="wideInfo" href="#support"><i class="fa fa-heart"></i></a>
     <a href="#stats"><i class="fas fa-chart-bar"></i></a>
-    <a href="#archive"><i class="fas fa-history"></i></a>
   </div>
   </div>
 </div>
@@ -38,19 +39,29 @@
   		<div class="content">
   			<i class="far fa-image"></i>
         <div class="InstructionText">
-        <p>Use the death scene provided to guess the name of the movie.</p>
+        <p>Use the movie scene provided to guess the name of the movie.</p>
         </div>
-
-        <i class="fas fa-skull"></i>
-        <div class="InstructionText">
-        <p>If you guess wrong a new death
-         scene from the movie is revealed but you will use 1 point.</p>
-        </div>
-
-      <i class="fas fa-tint"></i>
-      <div class="InstructionText">
-        <p>You have a maximum of 3 guesses to find the movie.</p>
       </div>
+      <div class="content">
+        <i class="fas fa-tint"></i>
+        <div class="InstructionText">
+        <p>If you guess wrong or skip, a new 
+         scene from the movie is revealed. You have a maximum of 3 guesses to find the movie.</p>
+        </div>
+      </div>
+      <div class="content">
+        <img src="images/Group.svg" alt="" class="customIcon">
+      <div class="InstructionText">
+        <p>you can use the buttons below the image to navigate once they are revealed.</p>
+      </div>
+    </div>
+    <div class="content">
+      <i class="fas fa-star"></i>
+      <div class="InstructionText">
+        <p>If you win you'll have the chance to guess which image contains the survivor in the bonus stage.</p>
+      </div>
+      
+    </div>
    </div>
   	</div>
   </div>
@@ -58,14 +69,73 @@
   <div id="stats" class="overlay">
     <div class="popup">
       <h2>Stats</h2>
-      <div>
+      <h3>October 2022</h3>
-        <canvas id="myChart"></canvas>
+      <div class="archive">
-      </div>
+        
-      <a class="close" href="#">&times;</a>
+      <div class="calendar">
-      <h3>Streak</h3>
+        <!-- <div class="calendar__picture">
-      <div id="streakNumber" class="content">
+          <h2>18, Sunday</h2>
-        your stats
+          <h3>November</h3>
+        </div> -->
+        <div class="calendar__date">
+          <div class="calendar__day">M</div>
+          <div class="calendar__day">T</div>
+          <div class="calendar__day">W</div>
+          <div class="calendar__day">T</div>
+          <div class="calendar__day">F</div>
+          <div class="calendar__day">S</div>
+          <div class="calendar__day">S</div>
+          <div class="calendar__number1"></div>
+          <div class="calendar__number1"></div>
+          <div class="calendar__number1"></div>
+          <div class="calendar__number1"></div>
+          <div class="calendar__number1"></div>
+          <div class="calendar__number">1</div>
+          <div class="calendar__number">2</div>
+          <div class="calendar__number">3</div>
+          <div class="calendar__number">4</div>
+          <div class="calendar__number">5</div>
+          <div class="calendar__number">6</div>
+          <div class="calendar__number">7</div>
+          <div class="calendar__number">8</div>
+          <div class="calendar__number">9</div>
+          <div class="calendar__number">10</div>
+          <div class="calendar__number">11</div>
+          <div class="calendar__number">12</div>
+          <div class="calendar__number">13</div>
+          <div class="calendar__number">14</div>
+          <div class="calendar__number">15</div>
+          <div class="calendar__number">16</div>
+          <div class="calendar__number">17</div>
+          <div class="calendar__number">18</div>
+          <div class="calendar__number">19</div>
+          <div class="calendar__number">20</div>
+          <div class="calendar__number">21</div>
+          <div class="calendar__number">22</div>
+          <div class="calendar__number">23</div>
+          <div class="calendar__number">24</div>
+          <div class="calendar__number">25</div>
+          <div class="calendar__number">26</div>
+          <div class="calendar__number">27</div>
+          <div class="calendar__number">28</div>
+          <div class="calendar__number">29</div>
+          <div class="calendar__number">30</div>
+          <div class="calendar__number">31</div>
+        </div>
       </div>
+      
+    </div>
+    <div class="chartNumber">
+      <canvas id="myChart"></canvas>
+    </div>
+    <a class="close" href="#">&times;</a>
+    <h3>Streak</h3>
+    <!-- <div id="streakNumber" class="content">
+      your stats
+    </div> -->
+   
+    <button onclick="window.localStorage.clear();"class="resetButton">Reset Stats</button>
+  
     </div>
   </div>
 
@@ -84,57 +154,7 @@
       <h2>October 2022 Archive</h2>
       <a class="close" href="#">&times;</a>
             <div class="archive">
-      <div class="calendar">
+
-  <!-- <div class="calendar__picture">
-    <h2>18, Sunday</h2>
-    <h3>November</h3>
-  </div> -->
-  <div class="calendar__date">
-    <div class="calendar__day">M</div>
-    <div class="calendar__day">T</div>
-    <div class="calendar__day">W</div>
-    <div class="calendar__day">T</div>
-    <div class="calendar__day">F</div>
-    <div class="calendar__day">S</div>
-    <div class="calendar__day">S</div>
-    <div class="calendar__number1"></div>
-    <div class="calendar__number1"></div>
-    <div class="calendar__number1"></div>
-    <div class="calendar__number1"></div>
-    <div class="calendar__number1"></div>
-    <div class="calendar__number">1</div>
-    <div class="calendar__number">2</div>
-    <div class="calendar__number">3</div>
-    <div class="calendar__number">4</div>
-    <div class="calendar__number">5</div>
-    <div class="calendar__number">6</div>
-    <div class="calendar__number">7</div>
-    <div class="calendar__number">8</div>
-    <div class="calendar__number">9</div>
-    <div class="calendar__number">10</div>
-    <div class="calendar__number">11</div>
-    <div class="calendar__number">12</div>
-    <div class="calendar__number">13</div>
-    <div class="calendar__number">14</div>
-    <div class="calendar__number">15</div>
-    <div class="calendar__number">16</div>
-    <div class="calendar__number">17</div>
-    <div class="calendar__number">18</div>
-    <div class="calendar__number">19</div>
-    <div class="calendar__number">20</div>
-    <div class="calendar__number">21</div>
-    <div class="calendar__number">22</div>
-    <div class="calendar__number">23</div>
-    <div class="calendar__number">24</div>
-    <div class="calendar__number">25</div>
-    <div class="calendar__number">26</div>
-    <div class="calendar__number">27</div>
-    <div class="calendar__number">28</div>
-    <div class="calendar__number">29</div>
-    <div class="calendar__number">30</div>
-    <div class="calendar__number">31</div>
-  </div>
-</div>
 </div>
     </div>
   </div>
@@ -146,33 +166,87 @@
   </div> -->
 
   <!-- <h1>Guess the Movie!</h1> -->
+  
+  <div class="resultContainer">
+    <!--  -->
+    <div class="resultImage">
+      <img src="" id="posterFrame">
+
+    </div>
+    <div class="resultStats">
+      <h1 id="congratz">You got it🎉</h1>
+            <table>
+
+        <tr>
+          <td><b>Streak:</b></td>
+          <td id="streakNumber"></td>
+
+  
+        </tr>
+        <tr>
+          <td><b>Win:</b></td>
+          <td id="winPerc"></td>
+        </tr>
+        <tr>
+          <td><b>Plays:</b></td>
+          <td id="totalPlays"></td>
+        </tr>
+        
+      </table>
+      <!-- <p></p>
+      <br>
+      <p></p>
+      <br> -->
+      <!-- <p>🔪🟩⬛⬛[⭐]</p> -->
+      <!-- <br> -->
+      <div class="result">
+        <div id="resultText"></div>
+        <input onclick="copyToClipboard()" type="button" id="shareResult" value="Share Result">
+      </div>
+    </div>
+  </div>
+
   <figure class="movie-img">
-<img src="" id="movieFrame" alt="movie death frame" class="center">
+<img src="images/back.png" id="movieFrame" alt="movie death frame" class="center" >
+<div class="loading" id="loader"></div>
+
   </figure>
 
 
+  <h1 id="movieName"></h1>
+  <h2 id="bonusQuestion"></h2>
+  
+  <div class="picButtons">
+    <button onclick="showPic(0)" id="button1" class="imageButton">1</button>
+   <button onclick="showPic(1)" id="button2" class="imageButton">2</button>
+   <button onclick="showPic(2)" id="button3" class="imageButton">3</button>
+  </div>
+  <input onclick="submitBonus()" type="button" id="submitBonusGuess" value="Submit">
+  <input onclick="submitBonus(1)" type="button" id="skipBonusGuess" value="Skip">
 
   <form id="guessForm" autocomplete="off">
     <div class="autocomplete">
         <!-- <label for="guess">Movie:</label> -->
-        <input type="text" id="guess" placeholder="Movie">
+        <input class="guess" type="text" id="autoComplete" placeholder="Movie">
-        <input type="button" id="submitGuess" value="Submit Guess">
+        <input type="button" id="submitGuess" value="Skip">
     </div>
     
   </form>
-  <h1 id="movieName"></h1>
+  
   <p id="feedback"></p>
   <h2 id="countDown"></h2>
-  <div class="result">
+  <!-- <div class="result">
     <div id="resultText"></div>
     <input onclick="copyToClipboard()" type="button" id="shareResult" value="Share Result">
-  </div>
+  </div> -->
   <div class="bottomContainer">
   <div id="firstGuess"></div>
   <div id="secondGuess"></div>
   <div id="thirdGuess"></div>
   </div>
   <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/@tarekraafat/autocomplete.js@10.2.7/dist/autoComplete.min.js"></script>
+
   <script src="main.js"></script>
 
 <!-- <footer class="footer">

main.js

@@ -1,26 +1,58 @@
 //<TO-DO>
-//-FIX TIMER
 //-FIX IMAGE RATIOS
 //-FIX CALENDAR
-//
+//-ADD SUPPORT PAGE
+//archive doesn't work constanlt refreshing
 // var fake_date = new Date("September 19, 2022 23:58:00");
 // Date = function(){return fake_date;}; 
 // Date.now = () => fake_date.getTime();
-window.onload = deathOftheDay;
+//json sitrgifiy local objects
+//pre-load images
+//image placeholder
+// gameover movie name
+
+window.addEventListener ("load", function() {
+    loader.style.display = 'none';
+});
+guess='Skipped';
+
+ if(!localStorage.getItem('playedBefore')){
+  // window.location = window.location.href + "#info";
+  window.location = "https://gorkem.cc/horo#info"
+  //  window.location = "file:///C:/Users/gogob/Documents/dEATHDLE/Test/index.html#info"
+  localStorage.setItem('playedBefore',"true");
+ }
+
+var buttonNo = 0;
+
+
+bonusRoundState = false;
 var playedBefore = false;
 var sameDay = false;
 for (var i = 0; i < localStorage.length; i++){
   console.log(localStorage.key(i));
 }
 
+function revealButtons(g = guessNo){
+  picButtons = document.getElementsByClassName('imageButton');
+  picButtons[g].classList.add('active');
+  for (var i = 0; i <= g; i++){
+    console.log("revealButton guess no " + guessNo);
+     picButtons[i].style.display = "inline";
+     picButtons[i].classList.remove('active');
+  }
+  showPic();
+  // picButtons[g].classList.add('active');
+}
+// document.getElementById("button2").style.display = "none"
+// document.getElementById("button3").style.display = "none"
 
 
 
-
+  var movies = [["The Texas Chainsaw Massacre",1,"Sally Hardesty"],["It Follows",2,"Jaime Height"],["Friday the 13th",0,"Alice Hardy"],["Event Horizon",2,"Lieutenant Starck"],["Hellraiser",2,"Kirsty Cotton"],["A Nightmare on Elm Street",1,"Nancy Thompson"],["The Cabin in the Woods",2],["American Psycho",0]];
-  var movies = ["A Nightmare on Elm Street","Friday the 13th","Event Horizon","Hellraiser","The Cabin in the Woods","American Psycho","It Follows","Candyman","Child's Play","The Texas Chain Saw Massacre","Alien","Halloween"];
   var pix = [];
-  autocomplete(document.getElementById("guess"), movies);
+  // autocomplete(document.getElementById("guess"), movies);
-  var gameBeginning = new Date('September 18, 2022 00:00:00');
+  var gameBeginning = new Date('September 24, 2022 00:00:00');
   var countDownTime =  new Date();
   var present_date = new Date();
 
@@ -30,8 +62,8 @@ for (var i = 0; i < localStorage.length; i++){
   console.log("gameBeginning: ",gameBeginning);
   console.log("now: ",present_date);
   
-var textResult = "Horrordle #"+dayCount+"\n🔪";
 
+// console.log(textResult);
 function dayCounter(){
   dayCount = Math.floor((present_date - gameBeginning) / (1000 * 60 * 60 * 24));
   return dayCount;
@@ -40,6 +72,8 @@ function dayCounter(){
 markCalendar();
 
 function markCalendar() {
+  winCount = 0;
+loseCount = 0;
   dates = document.getElementsByClassName('calendar__number');
   console.log(dates[10].innerHTML);
   var tag = [];
@@ -48,12 +82,15 @@ function markCalendar() {
 
       if (dates[i].innerHTML==dayCount) {
         dates[i].classList.add('current');
-        for (var j = 0; j < i; j++) {
+        
+        for (var j = 0; j <= i; j++) {
           if (localStorage.getItem('day'+(j+1))) {
             if (localStorage.getItem('day'+(j+1))=='true') {
                 dates[j].classList.add('won');
+                winCount=winCount + 1;
             } else if (localStorage.getItem('day'+(j+1))=='false') {
                 dates[j].classList.add('lost');
+                loseCount=loseCount + 1;
             }
 
           }else {
@@ -62,9 +99,10 @@ function markCalendar() {
           dates[j].classList.add('past');
           dates[j] = document.createElement('a');
           //dates[j].setAttribute('href','#');
-          dates[j].setAttribute('onclick','getArchive(' + (j+1) + ')');
+          if(localStorage.getItem("playedToday")){
-          dates[j] = "<a href='#'>" + dates[j] + "</a>";
+          // dates[j].setAttribute('onclick','getArchive(' + (j+1) +')');
-
+          // dates[j] = "<a href='#'>" + dates[j] + "</a>";
+            }
           }
           // dates[j] = "<a href='" + dayCount + "'>" + dates[j] + "</a>";
           //tag[j].appendChild(dates[j]);
@@ -75,12 +113,17 @@ function markCalendar() {
         console.log(dates[i]);
       }
   }
+  console.log("win:"+ winCount)
+  console.log("lose:"+ loseCount)
+  winPerc.textContent = Math.ceil(winCount/(winCount+loseCount)*100)+"%";
+  totalPlays.textContent = winCount+loseCount
 }
 
 
 var points = "⬛⬛⬛"
 //check if the user played this before
-firstCheck()
+firstCheck();
+revealButtons();
 function firstCheck(){
   guessNo = 0;
   feedback.textContent = "🩸 " + (3-guessNo) + " guesses remaining";
@@ -94,13 +137,16 @@ function firstCheck(){
 
 
 
-textResult = "Horrordle #"+dayCount+"\n🔪";
+
 function clearGuess() {
   localStorage.removeItem('firstGuess');
   localStorage.removeItem('secondGuess');
   localStorage.removeItem('guessNo');
   localStorage.removeItem('winningGuess');
-  // localStorage.removeItem('result');
+  localStorage.removeItem('lost');
+  localStorage.removeItem('movieName');
+  localStorage.removeItem("playedToday");
+  localStorage.removeItem('result');
   document.getElementById("firstGuess").style.display = "none";
   document.getElementById("secondGuess").style.display = "none";
   document.getElementById("shareResult").style.display = "none";
@@ -108,222 +154,259 @@ function clearGuess() {
   document.getElementById("countDown").style.display = "none"
   
 }
+
+
 function checkingGuess() {
   
 
-streakNumber.textContent = localStorage.getItem('streak');
+streakNumber.textContent =localStorage.getItem('streak');
+
   if (localStorage.getItem('day')==dayCount) {
 
 
   playedBefore = true;
   textResult=localStorage.getItem('result')
+  document.getElementById("movieName").innerHTML = localStorage.getItem('movieName')
+  
   console.log("played before: ",playedBefore);
   console.log(localStorage.getItem('firstGuess'));
   console.log(localStorage.getItem('secondGuess'));
   if(localStorage.getItem('guessNo')){guessNo=localStorage.getItem('guessNo')};
   feedback.textContent = "🩸 " + (3-guessNo) + " guesses remaining";
-  if(localStorage.getItem('result')) {localStorage.setItem('result', textResult);document.getElementById("resultText").innerHTML =textResult}
+  if(localStorage.getItem('result')) {localStorage.setItem('result', textResult);document.getElementById("resultText").innerHTML =textResult;document.getElementById("movieFrame").style.display = "none";document.getElementsByClassName("resultContainer")[0].style.display="flex";}
-  if(localStorage.getItem('firstGuess')){firstGuess.textContent = "❌" + localStorage.getItem('firstGuess');document.getElementById("firstGuess").style.display = "block";}
+  if(localStorage.getItem('firstGuess')){firstGuess.textContent = "❌ " + localStorage.getItem('firstGuess');document.getElementById("firstGuess").style.display = "block";}
-  if(localStorage.getItem('secondGuess')){secondGuess.textContent = "❌" + localStorage.getItem('secondGuess');document.getElementById("secondGuess").style.display = "block";}
+  if(localStorage.getItem('secondGuess')){secondGuess.textContent = "❌ " + localStorage.getItem('secondGuess');document.getElementById("secondGuess").style.display = "block";}
-  if(localStorage.getItem('winningGuess')){document.getElementById("feedback").innerHTML = "Next movie will reveal at <b>midnight!</b> 🕛";document.getElementById("shareResult").style.display = "block";document.getElementById("countDown").style.display = "block";document.getElementById("guessForm").style.display = "none";document.getElementById("firstGuess").style.display = "none";document.getElementById("secondGuess").style.display = "none";}else {document.getElementById("shareResult").style.display = "none";document.getElementById("guessForm").style.display = "block";};
+  if(localStorage.getItem('winningGuess')||localStorage.getItem('lost')){document.getElementsByClassName("picButtons")[0].style.display="none";revealButtons(2);document.getElementById("feedback").innerHTML = "Next movie will reveal at <b>midnight!</b> 🕛";document.getElementById("shareResult").style.display = "block";document.getElementById("countDown").style.display = "block";document.getElementById("guessForm").style.display = "none";document.getElementById("firstGuess").style.display = "none";document.getElementById("secondGuess").style.display = "none";document.getElementById("resultText").style.display="block";}else {document.getElementById("shareResult").style.display = "none";document.getElementById("guessForm").style.display = "block";document.getElementById("resultText").style.display="none";};
-  secondGuess.textContent = "❌" + localStorage.getItem('secondGuess');
+  if(localStorage.getItem('lost')){ document.getElementById("congratz").innerHTML = "You lost☠️"; document.getElementsByClassName("resultContainer")[0].style.borderColor = "#C62828";}
+  secondGuess.textContent = "❌ " + localStorage.getItem('secondGuess');
+  revealButtons();
 }else {
 clearGuess();
 localStorage.setItem('day', dayCount);
 }
+markCalendar();
+
 }
 checkingGuess();
-
+window.onload = deathOftheDay();
-  console.log(dayCount);
+  // console.log(dayCount);
 
 
 
 
-  function deathOftheDay(){
+  function deathOftheDay(x=dayCount){
     pix = [];
-   movieOfTheDay = movies[dayCount-1];
+   movieOfTheDay = movies[x-1];
 
     for (let i = 1; i < 4; i++) {
-      pix.push("images/"+movieOfTheDay+"/"+i+".png");
+      pix.push("images/"+movieOfTheDay[0]+"/"+i+".png");
+      preloadImage("images/"+movieOfTheDay[0]+"/"+i+".png");
     }
-    console.log('Movie: ', movieOfTheDay);
+    // preloadImage("images/"+movieOfTheDay[0]+"/poster.png");
+    document.getElementById("posterFrame").src = "images/"+movieOfTheDay[0]+"/poster.png";
+    console.log('Movie: ', movieOfTheDay[0]);
     console.log('Array: ', pix);
-    document.getElementById("movieFrame").src = pix[guessNo];
+    showPic();
+
+    // picButton = document.getElementsByClassName('picButton');
+    // picButton.setAttribute('onclick','getImage()');
   }
 
+  function showPic(p=guessNo){
+    
+    // document.getElementById("movieFrame").src = "http://www.deelay.me/3000/https://via.placeholder.com/1920x1080";
+    document.getElementById("movieFrame").src = pix[p];
+    buttonNo = p;
+    picButtons = document.getElementsByClassName('imageButton');
+    for (let i=0; i<3; i++){
+      picButtons[i].classList.remove('active');
+    }
+    picButtons[p].classList.add('active');
+    // for (let i = 0; i < 2; i++) {
+    //   const element = array[i];
+      
+    // }
+  }
+
+  function submitBonus(b=0){
+    if (buttonNo==movieOfTheDay[1]&&b==0) {
+      bonusRoundState= true;
+      // document.getElementById("bonusQuestion").style.display="none";
+      document.getElementById("bonusQuestion").innerHTML = "Survivor: "+ movieOfTheDay[2] + " ⭐";
+
+      textResult = textResult + "(⭐)"
+      console.log("you win!")
+    } else if(b==1){
+      // document.getElementById("bonusQuestion").innerHTML = "Survivor: "+ movieOfTheDay[2];
+      document.getElementById("congratz").innerHTML = "You lost☠️";
+      document.getElementsByClassName("resultContainer")[0].style.borderColor = "#C62828";
+    }
+    else{
+      console.log('you lose')
+      document.getElementById("bonusQuestion").innerHTML = "Survivor: "+ movieOfTheDay[2];
+
+
+    }
+    document.getElementById("movieFrame").style.display = "none";
+    document.getElementsByClassName("resultContainer")[0].style.display="flex";
+    localStorage.setItem('result', textResult);
+    document.getElementById("feedback").style.display = "block";
+    document.getElementById("feedback").innerHTML = "Next movie revealed at midnight! 🕛 <br>";
+    document.getElementById("resultText").innerHTML = textResult;
+    document.getElementById("resultText").style.display="block";
+    document.getElementById("countDown").style.display = "block";
+    document.getElementById("shareResult").style.display = "block";
+    document.getElementById("submitBonusGuess").style.display="none";
+    document.getElementById("skipBonusGuess").style.display="none";
+    document.getElementsByClassName("picButtons")[0].style.display="none";
+    showPic(movieOfTheDay[1])
+    console.log(buttonNo);
+    addData();
+  }
+  if(!localStorage.getItem('result')){
+  textResult = "🔪";
+}else{
+  textResult = localStorage.getItem('result');
+}
   function checkGuess() {
+    localStorage.setItem('playedBefore','true');
     
 console.log("day count:" + dayCount);
-    let myGuess = guess.value
+    let myGuess = guess
-    if (myGuess === movieOfTheDay) {
+   
+    if (myGuess === movieOfTheDay[0]) {
+      
       if(guessNo==0){localStorage.setItem('firstGuessStat',parseInt(localStorage.getItem('firstGuessStat')) + 1);}
       if(guessNo==1){localStorage.setItem('secondGuessStat',parseInt(localStorage.getItem('secondGuessStat')) + 1);}
       if(guessNo==2){localStorage.setItem('thirdGuessStat',parseInt(localStorage.getItem('thirdGuessStat')) + 1);}
       localStorage.setItem('streak',parseInt(localStorage.getItem('streak')) + 1);
       localStorage.setItem('day'+dayCount,'true');
       // document.getElementById("movieFrame").src = "images/"+movieOfTheDay+"/poster.jpg";
-      console.log(localStorage.getItem('day'+dayCount));
+      // console.log(localStorage.getItem('day'+dayCount));
-      streakNumber.textContent = " " + localStorage.getItem('streak');
+      streakNumber.textContent = localStorage.getItem('streak');
       document.getElementById("guessForm").style.display = "none";
-      document.getElementById("movieName").innerHTML = movieOfTheDay + " ✅";
+      document.getElementById("feedback").style.display = "none";
-      document.getElementById("countDown").style.display = "block";
+      document.getElementById("movieName").innerHTML = movieOfTheDay[0] + " ✅";
-      document.getElementById("shareResult").style.display = "block";
-      localStorage.setItem("winningGuess", guess.value);
-        document.getElementById("firstGuess").style.display = "none";
-  document.getElementById("secondGuess").style.display = "none";
       
+      localStorage.setItem('movieName', movieOfTheDay[0] + " ✅")
+      document.getElementById("bonusQuestion").innerHTML = "⭐BONUS ROUND⭐<br> Can you guess the survivor?";
+      document.getElementById("submitBonusGuess").style.display = "inline";
+      document.getElementById("skipBonusGuess").style.display = "inline";
       textResult = textResult + "🟩";
       for (var i = 1; i < (3-guessNo); i++) {
         textResult = textResult + "⬛";
       }
       localStorage.setItem('result', textResult);
-      document.getElementById("feedback").innerHTML = "Next movie revealed at midnight! 🕛 <br>";
+      // document.getElementById("countDown").style.display = "block";
-      document.getElementById("resultText").innerHTML = textResult;
+      // document.getElementById("shareResult").style.display = "block";
-      dates[dayCount-1].classList.add('won');
+      // document.getElementsByClassName("picButtons")[0].classList.add('bonusScreen')
+      tempButton = document.getElementsByClassName("imageButton");
+      for (let i = 0; i < 3; i++) {
+        tempButton[i].classList.add("bonusScreen");
+      }
+      document.getElementsByClassName("imageButton")[0].style.fontSize = "32px";
+      localStorage.setItem("winningGuess", guess);
+      localStorage.setItem("playedToday", "yes");
+        document.getElementById("firstGuess").style.display = "none";
+  document.getElementById("secondGuess").style.display = "none";
+      
 
+      dates[dayCount-1].classList.add('won');
+      revealButtons(2);
 
     } else if(guessNo==1){
       guessNo = guessNo + 1;
       localStorage.setItem('guessNo', guessNo);
       feedback.textContent = "🩸 " + (3-guessNo) + " guesses remaining";
       document.getElementById("movieFrame").src = pix[guessNo];
-      firstGuess.textContent = "❌" + guess.value;
+      firstGuess.textContent = "❌ " + guess;
-      localStorage.setItem('firstGuess', guess.value);
+      localStorage.setItem('firstGuess', guess);
       document.getElementById("firstGuess").style.display = "block";
       textResult = textResult + "🟥";
       localStorage.setItem('result', textResult);
+      revealButtons();
     }else if(guessNo<2){
       guessNo = guessNo + 1;
       localStorage.setItem('guessNo', guessNo);
       feedback.textContent =  "🩸 " + (3-guessNo) + " guesses remaining";
       document.getElementById("movieFrame").src = pix[guessNo];
-      secondGuess.textContent = "❌" + guess.value;
+      secondGuess.textContent = "❌ " + guess;
-      localStorage.setItem('secondGuess', guess.value);
+      localStorage.setItem('secondGuess', guess);
       document.getElementById("secondGuess").style.display = "block";
       textResult = textResult + "🟥";
       localStorage.setItem('result', textResult);
+      revealButtons();
     }
      else{
+      // guessNo = guessNo + 1;
       feedback.textContent = "GAME OVER";
+      // document.getElementById("movieName").innerHTML = movieOfTheDay[0];
       textResult = textResult + "🟥";
+      document.getElementById("guessForm").style.display = "none";
+      document.getElementById("feedback").style.display = "none";
+      document.getElementById("firstGuess").style.display = "none";
+      document.getElementById("secondGuess").style.display = "none";
       localStorage.setItem('guessNo', guessNo);
       localStorage.setItem('streak', 0);
       localStorage.setItem('day'+dayCount,'false');
+      localStorage.setItem("lost", "yes");
+      localStorage.setItem("playedToday", "yes");
       dates[dayCount-1].classList.add('lost');
+      submitBonus(1);
 
     }
     console.log(textResult);
     document.getElementById("guessForm").reset();
+    markCalendar();
+    guess = "Skipped"
+    
  }
 
 
- function autocomplete(inp, arr) {
+ const autoCompleteJS = new autoComplete({
-   /*the autocomplete function takes two arguments,
+  placeHolder: "Search for Horror Movies...",
-   the text field element and an array of possible autocompleted values:*/
+  // wrapper: false,
-   var currentFocus;
+  data: {
-   /*execute a function when someone writes in the text field:*/
+      src: movies.map(movies => movies[0])
-   inp.addEventListener("input", function(e) {
+  },
-       var a, b, i, val = this.value;
+  resultItem: {
-       /*close any already open lists of autocompleted values*/
+      highlight: true,
-       closeAllLists();
+  },
-       if (!val) { return false;}
+  events: {
-       currentFocus = -1;
+    input: {
-       /*create a DIV element that will contain the items (values):*/
+        selection: (event) => {
-       a = document.createElement("DIV");
+            const selection = event.detail.selection.value;
-       a.setAttribute("id", this.id + "autocomplete-list");
+            autoCompleteJS.input.value = selection;
-       a.setAttribute("class", "autocomplete-items");
+        },
-       /*append the DIV element as a child of the autocomplete container:*/
+        open() {
-       this.parentNode.appendChild(a);
+          const position =
-       /*for each item in the array...*/
+              autoCompleteJS.input.getBoundingClientRect().bottom + autoCompleteJS.list.getBoundingClientRect().height >
+              (window.innerHeight || document.documentElement.clientHeight);
 
-       for (i = 0; i < arr.length; i++) {
+          if (position) {
-        //  newArray = arr[i].split(" ");
+              autoCompleteJS.list.style.bottom = autoCompleteJS.input.offsetHeight + 8 + "px";
-        newArray = arr[i].split(" ");
+          } else {
-         /*check if the item starts with the same letters as the text field value:*/
+              // autoCompleteJS.list.style.bottom = -autoCompleteJS.list.offsetHeight - 8 + "px";
-         for (var j = 0; j < newArray.length; j++) {
+          }
-
+      },
-
-         if (newArray[j].substr(0, val.length).toUpperCase() == val.toUpperCase()) {
-           /*create a DIV element for each matching element:*/
-           b = document.createElement("DIV");
-
-           /*make the matching letters bold:*/
-           b.innerHTML = newArray.slice(0,j).join(' ') + " <strong>" + newArray[j].substr(0, val.length) + "</strong>";
-           b.innerHTML += newArray[j].substr(val.length) + " " + newArray.slice(j+1,newArray.length).join(' ');
-           /*insert a input field that will hold the current array item's value:*/
-           b.innerHTML += "<input type='hidden' value='" + newArray.join(' ') + "'>";
-           /*execute a function when someone clicks on the item value (DIV element):*/
-               b.addEventListener("click", function(e) {
-               /*insert the value for the autocomplete text field:*/
-               inp.value = this.getElementsByTagName("input")[0].value;
-               /*close the list of autocompleted values,
-               (or any other open lists of autocompleted values:*/
-               closeAllLists();
-           });
-           a.appendChild(b);
-         }
-       }
     }
-   });
-   /*execute a function presses a key on the keyboard:*/
-   inp.addEventListener("keydown", function(e) {
-       var x = document.getElementById(this.id + "autocomplete-list");
-       if (x) x = x.getElementsByTagName("div");
-       if (e.keyCode == 40) {
-         /*If the arrow DOWN key is pressed,
-         increase the currentFocus variable:*/
-         currentFocus++;
-         /*and and make the current item more visible:*/
-         addActive(x);
-       } else if (e.keyCode == 38) { //up
-         /*If the arrow UP key is pressed,
-         decrease the currentFocus variable:*/
-         currentFocus--;
-         /*and and make the current item more visible:*/
-         addActive(x);
-       } else if (e.keyCode == 13) {
-         /*If the ENTER key is pressed, prevent the form from being submitted,*/
-         e.preventDefault();
-         if (currentFocus > -1) {
-           /*and simulate a click on the "active" item:*/
-           if (x) x[currentFocus].click();
-         }
-       }
-   });
-   function addActive(x) {
-     /*a function to classify an item as "active":*/
-     if (!x) return false;
-     /*start by removing the "active" class on all items:*/
-     removeActive(x);
-     if (currentFocus >= x.length) currentFocus = 0;
-     if (currentFocus < 0) currentFocus = (x.length - 1);
-     /*add class "autocomplete-active":*/
-     x[currentFocus].classList.add("autocomplete-active");
-   }
-   function removeActive(x) {
-     /*a function to remove the "active" class from all autocomplete items:*/
-     for (var i = 0; i < x.length; i++) {
-       x[i].classList.remove("autocomplete-active");
-     }
-   }
-   function closeAllLists(elmnt) {
-     /*close all autocomplete lists in the document,
-     except the one passed as an argument:*/
-     var x = document.getElementsByClassName("autocomplete-items");
-     for (var i = 0; i < x.length; i++) {
-       if (elmnt != x[i] && elmnt != inp) {
-       x[i].parentNode.removeChild(x[i]);
-     }
-   }
- }
- /*execute a function when someone clicks in the document:*/
-document.addEventListener("click", function (e) {
-    closeAllLists(e.target);
-});
 }
+});
+
+autoCompleteJS.input.addEventListener("selection", function (event) {
+  // guess = "skipped"
+  // event.detail.selection.value = "skipped";
+  const feedback = event.detail;
+  // Prepare User's Selected Value
+  guess = event.detail.selection.value
+  autoCompleteJS.input.value = guess;
+  // Console log autoComplete data feedback
+  console.log(event.detail.selection.value);
+  checkGuess();
+});
 
 function copyToClipboard() {
-    navigator.clipboard.writeText(textResult).then(() => {
+    navigator.clipboard.writeText("Horrordle #" + dayCount + "\n"+ textResult).then(() => {
       shareResult.value = "copied!";
         // Alert the user that the action took place.
         // Nobody likes hidden stuff being done under the hood!
@@ -331,16 +414,12 @@ function copyToClipboard() {
     });
   }
 
-function getArchive(j){
+function getArchive(j,d = dayCount){
 
-  dates[dayCount-1].classList.remove('current');
+  dates[d-1].classList.remove('current');
-    dayCount = j;
+  d = j;
   dates[j-1].classList.add('current');
-  deathOftheDay();
+  deathOftheDay(j);
-  clearGuess();
-  checkingGuess();
-  // checkGuess();
-  firstCheck();
   document.getElementById('guess').value = "";
   location.href='#';
   //window.open("#");
@@ -348,7 +427,7 @@ function getArchive(j){
 
 
 
- submitGuess.addEventListener('click', checkGuess)
+  submitGuess.addEventListener('click', checkGuess)
 
  const labels = [
   'First Guess',
@@ -356,11 +435,13 @@ function getArchive(j){
   'Third Guess',
 ];
 
+
+
 const data = {
   labels: labels,
   datasets: [{
     label: 'Number of guesses',
-    backgroundColor: 'rgb(255, 99, 132)',
+    backgroundColor: ['#BB86FC'],
     fontColor: 'white',
     color:'white',
     data: [localStorage.getItem('firstGuessStat'), localStorage.getItem('secondGuessStat'), localStorage.getItem('thirdGuessStat')],
@@ -373,6 +454,7 @@ const config = {
   type: 'bar',
   data: data,
   options: {
+    // maintainAspectRatio: false,
     scales:{
       yAxes:{
         ticks:{
@@ -393,7 +475,7 @@ var x = setInterval(function() {
   countDownTime.setMinutes(0);
   countDownTime.setSeconds(0);
   var now = new Date();
-  console.log("now: ",now);
+  // console.log("now: ",now);
   var remainingTime = countDownTime - now;
   const second = 1000;
   const minute = second * 60;
@@ -405,16 +487,26 @@ var x = setInterval(function() {
 document.getElementById("countDown").innerHTML =  hoursLeft + "h "
 + minutesLeft + "m " + secondsLeft + "s ";
 //console.log(remainingTime);
-console.log(localStorage.getItem('day'));
+// console.log(localStorage.getItem('day'));
-console.log("day count: " + dayCount);
+// console.log("day count: " + dayCount);
 dayCount = Math.floor((now - gameBeginning) / (1000 * 60 * 60 * 24));
 if (localStorage.getItem('day')!=dayCount)  {
     window.location.reload();
 }
 }, 1000);
-
+function addData(){
+	myChart.data.datasets[0].data[0] = localStorage.getItem('firstGuessStat');
+  myChart.data.datasets[0].data[1] = localStorage.getItem('secondGuessStat');
+  myChart.data.datasets[0].data[2] = localStorage.getItem('thirdGuessStat');
+  myChart.update();
+}
 const myChart = new Chart(
   document.getElementById('myChart'),
   config
 );
+function preloadImage(url)
+{
+    var img=new Image();
+    img.src=url;
+};
 //window.localStorage.clear();

style.css

@@ -1,11 +1,271 @@
 * { box-sizing: border-box; }
+#button1,#button2,#button3{
+ display: none;
+}
+/* #movieName,#bonusQuestion{
+  display: none;
+} */
+#winPerc, #streakNumber{
+  font-size: 1.5em;
+}
+.resultContainer{
+  display: none;
+  border: solid 3px #008000;
+  border-radius: 10px;
+  /* box-shadow: 0 0 15px #ff3030, inset 0 0 15px #ff3030; */
+  
+  /* display: flex; */
+  flex-direction : row;
+  margin: auto;
+  margin-top: 10px;
+  width: 30%;
+  padding: 16px 16px;
+}
+#resultText{
+  font-size: 1.5em;
+}
+
+.resultImage{
+  /* padding-right: 8px; */
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 50%;
+}
+.resultImage img{
+ width:100%;
+}
+.resultStats{
+  padding-left:15px;
+  float: left;
+  width: 50%;
+  text-align: center;
+}
+ table {
+  /* border: solid 2px red; */
+ padding-bottom: 10px;
+  margin:auto;
+}
+
+td {
+  text-align: center;
+  padding: 6px 2px;
+  font-size: 1.5em;
+  /* padding: 8px; */
+
+}
+tr{
+  /* border-bottom: 1px solid #ddd; */
+  /* padding-bottom: 10px; */
+}
+.movie-img {
+
+display: flex;
+justify-content: center;
+align-items: center;
+}
+
+.loading {
+  position: absolute;
+  /* z-index: 999; */
+  height: 100%;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  /* overflow: visible;
+  margin-left: auto;
+  margin-right: auto;
+  vertical-align: middle; */
+  /* top:0;
+  left: 0;
+  bottom: 0;
+  right: 0; */
+}
+
+/* Transparent Overlay */
 
 
+/* :not(:required) hides these rules from IE9 and below */
+.loading:not(:required) {
+  /* hide "loading..." text */
+  font: 0/0 a;
+  color: transparent;
+  text-shadow: none;
+  background-color: transparent;
+  border: 0;
+}
+
+.loading:not(:required):after {
+  content: '';
+  display: block;
+  font-size: 10px;
+  width: 1em;
+  height: 1em;
+  margin-top: -0.5em;
+  -webkit-animation: spinner 1500ms infinite linear;
+  -moz-animation: spinner 1500ms infinite linear;
+  -ms-animation: spinner 1500ms infinite linear;
+  -o-animation: spinner 1500ms infinite linear;
+  animation: spinner 1500ms infinite linear;
+  border-radius: 0.5em;
+  -webkit-box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.5) -1.5em 0 0 0, rgba(0, 0, 0, 0.5) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0;
+  box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) -1.5em 0 0 0, rgba(0, 0, 0, 0.75) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0;
+}
+
+/* Animation */
+
+@-webkit-keyframes spinner {
+  0% {
+    -webkit-transform: rotate(0deg);
+    -moz-transform: rotate(0deg);
+    -ms-transform: rotate(0deg);
+    -o-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+    -moz-transform: rotate(360deg);
+    -ms-transform: rotate(360deg);
+    -o-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+@-moz-keyframes spinner {
+  0% {
+    -webkit-transform: rotate(0deg);
+    -moz-transform: rotate(0deg);
+    -ms-transform: rotate(0deg);
+    -o-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+    -moz-transform: rotate(360deg);
+    -ms-transform: rotate(360deg);
+    -o-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+@-o-keyframes spinner {
+  0% {
+    -webkit-transform: rotate(0deg);
+    -moz-transform: rotate(0deg);
+    -ms-transform: rotate(0deg);
+    -o-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+    -moz-transform: rotate(360deg);
+    -ms-transform: rotate(360deg);
+    -o-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+@keyframes spinner {
+  0% {
+    -webkit-transform: rotate(0deg);
+    -moz-transform: rotate(0deg);
+    -ms-transform: rotate(0deg);
+    -o-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+    -moz-transform: rotate(360deg);
+    -ms-transform: rotate(360deg);
+    -o-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+
+
+.imageButton{
+  
+    background-color: #3a3a3a; /* Green */
+    border: none;
+    border-radius: 3px;
+    color: white;
+    /* padding: 5px 5px; */
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+    font-size: 18px;
+  
+}
+.customIcon {
+  /* background: url('images/Group.svg'); */
+  /* background-repeat: no-repeat; */
+  
+  /* background-attachment: fixed; */
+  /* background-position: center; */
+  /* background-size: 50px 70px;  */
+  display: block;
+   margin-left: auto;
+  margin-right: auto; 
+  /* margin-top: 5px;
+  margin-bottom: 5px; */
+  padding: 25px 10px;
+  height: 78px; 
+  width: 68px; 
+  /* display: box; */
+  /* flex: none; */
+  /* top: 50%; */
+  
+  vertical-align: middle;
+  /* margin-top: 10px;
+  margin-bottom: 10px; */
+   overflow: visible; 
+  /* Other styles here */
+}
+
+.resetButton{
+  align-items: center;
+  display: block;
+  margin-top: 20px;
+  margin-left: auto;
+  margin-right: auto;
+  text-align: center;
+  font-size: 16px;
+  align-self: center;
+}
+
+.active{
+  background-color: #656565;
+}
+.bonusScreen{
+  font-size: 32px;
+  padding: 12px 16px;
+}
+.picButtons{
+  margin-top: -10px;
+  margin-bottom: 20px;
+}
+.fa-tint{
+  color: rgb(255, 57, 57);
+  padding-left: 21.625px !important;
+  padding-right: 21.625px !important;
+}
+.fa-star{
+  width 68px;
+  color: rgb(206, 206, 0);
+  padding-right:13.75px !important;
+  padding-left:13.75px !important;
+}
 .content{
   width: 100%;
   position: relative;
-  margin: 30px 0;
+  display: table;
+  /* margin: 30px 0; */
 }
+.chartNumber{
+    position: relative;
+    margin-top: 20px;
+    /* height: 50%;
+    width: 60%; */
+}
+
 .overlay {
   position: fixed;
   top: 0;
@@ -17,10 +277,12 @@
   visibility: hidden;
   opacity: 0;
   z-index: 99;
+  overflow: auto; 
 }
 #streakNumber{
   text-align: center;
   margin-top: 0;
+  /* margin-bottom: 10px; */
 }
 
 h3 {
@@ -28,9 +290,10 @@ h3 {
 }
 
 .InstructionText{
-position: absolute;
+  display: block;
-margin-left: 65px;
+  width: 80%;
-margin-top: -50px;
+  display: table-cell;
+  vertical-align: middle;
 
 }
 .overlay:target {
@@ -46,15 +309,18 @@ margin-top: -50px;
   width: 30%;
   position: relative;
   transition: all 5s ease-in-out;
-  overflow: hidden;
+   /* overflow: auto;  */
 }
 .popup i{
-  padding: 14px 16px;
+  padding: 20px 16px;
   font-size: 36px;
-  display: flex;
+  display: block;
-
+  width: 20%;
-align-items: center;
+  text-align: center;
+  display: table-cell;
+  vertical-align: middle;
 }
+
 .popup h2 {
   margin-top: 0;
   color: white;
@@ -100,7 +366,7 @@ body {
   background-color: #121212;
   color: white;
   font: 16px Arial;
-display:flex; flex-direction:column; justify-content:center;
+/* display:flex; flex-direction:column; justify-content:center; */
 text-align: center;
 }
 p {
@@ -125,7 +391,8 @@ i{
 }
 #shareResult{
   background-color: green;
-  margin-top: 20px;
+  margin-top: 40px;
+  bottom: 5px;
   display:none;
   margin-left: auto;
   margin-right: auto;
@@ -145,6 +412,8 @@ i{
   padding-top: 10px;
   padding-bottom:10px;
   width: 450px;
+  border-radius: 5px;
+  border-color: #4d4d4d;
   /* display: block; */
   margin-left: auto;
   margin-right: auto;
@@ -156,7 +425,7 @@ i{
 
 .center {
   display: block;
-  padding: 14px 16px;
+  padding: 0px 16px;
   margin-left: auto;
   margin-right: auto;
   width: 50%;
@@ -176,6 +445,7 @@ figure{
   position: absolute;
   left: 0;
   right: 0;
+  top: 8px;
   margin: 0 auto;
 
 }
@@ -190,7 +460,7 @@ figure{
   align-self: center;
 }
 #guessForm {
-  width: 40%;
+  width: 450px;
   left: 0;
   right: 0;
   margin: 0 auto;
@@ -219,6 +489,16 @@ input[type=button] {
 } */
 #submitGuess{
 margin-left: 8px;
+background-color: #121212;
+border: 1px solid orangered;
+}
+#submitBonusGuess{
+  display: none;
+}
+#skipBonusGuess{
+  display: none;
+  background-color: #121212;
+  border: 1px solid orangered;
 }
 .autocomplete-items {
   margin-bottom: 40px;
@@ -304,12 +584,21 @@ margin-left: 8px;
 
   .center {
     display: block;
-    padding: 14px 16px;
+    padding: 4px 16px;
     margin-left: auto;
     margin-right: auto;
     width: 100%;
   }
 
+  .resultContainer{
+    width: 95%;
+    padding: 16px 16px;
+    
+  }
+  .resultStats{
+    /* padding: 0px; */
+  }
+
 
   #firstGuess , #secondGuess{
 
@@ -333,7 +622,7 @@ margin-left: 8px;
   resize: horizontal;
   
   width: 400px;
-  background-color: #fff;
+  background-color: #616E7C;
   box-sizing: border-box;
   box-shadow: 0 5px 50px rgba(#000, 0.5);
   border-radius: 8px;
@@ -355,7 +644,7 @@ margin-left: 8px;
   justify-content: center;
   height: 25px;
   font-weight: 600;
-  color: #262626;
+  color: #F5F7FA;
 
 
 }
@@ -365,24 +654,26 @@ margin-left: 8px;
   align-items: center;
   justify-content: center;
   height: 25px;
-  color: grey;
+  color: #CBD2D9;
   font-style:oblique;
 
 }
 .current{
-  border-style: dashed;
+  border-style: solid;
-  background-color: orange;
+  /* background-color: orange; */
-  color: white;
+  color: grey;
   border-color: black;
   border-width: 2px;
   font-style:normal;
+  /* border-radius: 5px; */
 
 }
 .past{
-  background-color: orange;
+  background-color: #FFA000;
   cursor: pointer;
   color: white;
 font-style:normal;
+border-radius: 5px;
 
 
 }
@@ -390,15 +681,17 @@ font-style:normal;
   /* cursor:none; */
   color: white;
   cursor:default;
-  background-color: green;
+  background-color: #00897B;
 font-style:normal;
+border-radius: 5px;
   /* border-width: 0px; */
 }
 .lost{
   /* cursor:none; */
   color: white;
-  background-color: red;
+  background-color: #C62828;
 font-style:normal;
+border-radius: 5px;
   /* border-width: 0px; */
 }
 
@@ -418,6 +711,35 @@ font-style:normal;
     margin:0 -16.665%;
     width:133.33%;  
   }
+  .InstructionText {
+    font-size: 14px;
+    padding-left: 10px;
+  }
+  .popup{
+    /* padding-left: 5px;
+    padding-right: 5px; */
+  }
+  /* i{
+    padding-left: 5px !important;
+    padding-right: 20px;
+  }
+  .fa-tint{
+    padding-left: 5px !important;
+  }
+  .customIcon{
+    padding-left: 5px;
+    padding-right: 15px;
+    margin-left: -11px;
+  }
+  .fa-star{
+    padding-left: 0px !important;
+  } */
+  #winPerc, #streakNumber, #resultText, td {
+    font-size: 16px;
+  }
+  #congratz{
+    font-size: 1.5em;
+  }
 }
 
 
@@ -440,9 +762,13 @@ font-style:normal;
   display: block;
 }
 .title {
+  top:0px;
   position: relative;
 float: left;
-width: 200px;
+width: 230px;
+}
+i{
+  font-size: 1.4rem;
 }
 
 .popup{