feat: Implement client-side game logic and UI with WebSocket message handlers, including a winner popup and confetti animation.

2026-01-04 12:14:53 +01:00
parent c9be49d988
commit 8ca744cd5b
5 changed files with 181 additions and 9 deletions
--- a/src/server-deno/public/js/handlers.js
+++ b/src/server-deno/public/js/handlers.js
@@ -167,7 +167,107 @@ export function handleReveal(msg) {
 }

 export function handleGameEnded(msg) {
-  alert(`Gewinner: ${shortName(msg.winner)}`);
+  // Create and show the winner popup with confetti
+  showWinnerPopup(msg);
+}
+
+function showWinnerPopup(msg) {
+  const winnerName = msg.winnerName || shortName(msg.winner);
+  const score = msg.score ?? 0;
+  const timeline = msg.timeline || [];
+
+  // Create the popup overlay
+  const overlay = document.createElement('div');
+  overlay.id = 'winnerOverlay';
+  overlay.className = 'fixed inset-0 z-50 flex items-center justify-center p-4';
+  overlay.style.cssText = 'background: rgba(0,0,0,0.75); backdrop-filter: blur(4px);';
+
+  // Create timeline cards HTML
+  const timelineHtml = timeline.length > 0
+    ? timeline.map(t => `
+        <div class="flex items-start gap-3 bg-white/10 rounded-lg px-3 py-2 w-full">
+          <div class="flex-shrink-0 font-bold tabular-nums bg-indigo-600 text-white rounded-md px-2 py-1 min-w-[48px] text-center text-sm">${t.year ?? '?'}</div>
+          <div class="flex-1 min-w-0 leading-tight text-left overflow-hidden">
+            <div class="font-semibold text-white text-sm break-words" style="word-break: break-word; hyphens: auto;">${escapeHtmlSimple(t.title || 'Unknown')}</div>
+            <div class="text-xs text-white/70 break-words" style="word-break: break-word;">${escapeHtmlSimple(t.artist || '')}</div>
+          </div>
+        </div>
+      `).join('')
+    : '<p class="text-white/60 text-sm">Keine Karten</p>';
+
+  overlay.innerHTML = `
+    <div id="confettiContainer" class="fixed inset-0 pointer-events-none overflow-hidden"></div>
+    <div class="relative bg-gradient-to-br from-indigo-600 via-purple-600 to-pink-600 rounded-2xl shadow-2xl max-w-md w-full p-6 text-center animate-popup">
+      <div class="absolute -top-6 left-1/2 -translate-x-1/2 text-6xl animate-bounce-slow">🏆</div>
+      <h2 class="text-3xl font-bold text-white mt-4 mb-2">Gewinner!</h2>
+      <p class="text-4xl font-extrabold text-yellow-300 mb-2">${escapeHtmlSimple(winnerName)}</p>
+      <p class="text-lg text-white/90 mb-4">Score: <span class="font-bold text-2xl">${score}</span> Karten</p>
+      <div class="bg-black/20 rounded-xl p-3 max-h-60 overflow-y-auto">
+        <h3 class="text-sm font-semibold text-white/80 mb-2">Zeitleiste</h3>
+        <div class="flex flex-col gap-2">
+          ${timelineHtml}
+        </div>
+      </div>
+      <button id="closeWinnerBtn" class="mt-6 px-6 py-3 bg-white text-indigo-600 font-bold rounded-xl hover:bg-indigo-100 transition-colors shadow-lg">
+        Schließen
+      </button>
+    </div>
+  `;
+
+  document.body.appendChild(overlay);
+
+  // Start confetti animation
+  createConfetti();
+
+  // Close button handler
+  document.getElementById('closeWinnerBtn').addEventListener('click', () => {
+    overlay.remove();
+  });
+
+  // Close on overlay click (outside popup)
+  overlay.addEventListener('click', (e) => {
+    if (e.target === overlay) {
+      overlay.remove();
+    }
+  });
+}
+
+function createConfetti() {
+  const container = document.getElementById('confettiContainer');
+  if (!container) return;
+
+  const colors = ['#FFD700', '#FF6B6B', '#4ECDC4', '#45B7D1', '#96CEB4', '#FFEAA7', '#DDA0DD', '#98D8C8'];
+  const confettiCount = 100;
+
+  for (let i = 0; i < confettiCount; i++) {
+    const confetti = document.createElement('div');
+    confetti.className = 'confetti-piece';
+    confetti.style.cssText = `
+      position: absolute;
+      width: ${Math.random() * 10 + 5}px;
+      height: ${Math.random() * 10 + 5}px;
+      background: ${colors[Math.floor(Math.random() * colors.length)]};
+      left: ${Math.random() * 100}%;
+      top: -20px;
+      border-radius: ${Math.random() > 0.5 ? '50%' : '2px'};
+      animation: confetti-fall ${Math.random() * 3 + 2}s linear forwards;
+      animation-delay: ${Math.random() * 0.5}s;
+      transform: rotate(${Math.random() * 360}deg);
+    `;
+    container.appendChild(confetti);
+  }
+
+  // Clean up confetti after animation
+  setTimeout(() => {
+    container.innerHTML = '';
+  }, 4000);
+}
+
+function escapeHtmlSimple(s) {
+  return String(s).replace(
+    /[&<>"']/g,
+    (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' })[c]
+  );
 }

 export function onMessage(ev) {