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

implement groundwork for topic system: new data structure, dynamic content

Browse Source
This commit is contained in:
Felix Pankratz 2023-07-04 18:50:07 +02:00
parent cd69c462c2
commit bb1ac78fe9
2 changed files with 100 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
index.html
View File

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

71
script.js
View File

@ -1,5 +1,4 @@
"use strict"
let fields = [
// 'MARTINAA/JAAAAA??!!',
// '"Du bist doch auch so einer, der ..."',
// 'Brain-AFK',
@ -24,6 +23,12 @@ let fields = [
// 'Tamme Story',
// 'Ich kam heut morgen auf Arbeit...',
// 'Crypto / Fiat / Inflation ...'
let topics = {
'7vsWild': {
'title': '7 vs. Wild',
'image': 'img/7-vs-wild-logo.svg',
'fields': [
'Krokodil',
'Blut zu sehen',
'"Ich kämpfe"',
@ -62,8 +67,42 @@ let fields = [
'Joris starrt in die Kamera',
'Schimmel',
'Jemand geht früher'
];
]
},
'tinder': {
'title': '🔥 Tinder',
'image': 'img/Tinder.svg',
'fields': [
'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 Fitnessstudio',
'Polyamorie',
'EMF'
]
}
}
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 +111,7 @@ 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";
centerFieldImage.alt = "7 vs. Wild Logo";
centerFieldImage.parentElement.addEventListener('contextmenu', ev => {
ev.preventDefault();
centerFieldImage.parentElement.classList.remove('bingo');
});
const topicTitle = document.querySelector('#topic');
/**
* Reads the seed from URL Parameter or generates new seed
@ -89,6 +123,25 @@ if (urlParams.has('seeed')) {
seed = Date.now().toString();
}
if (urlParams.has('topic')) {
topic = urlParams.get('topic');
} else {
topic = 'tinder';
}
/**
* 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;
@ -239,10 +292,8 @@ function mulberry32(a) {
}
}
drawTable();
const redrawTable = function () {
winnerMessage.classList.remove('won');
allFields.forEach(elem => {