feat: add support for DDR World

1 files changed, 119 insertions, 102 deletions

diff --git a/site/src/components/TitleBar.tsx b/site/src/components/TitleBar.tsx
index 8d4ca31..2f7e3c1 100644
--- a/site/src/components/TitleBar.tsx
+++ b/site/src/components/TitleBar.tsx
@@ -1,123 +1,140 @@
-import { Link } from 'react-router-dom';
-import { useState, useEffect, useRef } from 'react';
+import { Link } from "react-router-dom";
+import { useState, useEffect, useRef } from "react";
 
 interface GameCategory {
-    name: string;
-    games: { id: string; title: string }[];
+  name: string;
+  games: { id: string; title: string }[];
 }
 
 const TitleBar: React.FC = () => {
-    const [dropdownOpen, setDropdownOpen] = useState(false);
-    const dropdownRef = useRef<HTMLDivElement>(null);
+  const [dropdownOpen, setDropdownOpen] = useState(false);
+  const dropdownRef = useRef<HTMLDivElement>(null);
 
-    const gameCategories: GameCategory[] = [
-        {
-            name: "KONAMI",
-            games: [
-                { id: "iidx", title: "beatmania IIDX" },
-                { id: "sdvx", title: "SOUND VOLTEX" },
-            ]
-        },
-        {
-            name: "SEGA",
-            games: [
-                { id: "chunithm_jp", title: "CHUNITHM (JAPAN)" },
-                { id: "chunithm_intl", title: "CHUNITHM (INTERNATIONAL)" },
-                { id: "maimaidx_jp", title: "maimai DX (JAPAN)" },
-                { id: "maimaidx_intl", title: "maimai DX (INTERNATIONAL)"},
-                { id: "ongeki_jp", title: "O.N.G.E.K.I"},
-            ]
-        }
-    ];
+  const gameCategories: GameCategory[] = [
+    {
+      name: "KONAMI",
+      games: [
+        { id: "iidx", title: "beatmania IIDX" },
+        { id: "sdvx", title: "SOUND VOLTEX" },
+        { id: "ddr", title: "DanceDanceRevolution"}
+      ],
+    },
+    {
+      name: "SEGA",
+      games: [
+        { id: "chunithm_jp", title: "CHUNITHM (JAPAN)" },
+        { id: "chunithm_intl", title: "CHUNITHM (INTL)" },
+        { id: "maimaidx_jp", title: "maimai DX (JAPAN)" },
+        { id: "maimaidx_intl", title: "maimai DX (INTL)" },
+        { id: "ongeki_jp", title: "O.N.G.E.K.I" },
+      ],
+    },
+  ];
 
-    useEffect(() => {
-        const handleClickOutside = (event: MouseEvent) => {
-            if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
-                setDropdownOpen(false);
-            }
-        };
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (
+        dropdownRef.current &&
+        !dropdownRef.current.contains(event.target as Node)
+      ) {
+        setDropdownOpen(false);
+      }
+    };
 
-        if (dropdownOpen) {
-            document.addEventListener('mousedown', handleClickOutside);
-        }
+    if (dropdownOpen) {
+      document.addEventListener("mousedown", handleClickOutside);
+    }
 
-        return () => {
-            document.removeEventListener('mousedown', handleClickOutside);
-        };
-    }, [dropdownOpen]);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [dropdownOpen]);
 
-    return (
-        <div className="bg-gray-900 border-b border-gray-800 py-4 px-6">
-            <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">
-                      <img
-                          src="/rasis.webp"
-                          alt="573 Updates Logo"
-                          className="w-8 h-8 object-contain"
-                      />
-                        <div className="w-8 h-8 bg-red-700 rounded-md flex items-center justify-center">
-                            <span className="text-white font-bold">573</span>
-                        </div>
+  return (
+    <div className="bg-gray-900 border-b border-gray-800 py-4 px-6">
+      <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">
+            <img
+              src="/rasis.webp"
+              alt="573 Updates Logo"
+              className="w-8 h-8 object-contain"
+            />
+            <div className="w-8 h-8 bg-red-700 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">
-                            UPDATES
-                        </Link>
-                    </div>
+            {/* Site Title */}
+            <Link to="/" className="text-xl font-bold text-white">
+              UPDATES
+            </Link>
+          </div>
 
-                    {/* Navigation Section */}
-                    <div className="flex items-center space-x-4">
-                        <Link
-                            to="/"
-                            className="text-gray-300 hover:text-white font-medium"
-                        >
-                            All Games
-                        </Link>
+          {/* Navigation Section */}
+          <div className="flex items-center space-x-4">
+            <Link to="/" className="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"
-                                onClick={() => setDropdownOpen(!dropdownOpen)}
-                            >
-                                Game Select
-                                <svg className="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
-                                </svg>
-                            </button>
+            {/* Dropdown Menu */}
+            <div className="relative" ref={dropdownRef}>
+              <button
+                className="text-gray-300 hover:text-white font-medium flex items-center"
+                onClick={() => setDropdownOpen(!dropdownOpen)}
+              >
+                Game Select
+                <svg
+                  className="w-4 h-4 ml-1"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M19 9l-7 7-7-7"
+                  />
+                </svg>
+              </button>
 
-                            {dropdownOpen && (
-                                <div className="absolute right-0 mt-2 w-64 bg-gray-800 border border-gray-700 rounded-md shadow-lg z-10">
-                                    <div className="py-1 max-h-[70vh] overflow-y-auto">
-                                        {gameCategories.map((category, index) => (
-                                            <div key={index} className="px-3 py-2">
-                                                <div className="text-sm font-semibold text-gray-400 mb-1 border-b border-gray-700 pb-1">
-                                                    {category.name}
-                                                </div>
-                                                <div className="space-y-1">
-                                                    {category.games.map((game) => (
-                                                        <Link
-                                                            key={game.id}
-                                                            to={`/game/${game.id}`}
-                                                            className="block text-gray-300 hover:bg-gray-700 hover:text-white px-2 py-1 text-sm rounded"
-                                                            onClick={() => setDropdownOpen(false)}
-                                                        >
-                                                            {game.title}
-                                                        </Link>
-                                                    ))}
-                                                </div>
-                                            </div>
-                                        ))}
-                                    </div>
-                                </div>
-                            )}
+              {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="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">
+                          {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"
+                          }`}
+                        >
+                          {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"
+                              onClick={() => setDropdownOpen(false)}
+                            >
+                              {game.title}
+                            </Link>
+                          ))}
                         </div>
-                    </div>
+                      </div>
+                    ))}
+                  </div>
                 </div>
+              )}
             </div>
+          </div>
         </div>
-    );
+      </div>
+    </div>
+  );
 };
 
 export default TitleBar;