From 413ab4a4981beccce444c955525bbce73360f52c Mon Sep 17 00:00:00 2001
From: ducdat0507 <62660527+ducdat0507@users.noreply.github.com>
Date: Mon, 19 Dec 2022 21:16:23 +0700
Subject: [PATCH] Day progress bar gradients

---
 src/data/Day.vue                         | 52 +++++++++---------------
 src/data/common.tsx                      | 16 +++++++-
 src/data/layers/boxes.tsx                |  2 +-
 src/data/layers/cloth.tsx                |  2 +-
 src/data/layers/coal.tsx                 |  2 +-
 src/data/layers/dyes.tsx                 |  2 +-
 src/data/layers/letters.tsx              |  5 ++-
 src/data/layers/metal.tsx                |  2 +-
 src/data/layers/oil.tsx                  |  2 +-
 src/data/layers/paper.tsx                |  2 +-
 src/data/layers/plastic.tsx              |  2 +-
 src/data/layers/styles/day-gradients.css | 42 +++++++++++++++++++
 src/data/layers/styles/management.css    |  8 ++--
 src/data/layers/trees.tsx                |  2 +-
 src/data/layers/wrapping-paper.tsx       |  2 +-
 src/features/bars/Bar.vue                |  2 +-
 16 files changed, 95 insertions(+), 50 deletions(-)
 create mode 100644 src/data/layers/styles/day-gradients.css

diff --git a/src/data/Day.vue b/src/data/Day.vue
index 09ff09a..c34b497 100644
--- a/src/data/Day.vue
+++ b/src/data/Day.vue
@@ -92,28 +92,23 @@ function tryUnlock() {
     background-color: var(--raised-background);
     aspect-ratio: 1;
     margin: 5%;
-    box-shadow: rgb(0 0 0 / 13%) 0px 3px 0px inset, rgb(0 0 0 / 13%) 3px 0px 0px inset,
-        rgb(0 0 0 / 13%) 0px 0px 3px inset, rgb(0 0 0 / 13%) 0px 0px 0px 3px inset;
+}
+
+.mastered.day {
+    box-shadow: rgb(0 0 0 / 25%) 0px 0px 0px 3px inset;
 }
 
 .mastered.day.wallpaper {
     background: linear-gradient(
         225deg,
-        rgb(255, 76, 76) 10.8%,
-        rgb(255, 255, 255) 11.1%,
-        rgb(255, 255, 255) 21.9%,
-        rgb(65, 255, 95) 22.2%,
-        rgb(65, 255, 95) 33%,
-        rgb(255, 255, 255) 33.3%,
-        rgb(255, 255, 255) 44.1%,
-        rgb(255, 76, 76) 44.4%,
-        rgb(255, 76, 76) 55.2%,
-        rgb(255, 255, 255) 55.5%,
-        rgb(255, 255, 255) 66.3%,
-        rgb(65, 255, 95) 66.6%,
-        rgb(65, 255, 95) 77.4%,
-        rgb(255, 255, 255) 77.7%,
-        rgb(255, 255, 255) 88.5%,
+        rgb(255, 76, 76) 11.1%,
+        rgb(255, 255, 255) 11.1% 22.2%,
+        rgb(65, 255, 95) 22.2% 33.3%,
+        rgb(255, 255, 255) 33.3% 44.4%,
+        rgb(255, 76, 76) 44.4% 55.5%,
+        rgb(255, 255, 255) 55.5% 66.6%,
+        rgb(65, 255, 95) 66.6% 77.7%,
+        rgb(255, 255, 255) 77.7% 88.8%,
         rgb(255, 76, 76) 88.8%
     );
 }
@@ -207,21 +202,14 @@ function tryUnlock() {
 .mastered.wallpaper .doors::after {
     background: linear-gradient(
         225deg,
-        rgb(255, 76, 76) 10.8%,
-        rgb(255, 255, 255) 11.1%,
-        rgb(255, 255, 255) 21.9%,
-        rgb(65, 255, 95) 22.2%,
-        rgb(65, 255, 95) 33%,
-        rgb(255, 255, 255) 33.3%,
-        rgb(255, 255, 255) 44.1%,
-        rgb(255, 76, 76) 44.4%,
-        rgb(255, 76, 76) 55.2%,
-        rgb(255, 255, 255) 55.5%,
-        rgb(255, 255, 255) 66.3%,
-        rgb(65, 255, 95) 66.6%,
-        rgb(65, 255, 95) 77.4%,
-        rgb(255, 255, 255) 77.7%,
-        rgb(255, 255, 255) 88.5%,
+        rgb(255, 76, 76) 11.1%,
+        rgb(255, 255, 255) 11.1% 22.2%,
+        rgb(65, 255, 95) 22.2% 33.3%,
+        rgb(255, 255, 255) 33.3% 44.4%,
+        rgb(255, 76, 76) 44.4% 55.5%,
+        rgb(255, 255, 255) 55.5% 66.6%,
+        rgb(65, 255, 95) 66.6% 77.7%,
+        rgb(255, 255, 255) 77.7% 88.8%,
         rgb(255, 76, 76) 88.8%
     );
 }
diff --git a/src/data/common.tsx b/src/data/common.tsx
index 6d0bfb1..7cdad01 100644
--- a/src/data/common.tsx
+++ b/src/data/common.tsx
@@ -37,6 +37,7 @@ import { getFirstFeature, render, renderColJSX, renderJSX, VueFeature } from "ut
 import { Ref, watchEffect } from "vue";
 import { computed, unref } from "vue";
 import "./common.css";
+import "data/layers/styles/day-gradients.css";
 import { main } from "./projEntry";
 
 /** An object that configures a {@link ResetButton} */
@@ -417,7 +418,12 @@ export function setUpDailyProgressTracker(options: {
     masteryGoal?: DecimalSource;
     name: string;
     day: number;
-    color: string;
+    background:
+        | string
+        | {
+              gradient: string;
+              duration: string;
+          };
     textColor?: string;
     modal?: {
         show: Ref<boolean>;
@@ -442,7 +448,13 @@ export function setUpDailyProgressTracker(options: {
         direction: Direction.Right,
         width: 600,
         height: 25,
-        fillStyle: { backgroundColor: options.color },
+        /* eslint-disable prettier/prettier */
+        fillStyle: typeof options.background == "string" ? {
+            backgroundColor: options.background,
+        } : {
+            animation: options.background.duration + " " + options.background.gradient + " linear infinite",
+        },
+        /* eslint-enable prettier/prettier */
         textStyle: options.textColor ? { color: options.textColor } : undefined,
         progress: progressFunc,
         display: jsx(() =>
diff --git a/src/data/layers/boxes.tsx b/src/data/layers/boxes.tsx
index 4479f97..5ca6a95 100644
--- a/src/data/layers/boxes.tsx
+++ b/src/data/layers/boxes.tsx
@@ -630,7 +630,7 @@ const layer = createLayer(id, function (this: BaseLayer) {
         masteryGoal: 5e5,
         name,
         day,
-        color,
+        background: color,
         modal: {
             display: modifiersModal,
             show: showModifiersModal
diff --git a/src/data/layers/cloth.tsx b/src/data/layers/cloth.tsx
index 61a78d7..723a46b 100644
--- a/src/data/layers/cloth.tsx
+++ b/src/data/layers/cloth.tsx
@@ -584,7 +584,7 @@ const layer = createLayer(id, function (this: BaseLayer) {
         goal: 1e3,
         name,
         day,
-        color,
+        background: color,
         textColor: "var(--feature-foreground)",
         modal: {
             show: showModifiersModal,
diff --git a/src/data/layers/coal.tsx b/src/data/layers/coal.tsx
index 1a32089..60356d1 100644
--- a/src/data/layers/coal.tsx
+++ b/src/data/layers/coal.tsx
@@ -986,7 +986,7 @@ const layer = createLayer(id, function (this: BaseLayer) {
         goal: 1e7,
         name,
         day,
-        color: colorCoal,
+        background: colorCoal,
         modal: {
             show: showModifiersModal,
             display: modifiersModal
diff --git a/src/data/layers/dyes.tsx b/src/data/layers/dyes.tsx
index 329e97d..0e5e8f5 100644
--- a/src/data/layers/dyes.tsx
+++ b/src/data/layers/dyes.tsx
@@ -823,7 +823,7 @@ const layer = createLayer(id, function (this: BaseLayer) {
         goal: 6e4,
         name,
         day,
-        color,
+        background: color,
         textColor: "var(--feature-foreground)",
         modal: {
             show: showModifiersModal,
diff --git a/src/data/layers/letters.tsx b/src/data/layers/letters.tsx
index 6ed2210..a5f5ff2 100644
--- a/src/data/layers/letters.tsx
+++ b/src/data/layers/letters.tsx
@@ -264,7 +264,10 @@ const layer = createLayer(id, function (this: BaseLayer) {
         goal: 1e6,
         name,
         day,
-        color,
+        background: {
+            gradient: "letters-bar",
+            duration: "15s"
+        },
         textColor: "var(--feature-foreground)",
         modal: {
             show: showModifiersModal,
diff --git a/src/data/layers/metal.tsx b/src/data/layers/metal.tsx
index 3230061..2f9a842 100644
--- a/src/data/layers/metal.tsx
+++ b/src/data/layers/metal.tsx
@@ -659,7 +659,7 @@ const layer = createLayer(id, function (this: BaseLayer) {
         goal: 25000,
         name,
         day,
-        color,
+        background: color,
         modal: {
             show: showModifiersModal,
             display: modifiersModal
diff --git a/src/data/layers/oil.tsx b/src/data/layers/oil.tsx
index eea2398..c3c44d5 100644
--- a/src/data/layers/oil.tsx
+++ b/src/data/layers/oil.tsx
@@ -1080,7 +1080,7 @@ const layer = createLayer(id, function (this: BaseLayer) {
         goal: 250000,
         name,
         day,
-        color,
+        background: color,
         modal: {
             show: showModifiersModal,
             display: modifiersModal
diff --git a/src/data/layers/paper.tsx b/src/data/layers/paper.tsx
index 170bff6..70946b8 100644
--- a/src/data/layers/paper.tsx
+++ b/src/data/layers/paper.tsx
@@ -474,7 +474,7 @@ const layer = createLayer(id, function (this: BaseLayer) {
         masteryGoal: 5e7,
         name,
         day,
-        color,
+        background: color,
         textColor: "var(--feature-foreground)",
         modal: {
             show: showModifiersModal,
diff --git a/src/data/layers/plastic.tsx b/src/data/layers/plastic.tsx
index 397deab..b7ae224 100644
--- a/src/data/layers/plastic.tsx
+++ b/src/data/layers/plastic.tsx
@@ -304,7 +304,7 @@ const layer = createLayer(id, function (this: BaseLayer) {
         goal: 2.5e5,
         name,
         day,
-        color,
+        background: color,
         textColor: "var(--feature-foreground)",
         modal: {
             show: showModifiersModal,
diff --git a/src/data/layers/styles/day-gradients.css b/src/data/layers/styles/day-gradients.css
new file mode 100644
index 0000000..d486e9e
--- /dev/null
+++ b/src/data/layers/styles/day-gradients.css
@@ -0,0 +1,42 @@
+@keyframes letters-bar {
+    from {
+        background: 0 0 / auto 70% no-repeat linear-gradient(white, white), 0 0 / 113px 113px repeat
+            repeating-linear-gradient(-45deg,
+                red 0 20px, white 20px 40px, 
+                blue 40px 60px, white 60px 80px
+            );
+    }
+    to {
+        background: 0 0 / auto 70% no-repeat linear-gradient(white, white), 113px 0px / 113px 113px repeat
+            repeating-linear-gradient(-45deg, 
+                red 0 20px, white 20px 40px, 
+                blue 40px 60px, white 60px 80px
+            );
+    }
+}
+@keyframes wrapping-paper-bar {
+    from {
+        background: 0 0 / 113px 113px repeat repeating-linear-gradient(-45deg,
+                rgb(255, 76, 76) 0 10px,
+                rgb(255, 255, 255) 10px 20px,
+                rgb(65, 255, 95) 20px 30px,
+                rgb(255, 255, 255) 30px 40px,
+                rgb(255, 76, 76) 40px 50px,
+                rgb(255, 255, 255) 50px 60px,
+                rgb(65, 255, 95) 60px 70px,
+                rgb(255, 255, 255) 70px 80px
+            );
+    }
+    to {
+        background: 113px 0 / 113px 113px repeat repeating-linear-gradient(-45deg,
+                rgb(255, 76, 76) 0 10px,
+                rgb(255, 255, 255) 10px 20px,
+                rgb(65, 255, 95) 20px 30px,
+                rgb(255, 255, 255) 30px 40px,
+                rgb(255, 76, 76) 40px 50px,
+                rgb(255, 255, 255) 50px 60px,
+                rgb(65, 255, 95) 60px 70px,
+                rgb(255, 255, 255) 70px 80px
+            );
+    }
+}
\ No newline at end of file
diff --git a/src/data/layers/styles/management.css b/src/data/layers/styles/management.css
index 6ec7422..49f590d 100644
--- a/src/data/layers/styles/management.css
+++ b/src/data/layers/styles/management.css
@@ -1,21 +1,21 @@
 @keyframes focused-focus-bar {
     from {
         background: 0 0 / 28px 28px repeat
-            repeating-linear-gradient(-45deg, red, red 10px, green 10px, green 20px);
+            repeating-linear-gradient(-45deg, red 0 10px, green 10px 20px);
     }
     to {
         background: 28px 0px / 28px 28px repeat
-            repeating-linear-gradient(-45deg, red, red 10px, green 10px, green 20px);
+            repeating-linear-gradient(-45deg, red 0 10px, green 10px 20px);
     }
 }
 
 @keyframes focused-xp-bar {
     from {
         background: 0 0 / 28px 28px repeat
-            repeating-linear-gradient(-45deg, yellow, yellow 10px, lime 10px, lime 20px);
+            repeating-linear-gradient(-45deg, yellow 0 10px, lime 10px 20px);
     }
     to {
         background: 28px 0px / 28px 28px repeat
-            repeating-linear-gradient(-45deg, yellow, yellow 10px, lime 10px, lime 20px);
+            repeating-linear-gradient(-45deg, yellow 0 10px, lime 10px 20px);
     }
 }
diff --git a/src/data/layers/trees.tsx b/src/data/layers/trees.tsx
index 7766d08..d142055 100644
--- a/src/data/layers/trees.tsx
+++ b/src/data/layers/trees.tsx
@@ -819,7 +819,7 @@ const layer = createLayer(id, function (this: BaseLayer) {
         goal: 1e4,
         name,
         day,
-        color: colorDark,
+        background: colorDark,
         modal: {
             show: showModifiersModal,
             display: modifiersModal
diff --git a/src/data/layers/wrapping-paper.tsx b/src/data/layers/wrapping-paper.tsx
index 0e3164c..812f804 100644
--- a/src/data/layers/wrapping-paper.tsx
+++ b/src/data/layers/wrapping-paper.tsx
@@ -366,7 +366,7 @@ const layer = createLayer(id, () => {
         direction: Direction.Right,
         width: 600,
         height: 25,
-        fillStyle: `backgroundColor: ${color}`,
+        fillStyle: `animation: 15s wrapping-paper-bar linear infinite`,
         textStyle: `color: var(--feature-foreground)`,
         progress: () => (main.day.value === day ? Decimal.div(masteredDays.value, 6) : 1),
         display: jsx(() =>
diff --git a/src/features/bars/Bar.vue b/src/features/bars/Bar.vue
index fc0530d..beae69b 100644
--- a/src/features/bars/Bar.vue
+++ b/src/features/bars/Bar.vue
@@ -28,7 +28,7 @@
         <div
             class="overlayTextContainer border"
             :style="[
-                { width: unref(width) + 'px', height: (unref(height) - 1) + 'px' },
+                { width: unref(width) - 1 + 'px', height: unref(height) - 1 + 'px' },
                 unref(borderStyle) ?? {}
             ]"
         >