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,
-    timerTotal = 10,
+    hue = 120,
+    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",
-    "6 Stunden Schlaf",
-    "Tschunk getrunken",
-    "Spaß gehabt",
-    "Sticker getauscht",
-    "DECT genutzt",
-    "Hardware gehackt",
-    "Kabel vergessen",
-    "Halle gesucht",
-    "$dinge gelötet",
-    "an SoS teil-genommen",
-    "Neue Leute kennen-gelernt",
-    "Wasser getrunken",
-    "Waffel gegessen",
-    "Corona Test gemacht",
-    "2 Mahlzeiten gegessen",
-    "Fairydust bewundert",
-    "Talk angeschaut",
-    "CCC Merch getragen",
-    "Engel-schicht gemacht",
-    "In der Lounge getanzt",
-    "Etwas Neues aus-probiert",
-    "Maske getragen",
-    "geduscht"
+    // 'MARTINAA/JAAAAA??!!',
+    // '"Du bist doch auch so einer, der ..."',
+    // 'Brain-AFK',
+    // 'Rant über Kollegen',
+    // 'Redet in StammTV rein',
+    // 'Häää?',
+    // 'Bin mal kurz mitem Hund',
+    // '*schnupft*',
+    // 'Habt ihr des neue ... schon gesehen?',
+    // 'Random Nonsense-Problem',
+    // 'Auf Ausbildung freuen',
+    // 'Erzählt von Hinz und Kunz',
+    // 'Was heißt eigentlich ...?',
+    // 'Wiederholung',
+    // 'Story geht länger als nötig',
+    // 'Labert direkt los',
+    // 'Haljo',
+    // 'Klicken im Mikro',
+    // 'Schlafen',
+    // 'Akustik',
+    // 'Spielt LoL',
+    // 'Tamme Story',
+    // 'Ich kam heut morgen auf Arbeit...',
+    // '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"
-centerFieldImage.alt = "37C3 Logo";
+const winnerMessage = document.querySelector('#winner-message');
+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;
-    }
-}