diff options
| -rw-r--r-- | site/src/App.tsx | 2 | ||||
| -rw-r--r-- | site/src/pages/Homepage.tsx | 48 | ||||
| -rw-r--r-- | site/src/pages/NotFound.tsx | 57 |
3 files changed, 105 insertions, 2 deletions
diff --git a/site/src/App.tsx b/site/src/App.tsx index 79c64a1..b6823a6 100644 --- a/site/src/App.tsx +++ b/site/src/App.tsx @@ -1,5 +1,6 @@ import Home from './pages/Homepage'; import GameSelector from './pages/GameSelector' +import NotFound from './pages/NotFound'; import { Routes, Route } from "react-router-dom"; function App() { @@ -8,6 +9,7 @@ function App() { <Route path="/" element={<Home />} /> <Route path="/games" element={<GameSelector />} /> <Route path="/game/:gameId" element={<Home />} /> + <Route path="*" element={<NotFound />} /> </Routes> ); } diff --git a/site/src/pages/Homepage.tsx b/site/src/pages/Homepage.tsx index 0d98206..5d202dc 100644 --- a/site/src/pages/Homepage.tsx +++ b/site/src/pages/Homepage.tsx @@ -20,10 +20,12 @@ export default function Home() { null, ); const [loading, setLoading] = useState<boolean>(true); + const [error, setError] = useState<boolean>(false); useEffect(() => { const fetchNews = async () => { setLoading(true); + setError(false); const newsDataFileName = gameId ? `${gameId}_news.json` : "news.json"; try { const response = await fetch( @@ -36,14 +38,15 @@ export default function Home() { setNewsFeedData(data); } catch (e) { console.error(e); + setError(true); } finally { setLoading(false); } }; fetchNews(); - }, [gameId]); // Re-fetch when gameId changes + }, [gameId, newsAPIBase]); // Re-fetch when gameId changes - if (loading || newsFeedData === null) { + if (loading) { return ( <> <TitleBar /> @@ -58,6 +61,47 @@ export default function Home() { ); } + if (error || newsFeedData === null) { + return ( + <> + <TitleBar /> + <div + className={`${isMoe ? "bg-pink-100" : "bg-gray-950"} min-h-screen flex items-center justify-center`} + > + <div className="text-center px-4"> + <div className={`${isMoe ? "text-pink-500" : "text-purple-500"} text-8xl font-bold mb-4`}> + 404 + </div> + <h1 className={`${isMoe ? "text-pink-900" : "text-white"} text-3xl font-bold mb-4`}> + News Not Found + </h1> + <p className={`${isMoe ? "text-pink-700" : "text-gray-400"} text-lg mb-8`}> + {gameId + ? `Unable to fetch news for ${getGameTitle(gameId)}` + : "Unable to fetch news feed" + } + </p> + <div className={`${isMoe ? "bg-pink-200" : "bg-gray-800"} rounded-lg p-6 max-w-md mx-auto`}> + <p className={`${isMoe ? "text-pink-800" : "text-gray-300"} mb-4`}> + The news feed you're looking for might be temporarily unavailable or doesn't exist. + </p> + <a + href="/" + className={`inline-block px-6 py-3 rounded-lg font-semibold transition-colors ${ + isMoe + ? "bg-pink-500 text-white hover:bg-pink-600" + : "bg-purple-600 text-white hover:bg-purple-700" + }`} + > + Return Home + </a> + </div> + </div> + </div> + </> + ); + } + return ( <> <TitleBar /> diff --git a/site/src/pages/NotFound.tsx b/site/src/pages/NotFound.tsx new file mode 100644 index 0000000..62c978c --- /dev/null +++ b/site/src/pages/NotFound.tsx @@ -0,0 +1,57 @@ +import { useSearchParams } from "react-router-dom"; +import TitleBar from "../components/TitleBar"; + +export default function NotFound() { + const [searchParams] = useSearchParams(); + const isMoe = searchParams.has("moe"); + + return ( + <> + <TitleBar /> + <div + className={`${isMoe ? "bg-pink-100 text-pink-900 font-[Zen_Maru_Gothic]" : "bg-gray-950 text-white"} min-h-screen py-6 flex items-center justify-center`} + > + <div className="max-w-[600px] mx-auto px-4 text-center"> + <div + className={`${isMoe ? "bg-pink-200 text-pink-900" : "bg-gray-800 text-white"} rounded-lg p-8 shadow-lg`} + > + <h1 className="text-6xl font-bold mb-4">404</h1> + <h2 className="text-2xl font-semibold mb-4">Page Not Found</h2> + <div className="mb-6"> + <img + src="/xiatian.webp" + className="w-32 mx-auto mb-4 object-contain rounded-2xl opacity-50" + alt="Not found" + /> + </div> + <p className="text-lg mb-6"> + The page you're looking for doesn't exist or has been moved. + </p> + <div className="space-y-3"> + <a + href="/" + className={`inline-block px-6 py-3 rounded-lg font-semibold transition-colors ${ + isMoe + ? "bg-pink-500 text-white hover:bg-pink-600" + : "bg-purple-600 text-white hover:bg-purple-700" + }`} + > + Go to Homepage + </a> + <div className="mt-4"> + <a + href="/games" + className={`${ + isMoe ? "text-pink-600 hover:text-pink-800" : "text-blue-400 hover:text-blue-300" + } underline`} + > + View All Games + </a> + </div> + </div> + </div> + </div> + </div> + </> + ); +}
\ No newline at end of file |