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>

147
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,46 +23,86 @@ let fields = [
// 'Tamme Story', // 'Tamme Story',
// 'Ich kam heut morgen auf Arbeit...', // 'Ich kam heut morgen auf Arbeit...',
// 'Crypto / Fiat / Inflation ...' // 'Crypto / Fiat / Inflation ...'
'Krokodil',
'Blut zu sehen', let topics = {
'"Ich kämpfe"', '7vsWild': {
'"Ich kann nicht mehr"', 'title': '7 vs. Wild',
'Jemand trinkt unsauberes Wasser', 'image': 'img/7-vs-wild-logo.svg',
'Jemand schneidet von einem lebenden Baum was ab', 'fields': [
'Knossi raucht', 'Krokodil',
'Nackt', 'Blut zu sehen',
'Jemand isst eine Kokosnuss', '"Ich kämpfe"',
'Stufenlos verstellbare Knoten', '"Ich kann nicht mehr"',
'"Ich frag mich, wie es den anderen so geht"', 'Jemand trinkt unsauberes Wasser',
'Kleidung ist feucht/nass', 'Jemand schneidet von einem lebenden Baum was ab',
'Joris verwirft seinen Tagesplan', 'Knossi raucht',
'Sascha flext für die Kamera', 'Nackt',
'"Bist du deppert?"', 'Jemand isst eine Kokosnuss',
'Sonnenbrand', 'Stufenlos verstellbare Knoten',
'7 in the wild', '"Ich frag mich, wie es den anderen so geht"',
'Aus Plastik Müll wird was gebaut', 'Kleidung ist feucht/nass',
'Es wird geschrien', 'Joris verwirft seinen Tagesplan',
'Es wird gesungen', 'Sascha flext für die Kamera',
'"Mir ist kalt"', '"Bist du deppert?"',
'Dinge bekommen Namen', 'Sonnenbrand',
'"Das ist auf einem anderen Level"', '7 in the wild',
'Kleine Krebse', 'Aus Plastik Müll wird was gebaut',
'Jemand entschuldigt sich', 'Es wird geschrien',
'Challenge wird falsch verstanden', 'Es wird gesungen',
'Es ist alles ganz anders als ich es mir vorgestellt habe', '"Mir ist kalt"',
'Jemand kündigt an aufzuhören, tut es aber nicht', 'Dinge bekommen Namen',
'Urin', '"Das ist auf einem anderen Level"',
'Jemand spricht durch die Kamera mit Freunden/Familie', 'Kleine Krebse',
'Shelter bricht zusammen', 'Jemand entschuldigt sich',
'Jemand weint', 'Challenge wird falsch verstanden',
'Sonne kommt raus', 'Es ist alles ganz anders als ich es mir vorgestellt habe',
'Medi Kit wird geöffnet', 'Jemand kündigt an aufzuhören, tut es aber nicht',
'Kriegt kein Feuer an', 'Urin',
'Joris starrt in die Kamera', 'Jemand spricht durch die Kamera mit Freunden/Familie',
'Schimmel', 'Shelter bricht zusammen',
'Jemand geht früher' 'Jemand weint',
]; 'Sonne kommt raus',
'Medi Kit wird geöffnet',
'Kriegt kein Feuer an',
'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 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 => {