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

add dropdown to select topic

Browse Source
This commit is contained in:
Felix Pankratz 2023-07-04 19:40:24 +02:00
parent bb1ac78fe9
commit 56222af0fb
3 changed files with 43 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
img/Tinder.svg Normal file
View File

@ -0,0 +1,10 @@
<?xml version="1.0" encoding="UTF-8"?>
<!-- Generator: Adobe Illustrator 16.0.4, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg version="1.0" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="571.809px" height="215px" viewBox="0 0 571.809 215" enable-background="new 0 0 571.809 215" xml:space="preserve">
<g id="g10" transform="matrix(1.25,0,0,-1.25,0,235)">
<g id="g12" transform="scale(0.1,0.1)">
<path id="path14" fill="#FF6B6B" d="M4520.695,217.156l-23.266,61.781h-32.75v-91.492h27.445v64.047h-3.289l23.961-64.047h15.594 l23.945,64.047h3.836v-64.047h18.297v91.492h-30.508L4520.695,217.156L4520.695,217.156z M4382.343,260.641h27.445v-73.195h18.297 v73.195h27.445v18.297h-73.188V260.641z M4344.351,1236.922c-67.656-18.977-124.961-49.395-171.797-91.27 c-46.945-41.91-83.914-93.301-108.664-154.144c-24.836-60.84-38.359-128.469-38.359-202.805V187.445h265.32v601.258 c0,74.336,26.945,131.461,78.492,171.387c51.547,39.848,120.727,52.383,205.125,37.512v251.461 C4488.695,1259.914,4412.007,1255.851,4344.351,1236.922z M3201.273,719.742c1.32,44.648,9.719,85.172,25.141,121.688 c15.352,36.52,35.492,67.934,60.297,94.285c24.781,26.418,53.898,46.973,87.383,61.887 c33.484,14.871,69.672,22.301,108.555,22.301c42.859,0,81.695-8.129,116.547-24.332c34.82-16.195,64.328-39.242,88.43-68.977 L3201.273,719.742L3201.273,719.742z M3927.757,1003.703c-31.461,54.059-69.672,99.68-114.547,136.898 c-44.922,37.164-95.438,65.543-151.711,85.168c-56.266,19.578-115.227,29.387-176.844,29.387 c-73.695,0-142.68-14.508-206.984-43.598c-64.32-29.094-120.586-68.289-168.859-117.629 c-48.203-49.351-86.047-107.473-113.492-174.41c-27.508-66.934-41.203-138.238-41.203-213.949 c0-75.758,13.695-146.711,41.203-212.961c27.445-66.242,65.289-124.055,113.492-173.422 c48.273-49.336,104.539-88.18,168.859-116.578C3341.976,174.227,3410.96,160,3484.656,160 c129.906,0,238.133,32.695,324.539,98.289c86.398,65.594,145.031,148.734,175.859,258.523h-283.391 c-22.773-45.75-54.25-72.625-94.414-92.195c-40.211-19.617-81.742-29.398-124.602-29.398c-45.555,0-87.094,9.828-124.602,29.445 c-37.516,19.586-69.68,46.93-96.484,82.109l731.5,310.32C3981.031,887.406,3959.234,949.59,3927.757,1003.703z M2639.5,588.945 c-14.102-35.836-33.234-66.938-57.484-93.305c-24.219-26.367-52.438-47.32-84.699-62.891 c-32.309-15.539-66.574-23.273-102.855-23.273c-36.324,0-70.645,7.383-102.91,22.289c-32.312,14.859-60.527,35.484-84.746,61.844 c-24.195,26.359-43.344,57.469-57.48,93.289c-14.156,35.82-21.172,74.727-21.172,116.641c0,43.25,7.016,83.148,21.172,119.656 c14.137,36.516,33.285,68.234,57.48,95.336c24.219,27,52.434,47.953,84.746,62.828c32.266,14.859,66.586,22.344,102.91,22.344 c36.281,0,70.547-7.832,102.855-23.344c32.262-15.555,60.48-36.867,84.699-63.855c24.25-27.121,43.383-58.824,57.484-95.332 c14.148-36.531,21.227-75.766,21.227-117.633C2660.727,662.961,2653.648,624.75,2639.5,588.945z M2662.344,1131.433 c-82.344,81.164-181.008,121.688-304.293,121.688c-68.281,0-132.707-14.215-192.316-42.66 c-59.613-28.441-112.055-67.73-156.922-117.875c-44.922-50.094-80.516-108.351-106.637-174.711 c-26.121-66.328-39.234-136.797-39.234-211.32c0-75.859,13.031-147,39.152-213.352c26.117-66.344,62.641-124.266,109.52-173.711 c46.899-49.445,102.805-88.398,167.809-116.836c64.957-28.43,136.973-42.656,216.027-42.656 c77.664,0,149.004,14.227,213.996,42.609c65.016,28.398,120.938,67.242,167.828,116.578 c46.891,49.367,84.25,107.18,110.367,173.422c26.125,66.25,40.016,137.203,40.016,212.961v991.449h-265.312V1131.433 L2662.344,1131.433z M1700.723,1124.344c-39.523,41.223-87.738,73.34-144.688,96.328 c-56.953,22.984-121.562,34.484-193.941,34.484c-71.043,0-134.992-11.84-191.91-35.48 c-56.957-23.688-105.863-56.477-146.711-98.34c-40.895-41.934-72-91.273-94.098-148.058 c-22.09-56.773-32.781-118.316-32.781-184.574V187.445h265.32v607.359c0,59.461,18.344,107.469,55.875,143.984 c37.516,36.523,85.543,54.75,144.5,54.75c44.23,0,78.949-7.434,104.434-22.293c25.434-14.918,44.828-33.145,58.23-54.742 c13.348-21.66,21.199-43.609,25.223-65.957c4.035-22.289,5.145-40.883,5.145-55.742V187.445h265.316v601.258 c0,68.977-9.559,131.859-30.336,188.641C1769.539,1034.121,1740.238,1083.074,1700.723,1124.344L1700.723,1124.344z M805.105,1230.426H539.789V187.445h265.316V1230.426z M315.719,468.281c-32.844,29.727-50.398,81.117-50.398,154.141v370.133 h182.977v237.871H265.32v265.32H0v-871.34c0-71.648,10.062-136.203,30.148-193.688C50.25,373.266,79.68,324.945,118.57,285.742 c38.836-39.227,88.25-67.617,145.871-85.156c57.59-17.602,119.812-22.352,202.156-14.227v243.367 C393.406,425.68,348.52,438.5,315.719,468.281z M608.605,1666.746c0.969-1.645,2.754-2.742,4.797-2.742 c1.375,0,2.633,0.492,3.602,1.324l0.281,0.23c8.918,7.395,16.848,14.883,24.355,22.965 c72.863,78.586,30.102,175.121,29.652,176.086c-2.133,4.703-0.691,10.277,3.477,13.312c4.164,3.039,9.883,2.719,13.668-0.785 c246.613-228.238,181.387-402.172,176.601-413.844c-19.992-70.93-98.645-122.199-191.75-124.809 c-2.473-0.074-2.75-0.113-5.207-0.113c-110.148,0-201.484,67.477-201.484,153.621v1.32 c-9.152,119.594,106.547,237.543,111.371,242.5c3.117,3.195,6.75,4.137,10.848,2.398c4.098-1.75,6.145-5.855,6.008-10.34 c-0.738-23.418,3.773-43.871,14-61.004L608.605,1666.746"/>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 5.3 KiB

3
index.html
View File

@ -54,6 +54,9 @@
</tr> </tr>
</table> </table>
<p id="seeed">Seeed: <span id="seeed-value"></span> <span id="copy-permalink">📋</span></p> <p id="seeed">Seeed: <span id="seeed-value"></span> <span id="copy-permalink">📋</span></p>
<select id="topic-select">
</select>
<div id="winner-message"> <div id="winner-message">
<p>B</p> <p>B</p>
<p>I</p> <p>I</p>

35
script.js
View File

@ -112,6 +112,23 @@ 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');
const topicTitle = document.querySelector('#topic'); 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 * 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 * Set fields, headline and center image based on topic
*/ */
let fields = topics[topic].fields; let fields; // = topics[topic].fields;
topicTitle.innerText = topics[topic].title; //topicTitle.innerText = topics[topic].title;
centerFieldImage.src = topics[topic].image; //centerFieldImage.src = topics[topic].image;
centerFieldImage.alt = topics[topic].title + ' Logo'; //centerFieldImage.alt = topics[topic].title + ' Logo';
centerFieldImage.parentElement.addEventListener('contextmenu', ev => { centerFieldImage.parentElement.addEventListener('contextmenu', ev => {
ev.preventDefault(); ev.preventDefault();
centerFieldImage.parentElement.classList.remove('bingo'); centerFieldImage.parentElement.classList.remove('bingo');
}); });
const copyPermalinkToClipboard = function () { const copyPermalinkToClipboard = function () {
const permalink = window.location.href; const permalink = window.location.href;
navigator.clipboard.writeText(permalink); navigator.clipboard.writeText(permalink);
@ -238,6 +256,11 @@ const undrawBingoFieldEventHandler = (ev) => {
}; };
const drawTable = () => { 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) => { shuffleBoard().forEach((field, index) => {
bingoFields[index].textContent = field; bingoFields[index].textContent = field;
bingoFields[index].addEventListener('click', drawBingoFieldEventHandler); bingoFields[index].addEventListener('click', drawBingoFieldEventHandler);
@ -245,7 +268,7 @@ const drawTable = () => {
}); });
seed_elem.innerText = seed; 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 // hash function, thx stackoverflow :3
@ -303,6 +326,8 @@ const redrawTable = function () {
elem.classList.remove('drawn'); elem.classList.remove('drawn');
}); });
seed = Date.now().toString(); seed = Date.now().toString();
drawTable(); drawTable();
} }
refreshBingoButton.addEventListener('click', redrawTable) refreshBingoButton.addEventListener('click', redrawTable)