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> </table>
<p id="seeed">Seeed: <span id="seeed-value"></span> <span id="copy-permalink">📋</span></p> <p id="seeed">Seeed: <span id="seeed-value"></span> <span id="copy-permalink">📋</span></p>
<div id="winner-message"> <div id="winner-message">
<div>B</div> <p>B</p>
<div>I</div> <p>I</p>
<div>N</div> <p>N</p>
<div>G</div> <p>G</p>
<div>O</div> <p>O</p>
</div> </div>
</body> </body>
</html> </html>

72
script.js
View File

@ -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; let field = ev.target;
if (field) { if (field && !field.classList.contains('drawn')) {
if (field.classList.contains('drawn')) {
field.classList.remove('drawn');
} else {
field.classList.add('drawn'); field.classList.add('drawn');
checkForBingo(field); checkForBingo(field);
} else {
console.error('Sum ting wong (* ￣︿￣)');
} }
};
const undrawBingoFieldEventHandler = (ev) => {
ev.preventDefault();
let field = ev.target;
if (field) {
field.classList.remove('drawn');
field.classList.remove('bingo');
} 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();
} }

105
style.css
View File

@ -1,3 +1,4 @@
/* HTML Selectors */
body { body {
font-family: monospace; font-family: monospace;
height: 95vh; height: 95vh;
@ -17,6 +18,10 @@ table {
table-layout: fixed; table-layout: fixed;
} }
canvas {
pointer-events: none;
}
td { td {
text-align: center; text-align: center;
height: calc(100vh / 6); height: calc(100vh / 6);
@ -25,32 +30,39 @@ td {
font-size: xx-large; 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 { h1, p {
text-align: center; text-align: center;
margin: 5px; 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 { p#seeed {
user-select: text; user-select: text;
} }
@ -59,21 +71,58 @@ span#copy-permalink, span#refresh-bingo {
cursor: pointer; cursor: pointer;
} }
#winner-message { div#winner-message {
display: flex; display: flex;
position: fixed; position: fixed;
font-size: 3000%; font-size: 3000%;
left: 50%; text-shadow: 0 0 40px white;
top: 100%;
transform: translate(-50%, 0);
text-shadow: 10px 10px 20px black;
color: orange;
transition: all ease-out .75s; transition: all ease-out .75s;
pointer-events: none; pointer-events: none;
} }
#winner-message.won { 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%; left: 50%;
top: 50%; top: 50%;
transform: translate(-50%, -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;
}
} }