From f728adc4bc43857cb8a1c4e2875d736567dce5eb Mon Sep 17 00:00:00 2001
From: Helen Chong <119173961+helenclx@users.noreply.github.com>
Date: Thu, 9 Nov 2023 19:56:24 +0800
Subject: [PATCH] Add special day elements to CB shrine

---
 .../css/style-cassettebeasts.css              |  5 +-
 shrines/cassettebeasts/js/cb-components.js    | 56 +++++++++++++++++--
 2 files changed, 53 insertions(+), 8 deletions(-)

diff --git a/shrines/cassettebeasts/css/style-cassettebeasts.css b/shrines/cassettebeasts/css/style-cassettebeasts.css
index 24b6ba7a..b9be816b 100644
--- a/shrines/cassettebeasts/css/style-cassettebeasts.css
+++ b/shrines/cassettebeasts/css/style-cassettebeasts.css
@@ -30,13 +30,10 @@
     --clr-main-footer-bg: #9b59b6;
 }
 
-.main-header {
-    max-height: 20rem;
-}
-
 .main-header img {
     object-fit: cover;
     object-position: top;
+    max-height: 20rem;
 }
 
 @media only screen and (min-width: 60rem) {
diff --git a/shrines/cassettebeasts/js/cb-components.js b/shrines/cassettebeasts/js/cb-components.js
index 7440f15c..965fbb80 100644
--- a/shrines/cassettebeasts/js/cb-components.js
+++ b/shrines/cassettebeasts/js/cb-components.js
@@ -1,7 +1,56 @@
 /* ------ CASSETTE BEASTS SHRINE HEADER COMPONENT ------ */
-document.querySelector(".main-header").innerHTML = `
-    <img src="/shrines/cassettebeasts/img/cassettebeasts-header.png" 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/cassettebeasts/img/cassettebeasts-header.png" 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 == 4 && day == 26)
+		return "CB Anniversary";
+	else if (month == 9 && day == 12)
+		return "Pier Anniversary";
+	else
+		return "No event";
+}
+
+function getBlurbHtml(day) {
+	switch (day) {
+        case "CB Anniversary":
+            return `
+                Today is the anniversary of the release of <cite>Cassette Beasts</cite>!
+            `;
+            break;
+        case "Pier Anniversary":
+            return `
+                Today is the anniversary of the release of <cite>Pier of the Unknown</cite>, the first DLC expansion of <cite>Cassette Beasts</cite>!
+            `;
+            break;
+        default:
+            return ``;
+	}
+}
 
 
 /* ------ CASSETTE BEASTS SHRINE NAVIGATION BAR COMPONENT ------ */
@@ -17,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 => {