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

20
index.html
View File

@ -1,21 +1,19 @@
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bingo</title> <title>Bingo</title>
<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>

253
script.js
View File

@ -1,102 +1,137 @@
let fields = [ let fields = [
// 'MARTINAA/JAAAAA??!!', // 'MARTINAA/JAAAAA??!!',
// '"Du bist doch auch so einer, der ..."', // '"Du bist doch auch so einer, der ..."',
// 'Brain-AFK', // 'Brain-AFK',
// 'Rant über Kollegen', // 'Rant über Kollegen',
// 'Redet in StammTV rein', // 'Redet in StammTV rein',
// 'Häää?', // 'Häää?',
// 'Bin mal kurz mitem Hund', // 'Bin mal kurz mitem Hund',
// '*schnupft*', // '*schnupft*',
// 'Habt ihr des neue ... schon gesehen?', // 'Habt ihr des neue ... schon gesehen?',
// 'Random Nonsense-Problem', // 'Random Nonsense-Problem',
// 'Auf Ausbildung freuen', // 'Auf Ausbildung freuen',
// 'Erzählt von Hinz und Kunz', // 'Erzählt von Hinz und Kunz',
// 'Was heißt eigentlich ...?', // 'Was heißt eigentlich ...?',
// 'Wiederholung', // 'Wiederholung',
// 'Story geht länger als nötig', // 'Story geht länger als nötig',
// 'Labert direkt los', // 'Labert direkt los',
// 'Haljo', // 'Haljo',
// 'Klicken im Mikro', // 'Klicken im Mikro',
// 'Schlafen', // 'Schlafen',
// 'Akustik', // 'Akustik',
// 'Spielt LoL', // 'Spielt LoL',
// 'Tamme Story', // 'Tamme Story',
// 'Ich kam heut morgen auf Arbeit...', // 'Ich kam heut morgen auf Arbeit...',
// 'Crypto / Fiat / Inflation ...' // 'Crypto / Fiat / Inflation ...'
'Krokodil', 'Krokodil',
'Blut zu sehen', 'Blut zu sehen',
'„Ich kämpfe“', '„Ich kämpfe“',
'„Ich kann nicht mehr“', '„Ich kann nicht mehr“',
'jemand trinkt unsauberes Wasser', 'jemand trinkt unsauberes Wasser',
'jemand schneidet von einem lebenden Baum was ab', 'jemand schneidet von einem lebenden Baum was ab',
'Knossi raucht', 'Knossi raucht',
'nackt', 'nackt',
'jemand isst eine Kokosnuss', 'jemand isst eine Kokosnuss',
'stufenlos verstellbare Knoten', 'stufenlos verstellbare Knoten',
'“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', 'Sasha flext für die Kamera',
'„Bist du deppert?“', '„Bist du deppert?“',
'Sonnenbrand', 'Sonnenbrand',
'7 in the wild', '7 in the wild',
'Aus Plastik Müll wird was gebaut', 'Aus Plastik Müll wird was gebaut',
'Es wird geschrien', 'Es wird geschrien',
'es wird gesungen', 'es wird gesungen',
'„mir ist kalt“', '„mir ist kalt“',
'Dinge bekommen Namen', 'Dinge bekommen Namen',
'„das ist auf einem anderen Level"', '„das ist auf einem anderen Level"',
'kleine Krebse', 'kleine Krebse',
]; ];
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')) {
let rand = sfc32(prng_hash_seed[0], prng_hash_seed[1], prng_hash_seed[2], prng_hash_seed[3]); seed = urlParams.get('seeed');
} else {
seed = Date.now().toString();
}
let shuffled = fields const copyPermalinkButton = document.querySelector('#copy-permalink');
.map(value => ({ value, sort: rand() })) const copyPermalinkToClipboard = function () {
.sort((a, b) => a.sort - b.sort) const permalink = window.location.href;
.map(({ value }) => value) navigator.clipboard.writeText(permalink);
}
copyPermalinkButton.addEventListener('click', copyPermalinkToClipboard);
shuffled.splice(12, 0, FREE_FIELD_TEXT);
function generateTable() { 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 table = document.querySelector("table"); let shuffled = fields
let thead = table.createTHead(); .map(value => ({value, sort: rand()}))
let row = null;//thead.insertRow(); .sort((a, b) => a.sort - b.sort)
shuffled.forEach(function(field, index) { .map(({value}) => value)
if (index % 5 == 0){
row = thead.insertRow();
}
let cell = row.insertCell();
let text = document.createTextNode(field); shuffled.splice(12, 0, FREE_FIELD_TEXT);
if (field == FREE_FIELD_TEXT) {
cell.id = 'center-field'; return shuffled;
} }
cell.appendChild(text);
}); const drawTable = function () {
table.addEventListener('click', (ev) => { let shuffled = generateTable();
let cell;
let target_type = ev.target.tagName.toLowerCase(); const bingoTable = document.querySelector('#bingo');
if (target_type === "td" || target_type === "img") { let table = document.createElement('table');
let cell = ev.target; table.id = 'bingo';
if (target_type === "img") { let tableBody = document.createElement('tbody');
cell = ev.target.parentNode; let row;
shuffled.forEach((field, index) => {
if (index % 5 === 0) {
row = tableBody.insertRow();
} }
if (cell.style.borderColor == "green") { let cell = row.insertCell();
cell.style.borderColor = "black";
cell.style.backgroundColor = "white"; let text = document.createTextNode(field);
if (field === FREE_FIELD_TEXT) {
cell.className = 'center-field';
}
cell.appendChild(text);
});
table.appendChild(tableBody);
bingoTable.replaceWith(table);
table.addEventListener('click', (ev) => {
let cell;
let target_type = ev.target.tagName.toLowerCase();
if (target_type === "td") {
cell = ev.target;
} else if (target_type === "img") {
cell = ev.target.parentNode;
}
if (cell) {
if (cell.classList.contains('drawn')) {
cell.classList.remove('drawn');
} else {
cell.classList.add('drawn');
}
} else { } else {
cell.style.borderColor = "green"; console.error('Sum ting wong (* ￣︿￣)');
cell.style.backgroundColor = "green";
} }
} });
});
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
@ -114,37 +149,41 @@ function cyrb128(str) {
h2 = Math.imul(h4 ^ (h2 >>> 22), 2869860233); h2 = Math.imul(h4 ^ (h2 >>> 22), 2869860233);
h3 = Math.imul(h1 ^ (h3 >>> 17), 951274213); h3 = Math.imul(h1 ^ (h3 >>> 17), 951274213);
h4 = Math.imul(h2 ^ (h4 >>> 19), 2716044179); h4 = Math.imul(h2 ^ (h4 >>> 19), 2716044179);
return [(h1^h2^h3^h4)>>>0, (h2^h1)>>>0, (h3^h1)>>>0, (h4^h1)>>>0]; return [(h1 ^ h2 ^ h3 ^ h4) >>> 0, (h2 ^ h1) >>> 0, (h3 ^ h1) >>> 0, (h4 ^ h1) >>> 0];
} }
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;
var t = (a + b) | 0; b >>>= 0;
a = b ^ b >>> 9; c >>>= 0;
b = c + (c << 3) | 0; d >>>= 0;
c = (c << 21 | c >>> 11); var t = (a + b) | 0;
d = d + 1 | 0; a = b ^ b >>> 9;
t = t + d | 0; b = c + (c << 3) | 0;
c = c + t | 0; c = (c << 21 | c >>> 11);
return (t >>> 0) / 4294967296; d = d + 1 | 0;
t = t + d | 0;
c = c + t | 0;
return (t >>> 0) / 4294967296;
} }
} }
function mulberry32(a) { function mulberry32(a) {
return function() { return function () {
var t = a += 0x6D2B79F5; var t = a += 0x6D2B79F5;
t = Math.imul(t ^ t >>> 15, t | 1); t = Math.imul(t ^ t >>> 15, t | 1);
t ^= t + Math.imul(t ^ t >>> 7, t | 61); t ^= t + Math.imul(t ^ t >>> 7, t | 61);
return ((t ^ t >>> 14) >>> 0) / 4294967296; return ((t ^ t >>> 14) >>> 0) / 4294967296;
} }
} }
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)

53
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;
} }