frontend: custom pfps for all games

3 files changed, 44 insertions, 8 deletions

diff --git a/site/src/components/NewsFeed.tsx b/site/src/components/NewsFeed.tsx
index d8d2db0..881beaa 100644
--- a/site/src/components/NewsFeed.tsx
+++ b/site/src/components/NewsFeed.tsx
@@ -1,5 +1,5 @@
 import { useState, useEffect } from "react";
-import { getGameTitle } from "../utils.ts";
+import { getGameTitle, getShortenedGameName } from "../utils.ts";
 import { useSearchParams } from "react-router-dom";
 
 export interface NewsData {
@@ -83,11 +83,15 @@ export const NewsFeed: React.FC<NewsFeedProps> = ({ newsItems }) => {
           <div id={newsId} key={newsId} className={`${isMoe ? "bg-pink-100 border-pink-300 text-pink-900 font-[Zen_Maru_Gothic]" : "bg-gray-900 border-gray-800 text-white font-sans"} border rounded-lg shadow-lg overflow-hidden`}>
             <div className="flex items-center p-3 justify-between">
               <div className="flex items-center space-x-3">
-                <div className={`${isMoe ? "bg-pink-400" : "bg-purple-700"} rounded-full h-8 w-8 flex items-center justify-center text-white text-xs font-bold`}>
-                  {news.identifier.charAt(0)}
-                </div>
+                <a href={`/game/${getShortenedGameName(news.identifier)}`}>
+                  <img
+                    src={`https://arcade-news.pinapelz.com/`+getShortenedGameName(news.identifier)+`.webp`}
+                    alt={getGameTitle(news.identifier) || ''}
+                    className="hover:animate-pulse rounded-full h-8 w-8 object-cover"
+                  />
+                </a>
                 <div className="flex flex-col leading-tight">
-                  <span className="text-sm font-semibold">{getGameTitle(news.identifier)}</span>
+                  <span className="text-sm font-semibold hover:underline"><a href={`/game/${getShortenedGameName(news.identifier)}`}>{getGameTitle(news.identifier)}</a></span>
                   <span className="text-xs opacity-80">{date}</span>
                   {news.type && <span className="text-xs italic">{news.type}</span>}
                 </div>
diff --git a/site/src/pages/Homepage.tsx b/site/src/pages/Homepage.tsx
index a3247cc..18f2e37 100644
--- a/site/src/pages/Homepage.tsx
+++ b/site/src/pages/Homepage.tsx
@@ -23,10 +23,10 @@ export default function Home() {
   useEffect(() => {
     const fetchNews = async () => {
       setLoading(true);
-      const jsonFile = gameId ? `${gameId}_news.json` : "news.json";
+      const newsDataFileName = gameId ? `${gameId}_news.json` : "news.json";
       try {
         const response = await fetch(
-          "https://arcade-news.pinapelz.com/" + `${jsonFile}`,
+          "https://arcade-news.pinapelz.com/" + `${newsDataFileName}`,
         );
         if (!response.ok) {
           throw new Error(`Failed to fetch news: ${response.statusText}`);
@@ -102,7 +102,7 @@ export default function Home() {
               </p>
             </div>
           )}
-          <NewsFeed newsItems={newsFeedData.news_posts} />
+          <NewsFeed newsItems={newsFeedData.news_posts}/>
         </div>
         <footer
           className={`mt-8 text-center text-sm ${isMoe ? "text-pink-800" : "text-gray-400"}`}
diff --git a/site/src/utils.ts b/site/src/utils.ts
index 8c46c84..c6d0566 100644
--- a/site/src/utils.ts
+++ b/site/src/utils.ts
@@ -33,3 +33,35 @@ export const getGameTitle = (gameId: string) => {
 
     return gameId.toUpperCase();
 };
+
+export const getShortenedGameName = (gameId: string) => {
+    if (!gameId) return null;
+    const lowerCaseGameId = gameId.toLowerCase();
+    if (lowerCaseGameId.startsWith("sdvx") || lowerCaseGameId.startsWith("sound_voltex")) return "sdvx";
+    if (lowerCaseGameId.startsWith("iidx")) return "iidx";
+    if (lowerCaseGameId.startsWith("chunithm_jp")) return "chunithm_jp";
+    if (lowerCaseGameId.startsWith("maimaidx_jp")) return "maimaidx_jp";
+    if (lowerCaseGameId.startsWith("maimaidx_intl")) return "maimaidx_intl";
+    if (lowerCaseGameId.startsWith("ongeki_jp")) return "ongeki_jp";
+    if (lowerCaseGameId.startsWith("idac")) return "idac";
+    if (lowerCaseGameId.startsWith("chunithm_intl")) return "chunithm_intl";
+    if (lowerCaseGameId.startsWith("ddr")) return "ddr";
+    if (lowerCaseGameId.startsWith("jubeat")) return "jubeat";
+    if (lowerCaseGameId.startsWith("gitadora")) return "gitadora";
+    if (lowerCaseGameId.startsWith("nostalgia")) return "nostalgia";
+    if (lowerCaseGameId.startsWith("popn_music")) return "popn_music";
+    if (lowerCaseGameId.startsWith("music_diver")) return "music_diver";
+    if (lowerCaseGameId.startsWith("street_fighter")) return "street_fighter";
+    if (lowerCaseGameId.startsWith("taiko")) return "taiko";
+    if (lowerCaseGameId.startsWith("wacca")) return "wacca";
+    if (lowerCaseGameId.startsWith("museca")) return "museca";
+    if (lowerCaseGameId.startsWith("reflec_beat") || lowerCaseGameId.startsWith("rb_deluxe")) return "rb_deluxe";
+    if (lowerCaseGameId.startsWith("dance_rush")) return "dance_rush";
+    if(lowerCaseGameId.startsWith("dance_around")) return "dance_around";
+    if(lowerCaseGameId.startsWith("polaris_chord")) return "polaris_chord";
+    if(lowerCaseGameId.startsWith("wmmt")) return "wmmt";
+    if(lowerCaseGameId.startsWith("wangan_maxi_jp")) return "wangan_maxi_jp";
+    if(lowerCaseGameId.startsWith("wangan_maxi_na")) return "wangan_maxi_na";
+    if(lowerCaseGameId.startsWith("wangan_maxi_asia_oce")) return "wangan_maxi_asia_oce";
+    return gameId.toUpperCase();
+};