diff options
| -rw-r--r-- | site/src/pages/Homepage.tsx | 180 |
1 files changed, 108 insertions, 72 deletions
diff --git a/site/src/pages/Homepage.tsx b/site/src/pages/Homepage.tsx index 6db2748..a3247cc 100644 --- a/site/src/pages/Homepage.tsx +++ b/site/src/pages/Homepage.tsx @@ -5,86 +5,122 @@ import { getGameTitle } from "../utils.ts"; import TitleBar from "../components/TitleBar"; import { GameNotes } from "../components/GameNotes"; - interface ArcadeNewsAPIData { - fetch_time: number; - news_posts: Array<NewsData>; + fetch_time: number; + news_posts: Array<NewsData>; } export default function Home() { - const { gameId } = useParams<{ gameId?: string }>(); - const [searchParams] = useSearchParams(); - const isMoe = searchParams.has("moe"); - - const [newsFeedData, setNewsFeedData] = useState<ArcadeNewsAPIData | null>(null); - const [loading, setLoading] = useState<boolean>(true); + const { gameId } = useParams<{ gameId?: string }>(); + const [searchParams] = useSearchParams(); + const isMoe = searchParams.has("moe"); - useEffect(() => { - const fetchNews = async () => { - setLoading(true); - const jsonFile = gameId ? `${gameId}_news.json` : "news.json"; - try { - const response = await fetch("https://arcade-news.pinapelz.com/"+`${jsonFile}`); - if (!response.ok) { - throw new Error(`Failed to fetch news: ${response.statusText}`); - } - const data: ArcadeNewsAPIData = await response.json(); - setNewsFeedData(data); - } catch (e) { - console.error(e); - } finally { - setLoading(false); - } - }; - fetchNews(); - }, [gameId]); // Re-fetch when gameId changes + const [newsFeedData, setNewsFeedData] = useState<ArcadeNewsAPIData | null>( + null, + ); + const [loading, setLoading] = useState<boolean>(true); - if (loading || newsFeedData === null) { - return ( - <> - <TitleBar /> - <div className="flex items-center justify-center h-screen bg-black"> - <div className="animate-spin rounded-full h-16 w-16 border-t-4 border-purple-600"></div> - </div> - </> + useEffect(() => { + const fetchNews = async () => { + setLoading(true); + const jsonFile = gameId ? `${gameId}_news.json` : "news.json"; + try { + const response = await fetch( + "https://arcade-news.pinapelz.com/" + `${jsonFile}`, ); - } + if (!response.ok) { + throw new Error(`Failed to fetch news: ${response.statusText}`); + } + const data: ArcadeNewsAPIData = await response.json(); + setNewsFeedData(data); + } catch (e) { + console.error(e); + } finally { + setLoading(false); + } + }; + fetchNews(); + }, [gameId]); // Re-fetch when gameId changes + if (loading || newsFeedData === null) { return ( - <> - <TitleBar /> - <div className={`${isMoe ? "bg-pink-100 text-pink-900 font-[Zen_Maru_Gothic]" : "bg-gray-950"} min-h-screen py-6`}> - <div className="max-w-[600px] mx-auto px-4"> - {gameId ? ( - <div className={`${isMoe ? "bg-pink-200 text-pink-900" : "bg-gray-800 text-white"} rounded-lg p-6 text-center shadow-lg`}> - <h1 className="text-2xl font-bold mb-2"> - {getGameTitle(gameId)} News - </h1> - {GameNotes(isMoe)[gameId] && <div className="text-left">{GameNotes(isMoe)[gameId]}</div>} - </div> - ) : ( - <div className={`${isMoe ? "bg-pink-200 text-pink-900" : "bg-gray-800 text-white"} rounded-lg p-6 text-center shadow-lg`}> - <h1 className="text-2xl font-bold">Welcome to 573-UPDATES</h1> - <div className="floating"> - <img src="/xiatian.webp" className="w-48 mx-auto mb-2 object-contain rounded-2xl" /> - </div> - <p>News and Information for various arcade games is aggregated here!</p> - <p className="mt-2"> - Please see the{" "} - <a href="https://github.com/pinapelz/573-updates" className="text-blue-500 hover:underline"> - GitHub - </a>{" "} - for API information - </p> - </div> - )} - <NewsFeed newsItems={newsFeedData.news_posts} /> - </div> - <footer className={`mt-8 text-center text-sm ${isMoe ? "text-pink-800" : "text-gray-400"}`}> - <p>Last updated: {new Date(newsFeedData.fetch_time * 1000).toLocaleString()}</p> - <p><a href="https://moekyun.me/" className={`${isMoe ? "text-pink-600 hover:text-pink-400" : "hover:underline"}`}>a moekyun service</a></p> - </footer> - </div> - </> + <> + <TitleBar /> + <div + className={`flex items-center justify-center h-screen ${isMoe ? "bg-pink-100" : "bg-black"}`} + > + <div + className={`animate-spin rounded-full h-16 w-16 border-t-4 ${isMoe ? "border-pink-500" : "border-purple-600"}`} + ></div> + </div> + </> ); + } + + return ( + <> + <TitleBar /> + <div + className={`${isMoe ? "bg-pink-100 text-pink-900 font-[Zen_Maru_Gothic]" : "bg-gray-950"} min-h-screen py-6`} + > + <div className="max-w-[600px] mx-auto px-4"> + {gameId ? ( + <div + className={`${isMoe ? "bg-pink-200 text-pink-900" : "bg-gray-800 text-white"} rounded-lg p-6 text-center shadow-lg`} + > + <h1 className="text-2xl font-bold mb-2"> + {getGameTitle(gameId)} News + </h1> + {GameNotes(isMoe)[gameId] && ( + <div className="text-left">{GameNotes(isMoe)[gameId]}</div> + )} + </div> + ) : ( + <div + className={`${isMoe ? "bg-pink-200 text-pink-900" : "bg-gray-800 text-white"} rounded-lg p-6 text-center shadow-lg`} + > + <h1 className="text-2xl font-bold">Welcome to 573-UPDATES</h1> + <div className="floating"> + <img + src="/xiatian.webp" + className="w-48 mx-auto mb-2 object-contain rounded-2xl" + /> + </div> + <p> + News and Information for various arcade games is aggregated + here! + </p> + <p className="mt-2"> + Please see the{" "} + <a + href="https://github.com/pinapelz/573-updates" + className="text-blue-500 hover:underline" + > + GitHub + </a>{" "} + for API information + </p> + </div> + )} + <NewsFeed newsItems={newsFeedData.news_posts} /> + </div> + <footer + className={`mt-8 text-center text-sm ${isMoe ? "text-pink-800" : "text-gray-400"}`} + > + <p> + Last updated:{" "} + {new Date(newsFeedData.fetch_time * 1000).toLocaleString()} + </p> + <p> + <a + href="https://moekyun.me/" + className={`${isMoe ? "text-pink-600 hover:text-pink-400" : "hover:underline"}`} + > + a moekyun service + </a> + </p> + </footer> + </div> + </> + ); } |