From 777adc38424af095c139cdbda667096c73a5b373 Mon Sep 17 00:00:00 2001
From: KingRainbow44 <kobedo11@gmail.com>
Date: Thu, 30 Nov 2023 23:40:41 -0500
Subject: [PATCH] (feat:background) Improve the coloring of the top bar

---
 src/backend/stores/mihoyo.ts      | 20 +++++++++++++++++---
 src/ui/App.tsx                    |  4 ++--
 src/ui/components/TopBar.tsx      | 10 ++++++++--
 src/ui/css/App.scss               |  2 +-
 src/ui/css/components/TopBar.scss |  2 +-
 5 files changed, 29 insertions(+), 9 deletions(-)

diff --git a/src/backend/stores/mihoyo.ts b/src/backend/stores/mihoyo.ts
index 27fbd32..0f87a2e 100644
--- a/src/backend/stores/mihoyo.ts
+++ b/src/backend/stores/mihoyo.ts
@@ -10,6 +10,8 @@ import { fetch } from "@tauri-apps/api/http";
 import { exists } from "@tauri-apps/api/fs";
 import { convertFileSrc } from "@tauri-apps/api/tauri";
 
+import { prominent } from "color.js";
+
 import { LauncherResponse, StoreWrite, SupportedGames } from "@backend/types.ts";
 import { AppDataPath, LauncherUrls } from "@app/constants.ts";
 
@@ -85,24 +87,36 @@ export async function getBackgroundFile(hash: string): Promise<string> {
     return convertFileSrc(`${AppDataPath}/bg/${hash}.png`);
 }
 
+type BackgroundData = {
+    url: string;
+    colors: string[];
+}
+
 /**
  * React hook which returns the URL of the locally cached background image.
  */
-export function useBackground() {
+export function useBackground(): BackgroundData {
     const { selectedGame } = useSettings();
     const { backgroundHash, fetchLatestBackground } =
         selectedGame == SupportedGames.GenshinImpact ? useGenshinStore() : useStarRailStore();
     const [background, setBackground] = useState<string | null>(null);
+    const [colorPalette, setColorPalette] = useState<string[] | null>(null);
 
     useEffect(() => {
         (async () => {
             if (backgroundHash != "") {
-                setBackground(await getBackgroundFile(backgroundHash));
+                const filePath = await getBackgroundFile(backgroundHash);
+                setBackground(filePath);
+                setColorPalette(await prominent(filePath,
+                    { amount: 5, format: "hex" }) as string[]);
             } else {
                 fetchLatestBackground();
             }
         })();
     }, [backgroundHash, fetchLatestBackground]);
 
-    return background;
+    return {
+        url: background ?? "",
+        colors: colorPalette ?? []
+    };
 }
diff --git a/src/ui/App.tsx b/src/ui/App.tsx
index d42c41f..cf255a3 100644
--- a/src/ui/App.tsx
+++ b/src/ui/App.tsx
@@ -16,10 +16,10 @@ function App() {
     return (
         <div class={"App"}
              style={{
-                 backgroundImage: `url(${background})`
+                 backgroundImage: `url(${background.url})`
              }}
         >
-            <TopBar />
+            <TopBar color={background.colors[2]} />
 
             <Router>
                 <Route path={PageRoutes.HOME} component={Launcher} />
diff --git a/src/ui/components/TopBar.tsx b/src/ui/components/TopBar.tsx
index d4120a6..173088a 100644
--- a/src/ui/components/TopBar.tsx
+++ b/src/ui/components/TopBar.tsx
@@ -1,8 +1,14 @@
 import "@css/components/TopBar.scss";
 
-function TopBar() {
+interface IProps {
+    color: string | null;
+}
+
+function TopBar(props: IProps) {
     return (
-        <div class={"TopBar"} data-tauri-drag-region>
+        <div class={"TopBar"} data-tauri-drag-region
+             style={{ backgroundColor: `${props.color}55` }}
+        >
             <div class={"flex flex-row gap-1 text-white"}>
                 <p>Cultivation</p>
                 <p>2.0.0</p>
diff --git a/src/ui/css/App.scss b/src/ui/css/App.scss
index bbc0dd9..be805ad 100644
--- a/src/ui/css/App.scss
+++ b/src/ui/css/App.scss
@@ -13,7 +13,7 @@ body {
 }
 
 .App {
-    @apply w-full h-screen;
+    @apply w-full h-screen bg-no-repeat bg-contain;
 }
 
 p {
diff --git a/src/ui/css/components/TopBar.scss b/src/ui/css/components/TopBar.scss
index c588014..9be2513 100644
--- a/src/ui/css/components/TopBar.scss
+++ b/src/ui/css/components/TopBar.scss
@@ -1,6 +1,6 @@
 .TopBar {
     @apply flex flex-row justify-between items-center w-full;
-    @apply bg-gray-900 pl-4 pr-4;
+    @apply pl-4 pr-4 backdrop-blur-3xl;
 
     height: 40px;
 }