SteamId, AppId

src/components/GameAccordionItem.tsx

@@ -2,8 +2,8 @@ import type IGame from "../api/types/IGame.ts";
 import {
     Accordion,
     AccordionDetails,
-    AccordionSummary,
-    Stack, Typography
+    AccordionSummary, CircularProgress,
+    Stack, Tooltip, Typography
 } from "@mui/joy";
 import type IPlayer from "../api/types/IPlayer.ts";
 import {useContext, useEffect, useState} from "react";
@@ -16,19 +16,30 @@ export default function GameAccordionItem({game, OpenDrawer} : {game: IGame, Ope
 
     const [players, setPlayers] = useState<IPlayer[]>([]);
     const [expanded, setExpanded] = useState<boolean>(false);
+    const [loading, setLoading] = useState<boolean>(false);
 
     useEffect(() => {
         if(!expanded)
             return;
-        GetPlayersOfGame(apiUri, game.appId).then(setPlayers);
+        setLoading(true);
+        GetPlayersOfGame(apiUri, game.appId)
+            .then(setPlayers)
+            .finally(() => setLoading(false));
     }, [expanded]);
 
     return (
         <Accordion key={game.appId} onChange={(_, expanded) => setExpanded(expanded)}>
-            <AccordionSummary><img src={game.iconUrl??"favicon.ico"} /><Typography level={"h4"}>{game.name}</Typography></AccordionSummary>
+            <AccordionSummary>
+                <img src={game.iconUrl??"favicon.ico"} />
+                <Tooltip title={game.appId}>
+                    <Typography level={"h4"}>{game.name}</Typography>
+                </Tooltip>
+            </AccordionSummary>
             <AccordionDetails>
-                <Stack flexWrap={"wrap"} direction={"row"} useFlexGap={true} spacing={1}>
-                    {players?.map((player) => <PlayerCard player={player} onClick={() => OpenDrawer(player, game)} />)}
+                <Stack flexWrap={"wrap"} direction={"row"} spacing={1} useFlexGap>
+                    {loading
+                        ? <CircularProgress />
+                        : players?.map((player) => <PlayerCard player={player} onClick={() => OpenDrawer(player, game)} />)}
                 </Stack>
             </AccordionDetails>
         </Accordion>

src/components/PlayerAccordionItem.tsx

@@ -2,33 +2,52 @@ import type IGame from "../api/types/IGame.ts";
 import {
     Accordion,
     AccordionDetails,
-    AccordionSummary,
-    Stack, Typography
+    AccordionSummary, Button, CircularProgress,
+    Stack, Tooltip, Typography
 } from "@mui/joy";
 import type IPlayer from "../api/types/IPlayer.ts";
 import {useContext, useEffect, useState} from "react";
 import {ApiUriContext} from "../api/fetchApi.tsx";
 import {GetGamesOfPlayer} from "../api/endpoints/Data.tsx";
 import GameCard from "./GameCard.tsx";
+import {GetTotal} from "../api/endpoints/TimeTrack.tsx";
 
 export default function PlayerAccordionItem({player, OpenDrawer} : {player: IPlayer, OpenDrawer : (player: IPlayer, game: IGame) => void}) {
     const apiUri = useContext(ApiUriContext);
 
     const [games, setGames] = useState<IGame[]>([]);
     const [expanded, setExpanded] = useState<boolean>(false);
+    const [loadingGames, setLoadingGames] = useState<boolean>(false);
+    const [totalTime, setTotalTime] = useState<bigint>(BigInt(0));
 
     useEffect(() => {
         if(!expanded)
             return;
-        GetGamesOfPlayer(apiUri, player.steamId).then(setGames);
+        setLoadingGames(true);
+        GetGamesOfPlayer(apiUri, player.steamId)
+            .then(setGames)
+            .finally(() => setLoadingGames(false));
+        GetTotal(apiUri, player.steamId)
+            .then(setTotalTime)
     }, [expanded]);
 
     return (
         <Accordion key={player.steamId} onChange={(_, expanded) => setExpanded(expanded)}>
-            <AccordionSummary><img src={player.avatarUrl} /><Typography level={"h4"}>{player.name}</Typography></AccordionSummary>
+            <AccordionSummary>
+                <img src={player.avatarUrl} />
+                <Tooltip title={player.steamId}>
+                    <Typography level={"h4"}>{player.name}</Typography>
+                </Tooltip>
+            </AccordionSummary>
             <AccordionDetails>
-                <Stack flexWrap={"wrap"} direction={"row"} useFlexGap={true} spacing={1}>
-                    {games?.map((game) => <GameCard game={game} onClick={() => OpenDrawer(player, game)} />)}
+                <Stack flexWrap={"nowrap"} direction={"row"} alignContent={"center"} spacing={2} useFlexGap marginBottom={"10px"}>
+                    <Button>All Games</Button>
+                    <Typography level={"h4"} >Total Time: {totalTime}</Typography>
+                </Stack>
+                <Stack flexWrap={"wrap"} direction={"row"} spacing={1} useFlexGap>
+                    {loadingGames
+                        ? <CircularProgress />
+                        : games?.map((game) => <GameCard game={game} onClick={() => OpenDrawer(player, game)} />)}
                 </Stack>
             </AccordionDetails>
         </Accordion>