add recently played games to profile page

2 files changed, 40 insertions, 7 deletions

diff --git a/frontend/src/pages/Profile.tsx b/frontend/src/pages/Profile.tsx
index cc8fc99..bffc710 100644
--- a/frontend/src/pages/Profile.tsx
+++ b/frontend/src/pages/Profile.tsx
@@ -9,8 +9,15 @@ import Heatmap from "../components/Heatmap";
 import type { HeatmapData } from "../components/Heatmap";
 import type { User } from "../utils/authApi";
 
+interface recentPlayedGame {
+  gameInternalName: string;
+  formattedName: string;
+  timestamp: number;
+}
+
 interface UserData {
   user: User;
+  recentPlayedGames: recentPlayedGame[];
   isAdmin: boolean;
 }
 
@@ -91,14 +98,14 @@ const Profile = () => {
     navigate("/");
   }
 
-  if (isLoading || fetchingHeatmapData || fetchingUserData) {
-    return <LoadingDisplay message="Loading Profile Page..." />;
-  }
-
   if (!user) {
     return <SessionExpiredPopup />;
   }
 
+  if (isLoading || fetchingHeatmapData || fetchingUserData) {
+    return <LoadingDisplay message="Loading Profile Page..." />;
+  }
+
   const handleLogout = async () => {
     try {
       await logout();
@@ -125,9 +132,20 @@ const Profile = () => {
             {user.username}
           </h1>
           <p className="text-sm sm:text-base text-slate-400">
-            {userData?.user.bio || "I'm a fairly non-descript person"}
+            {userData?.user.bio ? userData.user.bio.replace(/</g, '&lt;').replace(/>/g, '&gt;') : "I'm a fairly non-descript person"}
           </p>
         </div>
+        <div className="mb-6 sm:mb-8">
+          <h2 className="text-xl sm:text-2xl font-bold text-white mb-4">Recently Played Games</h2>
+          <ul className="list-disc list-inside space-y-2 text-white">
+            {userData?.recentPlayedGames.map((game, index) => (
+              <li key={index} className="flex items-center justify-between p-2 bg-slate-800 rounded-lg border border-slate-700">
+               <span className="font-bold hover:underline"><a href={`/score?game=${game.gameInternalName}&userId=${userData.user.id}`}>{game.formattedName}</a> </span>
+                <span className="text-sm text-slate-400">{new Date(game.timestamp).toLocaleString()}</span>
+              </li>
+            ))}
+          </ul>
+        </div>
         {isBrowser ? (
           <div className="flex flex-col items-center justify-center">
             <Heatmap data={heatmapData.data} />
diff --git a/frontend/src/pages/Score.tsx b/frontend/src/pages/Score.tsx
index cf2b09c..3701b1f 100644
--- a/frontend/src/pages/Score.tsx
+++ b/frontend/src/pages/Score.tsx
@@ -23,6 +23,8 @@ const Score = () => {
   const [formattedGameName, setFormattedGameName] = useState("");
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const [scores, setScores] = useState<any[]>([]);
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const [username, setUsername] = useState<any>([]);
   const [loading, setLoading] = useState(true);
   const [currentPage, setCurrentPage] = useState(1);
   const [numPages, setNumPages] = useState(1);
@@ -30,6 +32,7 @@ const Score = () => {
   const [sortField, setSortField] = useState<SortField>("");
   const [sortDirection, setSortDirection] = useState<SortDirection>("asc");
   const [requestOrder, setRequestOrder] = useState<string>("timestamp");
+  const [viewingOwnScores, setViewingOwnScores] = useState(true);
 
   const gameName =
     new URLSearchParams(window.location.search).get("game") || "dancerush";
@@ -95,7 +98,18 @@ const Score = () => {
       setLoading(true);
       try {
         const url = new URL(import.meta.env.VITE_API_URL + "/scores");
-        url.searchParams.append("userId", user.id.toString());
+        const targetUserId = new URLSearchParams(window.location.search).get("userId");
+        if (targetUserId) {
+          url.searchParams.append("userId", targetUserId);
+        } else {
+          url.searchParams.append("userId", user.id.toString());
+        }
+        if(targetUserId !== user.id.toString()){
+          setViewingOwnScores(false);
+        }
+        else{
+          setViewingOwnScores(true);
+        }
         url.searchParams.append("internalGameName", gameName);
         url.searchParams.append("pageNum", pageNum.toString());
         url.searchParams.append("sortKey", requestOrder);
@@ -104,6 +118,7 @@ const Score = () => {
         const response = await fetch(url.toString(), {credentials: 'include'});
         if (!response.ok) throw new Error("Failed to fetch scores");
         const data = await response.json();
+        setUsername(data.user);
         const flattened = data.scores.map(flattenScoreData);
         setScores(flattened);
         setNumPages(data.num_pages);
@@ -175,7 +190,7 @@ const Score = () => {
         <div className="mb-6 sm:mb-12">
           <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 mb-4">
             <h1 className="text-2xl sm:text-3xl md:text-4xl font-bold bg-linear-to-r from-violet-400 to-violet-600 bg-clip-text text-transparent">
-              Your Scores for {formattedGameName}
+              {viewingOwnScores ? "Your Scores" : `${username}'s Scores`} for {formattedGameName}
             </h1>
             <div className="flex items-center space-x-1 sm:space-x-2 bg-slate-900/50 backdrop-blur-sm rounded-xl p-1 border border-slate-800/50">
               <button