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

1 year ago · bb1ac78fe9
parent cd69c462c2
commit bb1ac78fe9
2 changed files with 100 additions and 49 deletions
--- a/index.html
+++ b/index.html
@ -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>
--- a/script.js
+++ b/script.js
@ -1,5 +1,4 @@
 "use strict"
-let fields = [
    // 'MARTINAA/JAAAAA??!!',
    // '"Du bist doch auch so einer, der ..."',
    // 'Brain-AFK',
@ -24,6 +23,12 @@ let fields = [
    // 'Tamme Story',
    // 'Ich kam heut morgen auf Arbeit...',
    // 'Crypto / Fiat / Inflation ...'
+
+let topics = {
+    '7vsWild': { 
+        'title':  '7 vs. Wild',
+        'image': 'img/7-vs-wild-logo.svg',
+        'fields': [
          'Krokodil',
          'Blut zu sehen',
          '"Ich kämpfe"',
@ -62,8 +67,42 @@ let fields = [
          '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 => {