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': {
'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);