Some andy stuff

2 years ago · 8a05f69cfb
parent d3b5e97286
commit 8a05f69cfb
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
@ -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;
+}
+
+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
@ -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)
--- 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;
+}