Gorkem/horrordle
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added new border around result

Browse Source
This commit is contained in:
gocivici 2022-09-28 18:35:39 +03:00
parent dbdbc3284d
commit fe1daf353f
5 changed files with 152 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
images/Event Horizon/poster.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 267 KiB

BIN
images/a nightmare on elm street/poster.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 264 KiB

50
index.html
View File

@ -130,9 +130,9 @@
</div>
<a class="close" href="#">&times;</a>
<h3>Streak</h3>
<div id="streakNumber" class="content">
<!-- <div id="streakNumber" class="content">
your stats
</div>
</div> -->
<button onclick="window.localStorage.clear();"class="resetButton">Reset Stats</button>
@ -167,10 +167,46 @@
<!-- <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="images/back.png" id="movieFrame" alt="movie death frame" class="center" >
<div class="loading" id="loader"></div>
@ -199,10 +235,10 @@
<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>

50
main.js
View File

@ -18,12 +18,14 @@ 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"
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;
@ -70,6 +72,8 @@ function dayCounter(){
markCalendar();
function markCalendar() {
winCount = 0;
loseCount = 0;
dates = document.getElementsByClassName('calendar__number');
console.log(dates[10].innerHTML);
var tag = [];
@ -83,8 +87,10 @@ function markCalendar() {
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 {
@ -107,6 +113,10 @@ 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
}
@ -133,6 +143,7 @@ function clearGuess() {
localStorage.removeItem('secondGuess');
localStorage.removeItem('guessNo');
localStorage.removeItem('winningGuess');
localStorage.removeItem('lost');
localStorage.removeItem('movieName');
localStorage.removeItem("playedToday");
localStorage.removeItem('result');
@ -148,7 +159,8 @@ function clearGuess() {
function checkingGuess() {
streakNumber.textContent = localStorage.getItem('streak');
streakNumber.textContent =localStorage.getItem('streak');
if (localStorage.getItem('day')==dayCount) {
@ -161,10 +173,11 @@ streakNumber.textContent = localStorage.getItem('streak');
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('secondGuess')){secondGuess.textContent = "❌ " + localStorage.getItem('secondGuess');document.getElementById("secondGuess").style.display = "block";}
if(localStorage.getItem('winningGuess')){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";};
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";};
if(localStorage.getItem('lost')){ document.getElementById("congratz").innerHTML = "You lost☠️"; document.getElementsByClassName("resultContainer")[0].style.borderColor = "#C62828";}
secondGuess.textContent = "❌ " + localStorage.getItem('secondGuess');
revealButtons();
}else {
@ -172,6 +185,7 @@ clearGuess();
localStorage.setItem('day', dayCount);
}
markCalendar();
}
checkingGuess();
window.onload = deathOftheDay();
@ -188,6 +202,8 @@ window.onload = deathOftheDay();
pix.push("images/"+movieOfTheDay[0]+"/"+i+".png");
preloadImage("images/"+movieOfTheDay[0]+"/"+i+".png");
}
// preloadImage("images/"+movieOfTheDay[0]+"/poster.png");
document.getElementById("posterFrame").src = "images/"+movieOfTheDay[0]+"/poster.png";
console.log('Movie: ', movieOfTheDay[0]);
console.log('Array: ', pix);
showPic();
@ -218,8 +234,12 @@ window.onload = deathOftheDay();
// document.getElementById("bonusQuestion").style.display="none";
document.getElementById("bonusQuestion").innerHTML = "Survivor: "+ movieOfTheDay[2] + " ⭐";
textResult = textResult + "[⭐]"
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')
@ -227,6 +247,8 @@ window.onload = deathOftheDay();
}
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>";
@ -242,7 +264,7 @@ window.onload = deathOftheDay();
addData();
}
if(!localStorage.getItem('result')){
textResult = "Horrordle #"+dayCount+"\n🔪";
textResult = "🔪";
}else{
textResult = localStorage.getItem('result');
}
@ -260,8 +282,8 @@ console.log("day count:" + dayCount);
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));
streakNumber.textContent = " " + localStorage.getItem('streak');
// console.log(localStorage.getItem('day'+dayCount));
streakNumber.textContent = localStorage.getItem('streak');
document.getElementById("guessForm").style.display = "none";
document.getElementById("feedback").style.display = "none";
document.getElementById("movieName").innerHTML = movieOfTheDay[0] + " ✅";
@ -316,13 +338,21 @@ console.log("day count:" + dayCount);
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);
@ -376,7 +406,7 @@ autoCompleteJS.input.addEventListener("selection", function (event) {
});
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!

71
style.css
View File

@ -5,7 +5,59 @@
/* #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;
@ -230,7 +282,7 @@ align-items: center;
#streakNumber{
text-align: center;
margin-top: 0;
margin-bottom: 10px;
/* margin-bottom: 10px; */
}
h3 {
@ -339,7 +391,8 @@ i{
}
#shareResult{
background-color: green;
margin-top: 20px;
margin-top: 40px;
bottom: 5px;
display:none;
margin-left: auto;
margin-right: auto;
@ -537,6 +590,14 @@ border: 1px solid orangered;
width: 100%;
}
.resultContainer{
width: 95%;
padding: 16px 16px;
}
.resultStats{
/* padding: 0px; */
}
#firstGuess , #secondGuess{
@ -673,6 +734,12 @@ border-radius: 5px;
.fa-star{
padding-left: 0px !important;
} */
#winPerc, #streakNumber, #resultText, td {
font-size: 16px;
}
#congratz{
font-size: 1.5em;
}
}