From 610f0c7304b6a272940ed8c930edc970de39d1b8 Mon Sep 17 00:00:00 2001
From: BlossomiShymae <87099578+BlossomiShymae@users.noreply.github.com>
Date: Wed, 12 Jun 2024 19:06:25 -0500
Subject: [PATCH] Use dynamic background based on day

---
 app.vue             |  1 +
 layouts/default.vue | 21 +++++++++++++++++++++
 nuxt.config.ts      |  2 +-
 public/css/app.css  |  1 +
 4 files changed, 24 insertions(+), 1 deletion(-)

diff --git a/app.vue b/app.vue
index 8c7394d..a08bad0 100644
--- a/app.vue
+++ b/app.vue
@@ -1,4 +1,5 @@
 <template>
+  <NuxtLoadingIndicator />
   <NuxtLayout>
     <NuxtPage keepalive />
   </NuxtLayout>
diff --git a/layouts/default.vue b/layouts/default.vue
index 4202c8a..d6e1f83 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -88,6 +88,27 @@
 <script>
 import MaterialIcon from '~/components/MaterialIcon.vue';
 import TheTitle from '~/components/TheTitle.vue';
+
+// Hardcode splash art links for performance reasons. This is the layout after all.
+const splashes = [
+  "https://raw.communitydragon.org/14.9/plugins/rcp-be-lol-game-data/global/default/v1/champion-splashes/498/498000.jpg", // Xayah - Sunday
+  "https://raw.communitydragon.org/14.9/plugins/rcp-be-lol-game-data/global/default/v1/champion-splashes/498/498001.jpg", // Cosmic Dusk - Monday
+  "https://raw.communitydragon.org/14.9/plugins/rcp-be-lol-game-data/global/default/v1/champion-splashes/498/498002.jpg", // Sweetheart - Tuesday
+  "https://raw.communitydragon.org/14.9/plugins/rcp-be-lol-game-data/global/default/v1/champion-splashes/498/498004.jpg", // Star Guardian - Wednesday
+  "https://raw.communitydragon.org/14.9/plugins/rcp-be-lol-game-data/global/default/v1/champion-splashes/498/498028.jpg", // Arcana - Thursday
+  "https://raw.communitydragon.org/14.9/plugins/rcp-be-lol-game-data/global/default/v1/champion-splashes/498/498037.jpg", // Broken Convenant - Friday
+  "https://raw.communitydragon.org/14.9/plugins/rcp-be-lol-game-data/global/default/v1/champion-splashes/498/498038.jpg", // Redeemed Star Guardian - Saturday
+];
+
+const date = new Date();
+const day = date.getDay();
+
+useHead({
+  htmlAttrs: {
+    "data-bs-theme": "dark",
+    "style": `background-image: url('${splashes[day]}')` // Use splash of corresponding day
+  }
+});
 </script>
 
 <style lang="scss">
diff --git a/nuxt.config.ts b/nuxt.config.ts
index c8040e5..7256616 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -15,7 +15,7 @@ export default defineNuxtConfig({
     head: {
       htmlAttrs: {
         "data-bs-theme": "dark",
-        "style": "background-image: url('https://raw.communitydragon.org/14.9/plugins/rcp-be-lol-game-data/global/default/v1/champion-splashes/498/498004.jpg');"
+        "style": "background-image: url('https://raw.communitydragon.org/14.9/plugins/rcp-be-lol-game-data/global/default/v1/champion-splashes/498/498000.jpg');"
       },
       bodyAttrs: {
         class: "h-100"
diff --git a/public/css/app.css b/public/css/app.css
index 7cf5a19..be1436f 100644
--- a/public/css/app.css
+++ b/public/css/app.css
@@ -5,6 +5,7 @@
 html {
   font-size: 14px;
 
+  background-image: none;
   background-repeat: no-repeat;
   background-size: cover;
   background-attachment: fixed;