update logo to remove panama

img/Tinder.svg

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Generator: Adobe Illustrator 16.0.4, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="571.809px" height="215px" viewBox="0 0 571.809 215" enable-background="new 0 0 571.809 215" xml:space="preserve">
+<g id="g10" transform="matrix(1.25,0,0,-1.25,0,235)">
+	<g id="g12" transform="scale(0.1,0.1)">
+		<path id="path14" fill="#FF6B6B" d="M4520.695,217.156l-23.266,61.781h-32.75v-91.492h27.445v64.047h-3.289l23.961-64.047h15.594    l23.945,64.047h3.836v-64.047h18.297v91.492h-30.508L4520.695,217.156L4520.695,217.156z M4382.343,260.641h27.445v-73.195h18.297    v73.195h27.445v18.297h-73.188V260.641z M4344.351,1236.922c-67.656-18.977-124.961-49.395-171.797-91.27    c-46.945-41.91-83.914-93.301-108.664-154.144c-24.836-60.84-38.359-128.469-38.359-202.805V187.445h265.32v601.258    c0,74.336,26.945,131.461,78.492,171.387c51.547,39.848,120.727,52.383,205.125,37.512v251.461    C4488.695,1259.914,4412.007,1255.851,4344.351,1236.922z M3201.273,719.742c1.32,44.648,9.719,85.172,25.141,121.688    c15.352,36.52,35.492,67.934,60.297,94.285c24.781,26.418,53.898,46.973,87.383,61.887    c33.484,14.871,69.672,22.301,108.555,22.301c42.859,0,81.695-8.129,116.547-24.332c34.82-16.195,64.328-39.242,88.43-68.977    L3201.273,719.742L3201.273,719.742z M3927.757,1003.703c-31.461,54.059-69.672,99.68-114.547,136.898    c-44.922,37.164-95.438,65.543-151.711,85.168c-56.266,19.578-115.227,29.387-176.844,29.387    c-73.695,0-142.68-14.508-206.984-43.598c-64.32-29.094-120.586-68.289-168.859-117.629    c-48.203-49.351-86.047-107.473-113.492-174.41c-27.508-66.934-41.203-138.238-41.203-213.949    c0-75.758,13.695-146.711,41.203-212.961c27.445-66.242,65.289-124.055,113.492-173.422    c48.273-49.336,104.539-88.18,168.859-116.578C3341.976,174.227,3410.96,160,3484.656,160    c129.906,0,238.133,32.695,324.539,98.289c86.398,65.594,145.031,148.734,175.859,258.523h-283.391    c-22.773-45.75-54.25-72.625-94.414-92.195c-40.211-19.617-81.742-29.398-124.602-29.398c-45.555,0-87.094,9.828-124.602,29.445    c-37.516,19.586-69.68,46.93-96.484,82.109l731.5,310.32C3981.031,887.406,3959.234,949.59,3927.757,1003.703z M2639.5,588.945    c-14.102-35.836-33.234-66.938-57.484-93.305c-24.219-26.367-52.438-47.32-84.699-62.891    c-32.309-15.539-66.574-23.273-102.855-23.273c-36.324,0-70.645,7.383-102.91,22.289c-32.312,14.859-60.527,35.484-84.746,61.844    c-24.195,26.359-43.344,57.469-57.48,93.289c-14.156,35.82-21.172,74.727-21.172,116.641c0,43.25,7.016,83.148,21.172,119.656    c14.137,36.516,33.285,68.234,57.48,95.336c24.219,27,52.434,47.953,84.746,62.828c32.266,14.859,66.586,22.344,102.91,22.344    c36.281,0,70.547-7.832,102.855-23.344c32.262-15.555,60.48-36.867,84.699-63.855c24.25-27.121,43.383-58.824,57.484-95.332    c14.148-36.531,21.227-75.766,21.227-117.633C2660.727,662.961,2653.648,624.75,2639.5,588.945z M2662.344,1131.433    c-82.344,81.164-181.008,121.688-304.293,121.688c-68.281,0-132.707-14.215-192.316-42.66    c-59.613-28.441-112.055-67.73-156.922-117.875c-44.922-50.094-80.516-108.351-106.637-174.711    c-26.121-66.328-39.234-136.797-39.234-211.32c0-75.859,13.031-147,39.152-213.352c26.117-66.344,62.641-124.266,109.52-173.711    c46.899-49.445,102.805-88.398,167.809-116.836c64.957-28.43,136.973-42.656,216.027-42.656    c77.664,0,149.004,14.227,213.996,42.609c65.016,28.398,120.938,67.242,167.828,116.578    c46.891,49.367,84.25,107.18,110.367,173.422c26.125,66.25,40.016,137.203,40.016,212.961v991.449h-265.312V1131.433    L2662.344,1131.433z M1700.723,1124.344c-39.523,41.223-87.738,73.34-144.688,96.328    c-56.953,22.984-121.562,34.484-193.941,34.484c-71.043,0-134.992-11.84-191.91-35.48    c-56.957-23.688-105.863-56.477-146.711-98.34c-40.895-41.934-72-91.273-94.098-148.058    c-22.09-56.773-32.781-118.316-32.781-184.574V187.445h265.32v607.359c0,59.461,18.344,107.469,55.875,143.984    c37.516,36.523,85.543,54.75,144.5,54.75c44.23,0,78.949-7.434,104.434-22.293c25.434-14.918,44.828-33.145,58.23-54.742    c13.348-21.66,21.199-43.609,25.223-65.957c4.035-22.289,5.145-40.883,5.145-55.742V187.445h265.316v601.258    c0,68.977-9.559,131.859-30.336,188.641C1769.539,1034.121,1740.238,1083.074,1700.723,1124.344L1700.723,1124.344z     M805.105,1230.426H539.789V187.445h265.316V1230.426z M315.719,468.281c-32.844,29.727-50.398,81.117-50.398,154.141v370.133    h182.977v237.871H265.32v265.32H0v-871.34c0-71.648,10.062-136.203,30.148-193.688C50.25,373.266,79.68,324.945,118.57,285.742    c38.836-39.227,88.25-67.617,145.871-85.156c57.59-17.602,119.812-22.352,202.156-14.227v243.367    C393.406,425.68,348.52,438.5,315.719,468.281z M608.605,1666.746c0.969-1.645,2.754-2.742,4.797-2.742    c1.375,0,2.633,0.492,3.602,1.324l0.281,0.23c8.918,7.395,16.848,14.883,24.355,22.965    c72.863,78.586,30.102,175.121,29.652,176.086c-2.133,4.703-0.691,10.277,3.477,13.312c4.164,3.039,9.883,2.719,13.668-0.785    c246.613-228.238,181.387-402.172,176.601-413.844c-19.992-70.93-98.645-122.199-191.75-124.809    c-2.473-0.074-2.75-0.113-5.207-0.113c-110.148,0-201.484,67.477-201.484,153.621v1.32    c-9.152,119.594,106.547,237.543,111.371,242.5c3.117,3.195,6.75,4.137,10.848,2.398c4.098-1.75,6.145-5.855,6.008-10.34    c-0.738-23.418,3.773-43.871,14-61.004L608.605,1666.746"/>
+	</g>
+</g>
+</svg>

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>
@@ -54,6 +54,11 @@
     </tr>
 </table>
 <p id="seeed">Seeed: <span id="seeed-value"></span> <span id="copy-permalink">📋</span></p>
+<div id="selection">
+    <select id="topic-select">
+</div>
+</select>
+  
 <div id="winner-message">
     <p>B</p>
     <p>I</p>

script.js

@@ -1,5 +1,4 @@
 "use strict"
-let fields = [
     // 'MARTINAA/JAAAAA??!!',
     // '"Du bist doch auch so einer, der ..."',
     // 'Brain-AFK',
@@ -24,46 +23,101 @@ let fields = [
     // 'Tamme Story',
     // 'Ich kam heut morgen auf Arbeit...',
     // 'Crypto / Fiat / Inflation ...'
-    'Krokodil',
+
-    'Blut zu sehen',
+let topics = {
-    '"Ich kämpfe"',
+    '7vsWild': { 
-    '"Ich kann nicht mehr"',
+        'title':  '7 vs. Wild',
-    'Jemand trinkt unsauberes Wasser',
+        'image': 'img/7-vs-wild-logo_no_location.svg',
-    'Jemand schneidet von einem lebenden Baum was ab',
+        'bingo_color': 'green',
-    'Knossi raucht',
+        'bingo_hover_color': 'darkgreen',
-    'Nackt',
+        'field_color': 'cornflower',
-    'Jemand isst eine Kokosnuss',
+        'field_hover_color': 'cadetblue',
-    'Stufenlos verstellbare Knoten',
+        'fields': [
-    '"Ich frag mich, wie es den anderen so geht"',
+          'Wolf',
-    'Kleidung ist feucht/nass',
+          'Blut zu sehen',
-    'Joris verwirft seinen Tagesplan',
+          '"Ich kämpfe"',
-    'Sascha flext für die Kamera',
+          '"Ich kann nicht mehr"',
-    '"Bist du deppert?"',
+          'Jemand trinkt unsauberes Wasser',
-    'Sonnenbrand',
+          'Jemand schneidet von einem lebenden Baum was ab',
-    '7 in the wild',
+          'Knossi raucht',
-    'Aus Plastik Müll wird was gebaut',
+          'Nackt',
-    'Es wird geschrien',
+          '"Halt die Fresse"',
-    'Es wird gesungen',
+          '"Richtig Premium"',
-    '"Mir ist kalt"',
+          '"Ich frag mich, wie es den anderen so geht"',
-    'Dinge bekommen Namen',
+          'Kleidung ist feucht/nass',
-    '"Das ist auf einem anderen Level"',
+          '"Hannah was soll ich machen?"',
-    'Kleine Krebse',
+          'Sascha flext für die Kamera',
-    'Jemand entschuldigt sich',
+          '"Bist du deppert?"',
-    'Challenge wird falsch verstanden',
+          'Sonnenbrand',
-    'Es ist alles ganz anders als ich es mir vorgestellt habe',
+          '7 in the wild',
-    'Jemand kündigt an aufzuhören, tut es aber nicht',
+          'Aus Plastik Müll wird was gebaut',
-    'Urin',
+          'Es wird geschrien',
-    'Jemand spricht durch die Kamera mit Freunden/Familie',
+          'Es wird gesungen',
-    'Shelter bricht zusammen',
+          '"Mir ist kalt"',
-    'Jemand weint',
+          'Dinge bekommen Namen',
-    'Sonne kommt raus',
+          'Jemand weint',
-    'Medi Kit wird geöffnet',
+          'Jemand kackt',
-    'Kriegt kein Feuer an',
+          'Jemand entschuldigt sich',
-    'Joris starrt in die Kamera',
+          '"Es ist alles ganz anders als ich es mir vorgestellt habe"',
-    'Schimmel',
+          'Jemand kündigt an aufzuhören, tut es aber nicht',
-    'Jemand geht früher'
+          'Urin',
-];
+          'Jemand spricht durch die Kamera mit Freunden/Familie',
+          'Shelter bricht zusammen',
+          'Backflip',
+          'Medi Kit wird geöffnet',
+          'Kriegt kein Feuer an',
+          'Tierkacke/spuren',
+          'Bär',
+          'Jemand geht früher'
+      ]
+    },
+    'tinder': {
+        'title':  '🔥 Tinder',
+        'image': 'img/Tinder.svg',
+        'field_color': 'firebrick',
+        'field_hover_color': 'crimson',
+        'bingo_color': 'purple',
+        'bingo_hover_color': 'darkviolet',
+        'fields': [
+          'Triple 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 Gym',
+          'Polyamorie',
+          'EMF',
+          'Augenbrauen des Todes',
+          'Schweizerdeutsche Beschreibung',
+          'Man kennt sich',
+          'Bild in Barcelona',
+          'Bikinibilder',
+          'Thermalbad',
+          'TikTok Filter',
+          'Disney/Harry Potter',
+          'Polyglot'
+        ]
+    }
+}
+
 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 +126,15 @@ 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";
+const topicTitle = document.querySelector('#topic');
-centerFieldImage.alt = "7 vs. Wild Logo";
+const topicSelect = document.querySelector('#topic-select');
-centerFieldImage.parentElement.addEventListener('contextmenu', ev => {
+
-    ev.preventDefault();
+const topicChanged = function () {
-    centerFieldImage.parentElement.classList.remove('bingo');
+    console.log('topic changed');
-});
+    topic = topicSelect.selectedOptions[0].id;
+    redrawTable();
+}
+
 
 /**
  * Reads the seed from URL Parameter or generates new seed
@@ -89,6 +146,40 @@ if (urlParams.has('seeed')) {
     seed = Date.now().toString();
 }
 
+if (urlParams.has('topic')) {
+    topic = urlParams.get('topic');
+} else {
+    topic = 'tinder';
+}
+
+let index = 0;
+for (let x in topics) {
+    let option = document.createElement('option');
+    option.id = x;
+    option.text = topics[x].title;
+    topicSelect.add(option);
+    if (x === topic) {
+      topicSelect.selectedIndex = index;
+    };
+    index++;
+}
+
+topicSelect.addEventListener("change", topicChanged); 
+
+/**
+ * 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;
@@ -185,6 +276,31 @@ const undrawBingoFieldEventHandler = (ev) => {
 };
 
 const drawTable = () => {
+    topicTitle.innerText = topics[topic].title;
+    centerFieldImage.src = topics[topic].image;
+    centerFieldImage.alt = topics[topic].title + ' Logo';
+    fields = topics[topic].fields;
+
+    let sheet = new CSSStyleSheet();
+
+    sheet.replaceSync(`
+        td.drawn {
+          background-color: ` + topics[topic].field_color + `;
+          text-decoration: line-through;
+        }
+        td.drawn:hover {
+          background-color: ` + topics[topic].field_hover_color + `;
+        }
+        td.drawn.bingo {
+          background-color: ` + topics[topic].bingo_color + `;
+        }
+        td.drawn.bingo:hover {
+          background-color: `+ topics[topic].bingo_hover_color +`;
+        }`
+    );
+
+    document.adoptedStyleSheets = [sheet]
+
     shuffleBoard().forEach((field, index) => {
         bingoFields[index].textContent = field;
         bingoFields[index].addEventListener('click', drawBingoFieldEventHandler);
@@ -192,7 +308,7 @@ const drawTable = () => {
     });
 
     seed_elem.innerText = seed;
-    window.history.pushState(null, null, '?seeed=' + seed);
+    window.history.pushState(null, null, '?seeed=' + seed + '&topic=' + topic);
 }
 
 // hash function, thx stackoverflow :3
@@ -239,10 +355,8 @@ function mulberry32(a) {
     }
 }
 
-
 drawTable();
 
-
 const redrawTable = function () {
     winnerMessage.classList.remove('won');
     allFields.forEach(elem => {
@@ -252,6 +366,8 @@ const redrawTable = function () {
         elem.classList.remove('drawn');
     });
     seed = Date.now().toString();
+
+
     drawTable();
 }
 refreshBingoButton.addEventListener('click', redrawTable)

style.css

@@ -71,6 +71,10 @@ span#copy-permalink, span#refresh-bingo {
     cursor: pointer;
 }
 
+div#selection {
+    text-align: center;
+}
+
 div#winner-message {
     display: flex;
     position: fixed;