Merge branch 'andy-arbeit' into 'master'

Some andy stuff See merge request panki/bingo!3
2 years ago · 55935bbd99
parent d3b5e97286 8a05f69cfb
commit 55935bbd99
3 changed files with 197 additions and 129 deletions
--- a/index.html
+++ b/index.html
@ -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>
--- a/script.js
+++ b/script.js
@ -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');
+
+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 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 shuffled = fields
-  .map(value => ({ value, sort: rand() }))
+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);
+    return shuffled;
+}

-function generateTable() {
+const drawTable = function () {
+    let shuffled = generateTable();

-  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 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)
--- a/style.css
+++ b/style.css
@ -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;
+}
+
+td:hover {
+    background-color: blueviolet;
+}
+
+td.drawn {
+    background-color: green;
+}

-  font-size: 200%;
-  font-family: Arial, Helvetica, sans-serif;
+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;
+}