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

Merge branch 'andy-arbeit' into 'master'

Browse Source 
moar stuff

See merge request panki/bingo!6
master
and94x 2 years ago
parent 067a2a5eef be6fba1e5e
commit cd69c462c2
3 changed files with 132 additions and 49 deletions
Show Stats Download Patch File Download Diff File

10
index.html
Unescape Escape 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>

74
script.js
Unescape Escape View File

@ -37,7 +37,7 @@ let fields = [
'"Ich frag mich, wie es den anderen so geht"', '"Ich frag mich, wie es den anderen so geht"',
'Kleidung ist feucht/nass', 'Kleidung ist feucht/nass',
'Joris verwirft seinen Tagesplan', 'Joris verwirft seinen Tagesplan',
'Sasha flext für die Kamera', 'Sascha flext für die Kamera',
'"Bist du deppert?"', '"Bist du deppert?"',
'Sonnenbrand', 'Sonnenbrand',
'7 in the wild', '7 in the wild',
@ -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();
} }

83
style.css
Unescape Escape 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,30 +30,37 @@ td {
font-size: xx-large; font-size: xx-large;
} }
canvas { h1, p {
pointer-events: none; text-align: center;
margin: 5px;
} }
/* Specific selectors */
td:hover { td:hover {
background-color: blueviolet; background-color: gray;
} }
td.drawn { td.drawn {
background-color: green; background-color: cornflowerblue;
text-decoration: line-through;
}
td.drawn:hover {
background-color: cadetblue;
} }
td.center-field { td.drawn.bingo {
background-color: green; background-color: green;
} }
img { td.drawn.bingo:hover {
max-height: calc(100vh / 6); background-color: darkgreen;
max-width: calc(100vh / 6);
} }
h1, p { img#center-field-image {
text-align: center; max-height: calc(100vh / 6);
margin: 5px; max-width: calc(100vh / 6);
} }
p#seeed { p#seeed {
@ -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%;
text-shadow: 0 0 40px white;
transition: all ease-out .75s;
pointer-events: none;
}
div#winner-message.won {
animation: won 5s;
animation-timing-function: ease-in-out;
}
@keyframes won {
0% {
left: 50%; left: 50%;
top: 100%; top: 100%;
transform: translate(-50%, 0); transform: translate(-50%, 0);
text-shadow: 10px 10px 20px black; color: green;
}
20% {
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
opacity: 100%;
color: yellow;
}
40% {
color: orange; color: orange;
transition: all ease-out .75s; }
pointer-events: none;
} 50% {
left: 50%;
top: 50%;
}
60% {
color: purple;
}
80% {
color: blue;
opacity: 100%;
}
#winner-message.won { 100% {
left: 50%; left: 50%;
top: 50%; top: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
opacity: 0;
}
} }
Write Preview
Loading…
Cancel
Save