modify css from javascript based on topic

multiple-topics
Felix Pankratz 1 year ago
parent 784a315d85
commit d61920c4c3

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

Loading…
Cancel
Save