From a2a4da004f18958a661023785c87158b4c0ed4be Mon Sep 17 00:00:00 2001
From: Helen Chong <119173961+helenclx@users.noreply.github.com>
Date: Thu, 9 Nov 2023 20:03:36 +0800
Subject: [PATCH] Add special day elements to KotOR shrine

---
 .../starwarskotor/css/style-starwarskotor.css |  5 +-
 .../starwarskotor/js/swkotor-components.js    | 57 +++++++++++++++++--
 2 files changed, 54 insertions(+), 8 deletions(-)

diff --git a/shrines/starwarskotor/css/style-starwarskotor.css b/shrines/starwarskotor/css/style-starwarskotor.css
index 0f50d2b3..7b1fd891 100644
--- a/shrines/starwarskotor/css/style-starwarskotor.css
+++ b/shrines/starwarskotor/css/style-starwarskotor.css
@@ -30,13 +30,10 @@
     --clr-main-footer-bg: #171717;
 }
 
-.main-header {
-    max-height: 20rem;
-}
-
 .main-header img {
     object-fit: cover;
     object-position: center;
+    max-height: 20rem;
 }
 
 .juhani-history {
diff --git a/shrines/starwarskotor/js/swkotor-components.js b/shrines/starwarskotor/js/swkotor-components.js
index 52aeb3ff..a3eed80f 100644
--- a/shrines/starwarskotor/js/swkotor-components.js
+++ b/shrines/starwarskotor/js/swkotor-components.js
@@ -1,7 +1,57 @@
 /* ------ STAR WARS KOTOR SHRINE HEADER COMPONENT ------ */
-document.querySelector(".main-header").innerHTML = `
-    <img src="/shrines/starwarskotor/img/swkotor-header.jpg" alt="">
-`;
+const header = document.querySelector(".main-header");
+
+header.innerHTML = loadHeader();
+
+function loadHeader() {
+    const headerTopBar = `<div class="main-header__top-bar"></div>`;
+    const headerImg = `<img src="/shrines/starwarskotor/img/swkotor-header.jpg
+    " alt="">`;
+    const todayEvent = getTodayEvent();
+
+    if (todayEvent == "No event") {
+        return headerImg;
+    } else {
+        return headerTopBar + headerImg;
+    };
+}
+
+const todayEvent = getTodayEvent();
+const headerTopBarEl = document.querySelector(".main-header__top-bar");
+
+if (todayEvent != "No event") {
+	headerTopBarEl.innerHTML = getBlurbHtml(todayEvent);
+};
+
+function getTodayEvent() {
+	const date = new Date();
+	const month = date.getMonth() + 1;
+	const day = date.getDate();
+		
+	if (month == 7 && day == 16)
+		return "KotOR 1 Anniversary";
+	else if (month == 12 && day == 6)
+		return "KotOR 2 Anniversary";
+	else
+		return "No event";
+}
+
+function getBlurbHtml(day) {
+	switch (day) {
+        case "KotOR 1 Anniversary":
+            return `
+                Today is the anniversary of the release of <cite>Star Wars: Knihgts of the Old Republic</cite>
+            `;
+            break;
+        case "KotOR 2 Anniversary":
+            return `
+                Today is the anniversary of the release of <cite>Star Wars: Knights of the Old Republic II — The Sith Lords</cite>
+            `;
+            break;
+        default:
+            return ``;
+	}
+}
 
 /* Navigation component content */
 document.querySelector(".navbar").innerHTML = `
@@ -16,7 +66,6 @@ document.querySelector(".navbar").innerHTML = `
 `;
 
 // Make the navigation bar sticky
-const header = document.querySelector(".main-header");
 const navbar = document.querySelector(".navbar");
 
 window.addEventListener("scroll", e => {