panki/bingo
1
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

modify css from javascript based on topic

Browse Source
This commit is contained in:
Felix Pankratz 2023-07-04 20:48:15 +02:00
parent 784a315d85
commit d61920c4c3
1 changed files with 34 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
script.js
View File

@ -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);