dschlueter/pi_coder
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

fix: Vorheriger-Witz-Button funktioniert jetzt korrekt

Browse source 
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>
This commit is contained in:
Dieter Schlüter 2026-05-29 22:59:56 +02:00
commit 9b0a31b2af
1 changed files with 35 additions and 74 deletions
Download patch file Download diff file Expand all files Collapse all files

109
examples/html-joke-ticker/jokes.html
View file

@ -4,90 +4,30 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Witze-Ticker</title> <title>Witze-Ticker</title>
<script src="https://cdn.tailwindcss.com"></script>
<style> <style>
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* Fade-Transition (wird per JS .fade-out Klasse getoggelt) */
#joke { transition: opacity .5s ease; }
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;
}
#joke.fade-out { opacity: 0; } #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> </style>
</head> </head>
<body> <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="card"> <div class="w-full max-w-[600px] bg-white rounded-2xl shadow-lg px-6 py-8 text-center">
<h1>Witze-Ticker</h1> <h1 class="text-2xl font-bold mb-6">Witze-Ticker</h1>
<div id="joke-container"> <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>
<div class="meta"> <div class="mt-4 text-sm text-zinc-500 flex justify-center gap-5">
<span id="index-display"></span> <span id="index-display"></span>
<span id="countdown-display"></span> <span id="countdown-display"></span>
</div> </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> </div>
<script> <script>
@ -127,11 +67,14 @@
var countdownSeconds = COUNTDOWN_SECONDS; var countdownSeconds = COUNTDOWN_SECONDS;
var fadeTimeout = null; var fadeTimeout = null;
var countdownInterval = null; var countdownInterval = null;
var jokeHistory = []; // joke indices in visit order
var historyPos = -1; // current position in jokeHistory
var jokeEl = document.getElementById('joke'); var jokeEl = document.getElementById('joke');
var indexEl = document.getElementById('index-display'); var indexEl = document.getElementById('index-display');
var countdownEl = document.getElementById('countdown-display'); var countdownEl = document.getElementById('countdown-display');
var nextBtn = document.getElementById('next-btn'); var nextBtn = document.getElementById('next-btn');
var prevBtn = document.getElementById('prev-btn');
// Zuf\u00e4lligen Index w\u00e4hlen (nicht derselbe wie der aktuelle) // Zuf\u00e4lligen Index w\u00e4hlen (nicht derselbe wie der aktuelle)
function randomIndex() { function randomIndex() {
@ -154,12 +97,20 @@
}, 500); }, 500);
} }
// Vorherigen Witz anzeigen
function prevJoke() {
if (historyPos <= 0) return;
historyPos--;
showJoke(jokeHistory[historyPos]);
startCountdown();
}
// Countdown-Anzeige aktualisieren // Countdown-Anzeige aktualisieren
function updateCountdownDisplay() { function updateCountdownDisplay() {
countdownEl.textContent = 'N\u00e4chster Witz in ' + countdownSeconds + ' s'; 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() { function startCountdown() {
countdownSeconds = COUNTDOWN_SECONDS; countdownSeconds = COUNTDOWN_SECONDS;
updateCountdownDisplay(); updateCountdownDisplay();
@ -192,15 +143,21 @@
// N\u00e4chsten Witz zeigen (manuell oder automatisch) // N\u00e4chsten Witz zeigen (manuell oder automatisch)
function nextJoke() { function nextJoke() {
// Vorw\u00e4rts-History verwerfen, neuen Witz anh\u00e4ngen
jokeHistory.splice(historyPos + 1);
var idx = randomIndex(); var idx = randomIndex();
jokeHistory.push(idx);
historyPos = jokeHistory.length - 1;
showJoke(idx); showJoke(idx);
startCountdown(); startCountdown();
} }
// Initialer Zufallswitz beim Laden // Initialer Zufallswitz beim Laden
function init() { function init() {
var idx = randomIndex(); var idx = Math.floor(Math.random() * jokes.length);
currentIndex = idx; currentIndex = idx;
jokeHistory.push(idx);
historyPos = 0;
jokeEl.textContent = jokes[idx]; jokeEl.textContent = jokes[idx];
indexEl.textContent = (idx + 1) + '/' + jokes.length; indexEl.textContent = (idx + 1) + '/' + jokes.length;
startCountdown(); startCountdown();
@ -211,6 +168,10 @@
nextJoke(); nextJoke();
}); });
prevBtn.addEventListener('click', function () {
prevJoke();
});
document.addEventListener('visibilitychange', function () { document.addEventListener('visibilitychange', function () {
if (document.hidden) { if (document.hidden) {
pauseCountdown(); pauseCountdown();