From 27744272ecbf999f1ab1be19a09aeb06f9eb4d5c Mon Sep 17 00:00:00 2001
From: Pinapelz <yukais@pinapelz.com>
Date: Sat, 19 Apr 2025 14:19:16 -0700
Subject: the moekyun special update

---
 site/src/components/TitleBar.tsx | 124 +++++++++++++++++++++++++++------------
 1 file changed, 85 insertions(+), 39 deletions(-)

(limited to 'site/src/components/TitleBar.tsx')

diff --git a/site/src/components/TitleBar.tsx b/site/src/components/TitleBar.tsx
index 33963b7..b20beae 100644
--- a/site/src/components/TitleBar.tsx
+++ b/site/src/components/TitleBar.tsx
@@ -1,14 +1,57 @@
-import { Link } from "react-router-dom";
 import { useState, useEffect, useRef } from "react";
+import {
+  Link,
+  useSearchParams,
+  useNavigate,
+  useLocation,
+} from "react-router-dom";
 
 interface GameCategory {
   name: string;
   games: { id: string; title: string }[];
 }
-
 const TitleBar: React.FC = () => {
   const [dropdownOpen, setDropdownOpen] = useState(false);
   const dropdownRef = useRef<HTMLDivElement>(null);
+  const [searchParams] = useSearchParams();
+  const navigate = useNavigate();
+  const location = useLocation();
+  const isMoe = searchParams.has("moe");
+
+  const toggleTheme = () => {
+    const params = new URLSearchParams(searchParams);
+
+    if (isMoe) {
+      params.delete("moe");
+      localStorage.setItem("theme", "dark");
+    } else {
+      params.set("moe", "");
+      localStorage.setItem("theme", "light");
+    }
+
+    navigate(`${location.pathname}?${params.toString()}`);
+  };
+
+
+  useEffect(() => {
+    const savedTheme = localStorage.getItem("theme");
+
+    const hasMoe = searchParams.has("moe");
+
+    if (!hasMoe && savedTheme === "light") {
+      const params = new URLSearchParams(searchParams);
+      params.set("moe", "");
+      navigate(`${location.pathname}?${params.toString()}`, { replace: true });
+    }
+
+    if (hasMoe && savedTheme === "dark") {
+      const params = new URLSearchParams(searchParams);
+      params.delete("moe");
+      navigate(`${location.pathname}?${params.toString()}`, { replace: true });
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [location.pathname, navigate]);
+
 
   const gameCategories: GameCategory[] = [
     {
@@ -16,11 +59,11 @@ const TitleBar: React.FC = () => {
       games: [
         { id: "iidx", title: "beatmania IIDX" },
         { id: "sdvx", title: "SOUND VOLTEX" },
-        { id: "ddr", title: "DDR"},
-        { id: "jubeat", title: "jubeat"},
-        { id: "popn_music", title: "pop'n music"},
-        { id: "nostalgia", title: "NOSTALGIA"},
-        { id: "gitadora", title: "GITADORA"}
+        { id: "ddr", title: "DDR" },
+        { id: "jubeat", title: "jubeat" },
+        { id: "popn_music", title: "pop'n music" },
+        { id: "nostalgia", title: "NOSTALGIA" },
+        { id: "gitadora", title: "GITADORA" },
       ],
     },
     {
@@ -35,15 +78,11 @@ const TitleBar: React.FC = () => {
     },
     {
       name: "TAITO",
-      games: [
-        { id: "music_diver", title: "MUSIC DIVER" },
-      ],
+      games: [{ id: "music_diver", title: "MUSIC DIVER" }],
     },
     {
       name: "BANDAI NAMCO",
-      games: [
-        { id: "taiko", title: "TAIKO" },
-      ],
+      games: [{ id: "taiko", title: "TAIKO" }],
     },
   ];
 
@@ -56,46 +95,53 @@ const TitleBar: React.FC = () => {
         setDropdownOpen(false);
       }
     };
-
-    if (dropdownOpen) {
+    if (dropdownOpen)
       document.addEventListener("mousedown", handleClickOutside);
-    }
-
-    return () => {
-      document.removeEventListener("mousedown", handleClickOutside);
-    };
+    return () => document.removeEventListener("mousedown", handleClickOutside);
   }, [dropdownOpen]);
 
   return (
-    <div className="bg-gray-900 border-b border-gray-800 py-4 px-6">
+    <div
+      className={`${isMoe ? "bg-pink-200 border-pink-300" : "bg-gray-900 border-gray-800"} border-b py-4 px-6 font-[Zen_Maru_Gothic]`}
+    >
       <div className="max-w-[800px] mx-auto">
         <div className="flex flex-col sm:flex-row justify-between items-center">
           <div className="flex items-center space-x-3 mb-3 sm:mb-0">
+            <button
+              onClick={toggleTheme}
+              className={`text-sm ${isMoe ? "bg-pink-100 text-pink-800 hover:bg-pink-200 hover:text-pink-600" : "bg-gray-800 text-gray-300 hover:bg-gray-700 hover:text-white"} font-medium px-3 py-1 rounded`}
+            >
+              {isMoe ? "🌙 Dark" : "🌸 Light"}
+            </button>
             <img
               src="/rasis.webp"
               alt="573 Updates Logo"
-              className="w-8 h-8 object-contain"
+              className="w-8 h-8 object-contain rounded-full"
             />
-            <div className="w-8 h-8 bg-red-700 rounded-md flex items-center justify-center">
+            <div
+              className={`${isMoe ? "bg-pink-500" : "bg-red-700"} w-8 h-8 rounded-md flex items-center justify-center`}
+            >
               <span className="text-white font-bold">573</span>
             </div>
-
-            {/* Site Title */}
-            <Link to="/" className="text-xl font-bold text-white">
+            <Link
+              to={`/${isMoe ? "?moe" : ""}`}
+              className={`${isMoe ? "text-pink-800" : "text-white"} text-xl font-bold`}
+            >
               UPDATES
             </Link>
           </div>
 
-          {/* Navigation Section */}
           <div className="flex items-center space-x-4">
-            <Link to="/" className="text-gray-300 hover:text-white font-medium">
+            <Link
+              to={`/${isMoe ? "?moe" : ""}`}
+              className={`${isMoe ? "text-pink-800 hover:text-pink-600" : "text-gray-300 hover:text-white"} font-medium`}
+            >
               All Games
             </Link>
 
-            {/* Dropdown Menu */}
             <div className="relative" ref={dropdownRef}>
               <button
-                className="text-gray-300 hover:text-white font-medium flex items-center"
+                className={`${isMoe ? "text-pink-800 hover:text-pink-600" : "text-gray-300 hover:text-white"} font-medium flex items-center`}
                 onClick={() => setDropdownOpen(!dropdownOpen)}
               >
                 Game Select
@@ -115,25 +161,25 @@ const TitleBar: React.FC = () => {
               </button>
 
               {dropdownOpen && (
-                <div className="absolute mt-2 w-64 sm:w-80 bg-gray-800 border border-gray-700 rounded-md shadow-lg z-10 right-0">
+                <div
+                  className={`absolute mt-2 w-64 sm:w-80 ${isMoe ? "bg-pink-100 border-pink-300" : "bg-gray-800 border-gray-700"} border rounded-md shadow-lg z-10 right-0`}
+                >
                   <div className="py-1 max-h-[70vh] overflow-y-auto scroll-py-2">
                     {gameCategories.map((category, index) => (
                       <div key={index} className="px-2 py-1">
-                        <div className="text-sm font-semibold text-gray-400 mb-1 border-b border-gray-700 pb-1">
+                        <div
+                          className={`${isMoe ? "text-pink-600 border-pink-300" : "text-gray-400 border-gray-700"} text-sm font-semibold mb-1 border-b pb-1`}
+                        >
                           {category.name}
                         </div>
                         <div
-                          className={`${
-                            category.games.length > 3
-                              ? "grid grid-cols-1 sm:grid-cols-2 gap-x-2 gap-y-0.5"
-                              : "space-y-0.5"
-                          }`}
+                          className={`${category.games.length > 3 ? "grid grid-cols-1 sm:grid-cols-2 gap-x-2 gap-y-0.5" : "space-y-0.5"}`}
                         >
                           {category.games.map((game) => (
                             <Link
                               key={game.id}
-                              to={`/game/${game.id}`}
-                              className="block text-left text-gray-300 hover:bg-gray-700 hover:text-white px-2 py-1 text-sm rounded whitespace-nowrap overflow-hidden text-ellipsis"
+                              to={`/game/${game.id}?${searchParams.toString()}`}
+                              className={`${isMoe ? "text-pink-800 hover:bg-pink-200" : "text-gray-300 hover:bg-gray-700 hover:text-white"} block text-left px-2 py-1 text-sm rounded whitespace-nowrap overflow-hidden text-ellipsis`}
                               onClick={() => setDropdownOpen(false)}
                             >
                               {game.title}
-- 
cgit v1.2.3