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> </head>
<body> <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"> <table id="bingo">
<tr> <tr>
<td data-row="0" data-col="0" class="bingo-field"></td> <td data-row="0" data-col="0" class="bingo-field"></td>

71
script.js
View File

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