91 lines
3.4 KiB
JavaScript
91 lines
3.4 KiB
JavaScript
const toggled = 'toggled';
|
|
|
|
replaceAt = function(str, index, replacement) {
|
|
return str.substr(0, index) + replacement+ str.substr(index + replacement.length);
|
|
}
|
|
|
|
function handleClickableBoxes(evt) {
|
|
let me = evt.target;
|
|
|
|
var hasMultiTarget = false;
|
|
var goodMultiTarget = false;
|
|
|
|
if(me.classList.contains('multi-count')) {
|
|
hasMultiTarget = true;
|
|
var counterClass = 0;
|
|
Array.from(me.classList).forEach(x => {if (x.startsWith('multi-count-')) {counterClass = x.replace('multi-count-','')}});
|
|
if (!me.classList.contains(`multi-click-${counterClass}`)) {
|
|
var innerCount = 0;
|
|
Array.from(me.classList).forEach(x => {if (x.startsWith('multi-click-')) {innerCount = x.replace('multi-click-','')}});
|
|
me.innerHTML = replaceAt(me.innerHTML, me.innerHTML.indexOf('◻'), '◼️');
|
|
Array.from(me.classList).forEach(x => {if (x.startsWith('multi-click-')) {me.classList.remove(x)}});
|
|
innerCount = parseInt(innerCount) + 1;
|
|
me.classList.add(`multi-click-${innerCount}`);
|
|
if (innerCount == counterClass) {
|
|
goodMultiTarget = true;
|
|
}
|
|
} else {
|
|
goodMultiTarget = true;
|
|
}
|
|
}
|
|
|
|
var goodMulti = (hasMultiTarget && goodMultiTarget) || (!hasMultiTarget && !goodMultiTarget)
|
|
if(me.classList.contains(toggled)) {
|
|
me.classList.remove(toggled)
|
|
} else {
|
|
if (goodMulti)
|
|
me.classList.add(toggled)
|
|
}
|
|
|
|
var classToCheck = '';
|
|
|
|
me.classList.forEach(x => { if(x.startsWith('card-column-')) {classToCheck = `.${x}`}})
|
|
if (checkForBingo(classToCheck)) { return; }
|
|
|
|
me.parentElement.classList.forEach(x => { if(x.startsWith('card-row-')) {classToCheck = `.${x} .card-column`}})
|
|
if (checkForBingo(classToCheck)) { return; }
|
|
|
|
classToCheck = '.card-row-1 .card-column-1, .card-row-2 .card-column-2, .card-row-4 .card-column-4, .card-row-5 .card-column-5';
|
|
if (checkForBingo(classToCheck)) { return; }
|
|
|
|
classToCheck = '.card-row-1 .card-column-5, .card-row-2 .card-column-4, .card-row-4 .card-column-2, .card-row-5 .card-column-1';
|
|
if (checkForBingo(classToCheck)) { return; }
|
|
}
|
|
|
|
function checkForBingo(querySelector) {
|
|
var allHave = true;
|
|
Array.from(document.querySelectorAll(querySelector)).forEach(x => allHave = allHave && x.classList.contains(toggled))
|
|
if (allHave) {
|
|
makeBingo(querySelector)
|
|
return true;
|
|
}
|
|
return false;
|
|
}
|
|
|
|
function makeBingo(querySelector) {
|
|
let pyroContent = `<div class="pyro">
|
|
<!-- Modal content -->
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h2>You got Bingo!</h2>
|
|
</div>
|
|
<div class="modal-body">
|
|
<p>Congratulations on Bingo!</p>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<h4>Refresh the page to play again!</h4>
|
|
<sub>This page will keep showing this on every click...</sub>
|
|
</div>
|
|
</div>
|
|
<div class="before"></div><div class="after"></div></div>`;
|
|
document.getElementById('pyrowrapper').innerHTML = pyroContent;
|
|
document.getElementById('pyrowrapper').addEventListener('click', hideBingo);
|
|
document.querySelectorAll(querySelector).forEach(x => {x.classList.add('bingo');})
|
|
}
|
|
|
|
function hideBingo() {
|
|
document.getElementById('pyrowrapper').innerHTML = '';
|
|
}
|
|
|
|
Array.from(document.getElementsByClassName('card-column')).forEach(e => e.addEventListener('click', handleClickableBoxes));
|