|
|
@ -66,14 +66,18 @@ let fields = [
|
|
|
|
let seed;
|
|
|
|
let seed;
|
|
|
|
const urlParams = new URLSearchParams(window.location.search);
|
|
|
|
const urlParams = new URLSearchParams(window.location.search);
|
|
|
|
const seed_elem = document.querySelector('#seeed-value');
|
|
|
|
const seed_elem = document.querySelector('#seeed-value');
|
|
|
|
const centerFieldImage = document.querySelector('#center-field-image');
|
|
|
|
const allFields = document.querySelectorAll('#bingo td');
|
|
|
|
const bingoFields = document.querySelectorAll('#bingo td.bingo-field');
|
|
|
|
const bingoFields = document.querySelectorAll('#bingo td.bingo-field');
|
|
|
|
|
|
|
|
const centerFieldImage = document.querySelector('#center-field-image');
|
|
|
|
const refreshBingoButton = document.querySelector('#refresh-bingo');
|
|
|
|
const refreshBingoButton = document.querySelector('#refresh-bingo');
|
|
|
|
const copyPermalinkButton = document.querySelector('#copy-permalink');
|
|
|
|
const copyPermalinkButton = document.querySelector('#copy-permalink');
|
|
|
|
const winnerMessage = document.querySelector('#winner-message');
|
|
|
|
const winnerMessage = document.querySelector('#winner-message');
|
|
|
|
|
|
|
|
|
|
|
|
centerFieldImage.src = "img/7-vs-wild-logo.svg";
|
|
|
|
centerFieldImage.src = "img/7-vs-wild-logo.svg";
|
|
|
|
centerFieldImage.alt = "7 vs. Wild Logo";
|
|
|
|
centerFieldImage.alt = "7 vs. Wild Logo";
|
|
|
|
|
|
|
|
centerFieldImage.parentElement.addEventListener('contextmenu', ev => {
|
|
|
|
|
|
|
|
ev.preventDefault();
|
|
|
|
|
|
|
|
centerFieldImage.parentElement.classList.remove('bingo');
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
/**
|
|
|
|
* Reads the seed from URL Parameter or generates new seed
|
|
|
|
* Reads the seed from URL Parameter or generates new seed
|
|
|
@ -110,47 +114,71 @@ const checkForBingo = (field) => {
|
|
|
|
let clickedCol = parseInt(field.dataset.col);
|
|
|
|
let clickedCol = parseInt(field.dataset.col);
|
|
|
|
|
|
|
|
|
|
|
|
//check horizontal and vertical axis
|
|
|
|
//check horizontal and vertical axis
|
|
|
|
if (document.querySelectorAll(`#bingo td.drawn[data-row='${clickedRow}']`).length === 5
|
|
|
|
if (document.querySelectorAll(`#bingo td.drawn[data-row='${clickedRow}']`).length === 5) {
|
|
|
|
|| document.querySelectorAll(`#bingo td.drawn[data-col='${clickedCol}']`).length === 5) {
|
|
|
|
document.querySelectorAll(`#bingo td.drawn[data-row='${clickedRow}']`).forEach(elem => elem.classList.add('bingo'));
|
|
|
|
bingo = true
|
|
|
|
bingo = true;
|
|
|
|
|
|
|
|
} else {
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
if (document.querySelectorAll(`#bingo td.drawn[data-col='${clickedCol}']`).length === 5) {
|
|
|
|
|
|
|
|
document.querySelectorAll(`#bingo td.drawn[data-col='${clickedCol}']`).forEach(elem => elem.classList.add('bingo'));
|
|
|
|
|
|
|
|
bingo = true;
|
|
|
|
|
|
|
|
} else {
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
//check diagonal axis
|
|
|
|
//check diagonal axis
|
|
|
|
if (clickedRow === clickedCol) {
|
|
|
|
if (clickedRow === clickedCol) {
|
|
|
|
if (
|
|
|
|
if (
|
|
|
|
document.querySelector(`#bingo td.bingo-field.drawn[data-row="0"][data-col="0"]`) &&
|
|
|
|
document.querySelector(`#bingo td.drawn[data-row="0"][data-col="0"]`) &&
|
|
|
|
document.querySelector(`#bingo td.bingo-field.drawn[data-row="1"][data-col="1"]`) &&
|
|
|
|
document.querySelector(`#bingo td.drawn[data-row="1"][data-col="1"]`) &&
|
|
|
|
document.querySelector(`#bingo td.bingo-field.drawn[data-row="3"][data-col="3"]`) &&
|
|
|
|
document.querySelector(`#bingo td.drawn[data-row="3"][data-col="3"]`) &&
|
|
|
|
document.querySelector(`#bingo td.bingo-field.drawn[data-row="4"][data-col="4"]`)
|
|
|
|
document.querySelector(`#bingo td.drawn[data-row="4"][data-col="4"]`)
|
|
|
|
) {
|
|
|
|
) {
|
|
|
|
|
|
|
|
document.querySelector(`#bingo td.drawn[data-row="0"][data-col="0"]`).classList.add('bingo');
|
|
|
|
|
|
|
|
document.querySelector(`#bingo td.drawn[data-row="1"][data-col="1"]`).classList.add('bingo');
|
|
|
|
|
|
|
|
document.querySelector(`#bingo td.drawn[data-row="2"][data-col="2"]`).classList.add('bingo');
|
|
|
|
|
|
|
|
document.querySelector(`#bingo td.drawn[data-row="3"][data-col="3"]`).classList.add('bingo');
|
|
|
|
|
|
|
|
document.querySelector(`#bingo td.drawn[data-row="4"][data-col="4"]`).classList.add('bingo');
|
|
|
|
bingo = true;
|
|
|
|
bingo = true;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
} else if (clickedRow + clickedCol === 4) {
|
|
|
|
} else if (clickedRow + clickedCol === 4) {
|
|
|
|
if (
|
|
|
|
if (
|
|
|
|
document.querySelector(`#bingo td.bingo-field.drawn[data-row="0"][data-col="4"]`) &&
|
|
|
|
document.querySelector(`#bingo td.drawn[data-row="0"][data-col="4"]`) &&
|
|
|
|
document.querySelector(`#bingo td.bingo-field.drawn[data-row="1"][data-col="3"]`) &&
|
|
|
|
document.querySelector(`#bingo td.drawn[data-row="1"][data-col="3"]`) &&
|
|
|
|
document.querySelector(`#bingo td.bingo-field.drawn[data-row="3"][data-col="1"]`) &&
|
|
|
|
document.querySelector(`#bingo td.drawn[data-row="3"][data-col="1"]`) &&
|
|
|
|
document.querySelector(`#bingo td.bingo-field.drawn[data-row="4"][data-col="0"]`)
|
|
|
|
document.querySelector(`#bingo td.drawn[data-row="4"][data-col="0"]`)
|
|
|
|
) {
|
|
|
|
) {
|
|
|
|
|
|
|
|
document.querySelector(`#bingo td.drawn[data-row="0"][data-col="4"]`).classList.add('bingo');
|
|
|
|
|
|
|
|
document.querySelector(`#bingo td.drawn[data-row="1"][data-col="3"]`).classList.add('bingo');
|
|
|
|
|
|
|
|
document.querySelector(`#bingo td.drawn[data-row="2"][data-col="2"]`).classList.add('bingo');
|
|
|
|
|
|
|
|
document.querySelector(`#bingo td.drawn[data-row="3"][data-col="1"]`).classList.add('bingo');
|
|
|
|
|
|
|
|
document.querySelector(`#bingo td.drawn[data-row="4"][data-col="0"]`).classList.add('bingo');
|
|
|
|
bingo = true;
|
|
|
|
bingo = true;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
if (bingo) {
|
|
|
|
if (bingo) {
|
|
|
|
|
|
|
|
winnerMessage.classList.remove('won');
|
|
|
|
window.fireworks.start();
|
|
|
|
window.fireworks.start();
|
|
|
|
winnerMessage.classList.add('won');
|
|
|
|
winnerMessage.classList.add('won');
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
};
|
|
|
|
};
|
|
|
|
const drawBingoFieldEventHandler = (ev) => {
|
|
|
|
const drawBingoFieldEventHandler = (ev) => {
|
|
|
|
|
|
|
|
let field = ev.target;
|
|
|
|
|
|
|
|
if (field && !field.classList.contains('drawn')) {
|
|
|
|
|
|
|
|
field.classList.add('drawn');
|
|
|
|
|
|
|
|
checkForBingo(field);
|
|
|
|
|
|
|
|
} else {
|
|
|
|
|
|
|
|
console.error('Sum ting wong (*  ̄︿ ̄)');
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
const undrawBingoFieldEventHandler = (ev) => {
|
|
|
|
|
|
|
|
ev.preventDefault();
|
|
|
|
let field = ev.target;
|
|
|
|
let field = ev.target;
|
|
|
|
if (field) {
|
|
|
|
if (field) {
|
|
|
|
if (field.classList.contains('drawn')) {
|
|
|
|
field.classList.remove('drawn');
|
|
|
|
field.classList.remove('drawn');
|
|
|
|
field.classList.remove('bingo');
|
|
|
|
} else {
|
|
|
|
|
|
|
|
field.classList.add('drawn');
|
|
|
|
|
|
|
|
checkForBingo(field);
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
} else {
|
|
|
|
} else {
|
|
|
|
console.error('Sum ting wong (*  ̄︿ ̄)');
|
|
|
|
console.error('Sum ting wong (*  ̄︿ ̄)');
|
|
|
|
}
|
|
|
|
}
|
|
|
@ -160,6 +188,7 @@ const drawTable = () => {
|
|
|
|
shuffleBoard().forEach((field, index) => {
|
|
|
|
shuffleBoard().forEach((field, index) => {
|
|
|
|
bingoFields[index].textContent = field;
|
|
|
|
bingoFields[index].textContent = field;
|
|
|
|
bingoFields[index].addEventListener('click', drawBingoFieldEventHandler);
|
|
|
|
bingoFields[index].addEventListener('click', drawBingoFieldEventHandler);
|
|
|
|
|
|
|
|
bingoFields[index].addEventListener('contextmenu', undrawBingoFieldEventHandler);
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
seed_elem.innerText = seed;
|
|
|
|
seed_elem.innerText = seed;
|
|
|
@ -216,7 +245,12 @@ drawTable();
|
|
|
|
|
|
|
|
|
|
|
|
const redrawTable = function () {
|
|
|
|
const redrawTable = function () {
|
|
|
|
winnerMessage.classList.remove('won');
|
|
|
|
winnerMessage.classList.remove('won');
|
|
|
|
bingoFields.forEach(elem => elem.classList.remove('drawn'));
|
|
|
|
allFields.forEach(elem => {
|
|
|
|
|
|
|
|
elem.classList.remove('bingo');
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
bingoFields.forEach(elem => {
|
|
|
|
|
|
|
|
elem.classList.remove('drawn');
|
|
|
|
|
|
|
|
});
|
|
|
|
seed = Date.now().toString();
|
|
|
|
seed = Date.now().toString();
|
|
|
|
drawTable();
|
|
|
|
drawTable();
|
|
|
|
}
|
|
|
|
}
|
|
|
|