bingo/script.js

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',

];

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 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)

    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';
        }
        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 {
            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
function cyrb128(str) {
    let h1 = 1779033703, h2 = 3144134277,
        h3 = 1013904242, h4 = 2773480762;
    for (let i = 0, k; i < str.length; i++) {
        k = str.charCodeAt(i);
        h1 = h2 ^ Math.imul(h1 ^ k, 597399067);
        h2 = h3 ^ Math.imul(h2 ^ k, 2869860233);
        h3 = h4 ^ Math.imul(h3 ^ k, 951274213);
        h4 = h1 ^ Math.imul(h4 ^ k, 2716044179);
    }
    h1 = Math.imul(h3 ^ (h1 >>> 18), 597399067);
    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];
}

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;
    }
}

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;
    }
}


drawTable();

const refreshBingoButton = document.querySelector('#refresh-bingo');
const redrawTable = function () {
    seed = Date.now().toString();
    drawTable()
}
refreshBingoButton.addEventListener('click', redrawTable)