8 changed files with 138 additions and 113 deletions
--- a/Mona-Sans.woff2
+++ b/Mona-Sans.woff2
--- a/VCROCDFaux.woff2
+++ b/VCROCDFaux.woff2
--- a/fireworks.js
+++ b/fireworks.js
@ -11,12 +11,12 @@ var canvas = null,
    ctx = null,
    cw = window.innerWidth,
    ch = window.innerHeight,
-    fireworksLimit = 15,
+    fireworksLimit = 10,
    fireworksShown = 0,
    fireworks = [],
    particles = [],
-    hue = 180,
+    hue = 120,
-    timerTotal = 10,
+    timerTotal = 25,
    timerTick = 0,
    animationEnd = true;
--- a/img/7-vs-wild-logo.svg
+++ b/img/7-vs-wild-logo.svg
--- a/img/logo.svg
+++ b/img/logo.svg
@ -1,7 +0,0 @@
 <svg width="205" height="72" viewBox="0 0 205 72" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M1.80225 30.4511H25.8893V27.7522L8.06572 26.7141V20.3486L25.8893 19.3105V16.6116H1.80225V0.560333H30.1276C43.7128 0.560333 48.5303 3.74312 48.5303 12.7373C48.5303 18.6877 44.2428 22.2857 36.7754 22.7009V23.8076C45.5907 25.0533 48.5303 27.6819 48.5303 34.3254C48.5303 42.0755 43.4233 44.8431 28.9728 44.8431H1.80225V30.4511Z" fill="white"/>
 <path d="M73.5752 19.2418H51.8011V0.560333H97.6622V16.4743L80.5617 44.8431H57.6311L73.5768 19.2418H73.5752Z" fill="white"/>
 <path d="M100.783 22.7712C100.783 6.09548 108.105 0.560333 119.619 0.560333H152.569V20.7638H122.364V26.3676H152.569V44.8415H121.739C108.733 44.8415 100.783 39.7902 100.783 22.7696V22.7712Z" fill="white"/>
 <path d="M157.554 30.4511H181.641V27.7522L163.818 26.7141V20.3486L181.641 19.3105V16.6116H157.554V0.560333H185.88C199.465 0.560333 204.281 3.74312 204.281 12.7373C204.281 18.6877 199.993 22.2857 192.527 22.7009V23.8076C201.343 25.0533 204.281 27.6819 204.281 34.3254C204.281 42.0755 199.174 44.8431 184.723 44.8431H157.554V30.4511Z" fill="white"/>
 <path d="M2.93594 66.6447H1.80312L1.80312 53.0509H4.06875L4.06875 65.5118H5.20156L5.20156 66.6447H9.73281V65.5118H10.8656L10.8656 53.0509H13.1312L13.1312 66.6447H11.9984V67.7775H10.8656V68.9103H4.06875V67.7775H2.93594V66.6447ZM31.1185 59.8478L31.1185 68.9103H28.8529L28.8529 53.0509H31.1185V56.4493H32.2513V57.5822H33.3841V58.715H34.5169V59.8478H35.6498V60.9806L36.7826 60.9806V62.1134H37.9154V53.0509H40.181V68.9103H37.9154V65.5118H36.7826V64.379H35.6498V63.2462H34.5169V62.1134H33.3841V60.9806H32.2513V59.8478H31.1185ZM55.9026 68.9103V53.0509H58.1683V66.6447H67.2308V68.9103H55.9026ZM90.8821 55.3165H86.3508V56.4493H85.218V65.5118H86.3508V66.6447H90.8821V65.5118H92.0149V56.4493H90.8821V55.3165ZM82.9524 55.3165L84.0852 55.3165V54.1837H85.218V53.0509H92.0149V54.1837H93.1477V55.3165H94.2805V66.6447H93.1477V67.7775H92.0149V68.9103H85.218V67.7775H84.0852V66.6447H82.9524V55.3165ZM113.401 66.6447H117.932V65.5118H119.065V64.379H121.33V66.6447H120.197V67.7775H119.065V68.9103H112.268V67.7775H111.135V66.6447H110.002V55.3165H111.135V54.1837H112.268V53.0509H119.065V54.1837H120.197V55.3165H121.33V57.5822H119.065V56.4493H117.932V55.3165H113.401V56.4493H112.268V65.5118H113.401V66.6447ZM139.318 62.1134V68.9103H137.052V53.0509H139.318V59.8478H140.45V58.715H141.583V57.5822H142.716V56.4493H143.849V55.3165H144.982V54.1837H146.114V53.0509H148.38V55.3165H147.247V56.4493H146.114V57.5822H144.982V58.715H143.849V59.8478H142.716V62.1134H143.849V63.2462H144.982V64.379H146.114V65.5118H147.247V66.6447H148.38V68.9103H146.114V67.7775H144.982V66.6447H143.849V65.5118H142.716V64.379H141.583V63.2462H140.45V62.1134H139.318ZM175.43 53.0509V55.3165H166.367V59.8478H173.164V62.1134H166.367V66.6447H175.43V68.9103H164.102V53.0509H175.43ZM193.417 55.3165V66.6447H199.081V65.5118H200.214V56.4493H199.081V55.3165H193.417ZM191.151 53.0509L200.214 53.0509V54.1837H201.347V55.3165H202.479V66.6447H201.347V67.7775H200.214V68.9103H191.151V53.0509Z" fill="white"/>
 </svg>
--- a/index.html
+++ b/index.html
@ -13,7 +13,7 @@
 </head>
 <body>
-<h1>37C3 Bingo <span id="refresh-bingo">🔄</span></h1>
+<h1>7 vs. Wild Bingo <span id="refresh-bingo">🔄</span></h1>
 <table id="bingo">
    <tr>
        <td data-row="0" data-col="0" class="bingo-field"></td>
@ -54,6 +54,12 @@
    </tr>
 </table>
 <p id="seeed">Seeed: <span id="seeed-value"></span> <span id="copy-permalink">📋</span></p>
-<div id="winner-message"></div>
+<div id="winner-message">
    <p>B</p>
    <p>I</p>
    <p>N</p>
    <p>G</p>
    <p>O</p>
 </div>
 </body>
 </html>
--- a/script.js
+++ b/script.js
@ -1,29 +1,67 @@
 "use strict"
 let fields = [
-    "Datenelch",
+    // 'MARTINAA/JAAAAA??!!',
-    "6 Stunden Schlaf",
+    // '"Du bist doch auch so einer, der ..."',
-    "Tschunk getrunken",
+    // 'Brain-AFK',
-    "Spaß gehabt",
+    // 'Rant über Kollegen',
-    "Sticker getauscht",
+    // 'Redet in StammTV rein',
-    "DECT genutzt",
+    // 'Häää?',
-    "Hardware gehackt",
+    // 'Bin mal kurz mitem Hund',
-    "Kabel vergessen",
+    // '*schnupft*',
-    "Halle gesucht",
+    // 'Habt ihr des neue ... schon gesehen?',
-    "$dinge gelötet",
+    // 'Random Nonsense-Problem',
-    "an SoS teil-genommen",
+    // 'Auf Ausbildung freuen',
-    "Neue Leute kennen-gelernt",
+    // 'Erzählt von Hinz und Kunz',
-    "Wasser getrunken",
+    // 'Was heißt eigentlich ...?',
-    "Waffel gegessen",
+    // 'Wiederholung',
-    "Corona Test gemacht",
+    // 'Story geht länger als nötig',
-    "2 Mahlzeiten gegessen",
+    // 'Labert direkt los',
-    "Fairydust bewundert",
+    // 'Haljo',
-    "Talk angeschaut",
+    // 'Klicken im Mikro',
-    "CCC Merch getragen",
+    // 'Schlafen',
-    "Engel-schicht gemacht",
+    // 'Akustik',
-    "In der Lounge getanzt",
+    // 'Spielt LoL',
-    "Etwas Neues aus-probiert",
+    // 'Tamme Story',
-    "Maske getragen",
+    // 'Ich kam heut morgen auf Arbeit...',
-    "geduscht"
+    // 'Crypto / Fiat / Inflation ...'
    'Krokodil',
    'Blut zu sehen',
    '"Ich kämpfe"',
    '"Ich kann nicht mehr"',
    'Jemand trinkt unsauberes Wasser',
    'Jemand schneidet von einem lebenden Baum was ab',
    'Knossi raucht',
    'Nackt',
    'Jemand isst eine Kokosnuss',
    'Stufenlos verstellbare Knoten',
    '"Ich frag mich, wie es den anderen so geht"',
    'Kleidung ist feucht/nass',
    'Joris verwirft seinen Tagesplan',
    'Sascha flext für die Kamera',
    '"Bist du deppert?"',
    'Sonnenbrand',
    '7 in the wild',
    'Aus Plastik Müll wird was gebaut',
    'Es wird geschrien',
    'Es wird gesungen',
    '"Mir ist kalt"',
    'Dinge bekommen Namen',
    '"Das ist auf einem anderen Level"',
    'Kleine Krebse',
    'Jemand entschuldigt sich',
    'Challenge wird falsch verstanden',
    'Es ist alles ganz anders als ich es mir vorgestellt habe',
    'Jemand kündigt an aufzuhören, tut es aber nicht',
    'Urin',
    'Jemand spricht durch die Kamera mit Freunden/Familie',
    'Shelter bricht zusammen',
    'Jemand weint',
    'Sonne kommt raus',
    'Medi Kit wird geöffnet',
    'Kriegt kein Feuer an',
    'Joris starrt in die Kamera',
    'Schimmel',
    'Jemand geht früher'
 ];
 let seed;
 const urlParams = new URLSearchParams(window.location.search);
@ -33,8 +71,9 @@ const bingoFields = document.querySelectorAll('#bingo td.bingo-field');
 const centerFieldImage = document.querySelector('#center-field-image');
 const refreshBingoButton = document.querySelector('#refresh-bingo');
 const copyPermalinkButton = document.querySelector('#copy-permalink');
-centerFieldImage.src = "img/logo.svg"
+const winnerMessage = document.querySelector('#winner-message');
-centerFieldImage.alt = "37C3 Logo";
+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');
@ -119,7 +158,9 @@ const checkForBingo = (field) => {
    }
    if (bingo) {
        winnerMessage.classList.remove('won');
        window.fireworks.start();
        winnerMessage.classList.add('won');
    }
 };
@ -203,6 +244,7 @@ drawTable();
 const redrawTable = function () {
    winnerMessage.classList.remove('won');
    allFields.forEach(elem => {
        elem.classList.remove('bingo');
    });
--- a/style.css
+++ b/style.css
@ -1,66 +1,6 @@
      @font-face {
        font-family: "VCROCDFaux";
        src: url("./VCROCDFaux.woff2") format("woff2");
      }
      @font-face {
        font-family: "MonaSans";
        src: url("./Mona-Sans.woff2") format("woff2");
      }
      /*body {
        background: #000;
        color: #fff;
        margin: 20px auto;
        max-width: 640px;
        padding: 0 20px;
      }
      .cover {
        aspect-ratio: 1/1;
        display: block;
        margin: 20px 0;
        width: 100%;
      }*/
      h2 {
        font-family: MonaSans, sans-serif;
        margin-top: 60px;
        font-weight: bold;
      }
      p {
        font-family: VCROCDFaux, monospace;
        color: #aaa;
      }
      /*.btn {
        display: block;
        background: #cc4d47;
        color: #fff;
        font-family: VCROCDFaux, monospace;
        text-decoration: none;
        text-align: center;
        line-height: 50px;
        display: flex;
        gap: 15px;
        justify-content: center;
        align-items: center;
        margin: 40px 0;
      }
      .btn:hover {
        background: #4e1614;
      }
      .btn svg {
        width: 20px;
        height: 20px;
      }*/
 /* HTML Selectors */
 body {
-    font-family: VCROCDFaux, monospace;
+    font-family: monospace;
    height: 95vh;
    width: 95vw;
    overflow: hidden;
@ -87,7 +27,7 @@ td {
    height: calc(100vh / 6);
    transition: background-color ease-out .350s;
    border-radius: 40px;
-    font-size: x-large;
+    font-size: xx-large;
 }
 h1, p {
@ -120,7 +60,7 @@ td.drawn.bingo:hover {
 img#center-field-image {
    max-height: calc(100vh / 6);
-    max-width: calc(100vw / 6);
+    max-width: calc(100vh / 6);
 }
 p#seeed {
@ -131,6 +71,20 @@ span#copy-permalink, span#refresh-bingo {
    cursor: pointer;
 }
 div#winner-message {
    display: flex;
    position: fixed;
    font-size: 3000%;
    text-shadow: 0 0 40px white;
    transition: all ease-out .75s;
    pointer-events: none;
 }
 div#winner-message.won {
    animation: won 5s;
    animation-timing-function: ease-in-out;
 }
@keyframes won {
    0% {
        left: 50%;
@ -172,15 +126,3 @@ span#copy-permalink, span#refresh-bingo {
        opacity: 0;
    }
 }
@media screen and (max-width: 767px) and (orientation: portrait) {
    td {
        font-size: large;
    }
 }
@media screen and (max-width: 576px) and (orientation: portrait) {
    td {
        font-size: small;
    }
 }