From d61920c4c3c895006d6042a6baace1c840d03662 Mon Sep 17 00:00:00 2001
From: Felix Pankratz <mail@felixpankratz.de>
Date: Tue, 4 Jul 2023 20:48:15 +0200
Subject: [PATCH] modify css from javascript based on topic

---
 script.js | 37 ++++++++++++++++++++++++++++++++++---
 1 file changed, 34 insertions(+), 3 deletions(-)

diff --git a/script.js b/script.js
index 1b10eb5..d7a2553 100644
--- a/script.js
+++ b/script.js
@@ -28,6 +28,10 @@ let topics = {
     '7vsWild': { 
         'title':  '7 vs. Wild',
         'image': 'img/7-vs-wild-logo.svg',
+        'bingo_color': 'green',
+        'bingo_hover_color': 'darkgreen',
+        'field_color': 'cornflower',
+        'field_hover_color': 'cadetblue',
         'fields': [
           'Krokodil',
           'Blut zu sehen',
@@ -72,8 +76,12 @@ let topics = {
     'tinder': {
         'title':  '🔥 Tinder',
         'image': 'img/Tinder.svg',
+        'field_color': 'firebrick',
+        'field_hover_color': 'crimson',
+        'bingo_color': 'purple',
+        'bingo_hover_color': 'darkviolet',
         'fields': [
-          'Sternzeichen',
+          'Triple Sternzeichen',
           'Unaufgeräumtes Zimmer',
           'Pferdemädchen',
           'Duckface',
@@ -94,9 +102,12 @@ let topics = {
           'Spotify Song',
           'Name nicht lesbar',
           'Hat bereits Kinder',
-          'Bild im Fitnessstudio',
+          'Bild im Gym',
           'Polyamorie',
-          'EMF'
+          'EMF',
+          'Augenbrauen des Todes',
+          'Schweizerdeutsche Beschreibung',
+          'Man kennt sich'
         ]
     }
 }
@@ -266,6 +277,26 @@ const drawTable = () => {
     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);