diff --git a/autoComplete.css b/autoComplete.css index 10530a8..c292689 100644 --- a/autoComplete.css +++ b/autoComplete.css @@ -1,6 +1,7 @@ .autoComplete_wrapper { display: inline-block; position: relative; + width: 100%; } .autoComplete_wrapper > input { @@ -121,8 +122,8 @@ background-color: rgba(255, 122, 122, 0.15); } -/* @media only screen and (max-width: 600px) { + /* @media only screen and (max-width: 600px) { .autoComplete_wrapper > input { - width: 18rem; + width: 90%; } -} */ +} */ diff --git a/images/Event Horizon/1.png b/images/Event Horizon/1.png index e05fc84..9138420 100644 Binary files a/images/Event Horizon/1.png and b/images/Event Horizon/1.png differ diff --git a/images/Event Horizon/2.png b/images/Event Horizon/2.png index cceda48..08e6baa 100644 Binary files a/images/Event Horizon/2.png and b/images/Event Horizon/2.png differ diff --git a/images/Event Horizon/3.png b/images/Event Horizon/3.png index c00fc3a..eb02d04 100644 Binary files a/images/Event Horizon/3.png and b/images/Event Horizon/3.png differ diff --git a/images/Event Horizon/4.png b/images/Event Horizon/4.png new file mode 100644 index 0000000..c00fc3a Binary files /dev/null and b/images/Event Horizon/4.png differ diff --git a/images/Event Horizon/5.png b/images/Event Horizon/5.png new file mode 100644 index 0000000..25a7bd7 Binary files /dev/null and b/images/Event Horizon/5.png differ diff --git a/images/Friday the 13th/1.png b/images/Friday the 13th/1.png index cf45154..89818e9 100644 Binary files a/images/Friday the 13th/1.png and b/images/Friday the 13th/1.png differ diff --git a/images/Friday the 13th/4.png b/images/Friday the 13th/4.png index 89818e9..cf45154 100644 Binary files a/images/Friday the 13th/4.png and b/images/Friday the 13th/4.png differ diff --git a/images/Hellraiser/1.png b/images/Hellraiser/1.png new file mode 100644 index 0000000..09d5c2b Binary files /dev/null and b/images/Hellraiser/1.png differ diff --git a/images/hellrasier/1.png b/images/Hellraiser/2.png similarity index 100% rename from images/hellrasier/1.png rename to images/Hellraiser/2.png diff --git a/images/Hellraiser/3.png b/images/Hellraiser/3.png new file mode 100644 index 0000000..6cc8b61 Binary files /dev/null and b/images/Hellraiser/3.png differ diff --git a/images/hellrasier/2.png b/images/Hellraiser/4.png similarity index 100% rename from images/hellrasier/2.png rename to images/Hellraiser/4.png diff --git a/images/Hellraiser/vlcsnap-2022-09-25-19h54m40s897.png b/images/Hellraiser/vlcsnap-2022-09-25-19h54m40s897.png new file mode 100644 index 0000000..0448250 Binary files /dev/null and b/images/Hellraiser/vlcsnap-2022-09-25-19h54m40s897.png differ diff --git a/images/It Follows/1.png b/images/It Follows/1.png new file mode 100644 index 0000000..37b07ab Binary files /dev/null and b/images/It Follows/1.png differ diff --git a/images/It Follows/2.png b/images/It Follows/2.png new file mode 100644 index 0000000..8ffc337 Binary files /dev/null and b/images/It Follows/2.png differ diff --git a/images/It Follows/3.png b/images/It Follows/3.png new file mode 100644 index 0000000..f2645bc Binary files /dev/null and b/images/It Follows/3.png differ diff --git a/images/It Follows/4.png b/images/It Follows/4.png new file mode 100644 index 0000000..525fcb3 Binary files /dev/null and b/images/It Follows/4.png differ diff --git a/images/It Follows/5.png b/images/It Follows/5.png new file mode 100644 index 0000000..c827df6 Binary files /dev/null and b/images/It Follows/5.png differ diff --git a/images/The Texas Chainsaw Massacre/1.png b/images/The Texas Chainsaw Massacre/1.png new file mode 100644 index 0000000..f1f5d65 Binary files /dev/null and b/images/The Texas Chainsaw Massacre/1.png differ diff --git a/images/The Texas Chainsaw Massacre/2.png b/images/The Texas Chainsaw Massacre/2.png new file mode 100644 index 0000000..7318e64 Binary files /dev/null and b/images/The Texas Chainsaw Massacre/2.png differ diff --git a/images/The Texas Chainsaw Massacre/3.png b/images/The Texas Chainsaw Massacre/3.png new file mode 100644 index 0000000..5a41cbc Binary files /dev/null and b/images/The Texas Chainsaw Massacre/3.png differ diff --git a/images/The Texas Chainsaw Massacre/4.png b/images/The Texas Chainsaw Massacre/4.png new file mode 100644 index 0000000..f53fd8e Binary files /dev/null and b/images/The Texas Chainsaw Massacre/4.png differ diff --git a/images/a nightmare on elm street/1.png b/images/a nightmare on elm street/1.png index 637244f..a4a50c5 100644 Binary files a/images/a nightmare on elm street/1.png and b/images/a nightmare on elm street/1.png differ diff --git a/images/a nightmare on elm street/2.png b/images/a nightmare on elm street/2.png index db7a44f..939a8d3 100644 Binary files a/images/a nightmare on elm street/2.png and b/images/a nightmare on elm street/2.png differ diff --git a/images/a nightmare on elm street/3.png b/images/a nightmare on elm street/3.png index 5351f5e..d56652d 100644 Binary files a/images/a nightmare on elm street/3.png and b/images/a nightmare on elm street/3.png differ diff --git a/images/a nightmare on elm street/4.png b/images/a nightmare on elm street/4.png new file mode 100644 index 0000000..db7a44f Binary files /dev/null and b/images/a nightmare on elm street/4.png differ diff --git a/images/a nightmare on elm street/poster.jpg b/images/a nightmare on elm street/poster.jpg deleted file mode 100644 index 1c3424c..0000000 Binary files a/images/a nightmare on elm street/poster.jpg and /dev/null differ diff --git a/images/hellrasier/3.png b/images/hellrasier/3.png deleted file mode 100644 index e9dffa3..0000000 Binary files a/images/hellrasier/3.png and /dev/null differ diff --git a/images/images.jpg b/images/images.jpg new file mode 100644 index 0000000..79e598b Binary files /dev/null and b/images/images.jpg differ diff --git a/index.html b/index.html index 6ef82ba..2426fc0 100644 --- a/index.html +++ b/index.html @@ -121,7 +121,11 @@
31
+ + + + @@ -153,15 +157,20 @@
-movie death frame +movie death frame
+ + +

+

+
- - - -
- - + + + + + +
@@ -171,7 +180,7 @@
-

+

diff --git a/main.js b/main.js index 9acbe03..4d19a3e 100644 --- a/main.js +++ b/main.js @@ -10,7 +10,13 @@ //pre-load images //image placeholder // gameover movie name + if(!localStorage.getItem('playedBefore')){ + // window.location = window.location.href + "#info"; + window.location = "file:///C:/Users/gogob/Documents/dEATHDLE/Test/index.html#info" + } +var buttonNo = 0; +bonusRoundState = false; var playedBefore = false; var sameDay = false; for (var i = 0; i < localStorage.length; i++){ @@ -25,14 +31,15 @@ function revealButtons(g = guessNo){ picButtons[i].style.display = "inline"; picButtons[i].classList.remove('active'); } - picButtons[g].classList.add('active'); + showPic(); + // picButtons[g].classList.add('active'); } // document.getElementById("button2").style.display = "none" // document.getElementById("button3").style.display = "none" - 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 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 pix = []; // autocomplete(document.getElementById("guess"), movies); var gameBeginning = new Date('September 24, 2022 00:00:00'); @@ -117,6 +124,7 @@ function clearGuess() { localStorage.removeItem('secondGuess'); localStorage.removeItem('guessNo'); localStorage.removeItem('winningGuess'); + localStorage.removeItem('movieName'); localStorage.removeItem("playedToday"); // localStorage.removeItem('result'); document.getElementById("firstGuess").style.display = "none"; @@ -137,6 +145,8 @@ streakNumber.textContent = localStorage.getItem('streak'); 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')); @@ -145,7 +155,7 @@ 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')){revealButtons(2);document.getElementById("feedback").innerHTML = "Next movie will reveal at midnight! πŸ•›";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";}; + if(localStorage.getItem('winningGuess')){document.getElementsByClassName("picButtons")[0].style.display="none";revealButtons(2);document.getElementById("feedback").innerHTML = "Next movie will reveal at midnight! πŸ•›";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'); revealButtons(); }else { @@ -166,10 +176,10 @@ window.onload = deathOftheDay(); movieOfTheDay = movies[x-1]; for (let i = 1; i < 4; i++) { - pix.push("images/"+movieOfTheDay+"/"+i+".png"); - preloadImage("images/"+movieOfTheDay+"/"+i+".png"); + pix.push("images/"+movieOfTheDay[0]+"/"+i+".png"); + preloadImage("images/"+movieOfTheDay[0]+"/"+i+".png"); } - console.log('Movie: ', movieOfTheDay); + console.log('Movie: ', movieOfTheDay[0]); console.log('Array: ', pix); showPic(); @@ -179,6 +189,7 @@ window.onload = deathOftheDay(); function showPic(p=guessNo){ document.getElementById("movieFrame").src = pix[p]; + buttonNo = p; picButtons = document.getElementsByClassName('imageButton'); for (let i=0; i<3; i++){ picButtons[i].classList.remove('active'); @@ -190,11 +201,40 @@ window.onload = deathOftheDay(); // } } + 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{ + console.log('you lose') + document.getElementById("bonusQuestion").innerHTML = "Survivor: "+ movieOfTheDay[2]; + + + } + localStorage.setItem('result', textResult); + document.getElementById("feedback").style.display = "block"; + document.getElementById("feedback").innerHTML = "Next movie revealed at midnight! πŸ•›
"; + document.getElementById("resultText").innerHTML = textResult; + 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); + } + function checkGuess() { + localStorage.setItem('playedBefore','true'); console.log("day count:" + dayCount); 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);} @@ -204,21 +244,32 @@ console.log("day count:" + dayCount); console.log(localStorage.getItem('day'+dayCount)); streakNumber.textContent = " " + localStorage.getItem('streak'); document.getElementById("guessForm").style.display = "none"; - document.getElementById("movieName").innerHTML = movieOfTheDay + " βœ…"; - 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"; + document.getElementById("feedback").style.display = "none"; + document.getElementById("movieName").innerHTML = movieOfTheDay[0] + " βœ…"; + localStorage.setItem('movieName', movieOfTheDay[0] + " βœ…") + document.getElementById("bonusQuestion").innerHTML = "⭐BONUS ROUND⭐
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! πŸ•›
"; - document.getElementById("resultText").innerHTML = textResult; + // document.getElementById("countDown").style.display = "block"; + // document.getElementById("shareResult").style.display = "block"; + // 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); @@ -263,8 +314,9 @@ console.log("day count:" + dayCount); const autoCompleteJS = new autoComplete({ placeHolder: "Search for Movies...", + // wrapper: false, data: { - src: movies + src: movies.map(movies => movies[0]) }, resultItem: { highlight: true, diff --git a/style.css b/style.css index 53b6972..229a856 100644 --- a/style.css +++ b/style.css @@ -2,6 +2,9 @@ #button1,#button2,#button3{ display: none; } +/* #movieName,#bonusQuestion{ + display: none; +} */ .imageButton{ background-color: #3a3a3a; /* Green */ @@ -12,13 +15,29 @@ text-align: center; text-decoration: none; display: inline-block; - font-size: 16px; + font-size: 18px; } +.resetButton{ + align-items: center; + display: block; + margin-top: 10px; + 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{ @@ -53,6 +72,7 @@ #streakNumber{ text-align: center; margin-top: 0; + margin-bottom: 10px; } h3 { @@ -192,7 +212,7 @@ i{ .center { display: block; - padding: 14px 16px; + padding: 0px 16px; margin-left: auto; margin-right: auto; width: 50%; @@ -227,7 +247,7 @@ figure{ align-self: center; } #guessForm { - width: 40%; + width: 80%; left: 0; right: 0; margin: 0 auto; @@ -257,6 +277,14 @@ input[type=button] { #submitGuess{ margin-left: 8px; } +#submitBonusGuess{ + display: none; +} +#skipBonusGuess{ + display: none; + background-color: #121212; + border: 1px solid orangered; +} .autocomplete-items { margin-bottom: 40px; } @@ -341,13 +369,14 @@ margin-left: 8px; .center { display: block; - padding: 14px 16px; + padding: 4px 16px; margin-left: auto; margin-right: auto; width: 100%; } + #firstGuess , #secondGuess{ width: 100%;