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 = ` - -`; +const header = document.querySelector(".main-header"); + +header.innerHTML = loadHeader(); + +function loadHeader() { + const headerTopBar = `
`; + const headerImg = ``; + 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 Cassette Beasts! + `; + break; + case "Pier Anniversary": + return ` + Today is the anniversary of the release of Pier of the Unknown, the first DLC expansion of Cassette Beasts! + `; + 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 => {