diff --git a/images/90.gif b/images/90.gif
deleted file mode 100644
index af66625..0000000
Binary files a/images/90.gif and /dev/null differ
diff --git a/index.html b/index.html
index 6a451b1..6ef82ba 100644
--- a/index.html
+++ b/index.html
@@ -25,7 +25,6 @@
-
@@ -70,6 +69,59 @@
your stats
+
+
+
+
+
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
+
+
+
October 2022 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
-
-
+
+
+
+
+
+
diff --git a/main.js b/main.js
index 0a92bf2..9acbe03 100644
--- a/main.js
+++ b/main.js
@@ -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 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')){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 {
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! 🕛
";
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:{
diff --git a/style.css b/style.css
index 5bd2f57..53b6972 100644
--- a/style.css
+++ b/style.css
@@ -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{