From 56222af0fb9475bf47d44241c0ea4d19b6fe21b1 Mon Sep 17 00:00:00 2001 From: Felix Pankratz Date: Tue, 4 Jul 2023 19:40:24 +0200 Subject: [PATCH] add dropdown to select topic --- img/Tinder.svg | 10 ++++++++++ index.html | 3 +++ script.js | 35 ++++++++++++++++++++++++++++++----- 3 files changed, 43 insertions(+), 5 deletions(-) create mode 100644 img/Tinder.svg diff --git a/img/Tinder.svg b/img/Tinder.svg new file mode 100644 index 0000000..1572976 --- /dev/null +++ b/img/Tinder.svg @@ -0,0 +1,10 @@ + + + + + + + + + + \ No newline at end of file diff --git a/index.html b/index.html index c85b6d0..567319c 100644 --- a/index.html +++ b/index.html @@ -54,6 +54,9 @@

Seeed: 📋

+ +

B

I

diff --git a/script.js b/script.js index 8461798..6e37946 100644 --- a/script.js +++ b/script.js @@ -112,6 +112,23 @@ const refreshBingoButton = document.querySelector('#refresh-bingo'); const copyPermalinkButton = document.querySelector('#copy-permalink'); const winnerMessage = document.querySelector('#winner-message'); const topicTitle = document.querySelector('#topic'); +const topicSelect = document.querySelector('#topic-select'); + +const topicChanged = function () { + console.log('topic changed'); + topic = topicSelect.selectedOptions[0].id; + + redrawTable(); +} + +topicSelect.addEventListener("change", topicChanged); + +for (let x in topics) { + let option = document.createElement('option'); + option.id = x; + option.text = topics[x].title; + topicSelect.add(option); +} /** * Reads the seed from URL Parameter or generates new seed @@ -133,16 +150,17 @@ if (urlParams.has('topic')) { * Set fields, headline and center image based on topic */ -let fields = topics[topic].fields; +let fields; // = topics[topic].fields; -topicTitle.innerText = topics[topic].title; -centerFieldImage.src = topics[topic].image; -centerFieldImage.alt = topics[topic].title + ' Logo'; +//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; navigator.clipboard.writeText(permalink); @@ -238,6 +256,11 @@ const undrawBingoFieldEventHandler = (ev) => { }; const drawTable = () => { + topicTitle.innerText = topics[topic].title; + centerFieldImage.src = topics[topic].image; + centerFieldImage.alt = topics[topic].title + ' Logo'; + fields = topics[topic].fields; + shuffleBoard().forEach((field, index) => { bingoFields[index].textContent = field; bingoFields[index].addEventListener('click', drawBingoFieldEventHandler); @@ -245,7 +268,7 @@ const drawTable = () => { }); seed_elem.innerText = seed; - window.history.pushState(null, null, '?seeed=' + seed); + window.history.pushState(null, null, '?seeed=' + seed + '&topic=' + topic); } // hash function, thx stackoverflow :3 @@ -303,6 +326,8 @@ const redrawTable = function () { elem.classList.remove('drawn'); }); seed = Date.now().toString(); + + drawTable(); } refreshBingoButton.addEventListener('click', redrawTable)