panki/bingo
1
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

moar stuff

Browse Source
This commit is contained in:
and94x 2022-12-04 17:32:31 +01:00
parent 067a2a5eef
commit 889ede96ca
3 changed files with 141 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
index.html
View File

@ -55,11 +55,11 @@
</table>
<p id="seeed">Seeed: <span id="seeed-value"></span> <span id="copy-permalink">📋</span></p>
<div id="winner-message">
<div>B</div>
<div>I</div>
<div>N</div>
<div>G</div>
<div>O</div>
<p>B</p>
<p>I</p>
<p>N</p>
<p>G</p>
<p>O</p>
</div>
</body>
</html>

76
script.js
View File

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

113
style.css
View File

@ -1,3 +1,4 @@
/* HTML Selectors */
body {
font-family: monospace;
height: 95vh;
@ -17,6 +18,10 @@ table {
table-layout: fixed;
}
canvas {
pointer-events: none;
}
td {
text-align: center;
height: calc(100vh / 6);
@ -25,32 +30,39 @@ td {
font-size: xx-large;
}
canvas {
pointer-events: none;
}
td:hover {
background-color: blueviolet;
}
td.drawn {
background-color: green;
}
td.center-field {
background-color: green;
}
img {
max-height: calc(100vh / 6);
max-width: calc(100vh / 6);
}
h1, p {
text-align: center;
margin: 5px;
}
/* Specific selectors */
td:hover {
background-color: gray;
}
td.drawn {
background-color: cornflowerblue;
text-decoration: line-through;
}
td.drawn:hover {
background-color: cadetblue;
}
td.drawn.bingo {
background-color: green;
}
td.drawn.bingo:hover {
background-color: darkgreen;
}
img#center-field-image {
max-height: calc(100vh / 6);
max-width: calc(100vh / 6);
}
p#seeed {
user-select: text;
}
@ -59,21 +71,58 @@ span#copy-permalink, span#refresh-bingo {
cursor: pointer;
}
#winner-message {
div#winner-message {
display: flex;
position: fixed;
font-size: 3000%;
left: 50%;
top: 100%;
transform: translate(-50%, 0);
text-shadow: 10px 10px 20px black;
color: orange;
text-shadow: 0 0 40px white;
transition: all ease-out .75s;
pointer-events: none;
}
#winner-message.won {
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
div#winner-message.won {
animation: won 5s;
animation-timing-function: ease-in-out;
}
@keyframes won {
0% {
left: 50%;
top: 100%;
transform: translate(-50%, 0);
color: green;
}
20% {
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
opacity: 100%;
color: yellow;
}
40% {
color: orange;
}
50% {
left: 50%;
top: 50%;
}
60% {
color: purple;
}
80% {
color: blue;
opacity: 100%;
}
100% {
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
opacity: 0;
}
}