From 8a05f69cfb8fd64447f32ea87fce5ffd900e47fe Mon Sep 17 00:00:00 2001 From: and94x Date: Fri, 2 Dec 2022 00:40:51 +0100 Subject: [PATCH] Some andy stuff --- index.html | 20 ++--- script.js | 253 +++++++++++++++++++++++++++++++---------------------- style.css | 53 ++++++++--- 3 files changed, 197 insertions(+), 129 deletions(-) diff --git a/index.html b/index.html index ddc6e1c..b577b4b 100644 --- a/index.html +++ b/index.html @@ -1,21 +1,19 @@ - - - - - Bingo - + + - + Bingo + + + -

7 vs. Wild Bingo

- -
- +

7 vs. Wild Bingo 🔄

+
+

Seeed: 📋

diff --git a/script.js b/script.js index bd6d2a5..d2eaa47 100644 --- a/script.js +++ b/script.js @@ -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(); + } + let cell = row.insertCell(); + + let text = document.createTextNode(field); + if (field === FREE_FIELD_TEXT) { + cell.className = 'center-field'; } - if (cell.style.borderColor == "green") { - cell.style.borderColor = "black"; - cell.style.backgroundColor = "white"; + 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 = '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 = '7 vs. Wild Logo' +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) diff --git a/style.css b/style.css index 0541d3f..d32e033 100644 --- 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%; + 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; +} + +td:hover { + background-color: blueviolet; +} - font-size: 200%; - font-family: Arial, Helvetica, sans-serif; +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; +} \ No newline at end of file