added win loss ration to universe view

packages/testnet/frontend/src/components/battlereports/BattleReport.tsx

@@ -91,7 +91,7 @@ interface Debris {
   quartz: number;
 }
 
-interface FetchData {
+export interface FetchData {
   battle_id: number;
   time: string;
   attacker_planet_id: number;

packages/testnet/frontend/src/components/battlereports/utils.ts

@@ -0,0 +1,82 @@
+import { useState, useEffect } from 'react';
+import { FetchData } from './BattleReport';
+
+export function useGetBattleReportsData(planetId: number | null) {
+  const [battleReports, setBattleReports] = useState<FetchData[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (planetId === null) {
+      // If planetId is not set, clear the current data and do not fetch
+      setBattleReports([]);
+      setError(null);
+      setIsLoading(false);
+      return;
+    }
+
+    const apiUrl = `https://www.api.testnet.no-game.xyz/battle-reports?planet_id=${planetId}`;
+    const fetchData = async () => {
+      setIsLoading(true);
+      setError(null);
+
+      try {
+        const response = await fetch(apiUrl);
+        if (!response.ok) {
+          throw new Error('Error fetching battle reports');
+        }
+        const data = await response.json();
+
+        if (data.length === 0) {
+          setError('No Battle Reports to show');
+          setBattleReports([]);
+        } else {
+          setBattleReports(data);
+        }
+      } catch (err) {
+        setError(
+          err instanceof Error ? err.message : 'An unexpected error occurred'
+        );
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    fetchData();
+  }, [planetId]); // Re-fetch data when planetId changes
+
+  return { battleReports, isLoading, error };
+}
+
+export function useCalculateWinsAndLosses(planetId: number) {
+  const [winLoss, setWinLoss] = useState({ wins: 0, losses: 0 });
+
+  const { battleReports, isLoading, error } = useGetBattleReportsData(planetId);
+  console.log(battleReports);
+  console.log(error);
+
+  useEffect(() => {
+    if (!isLoading && !error && battleReports) {
+      let wins = 0;
+      let losses = 0;
+
+      for (const report of battleReports) {
+        const totalLoot =
+          report.loot.steel + report.loot.quartz + report.loot.tritium;
+        console.log(totalLoot);
+
+        if (report.attacker_planet_id === planetId && totalLoot > 0) {
+          wins++;
+        } else if (report.defender_planet_id === planetId && totalLoot === 0) {
+          wins++;
+        } else {
+          losses++;
+        }
+      }
+
+      setWinLoss({ wins, losses });
+    }
+  }, [battleReports, isLoading, error, planetId]);
+
+  return winLoss;
+}

packages/testnet/frontend/src/components/boxes/UniverseViewBox.tsx

@@ -62,6 +62,7 @@ interface Props {
   ownTechs?: TechLevels;
   isNoobProtected?: boolean;
   lastActive: number;
+  winLoss: [number, number];
 }
 
 const UniverseViewBox = ({
@@ -76,6 +77,7 @@ const UniverseViewBox = ({
   ownTechs,
   isNoobProtected,
   lastActive,
+  winLoss,
 }: Props) => {
   const boxStyle = highlighted ? { border: '1px solid #23CE6B' } : {};
 
@@ -151,11 +153,22 @@ const UniverseViewBox = ({
             </Styled.NumberContainer>
           </Styled.ResourceContainer>
           <Styled.ResourceContainer>
-            <Styled.ResourceTitle>RANKING</Styled.ResourceTitle>
+            <Styled.ResourceTitle>RANK</Styled.ResourceTitle>
             <Styled.NumberContainer style={{ fontSize: '14px' }}>
               {isNaN(Number(points)) ? '-' : numberWithCommas(Number(points))}
             </Styled.NumberContainer>
           </Styled.ResourceContainer>
+          <Styled.ResourceContainer>
+            <Styled.ResourceTitle style={{ width: '200%' }}>
+              WIN/LOSS
+            </Styled.ResourceTitle>
+            <Styled.NumberContainer style={{ fontSize: '14px' }}>
+              <span style={{ color: '#23CE6B' }}>{winLoss[0]}</span>
+              <span style={{ color: 'inherit' }}> / </span>
+              <span style={{ color: '#AB3836' }}>{winLoss[1]}</span>
+            </Styled.NumberContainer>
+          </Styled.ResourceContainer>
+
           <Styled.ResourceContainer>
             <Styled.ResourceTitle>POSITION</Styled.ResourceTitle>
             <Styled.NumberContainer style={{ fontSize: '14px' }}>

packages/testnet/frontend/src/pages/Simulator/index.tsx

@@ -93,9 +93,6 @@ export const BattleSimulator = () => {
   const [defenderFleet, setDefenderFleet] = useState<Fleet>(baseFleet);
   const [defences, setDefences] = useState<DefenceLevels>(baseDefences);
 
-  // const response = useSimulation(attackerFleet, defenderFleet, defences);
-  // console.log('response', response);
-
   const handleInputChange = (
     fleetType: 'attacker' | 'defender',
     shipType: keyof Fleet,

packages/testnet/frontend/src/panels/UniverseViewTab.tsx

@@ -16,6 +16,7 @@ import { useGetIsNoobProtected, useLastActive } from '../hooks/FleetHooks';
 import { getPlanetImage, type ImageId } from '../shared/utils/getPlanetImage';
 import fetchPlanetsData from '../api/fetchPlanetsData';
 import { useGetPlanetRanking } from '../components/leaderboards/utils';
+import { useCalculateWinsAndLosses } from '../components/battlereports/utils';
 
 interface UniverseBoxItemProps {
   ownPlanetId: number;
@@ -38,7 +39,9 @@ const UniverseBoxItem = ({
   );
 
   const planetRanking = useGetPlanetRanking(planet.planetId);
-  console.log(planetRanking);
+
+  const winLoss = useCalculateWinsAndLosses(planet.planetId);
+  console.log(winLoss);
   const lastActive = useLastActive(planet.planetId);
 
   const ownFleetData = useShipsLevels(Number(ownPlanetId));
@@ -78,6 +81,7 @@ const UniverseBoxItem = ({
       ownTechs={ownTechs}
       isNoobProtected={isNoobProtected}
       lastActive={Number(lastActive)}
+      winLoss={[winLoss.wins, winLoss.losses]}
     />
   );
 };