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>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bingo</title>
<meta name="description" content="Stammtisch Bingo">
<link rel="stylesheet" href="style.css">
<title>Bingo</title>
<meta name="description" content="Stammtisch Bingo">
<link rel="stylesheet" href="style.css">
<script src="script.js" defer></script>
</head>
<body>
<h1>7 vs. Wild Bingo</h1>
<table>
</table>
<script src="script.js"></script>
<h1>7 vs. Wild Bingo <span id="refresh-bingo">🔄</span></h1>
<table id="bingo"></table>
<p id="seeed">Seeed: <span id="seeed-value"></span> <span id="copy-permalink">📋</span></p>
</body>
</html>

253
script.js
View File

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

53
style.css
View File

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