Update 'bauchbinde'

static/bauchbinde/assets/script.js

@@ -8,6 +8,7 @@
     let holdDuration = 4000;
     let room = null;
     let time = null;
+    let startDelay = 1000;
 
     async function getCurrentTalkByRoomName(roomName) {
         let now = Date.now();
@@ -40,6 +41,7 @@
     }
 
     async function init() {
+        const root = document.querySelector('html');
         textEl = document.querySelector('.text');
         textEl.innerHTML = '';
 
@@ -62,12 +64,6 @@
                     holdDuration = parseInt(value, 10);
                 }
                 if (key === 'theme') {
-                    const root = document.querySelector('html');
-                    root.className = '';
-                    root.classList.add(`theme-${value}`)
-                }
-                if (key === 'theme') {
-                    const root = document.querySelector('html');
                     root.className = '';
                     root.classList.add(`theme-${value}`)
                 }
@@ -77,6 +73,18 @@
                 if (key === 'time') {
                     time = value;
                 }
+                if (key === 'startdelay') {
+                    startDelay = parseInt(value, 10);
+                }
+                if (key === 'left') {
+                    root.style.setProperty('--left', value);
+                }
+                if (key === 'bottom') {
+                    root.style.setProperty('--bottom', value);
+                }
+                if (key === 'width') {
+                    root.style.setProperty('--width', value);
+                }
             }
         }
 
@@ -92,7 +100,7 @@
                 }
             }
         }
-       
+
         if (speaker) {
             headline += ',';
         }
@@ -249,7 +257,7 @@
 
     window.addEventListener('load', async () => {
         await init();
-        await new Promise(r => setTimeout(r, 1000));
+        await new Promise(r => setTimeout(r, startDelay));
         await animate();
     });
 })();

static/bauchbinde/assets/style.css

@@ -8,6 +8,9 @@
     --medium-tile-color: #fff900;
     --small-tile-color: #0bcb60;
     --text-color: #252826;
+    --bottom: 9vw;
+    --left: 12.5vw;
+    --width: 67.5vw;
 }
 
 :root.theme-main {
@@ -39,9 +42,9 @@ body {
 
 .container {
     position: fixed;
-    bottom: 9vw;
+    bottom: var(--bottom);
-    left: 12.5vw;
+    left: var(--left);
-    right: 20vw;
+    width: var(--width);
 }
 
 .background {