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"

let shuffled = fields
  .map(value => ({ value, sort: Math.random() }))
  .sort((a, b) => a.sort - b.sort)
  .map(({ value }) => value)

shuffled.splice(12, 0, FREE_FIELD_TEXT);

function 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();
    }
    let cell = row.insertCell();

    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;
        }
        if (cell.style.borderColor == "green") {
          cell.style.borderColor = "black";
          cell.style.backgroundColor = "white";
        } else {
          cell.style.borderColor = "green";
          cell.style.backgroundColor = "green";
        }
    }
  });
}

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