From 9b0a31b2af8a84140bc0b8427efcb9694e83af65 Mon Sep 17 00:00:00 2001
From: dschlueter <dschlueter@kitux.de>
Date: Fri, 29 May 2026 22:59:56 +0200
Subject: [PATCH] fix: Vorheriger-Witz-Button funktioniert jetzt korrekt
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Fehler: nextJoke() schrieb currentIndex in History bevor showJoke()
ihn aktualisierte — Mapping war eins daneben. prevJoke() poppte
doppelt ohne konsistenten Stand.

Fix: positionsbasiertes History-Array mit historyPos-Zeiger.
nextJoke() hängt neuen Index an und setzt historyPos vor.
prevJoke() dekrementiert historyPos und liest den korrekten Eintrag.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 examples/html-joke-ticker/jokes.html | 109 +++++++++------------------
 1 file changed, 35 insertions(+), 74 deletions(-)
diff --git a/examples/html-joke-ticker/jokes.html b/examples/html-joke-ticker/jokes.html
index e9635b9..4871407 100644
--- a/examples/html-joke-ticker/jokes.html
+++ b/examples/html-joke-ticker/jokes.html
@@ -4,90 +4,30 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Witze-Ticker</title>
+  <script src="https://cdn.tailwindcss.com"></script>
   <style>
-    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
-
-    body {
-      font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
-      background: #f4f4f5;
-      color: #18181b;
-      min-height: 100vh;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      padding: 2rem;
-    }
-
-    .card {
-      background: #fff;
-      border-radius: 16px;
-      box-shadow: 0 4px 24px rgba(0,0,0,.08);
-      max-width: 600px;
-      width: 100%;
-      padding: 2.5rem 2rem 2rem;
-      text-align: center;
-    }
-
-    h1 { font-size: 1.5rem; margin-bottom: 1.5rem; }
-
-    /* Witz-Bereich mit Fade-Transition */
-    #joke-container {
-      min-height: 120px;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-    }
-
-    #joke {
-      font-size: 1.15rem;
-      line-height: 1.6;
-      opacity: 1;
-      transition: opacity .5s ease;
-    }
-
+    /* Fade-Transition (wird per JS .fade-out Klasse getoggelt) */
+    #joke { transition: opacity .5s ease; }
     #joke.fade-out { opacity: 0; }
-
-    /* Meta-Zeile: Index + Countdown */
-    .meta {
-      margin-top: 1rem;
-      font-size: .85rem;
-      color: #71717a;
-      display: flex;
-      justify-content: center;
-      gap: 1.25rem;
-    }
-
-    /* Button */
-    #next-btn {
-      margin-top: 1.5rem;
-      padding: .65rem 1.5rem;
-      font-size: 1rem;
-      border: none;
-      border-radius: 8px;
-      background: #2563eb;
-      color: #fff;
-      cursor: pointer;
-      transition: background .2s ease;
-    }
-
-    #next-btn:hover { background: #1d4ed8; }
-    #next-btn:active { background: #1e40af; }
   </style>
 </head>
-<body>
-  <div class="card">
-    <h1>Witze-Ticker</h1>
+<body class="min-h-screen flex items-center justify-center bg-stone-100 text-zinc-900 font-sans antialiased p-4 sm:p-8">
+  <div class="w-full max-w-[600px] bg-white rounded-2xl shadow-lg px-6 py-8 text-center">
+    <h1 class="text-2xl font-bold mb-6">Witze-Ticker</h1>
 
     <div id="joke-container">
-      <div id="joke"></div>
+      <div id="joke" class="text-lg sm:text-xl leading-relaxed min-h-[120px] flex items-center justify-center"></div>
     </div>
 
-    <div class="meta">
+    <div class="mt-4 text-sm text-zinc-500 flex justify-center gap-5">
       <span id="index-display"></span>
       <span id="countdown-display"></span>
     </div>
 
-    <button id="next-btn">Nächster Witz</button>
+    <div class="mt-6 flex flex-col sm:flex-row items-center justify-center gap-3">
+      <button id="prev-btn" class="w-full sm:w-auto px-5 py-2.5 text-base rounded-lg bg-gray-500 text-white cursor-pointer transition-colors duration-200 hover:bg-gray-600 active:bg-gray-700">Vorheriger Witz</button>
+      <button id="next-btn" class="w-full sm:w-auto px-5 py-2.5 text-base rounded-lg bg-blue-600 text-white cursor-pointer transition-colors duration-200 hover:bg-blue-700 active:bg-blue-800">Nächster Witz</button>
+    </div>
   </div>
 
   <script>
@@ -127,11 +67,14 @@
       var countdownSeconds = COUNTDOWN_SECONDS;
       var fadeTimeout = null;
       var countdownInterval = null;
+      var jokeHistory = [];  // joke indices in visit order
+      var historyPos = -1;   // current position in jokeHistory
 
       var jokeEl = document.getElementById('joke');
       var indexEl = document.getElementById('index-display');
       var countdownEl = document.getElementById('countdown-display');
       var nextBtn = document.getElementById('next-btn');
+      var prevBtn = document.getElementById('prev-btn');
 
       // Zuf\u00e4lligen Index w\u00e4hlen (nicht derselbe wie der aktuelle)
       function randomIndex() {
@@ -154,12 +97,20 @@
         }, 500);
       }
 
+      // Vorherigen Witz anzeigen
+      function prevJoke() {
+        if (historyPos <= 0) return;
+        historyPos--;
+        showJoke(jokeHistory[historyPos]);
+        startCountdown();
+      }
+
       // Countdown-Anzeige aktualisieren
       function updateCountdownDisplay() {
         countdownEl.textContent = 'N\u00e4chster Witz in ' + countdownSeconds + ' s';
       }
 
-      // Countdown starten (ein einziger Timer — bei 0 wird nextJoke aufgerufen)
+      // Countdown starten (ein einziger Timer \u2014 bei 0 wird nextJoke aufgerufen)
       function startCountdown() {
         countdownSeconds = COUNTDOWN_SECONDS;
         updateCountdownDisplay();
@@ -192,15 +143,21 @@
 
       // N\u00e4chsten Witz zeigen (manuell oder automatisch)
       function nextJoke() {
+        // Vorw\u00e4rts-History verwerfen, neuen Witz anh\u00e4ngen
+        jokeHistory.splice(historyPos + 1);
         var idx = randomIndex();
+        jokeHistory.push(idx);
+        historyPos = jokeHistory.length - 1;
         showJoke(idx);
         startCountdown();
       }
 
       // Initialer Zufallswitz beim Laden
       function init() {
-        var idx = randomIndex();
+        var idx = Math.floor(Math.random() * jokes.length);
         currentIndex = idx;
+        jokeHistory.push(idx);
+        historyPos = 0;
         jokeEl.textContent = jokes[idx];
         indexEl.textContent = (idx + 1) + '/' + jokes.length;
         startCountdown();
@@ -211,6 +168,10 @@
         nextJoke();
       });
 
+      prevBtn.addEventListener('click', function () {
+        prevJoke();
+      });
+
       document.addEventListener('visibilitychange', function () {
         if (document.hidden) {
           pauseCountdown();
