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>

91
script.js
View File

@ -51,9 +51,26 @@ 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 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 shuffled = fields
@ -63,40 +80,58 @@ let shuffled = fields
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
@ -119,7 +154,10 @@ function cyrb128(str) {
function sfc32(a, b, c, d) {
return function () {
a >>>= 0; b >>>= 0; c >>>= 0; d >>>= 0;
a >>>= 0;
b >>>= 0;
c >>>= 0;
d >>>= 0;
var t = (a + b) | 0;
a = b ^ b >>> 9;
b = c + (c << 3) | 0;
@ -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;
}