commit 6c6923c5e5c7d9acce99644698415f9ffb6c3f40 Author: gocivici Date: Sun Aug 7 11:40:24 2022 +0300 first commit diff --git a/images/Friday the 13th/1.jpg b/images/Friday the 13th/1.jpg new file mode 100644 index 0000000..c60be78 Binary files /dev/null and b/images/Friday the 13th/1.jpg differ diff --git a/images/Friday the 13th/2.jpg b/images/Friday the 13th/2.jpg new file mode 100644 index 0000000..12147c3 Binary files /dev/null and b/images/Friday the 13th/2.jpg differ diff --git a/images/Friday the 13th/3.jpg b/images/Friday the 13th/3.jpg new file mode 100644 index 0000000..6ec6d1c Binary files /dev/null and b/images/Friday the 13th/3.jpg differ diff --git a/images/a nightmare on elm street/1.jpg b/images/a nightmare on elm street/1.jpg new file mode 100644 index 0000000..637244f Binary files /dev/null and b/images/a nightmare on elm street/1.jpg differ diff --git a/images/a nightmare on elm street/2.jpg b/images/a nightmare on elm street/2.jpg new file mode 100644 index 0000000..db7a44f Binary files /dev/null and b/images/a nightmare on elm street/2.jpg differ diff --git a/images/a nightmare on elm street/3.jpg b/images/a nightmare on elm street/3.jpg new file mode 100644 index 0000000..5351f5e Binary files /dev/null and b/images/a nightmare on elm street/3.jpg differ diff --git a/images/final destination/1.jpg b/images/final destination/1.jpg new file mode 100644 index 0000000..c60be78 Binary files /dev/null and b/images/final destination/1.jpg differ diff --git a/images/final destination/2.jpg b/images/final destination/2.jpg new file mode 100644 index 0000000..12147c3 Binary files /dev/null and b/images/final destination/2.jpg differ diff --git a/images/final destination/3.jpg b/images/final destination/3.jpg new file mode 100644 index 0000000..6ec6d1c Binary files /dev/null and b/images/final destination/3.jpg differ diff --git a/images/scream 2/1.jpg b/images/scream 2/1.jpg new file mode 100644 index 0000000..c60be78 Binary files /dev/null and b/images/scream 2/1.jpg differ diff --git a/images/scream 2/2.jpg b/images/scream 2/2.jpg new file mode 100644 index 0000000..12147c3 Binary files /dev/null and b/images/scream 2/2.jpg differ diff --git a/images/scream 2/3.jpg b/images/scream 2/3.jpg new file mode 100644 index 0000000..6ec6d1c Binary files /dev/null and b/images/scream 2/3.jpg differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..fea2f03 --- /dev/null +++ b/index.html @@ -0,0 +1,161 @@ + + + + + + + + + + movie game + +
+
+
+ +
+ + horrordle + + +
+ + + +
+
+
+ + + +
+
+

Instructions

+ × +
+ +
+

Use the death scene provided to guess the name of the movie.

+
+ + +
+

If you guess wrong a new death + scene from the movie is revealed but you will use 1 point.

+
+ + +
+

You have a maximum of 3 guesses to find the movie.

+
+
+
+
+ +
+
+

Stats

+ × +
+ your stats +
+
+
+ +
+
+ +

Archive

+ × +
+
+ +
+
M
+
T
+
W
+
T
+
F
+
S
+
S
+
+
+
+
+
+
1
+
2
+
3
+
4
+
5
+
6
+
7
+
8
+
9
+
10
+
11
+
12
+
13
+
14
+
15
+
16
+
17
+
18
+
19
+
20
+
21
+
22
+
23
+
24
+
25
+
26
+
27
+
28
+
29
+
30
+
31
+
+
+
+
+
+ + + + + + +movie death frame + + + + +
+
+ + +
+ +
+ +

+
+ +
+
+
+
+
+
+ + + + + + diff --git a/main.js b/main.js new file mode 100644 index 0000000..2edb793 --- /dev/null +++ b/main.js @@ -0,0 +1,306 @@ +// + window.onload = deathOftheDay; +var playedBefore = false; + +for (var i = 0; i < localStorage.length; i++){ + console.log(localStorage.key(i)); +} + + + + var movies = ["a nightmare on elm street","Friday the 13th","Final Destination","Scream 2","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('July 29, 2022 00:00:00'); + // gameBeginning = new Date(gameBeginning.getTime() + 0 * 60 * 1000); + console.log(gameBeginning.getTimezoneOffset()); + var present_date = new Date(); + console.log("gameBeginning: ",gameBeginning); + console.log("now: ",present_date); + var dayCount = Math.floor((present_date - gameBeginning) / (1000 * 60 * 60 * 24)); +var textResult = "Horrordle #"+dayCount+"\nšŸ”Ŗ"; + +markCalendar(); + +function markCalendar() { + dates = document.getElementsByClassName('calendar__number'); + console.log(dates[10].innerHTML); + var tag = []; + for (var i = 0; i < dates.length; i++) { + + + if (dates[i].innerHTML==dayCount) { + dates[i].classList.add('current'); + 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'); + } else if (localStorage.getItem('day'+(j+1))=='false') { + dates[j].classList.add('lost'); + } + + }else { + + + dates[j].classList.add('past'); + dates[j] = document.createElement('a'); + //dates[j].setAttribute('href','#'); + dates[j].setAttribute('onclick','getArchive(' + (j+1) + ')'); + dates[j] = "" + dates[j] + ""; + + } + // dates[j] = "" + dates[j] + ""; + //tag[j].appendChild(dates[j]); + //console.log(tag[j]); + console.log(dates[j]); + } + + console.log(dates[i]); + } + } +} + + +var points = "ā¬›ā¬›ā¬›" +//check if the user played this before + var guessNo = 0; + feedback.textContent = "šŸ©ø " + (3-guessNo) + " guesses remaining"; + if(!localStorage.getItem('streak')){localStorage.setItem('streak',0)} + +checkingGuess(); + + + + + +function clearGuess() { + localStorage.removeItem('firstGuess'); + localStorage.removeItem('secondGuess'); + localStorage.removeItem('guessNo'); + localStorage.removeItem('winningGuess'); + localStorage.removeItem('result'); +} +function checkingGuess() { + localStorage.setItem('day', dayCount); + +streakNumber.textContent = localStorage.getItem('streak'); + if (localStorage.getItem('day')==dayCount) { + + + playedBefore = true; + textResult=localStorage.getItem('result') + 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);} + 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')){feedback.textContent = "You got it right!";document.getElementById("shareResult").style.display = "block";document.getElementById("guessForm").style.display = "none";}else {document.getElementById("shareResult").style.display = "none";document.getElementById("guessForm").style.display = "block";}; + secondGuess.textContent = "āŒ" + localStorage.getItem('secondGuess'); +}else { +clearGuess(); +} +} + + console.log(dayCount); + + + + + function deathOftheDay(){ + pix = []; + movieOfTheDay = movies[dayCount-1]; + + for (let i = 1; i < 4; i++) { + pix.push("images/"+movieOfTheDay+"/"+i+".jpg"); + } + console.log('Movie: ', movieOfTheDay); + console.log('Array: ', pix); + document.getElementById("movieFrame").src = pix[guessNo]; + } + + function checkGuess() { +console.log("day count:" + dayCount); + let myGuess = guess.value + if (myGuess === movieOfTheDay) { + localStorage.setItem('streak',parseInt(localStorage.getItem('streak')) + 1); + localStorage.setItem('day'+dayCount,'true'); + console.log(localStorage.getItem('day'+dayCount)); + streakNumber.textContent = " " + localStorage.getItem('streak'); + document.getElementById("guessForm").style.display = "none"; + feedback.textContent = "You got it right!"; + document.getElementById("shareResult").style.display = "block"; + localStorage.setItem("winningGuess", guess.value); + textResult = textResult + "šŸŸ©"; + for (var i = 1; i < (3-guessNo); i++) { + textResult = textResult + "ā¬›"; + } + localStorage.setItem('result', textResult); + dates[dayCount-1].classList.add('won'); + + } else if(guessNo==1){ + guessNo = guessNo + 1; + localStorage.setItem('guessNo', guessNo); + feedback.textContent = "šŸ©ø " + (3-guessNo) + " guesses remaning"; + document.getElementById("movieFrame").src = pix[guessNo]; + firstGuess.textContent = "āŒ" + guess.value; + localStorage.setItem('firstGuess', guess.value); + document.getElementById("firstGuess").style.display = "block"; + textResult = textResult + "šŸŸ„"; + localStorage.setItem('result', textResult); + }else if(guessNo<2){ + guessNo = guessNo + 1; + localStorage.setItem('guessNo', guessNo); + feedback.textContent = "šŸ©ø " + (3-guessNo) + " guesses remaning"; + document.getElementById("movieFrame").src = pix[guessNo]; + secondGuess.textContent = "āŒ" + guess.value; + localStorage.setItem('secondGuess', guess.value); + document.getElementById("secondGuess").style.display = "block"; + textResult = textResult + "šŸŸ„"; + localStorage.setItem('result', textResult); + } + else{ + feedback.textContent = "GAME OVER"; + textResult = textResult + "šŸŸ„"; + localStorage.setItem('guessNo', guessNo); + localStorage.setItem('streak', 0); + localStorage.setItem('day'+dayCount,'false'); + dates[dayCount-1].classList.add('lost'); + + } + console.log(textResult); + + } + + + function autocomplete(inp, arr) { + /*the autocomplete function takes two arguments, + the text field element and an array of possible autocompleted values:*/ + var currentFocus; + /*execute a function when someone writes in the text field:*/ + inp.addEventListener("input", function(e) { + var a, b, i, val = this.value; + /*close any already open lists of autocompleted values*/ + closeAllLists(); + if (!val) { return false;} + currentFocus = -1; + /*create a DIV element that will contain the items (values):*/ + a = document.createElement("DIV"); + a.setAttribute("id", this.id + "autocomplete-list"); + a.setAttribute("class", "autocomplete-items"); + /*append the DIV element as a child of the autocomplete container:*/ + this.parentNode.appendChild(a); + /*for each item in the array...*/ + + for (i = 0; i < arr.length; i++) { + newArray = arr[i].split(" "); + /*check if the item starts with the same letters as the text field value:*/ + 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(' ') + " " + newArray[j].substr(0, val.length) + ""; + 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 += ""; + /*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); +}); +} + +function copyToClipboard() { + navigator.clipboard.writeText(textResult).then(() => { + shareResult.value = "copied!"; + // Alert the user that the action took place. + // Nobody likes hidden stuff being done under the hood! + + }); + } + +function getArchive(j){ + + dates[dayCount-1].classList.remove('current'); + dayCount = j; + dates[j-1].classList.add('current'); + deathOftheDay(); + clearGuess(); + checkingGuess(); + document.getElementById('guess').value = ""; + location.href='#'; + //window.open("#"); +} + + + + submitGuess.addEventListener('click', checkGuess) diff --git a/style.css b/style.css new file mode 100644 index 0000000..ea08fb8 --- /dev/null +++ b/style.css @@ -0,0 +1,403 @@ +* { box-sizing: border-box; } + + +.content{ + width: 100%; + position: relative; + margin: 30px 0; +} +.overlay { + position: fixed; + top: 0; + bottom: 0; + left: 0; + right: 0; + background: rgba(0, 0, 0, 0.7); + transition: opacity 500ms; + visibility: hidden; + opacity: 0; + z-index: 99; +} + +.InstructionText{ +position: absolute; +margin-left: 65px; +margin-top: -50px; + +} +.overlay:target { + visibility: visible; + opacity: 1; +} +.popup { + text-align: left; + margin: 70px auto; + padding: 20px; + background: #333; + border-radius: 5px; + width: 30%; + position: relative; + transition: all 5s ease-in-out; + overflow: hidden; +} +.popup i{ + padding: 14px 16px; + font-size: 36px; + display: flex; + +align-items: center; +} +.popup h2 { + margin-top: 0; + color: white; + font-family: Tahoma, Arial, sans-serif; +} +.popup .close { + position: absolute; + top: 20px; + right: 30px; + transition: all 200ms; + font-size: 30px; + font-weight: bold; + text-decoration: none; + color: white;; +} +.popup .close:hover { + color: red; +} +.popup .content { + max-height: 30%; + overflow: auto; +} + + + +body { + margin: 0px; + background-color: #121212; + color: white; + font: 16px Arial; +display:flex; flex-direction:column; justify-content:center; +text-align: center; +} +p { + margin:0; +} +i{ + font-size: 1.5rem; +} + +.mobileInfo{ + display: none; +} + +.bottomContainer{ + padding: 16px; +} + +.subnav{ + margin-left: auto; + margin-right: auto; + width: 50%; +} +#shareResult{ + background-color: green; + margin-top: 20px; + display:none; + margin-left: auto; + margin-right: auto; + +} +#guessForm{ + padding-bottom: 14px; +} + +#firstGuess , #secondGuess{ + display: none; + margin-top: 10px; + border-style: solid; + padding-top: 10px; + padding-bottom:10px; + width: 450px; + /* display: block; */ + margin-left: auto; + margin-right: auto; +} +.cross{ + width: 20px; + margin-left: 0px; +} + +.center { + display: block; + padding: 14px 16px; + margin-left: auto; + margin-right: auto; + width: 50%; +} +.title { + position: absolute; + left: 0; + right: 0; + margin: 0 auto; + +} +.autocomplete { + /*the container must be positioned relative:*/ + width: 60%; + text-align:left; + position: relative; + display: inline-block; +} +#guessForm { + width: 50%; + left: 0; + right: 0; + margin: 0 auto; +} +input { + border: 1px solid transparent; + background-color: #f1f1f1; + /* color: black; */ + padding: 10px; + font-size: 16px; + resize: vertical; +} +input[type=text] { + background-color: #f1f1f1; + width: 100%; + border-radius: 5px; +} +input[type=button] { + border-radius: 5px; + background-color: #B91C1C; + color: #fff; +} +.autocomplete-items { + position: absolute; + border: 1px solid #d4d4d4; + color: black; + border-bottom: none; + border-top: none; + z-index: 99; + /*position the autocomplete items to be the same width as the container:*/ + top: 100%; + left: 0; + right: 0; +} +.autocomplete-items div { + padding: 10px; + cursor: pointer; + background-color: #fff; + border-bottom: 1px solid #d4d4d4; +} +.autocomplete-items div:hover { + /*when hovering an item:*/ + background-color: #e9e9e9; +} +.autocomplete-active { + /*when navigating through the items using the arrow keys:*/ + background-color: DodgerBlue !important; + color: #ffffff; +} + + +/* style of navigation */ +.topnav { + margin-top: 0px; + background-color: #333; + overflow: hidden; + text-align: center; + padding: 5 5 5 5; +} + +/* Style the links inside the navigation bar */ +.topnav a { + float: left; + color: #f2f2f2; + text-align: center; + padding: 14px 16px 14px 16px; + text-decoration: none; + font-size: 17px; +} + +/* Change the color of links on hover */ +.topnav a:hover { + background-color: #ddd; + color: black; +} + +/* Add a color to the active/current link */ +.topnav a.active { + background-color: #04AA6D; + color: white; +} + +/* Right-aligned section inside the top navigation */ +.topnav-right { + float: right; +} + +@media only screen and (max-width: 1200px) { + + .subnav{ + margin-left: auto; + margin-right: auto; + width: 100%; + } + + .center { + display: block; + padding: 14px 16px; + margin-left: auto; + margin-right: auto; + width: 100%; + } + + #guessForm { + width: 100%; + } + #firstGuess , #secondGuess{ + + width: 100%; + /* display: block; */ + margin-left: auto; + margin-right: auto; + + } + +} + +.archive{ + position: relative; + display: flex; + justify-content: center; + align-items: center; +} +.calendar { + position: relative; + width: 400px; + background-color: #fff; + box-sizing: border-box; + box-shadow: 0 5px 50px rgba(#000, 0.5); + border-radius: 8px; + overflow: hidden; +} + + +.calendar__date { + padding: 20px; + display: grid; + grid-template-columns: repeat(auto-fit, minmax(25px, 1fr)); + grid-gap: 25px; + box-sizing: border-box; +} + +.calendar__day { + display: flex; + align-items: center; + justify-content: center; + height: 25px; + font-weight: 600; + color: #262626; + + &:nth-child(7) { + color: #ff685d; + } +} + +.calendar__number { + display: flex; + align-items: center; + justify-content: center; + height: 25px; + color: grey; + font-style:oblique; + +} +.current{ + border-style: dashed; + background-color: orange; + color: white; + border-color: black; + border-width: 2px; + font-style:normal; + +} +.past{ + background-color: orange; + cursor: pointer; + color: white; +font-style:normal; + + +} +.won{ + /* cursor:none; */ + color: white; + cursor:default; + background-color: green; +font-style:normal; + /* border-width: 0px; */ +} +.lost{ + /* cursor:none; */ + color: white; + background-color: red; +font-style:normal; + /* border-width: 0px; */ +} + + + + + + + +@media only screen and (max-width: 600px) { + .topnav a { + text-align: center; + padding: 7px 8px 7px 8px; + text-decoration: none; + font-size: 17px; + } + + i { + font-size: 1rem; + } +.wideInfo{ + display: none; +} +.mobileInfo{ + display: block; +} +.title { + position: relative; +float: left; +width: 200px; +} + +.popup{ + width: 90%; +} + +input { + + padding: 10px; + font-size: 16px; +} +input[type=text] { + background-color: #f1f1f1; + width: 100%; + border-radius: 5px; +} +input[type=button] { + border-radius: 5px; + background-color: #B91C1C; + color: #fff; +} +#guessForm { + width: 100%; +} + +} diff --git a/title3.png b/title3.png new file mode 100644 index 0000000..2e273bb Binary files /dev/null and b/title3.png differ