Merge pull request #87 from cardano-scaling/feat/session-stats

feat: session stats

src/components/GameView/GameView.tsx

@@ -4,6 +4,7 @@ import GlobalTPS from "../GlobalTPS";
 import Layout from "../Layout";
 import MusicPlayer from "../MusicPlayer";
 import RestartButton from "../RestartButton";
+import SessionStats from "../SessionStats";
 import TopLinks from "../TopLinks";
 
 const GameView = () => {
@@ -13,7 +14,10 @@ const GameView = () => {
       <MusicPlayer />
       <RestartButton />
       <div className="grid grid-cols-[20.5rem_1fr_20.5rem] container gap-16 items-center">
-        <GlobalTotals size="sm" titleAlign="left" />
+        <div className="flex flex-col gap-8">
+          <GlobalTotals size="sm" titleAlign="left" />
+          <SessionStats size="sm" titleAlign="left" />
+        </div>
         <div className="flex flex-col gap-6">
           <DoomCanvas />
         </div>

src/components/SessionStats/SessionStats.tsx

@@ -0,0 +1,76 @@
+import { FC } from "react";
+import StatsCard from "../StatsCard";
+import { StatsCardProps } from "../StatsCard/StatsCard";
+import { useAppContext } from "../../context/useAppContext";
+import { formatNumber } from "../../utils/numbers";
+import { useQuery } from "@tanstack/react-query";
+import { fetchSessionStats } from "../../utils/requests";
+import { SessionStatsInterface } from "../../types";
+import { FaStar } from "react-icons/fa6";
+import cx from "classnames";
+
+const SessionStats: FC<Pick<StatsCardProps, "size" | "titleAlign">> = ({
+  size,
+  titleAlign,
+}) => {
+  const { keys, accountData } = useAppContext();
+  const { publicKeyHashHex = "" } = keys || {};
+
+  const { data } = useQuery<SessionStatsInterface>({
+    queryKey: ["sessionStats", publicKeyHashHex],
+    queryFn: () => fetchSessionStats(publicKeyHashHex),
+    enabled: !!publicKeyHashHex && !!accountData,
+    refetchInterval: 6000, // 6 seconds
+  });
+
+  const { death = 0, game_started = 0, kill = 0 } = data || {};
+
+  const stats = [
+    {
+      label: "Games Played:",
+      value: game_started,
+      showStar: game_started > 0,
+      starColor: game_started >= 4 ? "text-yellow-400" : "text-white",
+    },
+    {
+      label: "Kills:",
+      value: kill,
+      showStar: kill >= 25,
+      starColor: kill >= 50 ? "text-yellow-400" : "text-white",
+    },
+    {
+      label: "Deaths:",
+      value: death,
+      showStar: false,
+      starColor: null,
+    },
+  ];
+
+  const formattedStats = stats.map(({ label, value, showStar, starColor }) => {
+    const formattedValue = formatNumber(value);
+    return {
+      label,
+      value: showStar ? (
+        <div className="flex items-center gap-4 w-fit">
+          <div className="w-5">{formattedValue}</div>
+          <FaStar className={cx("text-base", starColor)} />
+        </div>
+      ) : (
+        formattedValue
+      ),
+    };
+  });
+
+  if (!accountData) return null;
+
+  return (
+    <StatsCard
+      data={formattedStats}
+      size={size}
+      title="Session Stats"
+      titleAlign={titleAlign}
+    />
+  );
+};
+
+export default SessionStats;

src/components/SessionStats/index.ts

@@ -0,0 +1 @@
+export { default } from "./SessionStats";

src/components/StatsCard/StatsCard.tsx

@@ -1,9 +1,9 @@
-import { FC } from "react";
+import { FC, ReactNode } from "react";
 import Card from "../Card";
 import cx from "classnames";
 
 export interface StatsCardProps {
-  data: { label: string; value: string | number }[];
+  data: { label: string; value: ReactNode }[];
   size?: "sm" | "md" | "lg";
   title?: string;
   titleAlign?: "left" | "center" | "right";
@@ -48,8 +48,8 @@ const StatsCard: FC<StatsCardProps> = ({
           <tbody>
             {data.map((item) => (
               <tr key={item.label}>
-                <td>{item.label}</td>
-                <td className="text-yellow-400">{item.value}</td>
+                <td className="py-1">{item.label}</td>
+                <td className="text-yellow-400 py-0.5">{item.value}</td>
               </tr>
             ))}
           </tbody>

src/types.ts

@@ -116,3 +116,13 @@ export interface Region {
   name: string;
   value: string;
 }
+
+export interface SessionStatsInterface {
+  death: number;
+  game_finished: number;
+  game_started: number;
+  kill: number;
+  new_game: number;
+  player_joined: number;
+  suicide: number;
+}

src/utils/requests.ts

@@ -1,5 +1,5 @@
 import { API_BASE_URL, API_KEY } from "../constants";
-import { AuthResponse, GameStatistics } from "../types";
+import { AuthResponse, GameStatistics, SessionStatsInterface } from "../types";
 
 export const fetchAuthProviders = async (): Promise<string[]> => {
   const response = await fetch(`${API_BASE_URL}/auth/providers`);
@@ -55,3 +55,15 @@ export const authRefresh = async ({
   }
   return response.json();
 };
+
+export const fetchSessionStats = async (
+  sessionReference: string,
+): Promise<SessionStatsInterface> => {
+  const response = await fetch(
+    `${API_BASE_URL}/stats/session/${API_KEY}/${sessionReference}`,
+  );
+  if (!response.ok) {
+    throw new Error("Failed to fetch session stats");
+  }
+  return response.json();
+};