added function to preload images

2022-09-25 13:12:37 +03:00 · 2022-09-25 13:12:37 +03:00 · a5a48aa92e
commit a5a48aa92e
parent a088642a30
9 changed files with 210 additions and 36 deletions
--- a/autoComplete.css
+++ b/autoComplete.css
@ -0,0 +1,128 @@
+.autoComplete_wrapper {
+  display: inline-block;
+  position: relative;
+}
+
+.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: 18rem;
+  }
+} */
--- a/images/90.gif
+++ b/images/90.gif
--- a/images/back.png
+++ b/images/back.png
--- a/images/images.png
+++ b/images/images.png
--- a/images/place.png
+++ b/images/place.png
--- a/images/search.svg
+++ b/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>
--- a/index.html
+++ b/index.html
@ -7,6 +7,7 @@
  <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">
@ -40,17 +41,20 @@
        <div class="InstructionText">
        <p>Use the death scene provided to guess the name of the movie.</p>
        </div>
-
+      </div>
+      <div class="content">
        <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>
-
+      </div>
+      <div class="content">
      <i class="fas fa-tint"></i>
      <div class="InstructionText">
        <p>You have a maximum of 3 guesses to find the movie.</p>
      </div>
+    </div>
   </div>
  	</div>
  </div>
@ -58,7 +62,7 @@
  <div id="stats" class="overlay">
    <div class="popup">
      <h2>Stats</h2>
-      <div>
+      <div class="chartNumber">
        <canvas id="myChart"></canvas>
      </div>
      <a class="close" href="#">&times;</a>
@ -147,7 +151,7 @@

  <!-- <h1>Guess the Movie!</h1> -->
  <figure class="movie-img">
-<img src="" id="movieFrame" alt="movie death frame" class="center">
+<img src="images/images.png" id="movieFrame" alt="movie death frame" class="center">
  </figure>


@ -155,8 +159,8 @@
  <form id="guessForm" autocomplete="off">
    <div class="autocomplete">
        <!-- <label for="guess">Movie:</label> -->
-        <input type="text" id="guess" placeholder="Movie">
-        <input type="button" id="submitGuess" value="Submit Guess">
+        <input class="guess" type="text" id="autoComplete" placeholder="Movie">
+        <input type="button" id="submitGuess" value="Submit">
    </div>
    
  </form>
@ -173,6 +177,8 @@
  <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">
--- a/main.js
+++ b/main.js
@ -1,12 +1,16 @@
 //<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
+
 var playedBefore = false;
 var sameDay = false;
 for (var i = 0; i < localStorage.length; i++){
@ -20,7 +24,7 @@ for (var i = 0; i < localStorage.length; i++){
  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);
-  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();

@ -62,9 +66,10 @@ function markCalendar() {
          dates[j].classList.add('past');
          dates[j] = document.createElement('a');
          //dates[j].setAttribute('href','#');
-          dates[j].setAttribute('onclick','getArchive(' + (j+1) + ')');
-          dates[j] = "<a href='#'>" + dates[j] + "</a>";
-
+          if(localStorage.getItem("playedToday")){
+          // 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]);
@ -100,6 +105,7 @@ function clearGuess() {
  localStorage.removeItem('secondGuess');
  localStorage.removeItem('guessNo');
  localStorage.removeItem('winningGuess');
+  localStorage.removeItem("playedToday");
  // localStorage.removeItem('result');
  document.getElementById("firstGuess").style.display = "none";
  document.getElementById("secondGuess").style.display = "none";
@ -108,6 +114,8 @@ function clearGuess() {
  document.getElementById("countDown").style.display = "none"
  
 }
+
+
 function checkingGuess() {
  

@ -125,26 +133,28 @@ streakNumber.textContent = localStorage.getItem('streak');
  if(localStorage.getItem('result')) {localStorage.setItem('result', textResult);document.getElementById("resultText").innerHTML =textResult}
  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('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')){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');
 }else {
 clearGuess();
 localStorage.setItem('day', dayCount);
 }
+markCalendar();
 }
 checkingGuess();
-
-  console.log(dayCount);
+window.onload = deathOftheDay();
+  // 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");
+      preloadImage("images/"+movieOfTheDay+"/"+i+".png");
    }
    console.log('Movie: ', movieOfTheDay);
    console.log('Array: ', pix);
@ -169,6 +179,7 @@ console.log("day count:" + dayCount);
      document.getElementById("countDown").style.display = "block";
      document.getElementById("shareResult").style.display = "block";
      localStorage.setItem("winningGuess", guess);
+      localStorage.setItem("playedToday", "yes");
        document.getElementById("firstGuess").style.display = "none";
  document.getElementById("secondGuess").style.display = "none";
      
@ -209,11 +220,13 @@ console.log("day count:" + dayCount);
      localStorage.setItem('guessNo', guessNo);
      localStorage.setItem('streak', 0);
      localStorage.setItem('day'+dayCount,'false');
+      localStorage.setItem("playedToday", "yes");
      dates[dayCount-1].classList.add('lost');

    }
    console.log(textResult);
    document.getElementById("guessForm").reset();
+    markCalendar();
 }


@ -263,16 +276,12 @@ function copyToClipboard() {
    });
  }

-function getArchive(j){
+function getArchive(j,d = dayCount){

-  dates[dayCount-1].classList.remove('current');
-    dayCount = j;
+  dates[d-1].classList.remove('current');
+  d = j;
  dates[j-1].classList.add('current');
-  deathOftheDay();
-  clearGuess();
-  checkingGuess();
-  // checkGuess();
-  firstCheck();
+  deathOftheDay(j);
  document.getElementById('guess').value = "";
  location.href='#';
  //window.open("#");
@ -288,11 +297,13 @@ function getArchive(j){
  'Third Guess',
 ];

+
+
 const data = {
  labels: labels,
  datasets: [{
    label: 'Number of guesses',
-    backgroundColor: 'rgb(255, 99, 132)',
+    backgroundColor: ['red','pink','blue'],
    fontColor: 'white',
    color:'white',
    data: [localStorage.getItem('firstGuessStat'), localStorage.getItem('secondGuessStat'), localStorage.getItem('thirdGuessStat')],
@ -305,6 +316,7 @@ const config = {
  type: 'bar',
  data: data,
  options: {
+    maintainAspectRatio: false,
    scales:{
      yAxes:{
        ticks:{
@ -349,4 +361,9 @@ const myChart = new Chart(
  document.getElementById('myChart'),
  config
 );
+function preloadImage(url)
+{
+    var img=new Image();
+    img.src=url;
+};
 //window.localStorage.clear();
--- a/style.css
+++ b/style.css
@ -1,11 +1,22 @@
 * { box-sizing: border-box; }

-
+.fa-tint{
+  padding-left: 21.625px !important;
+  padding-right: 21.625px !important;
+}
 .content{
  width: 100%;
  position: relative;
-  margin: 30px 0;
+  display: table;
+  /* margin: 30px 0; */
 }
+.chartNumber{
+    position: relative;
+    margin: auto;
+    height: 50%;
+    width: 60%;
+}
+
 .overlay {
  position: fixed;
  top: 0;
@ -28,9 +39,10 @@ h3 {
 }

 .InstructionText{
-position: absolute;
-margin-left: 65px;
-margin-top: -50px;
+  display: block;
+  width: 80%;
+  display: table-cell;
+  vertical-align: middle;

 }
 .overlay:target {
@ -51,10 +63,13 @@ margin-top: -50px;
 .popup i{
  padding: 14px 16px;
  font-size: 36px;
-  display: flex;
-
-align-items: center;
+  display: block;
+  width: 20%;
+  text-align: center;
+  display: table-cell;
+  vertical-align: middle;
 }
+
 .popup h2 {
  margin-top: 0;
  color: white;
@ -100,7 +115,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 {