Add files via upload

js/splitflap.js

@@ -0,0 +1,53 @@
+// Simuliert das Umklappen einer mechanischen Bahnhofs-Anzeigetafel (Solari-Board).
+// Jedes Zeichen "rattert" kurz durch ein paar Zufallszeichen, bevor es sich auf
+// den Zielwert setzt - versetzt pro Zeichen, damit es wie eine echte Tafel wirkt.
+
+const SplitFlap = (() => {
+  const CHARSET = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789 :+-.äöüÄÖÜß';
+  const STEPS_PER_CHAR = 6;
+  const STEP_DELAY_MS = 28;
+  const STAGGER_MS = 18;
+
+  function randomChar() {
+    return CHARSET[Math.floor(Math.random() * CHARSET.length)];
+  }
+
+  function render(el, text) {
+    const chars = text.split('');
+    const existing = el.querySelectorAll('.flap-char');
+
+    if (existing.length !== chars.length) {
+      el.innerHTML = '';
+      chars.forEach(() => {
+        const span = document.createElement('span');
+        span.className = 'flap-char';
+        span.textContent = ' ';
+        el.appendChild(span);
+      });
+    }
+
+    const spans = el.querySelectorAll('.flap-char');
+
+    chars.forEach((targetChar, i) => {
+      const span = spans[i];
+      if (span.dataset.value === targetChar) return;
+      span.dataset.value = targetChar;
+
+      let step = 0;
+      const delay = i * STAGGER_MS;
+      setTimeout(() => {
+        const interval = setInterval(() => {
+          step += 1;
+          span.textContent = step >= STEPS_PER_CHAR ? targetChar : randomChar();
+          span.classList.add('flap-char--flipping');
+          if (step >= STEPS_PER_CHAR) {
+            clearInterval(interval);
+            span.classList.remove('flap-char--flipping');
+          }
+        }, STEP_DELAY_MS);
+      }, delay);
+    });
+  }
+
+  return { render };
+})();