const hit = ["๐ซฃ", "๐", "๐", "๐ค"];
var key = document.getElementsByTagName( "button" );
var chain = jQuery.makeArray( key );
for (var i = 0; i < hit.length; i++) {
(function (i) {
chain[i].onclick = function () {
this.innerHTML = hit[i];
};
}(i));
}
var len = hit.length;
document.getElementsByClassName("format").innerHTML = len;
console.log(hit)
var buttons = document.querySelectorAll('button'),
i;
for (i = 0; i < buttons.length; i++) {
buttons[i].addEventListener('click', function() {
var pressed = document.getElementById('pressed');
pressed.value += this.value + "|";
if (pressed.value === '1|2|3|4|') {
alert('You unlocked it!');
const element = document.getElementById("dot"); element.addEventListener("click", function() {
setTimeout(function(){
document.getElementById('T').style.top = '-50%';
}, 2000); // 1000 = 1 seconds
setTimeout(function(){
document.getElementById('B').style.bottom = '-50%';
}, 2000); // 1000 = 1 seconds
});
}
if (pressed.value.length >= 10) {
//Start over
pressed.value = "";
}
}, false);
}
const welkom = function(){document.getElementById("open").play()};
// Initialiseer de hit-array met de waarden 1, 2, 3, 4
let hit = ["2", "3", "1", "4"];
// Voeg de event listener toe aan de reset knop om de array te resetten
document.getElementById('resetButton').addEventListener('click', function() {resetArray();});
// Voeg event listeners toe aan alle knoppen, behalve de resetknop
document.querySelectorAll('.format:not(#resetButton)').forEach(function(button) {
button.addEventListener('click', function () {
var pressed = document.getElementById('pressed');
pressed.value += this.value + "|";
// Verander de achtergrondkleur van de geklikte knop naar LightGoldenRodYellow
this.style.backgroundColor = 'LightGoldenRodYellow';
// Controleer of de geklikte knop in de juiste volgorde is
if (this.value === hit[0]) {
// Als de knop in de juiste volgorde is, verwijder deze waarde uit de hit-array
hit.shift();
// Controleer of de array correct is en de knop "dot" klikbaar wordt
if (pressed.value === '2|3|1|4|') {
const button = setTimeout(function () {
document.getElementById('dot').style.cssText = 'background-color: #669966;-webkit-transform:scale(2)';
document.getElementById('dot').disabled = false;
}, 200);
// Maak de knop "dot" klikbaar
document.getElementById('dot').addEventListener('click', function () {
if (!this.disabled) {
welkom(); // Speel de audio af
// Voer verdere acties uit wanneer de knop "dot" wordt geklikt
setTimeout(function () { $('#content')[0].style.display = 'none'; }, 1600);
setTimeout(function () { $('#lijn')[0].style.display = 'none'; }, 1600);
setTimeout(function () { $('#social')[0].style.display = 'none'; }, 1600);
setTimeout(function () { $('#U')[0].style.left = '-50%'; }, 2000);
setTimeout(function () { $('#key')[0].style.left = '0%'; }, 2000);
setTimeout(function () { $('#I')[0].style.left = '0vw'; }, 2100);
setTimeout(function () { $('#R')[0].style.right = '-50%'; }, 2000);
setTimeout(function () { $('#D')[0].style.right = '0vw'; }, 2100);
} else {
// Geef een melding weer dat de volgorde nog niet compleet is
document.getElementById('input').textContent = 'Wrong';
}
});
}
} else {
// Als de knop niet in de juiste volgorde is, reset de hit-array
resetArray();
}
if (pressed.value.length >= 10) {
pressed.value = "";
}
});
});
// Reset de array alleen wanneer de resetknop wordt geklikt
function resetArray() {
document.getElementById('pressed').value = ""; // Reset de waarde van pressed
// Reset de achtergrondkleur van alle knoppen
document.querySelectorAll('.format:not(#resetButton)').forEach(function(button) {
button.style.backgroundColor = ''; // Reset de achtergrondkleur
});
// Reset de hit-array naar de initiรซle waarde
hit = ["2", "3", "1", "4"];
}
// Aangepaste welkom functie
const welkom = function () {
if (!document.getElementById('dot').disabled && document.getElementById('pressed').value === '2|3|1|4|') {
$("#open")[0].play();
}
};
const mousedown = ["๐", "๐คช", "๐ค", "๐คซ","๐ฒ","๐ตโ๐ซ","๐คข","๐","๐คฏ","๐ซจ","๐ค","๐คฌ","๐ซฃ","๐ง","๐ด","๐ค"];
const mouseleave = ["๐ค", "๐ค", "๐ค", "๐ค","๐ค","๐ค","๐ค","๐ค","๐ค","๐ค","๐ค","๐ค","๐ค","๐ค","๐ค","๐ค"];
const mouseover = ["๐", "๐คช", "๐ค", "๐คซ","๐ฒ","๐ตโ๐ซ","๐คข","๐","๐คฏ","๐ซจ","๐ค","๐คฌ","๐ซฃ","๐ง","๐ด","๐ค"];
var key = document.getElementsByClassName("format");
var chain = jQuery.makeArray(key);
for (var i = 0; i < chain.length; i++) {
(function(i) {
var timer;
chain[i].addEventListener('mousedown', function() {
clearTimeout(timer);
this.innerHTML = mousedown[i];
}, true);
chain[i].addEventListener('mouseover', function() {
clearTimeout(timer);
this.innerHTML = mouseover[i];
});
chain[i].addEventListener('mouseleave', function() {
timer = setTimeout(() => {
this.innerHTML = mouseleave[i];
}, 2000);
});
})(i);
}
var buttons = document.querySelectorAll('button'),
i;
for (i = 0; i < buttons.length; i++) {
buttons[i].addEventListener('click', function() {
var pressed = document.getElementById('pressed');
pressed.value += this.value + "|";
if (pressed.value === '1|2|3|4|5|6|7|8|9|10|11|12|13|14|15|16|') {
//alert('You unlocked it!');
const button = document.getElementById('dot').style.cssText = 'background-color: #669966;-webkit-transform:scale(1.5)';
const element = document.getElementById("dot"); element.addEventListener("click", function() {
setTimeout(function(){
document.getElementById('T').style.top = '-50%';
}, 2000); // 1000 = 1 seconds
setTimeout(function(){
document.getElementById('B').style.bottom = '-50%';
}, 2000); // 1000 = 1 seconds
setTimeout(function(){
document.getElementById('dot').style.display = 'none';
}, 2000); // 1000 = 1 seconds
});
}
if (pressed.value.length >= 40) {
//Start over
pressed.value = "";
}
}, false);
}
const welkom = function(){document.getElementById("open").play()};