From 26a5668cd3e133dc455485585f9ebf78dc1bb745 Mon Sep 17 00:00:00 2001
From: or-forshmit8 <or.forshmit@mail.huji.ac.il>
Date: Wed, 25 Mar 2026 13:03:11 +0200
Subject: [PATCH] Add episode summary display and update service worker cache
 version

---
 index.html        |  1 +
 script.js         | 24 +++++++++++++++++++-----
 service-worker.js |  2 +-
 style.css         |  7 +++++++
 4 files changed, 28 insertions(+), 6 deletions(-)

diff --git a/index.html b/index.html
index 32200be..d05e387 100644
--- a/index.html
+++ b/index.html
@@ -81,6 +81,7 @@ <h1 class="title">Seinfeld Random Episode</h1>
         </div>
 
         <h2 id="title" class="episode-title"></h2>
+        <p id="summary" class="episode-summary">Loading summary...</p>
 
         <p class="swipe-hint">Swipe left or right on the image to get the next episode</p>
 
diff --git a/script.js b/script.js
index 2b1c006..f23889e 100644
--- a/script.js
+++ b/script.js
@@ -225,16 +225,26 @@ async function getSeinfeldShowId() {
   return cachedShowId;
 }
 
-async function getEpisodeImage(season, episodeNumber) {
+function stripHtml(html) {
+  if (!html) return "";
+  const tmp = document.createElement("div");
+  tmp.innerHTML = html;
+  return (tmp.textContent || tmp.innerText || "").trim();
+}
+
+async function getEpisodeDetails(season, episodeNumber) {
   const showId = await getSeinfeldShowId();
   const res = await fetch(TVMAZE_EPISODE_BY_NUMBER(showId, season, episodeNumber));
-
   if (!res.ok) throw new Error("Failed to fetch episode data.");
 
   const data = await res.json();
-  return data?.image?.original || data?.image?.medium || null;
+  return {
+    imageUrl: data?.image?.original || data?.image?.medium || null,
+    summary: stripHtml(data?.summary) || "No summary available."
+  };
 }
 
+
 function showImage(url) {
   episodeImage.classList.remove("loaded");
   episodeImage.src = "";
@@ -261,6 +271,7 @@ async function renderSample() {
   seasonEl.textContent = season;
   episodeEl.textContent = episodeNumber;
   titleEl.textContent = title;
+  summaryEl.textContent = "Loading summary...";
   netflixLink.href = NETFLIX_SEINFELD_URL;
 
   result.classList.remove("hidden");
@@ -273,11 +284,12 @@ async function renderSample() {
   episodeImage.classList.add("hidden");
 
   try {
-    const imageUrl = await getEpisodeImage(season, episodeNumber);
-    imageFallback.textContent = "No episode image found";
+    const { imageUrl, summary } = await getEpisodeDetails(season, episodeNumber);
+    summaryEl.textContent = summary;
     showImage(imageUrl);
   } catch {
     imageFallback.textContent = "Could not load episode image";
+    summaryEl.textContent = "Could not load episode summary.";
     episodeImage.classList.add("hidden");
     imageFallback.classList.remove("hidden");
   }
@@ -352,4 +364,6 @@ if ("serviceWorker" in navigator) {
   });
 }
 
+const summaryEl = document.getElementById("summary");
+
 initTheme();
diff --git a/service-worker.js b/service-worker.js
index 6760a9d..df65348 100644
--- a/service-worker.js
+++ b/service-worker.js
@@ -1,4 +1,4 @@
-const CACHE_NAME = "seinfeld-randomizer-v1";
+const CACHE_NAME = "seinfeld-randomizer-v2";
 const URLS_TO_CACHE = [
   "./",
   "./index.html",
diff --git a/style.css b/style.css
index 4a875e1..5245035 100644
--- a/style.css
+++ b/style.css
@@ -328,4 +328,11 @@ body.light-mode .badge {
     width: 40px;
     height: 40px;
   }
+}
+
+.episode-summary {
+  color: var(--muted);
+  font-size: 0.98rem;
+  line-height: 1.5;
+  margin-bottom: 16px;
 }
\ No newline at end of file