implement groundwork for topic system: new data structure, dynamic content

This commit is contained in:
Felix Pankratz 2023-07-04 18:50:07 +02:00
parent cd69c462c2
commit bb1ac78fe9
2 changed files with 100 additions and 49 deletions

View File

@ -13,7 +13,7 @@
</head>
<body>
<h1>7 vs. Wild Bingo <span id="refresh-bingo">🔄</span></h1>
<h1><span id="topic"></span> Bingo <span id="refresh-bingo">🔄</span></h1>
<table id="bingo">
<tr>
<td data-row="0" data-col="0" class="bingo-field"></td>

147
script.js
View File

@ -1,5 +1,4 @@
"use strict"
let fields = [
// 'MARTINAA/JAAAAA??!!',
// '"Du bist doch auch so einer, der ..."',
// 'Brain-AFK',
@ -24,46 +23,86 @@ let fields = [
// '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',
'Sascha 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',
'Jemand entschuldigt sich',
'Challenge wird falsch verstanden',
'Es ist alles ganz anders als ich es mir vorgestellt habe',
'Jemand kündigt an aufzuhören, tut es aber nicht',
'Urin',
'Jemand spricht durch die Kamera mit Freunden/Familie',
'Shelter bricht zusammen',
'Jemand weint',
'Sonne kommt raus',
'Medi Kit wird geöffnet',
'Kriegt kein Feuer an',
'Joris starrt in die Kamera',
'Schimmel',
'Jemand geht früher'
];
let topics = {
'7vsWild': {
'title': '7 vs. Wild',
'image': 'img/7-vs-wild-logo.svg',
'fields': [
'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',
'Sascha 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',
'Jemand entschuldigt sich',
'Challenge wird falsch verstanden',
'Es ist alles ganz anders als ich es mir vorgestellt habe',
'Jemand kündigt an aufzuhören, tut es aber nicht',
'Urin',
'Jemand spricht durch die Kamera mit Freunden/Familie',
'Shelter bricht zusammen',
'Jemand weint',
'Sonne kommt raus',
'Medi Kit wird geöffnet',
'Kriegt kein Feuer an',
'Joris starrt in die Kamera',
'Schimmel',
'Jemand geht früher'
]
},
'tinder': {
'title': '🔥 Tinder',
'image': 'img/Tinder.svg',
'fields': [
'Sternzeichen',
'Unaufgeräumtes Zimmer',
'Pferdemädchen',
'Duckface',
'Waschmaschine im Hintergrund',
'Nur schwarze Bilder',
'Französin',
'Selfcare',
'Persönlichkeitstyp',
'Nur Fotos mit mehreren',
'Tier das ihr nicht gehört',
'Nur Emojis',
'Nur Bilder',
'Instagram Handle',
'Spricht kein Deutsch',
'Nicht aus der Region (nur zu Besuch)',
'Selfie ohne Kopf',
'Random Foto',
'Spotify Song',
'Name nicht lesbar',
'Hat bereits Kinder',
'Bild im Fitnessstudio',
'Polyamorie',
'EMF'
]
}
}
let seed;
let topic;
const urlParams = new URLSearchParams(window.location.search);
const seed_elem = document.querySelector('#seeed-value');
const allFields = document.querySelectorAll('#bingo td');
@ -72,12 +111,7 @@ 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/7-vs-wild-logo.svg";
centerFieldImage.alt = "7 vs. Wild Logo";
centerFieldImage.parentElement.addEventListener('contextmenu', ev => {
ev.preventDefault();
centerFieldImage.parentElement.classList.remove('bingo');
});
const topicTitle = document.querySelector('#topic');
/**
* Reads the seed from URL Parameter or generates new seed
@ -89,6 +123,25 @@ if (urlParams.has('seeed')) {
seed = Date.now().toString();
}
if (urlParams.has('topic')) {
topic = urlParams.get('topic');
} else {
topic = 'tinder';
}
/**
* Set fields, headline and center image based on topic
*/
let fields = topics[topic].fields;
topicTitle.innerText = topics[topic].title;
centerFieldImage.src = topics[topic].image;
centerFieldImage.alt = topics[topic].title + ' Logo';
centerFieldImage.parentElement.addEventListener('contextmenu', ev => {
ev.preventDefault();
centerFieldImage.parentElement.classList.remove('bingo');
});
const copyPermalinkToClipboard = function () {
const permalink = window.location.href;
@ -239,10 +292,8 @@ function mulberry32(a) {
}
}
drawTable();
const redrawTable = function () {
winnerMessage.classList.remove('won');
allFields.forEach(elem => {