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>
<html lang="en">
<head>
<meta charset="utf-8">
@ -9,13 +8,12 @@
<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>

109
script.js
View File

@ -23,7 +23,7 @@ let fields = [
// 'Tamme Story',
// 'Ich kam heut morgen auf Arbeit...',
// 'Crypto / Fiat / Inflation ...'
'Krokodil',
'Krokodil',
'Blut zu sehen',
'„Ich kämpfe“',
'„Ich kann nicht mehr“',
@ -51,52 +51,87 @@ let fields = [
];
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() }))
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 shuffled = fields
.map(value => ({value, sort: rand()}))
.sort((a, b) => a.sort - b.sort)
.map(({ value }) => value)
.map(({value}) => value)
shuffled.splice(12, 0, FREE_FIELD_TEXT);
shuffled.splice(12, 0, FREE_FIELD_TEXT);
function generateTable() {
return shuffled;
}
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();
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();
}
let cell = row.insertCell();
let text = document.createTextNode(field);
if (field == FREE_FIELD_TEXT) {
cell.id = 'center-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" || target_type === "img") {
let cell = ev.target;
if (target_type === "img") {
if (target_type === "td") {
cell = ev.target;
} else if (target_type === "img") {
cell = ev.target.parentNode;
}
if (cell.style.borderColor == "green") {
cell.style.borderColor = "black";
cell.style.backgroundColor = "white";
if (cell) {
if (cell.classList.contains('drawn')) {
cell.classList.remove('drawn');
} else {
cell.style.borderColor = "green";
cell.style.backgroundColor = "green";
cell.classList.add('drawn');
}
} 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
@ -114,12 +149,15 @@ 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;
return function () {
a >>>= 0;
b >>>= 0;
c >>>= 0;
d >>>= 0;
var t = (a + b) | 0;
a = b ^ b >>> 9;
b = c + (c << 3) | 0;
@ -132,7 +170,7 @@ function sfc32(a, b, c, d) {
}
function mulberry32(a) {
return function() {
return function () {
var t = a += 0x6D2B79F5;
t = Math.imul(t ^ t >>> 15, t | 1);
t ^= t + Math.imul(t ^ t >>> 7, t | 61);
@ -141,10 +179,11 @@ function mulberry32(a) {
}
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)

45
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%;
display: table;
table-layout: fixed;
}
td {
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%;
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;
}
p#seeed{
user-select: text;
}
span#copy-permalink, span#refresh-bingo {
cursor: pointer;
}