bingo/script.js

"use strict"
let fields = [
    "Datenelch",
    "6 Stunden Schlaf",
    "Tschunk getrunken",
    "Spaß gehabt",
    "Sticker getauscht",
    "DECT genutzt",
    "Hardware gehackt",
    "Kabel vergessen",
    "Halle gesucht",
    "$dinge gelötet",
    "an SoS teilgenommen",
    "Neue Leute kennengelernt",
    "Wasser getrunken",
    "Waffel gegessen",
    "Corona Test gemacht",
    "2 Mahlzeiten gegessen",
    "Fairydust bewundert",
    "Talk angeschaut",
    "CCC Merch getragen",
    "Engeschicht gemacht",
    "In der Lounge getanzt",
    "Etwas Neues ausprobiert",
    "Maske getragen",
    "geduscht"
];
let seed;
const urlParams = new URLSearchParams(window.location.search);
const seed_elem = document.querySelector('#seeed-value');
const allFields = document.querySelectorAll('#bingo td');
const bingoFields = document.querySelectorAll('#bingo td.bingo-field');
const centerFieldImage = document.querySelector('#center-field-image');
const refreshBingoButton = document.querySelector('#refresh-bingo');
const copyPermalinkButton = document.querySelector('#copy-permalink');
const winnerMessage = document.querySelector('#winner-message');
centerFieldImage.src = "img/logo.svg"
centerFieldImage.alt = "37C3 Logo";
centerFieldImage.parentElement.addEventListener('contextmenu', ev => {
    ev.preventDefault();
    centerFieldImage.parentElement.classList.remove('bingo');
});

/**
 * Reads the seed from URL Parameter or generates new seed
 */

if (urlParams.has('seeed')) {
    seed = urlParams.get('seeed');
} else {
    seed = Date.now().toString();
}


const copyPermalinkToClipboard = function () {
    const permalink = window.location.href;
    navigator.clipboard.writeText(permalink);
}
copyPermalinkButton.addEventListener('click', copyPermalinkToClipboard);


const shuffleBoard = () => {
    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]);

    return fields
        .map(value => ({value, sort: rand()}))
        .sort((a, b) => a.sort - b.sort)
        .map(({value}) => value)
        .slice(0, 24)
}

const checkForBingo = (field) => {
    let bingo = false;
    let clickedRow = parseInt(field.dataset.row);
    let clickedCol = parseInt(field.dataset.col);

    //check horizontal and vertical axis
    if (document.querySelectorAll(`#bingo td.drawn[data-row='${clickedRow}']`).length === 5) {
        document.querySelectorAll(`#bingo td.drawn[data-row='${clickedRow}']`).forEach(elem => elem.classList.add('bingo'));
        bingo = true;
    } else {
    }

    if (document.querySelectorAll(`#bingo td.drawn[data-col='${clickedCol}']`).length === 5) {
        document.querySelectorAll(`#bingo td.drawn[data-col='${clickedCol}']`).forEach(elem => elem.classList.add('bingo'));
        bingo = true;
    } else {
    }

    //check diagonal axis
    if (clickedRow === clickedCol) {
        if (
            document.querySelector(`#bingo td.drawn[data-row="0"][data-col="0"]`) &&
            document.querySelector(`#bingo td.drawn[data-row="1"][data-col="1"]`) &&
            document.querySelector(`#bingo td.drawn[data-row="3"][data-col="3"]`) &&
            document.querySelector(`#bingo td.drawn[data-row="4"][data-col="4"]`)
        ) {
            document.querySelector(`#bingo td.drawn[data-row="0"][data-col="0"]`).classList.add('bingo');
            document.querySelector(`#bingo td.drawn[data-row="1"][data-col="1"]`).classList.add('bingo');
            document.querySelector(`#bingo td.drawn[data-row="2"][data-col="2"]`).classList.add('bingo');
            document.querySelector(`#bingo td.drawn[data-row="3"][data-col="3"]`).classList.add('bingo');
            document.querySelector(`#bingo td.drawn[data-row="4"][data-col="4"]`).classList.add('bingo');
            bingo = true;
        }
    } else if (clickedRow + clickedCol === 4) {
        if (
            document.querySelector(`#bingo td.drawn[data-row="0"][data-col="4"]`) &&
            document.querySelector(`#bingo td.drawn[data-row="1"][data-col="3"]`) &&
            document.querySelector(`#bingo td.drawn[data-row="3"][data-col="1"]`) &&
            document.querySelector(`#bingo td.drawn[data-row="4"][data-col="0"]`)
        ) {
            document.querySelector(`#bingo td.drawn[data-row="0"][data-col="4"]`).classList.add('bingo');
            document.querySelector(`#bingo td.drawn[data-row="1"][data-col="3"]`).classList.add('bingo');
            document.querySelector(`#bingo td.drawn[data-row="2"][data-col="2"]`).classList.add('bingo');
            document.querySelector(`#bingo td.drawn[data-row="3"][data-col="1"]`).classList.add('bingo');
            document.querySelector(`#bingo td.drawn[data-row="4"][data-col="0"]`).classList.add('bingo');
            bingo = true;
        }
    }

    if (bingo) {
        winnerMessage.classList.remove('won');
        window.fireworks.start();
        winnerMessage.classList.add('won');
    }

};
const drawBingoFieldEventHandler = (ev) => {
    let field = ev.target;
    if (field && !field.classList.contains('drawn')) {
        field.classList.add('drawn');
        checkForBingo(field);
    } else {
        console.error('Sum ting wong (* ￣︿￣)');
    }
};
const undrawBingoFieldEventHandler = (ev) => {
    ev.preventDefault();
    let field = ev.target;
    if (field) {
        field.classList.remove('drawn');
        field.classList.remove('bingo');
    } else {
        console.error('Sum ting wong (* ￣︿￣)');
    }
};

const drawTable = () => {
    shuffleBoard().forEach((field, index) => {
        bingoFields[index].textContent = field;
        bingoFields[index].addEventListener('click', drawBingoFieldEventHandler);
        bingoFields[index].addEventListener('contextmenu', undrawBingoFieldEventHandler);
    });

    seed_elem.innerText = seed;
    window.history.pushState(null, null, '?seeed=' + seed);
}

// 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 redrawTable = function () {
    winnerMessage.classList.remove('won');
    allFields.forEach(elem => {
        elem.classList.remove('bingo');
    });
    bingoFields.forEach(elem => {
        elem.classList.remove('drawn');
    });
    seed = Date.now().toString();
    drawTable();
}
refreshBingoButton.addEventListener('click', redrawTable)