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

added image buttons

Browse Source
This commit is contained in:
gocivici 2022-09-25 16:26:54 +03:00
parent a5a48aa92e
commit bffcc57d8e
4 changed files with 126 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
images/90.gif
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 52 KiB

111
index.html
View File

@ -25,7 +25,6 @@
<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 href="#stats"><i class="fas fa-chart-bar"></i></a>
<a href="#archive"><i class="fas fa-history"></i></a>
</div>
</div>
</div>
@ -70,6 +69,59 @@
<div id="streakNumber" class="content">
your stats
</div>
<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>
@ -88,57 +140,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>
@ -153,6 +155,11 @@
<figure class="movie-img">
<img src="images/images.png" id="movieFrame" alt="movie death frame" class="center">
</figure>
<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>

43
main.js
View File

@ -17,7 +17,18 @@ 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');
}
picButtons[g].classList.add('active');
}
// document.getElementById("button2").style.display = "none"
// document.getElementById("button3").style.display = "none"
@ -85,7 +96,8 @@ function markCalendar() {
var points = "⬛⬛⬛"
//check if the user played this before
firstCheck()
firstCheck();
revealButtons();
function firstCheck(){
guessNo = 0;
feedback.textContent = "🩸 " + (3-guessNo) + " guesses remaining";
@ -133,8 +145,9 @@ 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";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')){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');
revealButtons();
}else {
clearGuess();
localStorage.setItem('day', dayCount);
@ -158,7 +171,23 @@ window.onload = deathOftheDay();
}
console.log('Movie: ', movieOfTheDay);
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 = pix[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 checkGuess() {
@ -191,7 +220,7 @@ console.log("day count:" + dayCount);
document.getElementById("feedback").innerHTML = "Next movie revealed at midnight! 🕛 <br>";
document.getElementById("resultText").innerHTML = textResult;
dates[dayCount-1].classList.add('won');
revealButtons(2);
} else if(guessNo==1){
guessNo = guessNo + 1;
@ -203,6 +232,7 @@ console.log("day count:" + dayCount);
document.getElementById("firstGuess").style.display = "block";
textResult = textResult + "🟥";
localStorage.setItem('result', textResult);
revealButtons();
}else if(guessNo<2){
guessNo = guessNo + 1;
localStorage.setItem('guessNo', guessNo);
@ -213,6 +243,7 @@ console.log("day count:" + dayCount);
document.getElementById("secondGuess").style.display = "block";
textResult = textResult + "🟥";
localStorage.setItem('result', textResult);
revealButtons();
}
else{
feedback.textContent = "GAME OVER";
@ -316,7 +347,7 @@ const config = {
type: 'bar',
data: data,
options: {
maintainAspectRatio: false,
// maintainAspectRatio: false,
scales:{
yAxes:{
ticks:{

34
style.css
View File

@ -1,5 +1,26 @@
* { box-sizing: border-box; }
#button1,#button2,#button3{
display: none;
}
.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: 16px;
}
.active{
background-color: #656565;
}
.picButtons{
margin-bottom: 20px;
}
.fa-tint{
padding-left: 21.625px !important;
padding-right: 21.625px !important;
@ -10,12 +31,12 @@
display: table;
/* margin: 30px 0; */
}
.chartNumber{
/* .chartNumber{
position: relative;
margin: auto;
height: 50%;
width: 60%;
}
} */
.overlay {
position: fixed;
@ -191,6 +212,7 @@ figure{
position: absolute;
left: 0;
right: 0;
top: 8px;
margin: 0 auto;
}
@ -455,9 +477,13 @@ font-style:normal;
display: block;
}
.title {
top:0px;
position: relative;
float: left;
width: 200px;
width: 230px;
}
i{
font-size: 1.4rem;
}
.popup{