add not found pages for site and feed

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