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
This commit is contained in:
and94x 2022-12-11 13:34:21 +00:00
commit cd69c462c2
3 changed files with 142 additions and 59 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>

78
script.js
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;
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();
} }

111
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 {
left: 50%; animation: won 5s;
top: 50%; animation-timing-function: ease-in-out;
transform: translate(-50%, -50%); }
@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;
}
} }