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

Merge branch 'andy-arbeit' into 'master'

Browse Source 
Some andy stuff

See merge request panki/bingo!3
This commit is contained in:
Felix Pankratz 2022-12-02 18:58:57 +00:00
commit 55935bbd99
3 changed files with 197 additions and 129 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
index.html
View File

@ -1,5 +1,4 @@
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
@ -9,13 +8,12 @@
<meta name="description" content="Stammtisch Bingo"> <meta name="description" content="Stammtisch Bingo">
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
<script src="script.js" defer></script>
</head> </head>
<body> <body>
<h1>7 vs. Wild Bingo</h1> <h1>7 vs. Wild Bingo <span id="refresh-bingo">🔄</span></h1>
<table> <table id="bingo"></table>
</table> <p id="seeed">Seeed: <span id="seeed-value"></span> <span id="copy-permalink">📋</span></p>
<script src="script.js"></script>
</body> </body>
</html> </html>

91
script.js
View File

@ -51,9 +51,26 @@ let fields = [
]; ];
const FREE_FIELD_TEXT = "Freies Parken" const FREE_FIELD_TEXT = "Freies Parken"
const urlParams = new URLSearchParams(window.location.search);
const seed_elem = document.querySelector('#seeed-value');
const seed = Date.now().toString(); let seed;
var prng_hash_seed = cyrb128(seed); if (urlParams.has('seeed')) {
seed = urlParams.get('seeed');
} else {
seed = Date.now().toString();
}
const copyPermalinkButton = document.querySelector('#copy-permalink');
const copyPermalinkToClipboard = function () {
const permalink = window.location.href;
navigator.clipboard.writeText(permalink);
}
copyPermalinkButton.addEventListener('click', copyPermalinkToClipboard);
const generateTable = function () {
let prng_hash_seed = cyrb128(seed);
let rand = sfc32(prng_hash_seed[0], prng_hash_seed[1], prng_hash_seed[2], prng_hash_seed[3]); let rand = sfc32(prng_hash_seed[0], prng_hash_seed[1], prng_hash_seed[2], prng_hash_seed[3]);
let shuffled = fields let shuffled = fields
@ -63,40 +80,58 @@ let shuffled = fields
shuffled.splice(12, 0, FREE_FIELD_TEXT); shuffled.splice(12, 0, FREE_FIELD_TEXT);
function generateTable() { return shuffled;
}
let table = document.querySelector("table"); const drawTable = function () {
let thead = table.createTHead(); let shuffled = generateTable();
let row = null;//thead.insertRow();
shuffled.forEach(function(field, index) { const bingoTable = document.querySelector('#bingo');
if (index % 5 == 0){ let table = document.createElement('table');
row = thead.insertRow(); table.id = 'bingo';
let tableBody = document.createElement('tbody');
let row;
shuffled.forEach((field, index) => {
if (index % 5 === 0) {
row = tableBody.insertRow();
} }
let cell = row.insertCell(); let cell = row.insertCell();
let text = document.createTextNode(field); let text = document.createTextNode(field);
if (field == FREE_FIELD_TEXT) { if (field === FREE_FIELD_TEXT) {
cell.id = 'center-field'; cell.className = 'center-field';
} }
cell.appendChild(text); cell.appendChild(text);
}); });
table.appendChild(tableBody);
bingoTable.replaceWith(table);
table.addEventListener('click', (ev) => { table.addEventListener('click', (ev) => {
let cell; let cell;
let target_type = ev.target.tagName.toLowerCase(); let target_type = ev.target.tagName.toLowerCase();
if (target_type === "td" || target_type === "img") {
let cell = ev.target; if (target_type === "td") {
if (target_type === "img") { cell = ev.target;
} else if (target_type === "img") {
cell = ev.target.parentNode; cell = ev.target.parentNode;
} }
if (cell.style.borderColor == "green") {
cell.style.borderColor = "black"; if (cell) {
cell.style.backgroundColor = "white"; if (cell.classList.contains('drawn')) {
cell.classList.remove('drawn');
} else { } else {
cell.style.borderColor = "green"; cell.classList.add('drawn');
cell.style.backgroundColor = "green";
} }
} else {
console.error('Sum ting wong (* ￣︿￣)');
} }
}); });
seed_elem.innerText = seed;
window.history.pushState(null, null, '?seeed=' + seed);
const center_field = document.querySelector('.center-field');
center_field.innerHTML = '<img src="img/7-vs-wild-logo.svg" alt="7 vs. Wild Logo">'
} }
// hash function, thx stackoverflow :3 // hash function, thx stackoverflow :3
@ -119,7 +154,10 @@ function cyrb128(str) {
function sfc32(a, b, c, d) { function sfc32(a, b, c, d) {
return function () { return function () {
a >>>= 0; b >>>= 0; c >>>= 0; d >>>= 0; a >>>= 0;
b >>>= 0;
c >>>= 0;
d >>>= 0;
var t = (a + b) | 0; var t = (a + b) | 0;
a = b ^ b >>> 9; a = b ^ b >>> 9;
b = c + (c << 3) | 0; b = c + (c << 3) | 0;
@ -141,10 +179,11 @@ function mulberry32(a) {
} }
generateTable(); drawTable();
const center_field = document.querySelector('#center-field');
center_field.innerHTML = '<img src="img/7-vs-wild-logo.svg" alt="7 vs. Wild Logo"></img>'
let seed_elem = document.createElement('p'); const refreshBingoButton = document.querySelector('#refresh-bingo');
seed_elem.innerText = seed; const redrawTable = function () {
document.body.appendChild(seed_elem); seed = Date.now().toString();
drawTable()
}
refreshBingoButton.addEventListener('click', redrawTable)

45
style.css
View File

@ -1,25 +1,56 @@
table, th, td { body {
border: 1px solid; font-family: monospace;
height: 95vh;
width: 95vw;
overflow: hidden;
margin: 0 auto;
user-select: none;
background-color: #222;
color: #ccc;
} }
table { table {
width: 100%; width: 100%;
display: table;
table-layout: fixed;
} }
td { td {
text-align: center; text-align: center;
height: 100px; height: calc(100vh / 6);
transition: background-color ease-out .350s;
border-radius: 40px;
font-size: xx-large;
}
font-size: 200%; td:hover {
font-family: Arial, Helvetica, sans-serif; background-color: blueviolet;
}
td.drawn {
background-color: green;
}
td.center-field {
background-color: green;
} }
img { img {
width: 100%; max-height: calc(100vh / 6);
max-width: calc(100vh / 6);
} }
h1, p { h1, p {
font-family: Arial, Helvetica, sans-serif;
text-align: center; text-align: center;
margin: 5px; margin: 5px;
} }
p#seeed{
user-select: text;
}
span#copy-permalink, span#refresh-bingo {
cursor: pointer;
}