ui improvements

packages/frontend/src/components/buttons/ButtonCollectDebris.tsx

@@ -7,7 +7,13 @@ import { Input } from "@mui/joy";
 import scraperImg from "../../assets/gameElements/ships/scraper4.png";
 import { StyledButton } from "../../shared/styled/Button";
 import useSendFleet from "../../hooks/writeHooks/useSendFleet";
-import { Fleet, Position, ShipsLevels, TechLevels } from "../../shared/types";
+import {
+  DebrisField,
+  Fleet,
+  Position,
+  ShipsLevels,
+  TechLevels,
+} from "../../shared/types";
 import {
   SCRAPER,
   getDistance,
@@ -89,17 +95,27 @@ const Text = styled("span")<TextProps>(({ totalShips, ownFleet }) => ({
 const FlexContainer = styled("div")({
   display: "flex",
   alignItems: "center",
-  justifyContent: "flex-start", // This already aligns items to the left
-  borderRadius: "8px",
+  justifyContent: "flex-start",
   gap: "4px",
-  margin: "8px",
-  width: "100%", // Ensure it takes the full width of the parent
+  margin: "8px 0", // Adjust margin as needed
+  width: "100%",
+});
+
+const TotalDebrisText = styled("div")({
+  color: "#F8F8FF",
+  fontSize: "16px",
+  marginRight: "8px", // Adjust margin as needed
+});
+
+const TotalDebrisValue = styled("span")({
+  color: "#98fb98",
 });
 
 const InputButtonContainer = styled("div")({
   display: "flex",
   alignItems: "center",
   gap: "4px",
+  marginRight: "16px", // Add right margin to create space
 });
 
 const TravelInfoContainer = styled("div")({
@@ -145,6 +161,7 @@ interface Props {
   ownFleet: ShipsLevels;
   techs: TechLevels;
   ownPosition: Position;
+  debrisField: DebrisField;
 }
 
 export function ButtonCollectDebris({
@@ -153,6 +170,7 @@ export function ButtonCollectDebris({
   ownFleet,
   techs,
   ownPosition,
+  debrisField,
 }: Props) {
   const [quantities, setQuantities] = useState<Record<string, number>>({});
   const [travelTime, setTravelTime] = useState(0);
@@ -240,6 +258,12 @@ export function ButtonCollectDebris({
                     style={{ width: "80px" }}
                   />
                 </InputButtonContainer>
+                <TotalDebrisText>
+                  Total Debris{" "}
+                  <TotalDebrisValue>
+                    {Number(debrisField.steel) + Number(debrisField.quartz)}
+                  </TotalDebrisValue>
+                </TotalDebrisText>
               </FlexContainer>
             </StyledUl>
           </div>

packages/frontend/src/components/leaderboards/LeaderBoardFleet.tsx

@@ -55,7 +55,7 @@ const LeadearBoardFleet = ({ planetId }: Props) => {
       setIsLoading(true);
       setError(null);
       try {
-        const response = await fetch("http://localhost:3001/api/fleet");
+        const response = await fetch("http://103.252.117.72:3001/api/fleet");
         if (!response.ok) {
           throw new Error("Something went wrong!");
         }

packages/frontend/src/components/leaderboards/LeaderBoardMain.tsx

@@ -56,7 +56,9 @@ const LeadearBoardMain = ({ planetId }: Props) => {
       setIsLoading(true);
       setError(null);
       try {
-        const response = await fetch("http://localhost:3001/api/leaderboard");
+        const response = await fetch(
+          "http://103.252.117.72:3001/api/leaderboard"
+        );
         if (!response.ok) {
           throw new Error("Something went wrong!");
         }

packages/frontend/src/components/leaderboards/LeaderBoardTech.tsx

@@ -54,7 +54,7 @@ const LeadearBoardTech = ({ planetId }: Props) => {
       setIsLoading(true);
       setError(null);
       try {
-        const response = await fetch("http://localhost:3001/api/tech");
+        const response = await fetch("http://103.252.117.72:3001/api/tech");
         if (!response.ok) {
           throw new Error("Something went wrong!");
         }

packages/frontend/src/components/ui/DebrisFieldView.tsx

@@ -94,6 +94,7 @@ export function DebrisFieldView({
                 ownFleet={ownFleet!}
                 techs={techs!}
                 ownPosition={ownPosition!}
+                debrisField={debris}
               />
             </div>
           </Modal>

packages/frontend/src/components/ui/FleetMovements.tsx

@@ -1,7 +1,11 @@
 import React, { useState, useEffect } from "react";
-import { useAttackPlanet, useGetActiveMissions } from "../../hooks/FleetHooks";
+import {
+  useAttackPlanet,
+  useGetActiveMissions,
+  useCollectDebris,
+} from "../../hooks/FleetHooks";
 import { Box } from "@mui/system";
-// import Button from "@mui/material/Button";
+import Tooltip from "@mui/material/Tooltip";
 import Modal from "@mui/material/Modal"; // Import Modal
 import styled from "styled-components";
 import { StyledButton } from "../../shared/styled/Button";
@@ -58,7 +62,7 @@ interface MissionRowProps {
   index: number;
   countdown: string;
   decayPercentage: number;
-  handleAttackClick: (arg0: number) => void;
+  handleAttackClick: (mission: Mission) => void;
 }
 
 const MissionRow = ({
@@ -80,14 +84,16 @@ const MissionRow = ({
       <MissionText>{mission.is_debris ? "Debris" : "Attack"}</MissionText>
       <MissionText>{countdown || "Arrived"}</MissionText>
       <MissionText>
-        {decayPercentage ? `${decayPercentage}%` : "0%"}
+        <Tooltip title="The fleet will start decay 2 hours after arrival if you don't attack or collect the debris">
+          <span>{decayPercentage ? `${decayPercentage}%` : "0%"}</span>
+        </Tooltip>
       </MissionText>
       <ButtonContainer>
         <StyledButton size="small" sx={{ background: "#E67E51" }}>
           Recall
         </StyledButton>
         <StyledButton
-          onClick={() => handleAttackClick(index)}
+          onClick={() => handleAttackClick(mission)}
           size="small"
           sx={{ background: "#4A63AA" }}
           disabled={Number(mission.time_arrival) * 1000 >= Date.now()}
@@ -103,28 +109,20 @@ interface Props {
   planetId: number;
 }
 
+interface Props {
+  planetId: number;
+}
+
 export const FleetMovements = ({ planetId }: Props) => {
-  const missions = useGetActiveMissions(planetId);
+  const missions = useGetActiveMissions(planetId) || [];
   const [isOpen, setIsOpen] = useState(false);
   const [countdowns, setCountdowns] = useState<string[]>([]);
   const [decayPercentages, setDecayPercentages] = useState<number[]>([]);
-  const [, setMissionDestinations] = useState<string[]>([]);
+  const [selectedMission, setSelectedMission] = useState<Mission | null>(null);
 
   useEffect(() => {
-    const fetchDestinations = async () => {
-      const destinations = await Promise.all(
-        missions.map(async (mission) => {
-          const position = await usePlanetPosition(mission.destination);
-          return position
-            ? `${position.system} / ${position.orbit}`
-            : "Unknown";
-        })
-      );
-      setMissionDestinations(destinations);
-    };
-
-    if (missions) {
-      fetchDestinations();
+    // Ensure missions is defined and is an array before mapping
+    if (missions && missions.length > 0) {
       const timers = missions.map((mission, index) => {
         return setInterval(() => {
           setCountdowns((prev) => {
@@ -149,26 +147,27 @@ export const FleetMovements = ({ planetId }: Props) => {
         }, 1000);
       });
 
+      // Clear the timers when the component unmounts or missions change
       return () => timers.forEach((timer) => clearInterval(timer));
     }
   }, [missions]);
 
-  const [selectedMissionId, setSelectedMissionId] = useState<number | null>(
-    null
-  );
-
-  // This useEffect hook ensures that useAttackPlanet is called with the correct missionId
   useEffect(() => {
-    if (selectedMissionId != null) {
-      attackPlanet();
+    if (selectedMission) {
+      if (selectedMission.is_debris) {
+        const { submitTx: collectDebris } = useCollectDebris(
+          selectedMission.id
+        );
+        collectDebris();
+      } else {
+        const { submitTx: attackPlanet } = useAttackPlanet(selectedMission.id);
+        attackPlanet();
+      }
     }
-  }, [selectedMissionId]);
-
-  const { submitTx: attackPlanet } = useAttackPlanet(selectedMissionId);
-  // const { submitTx: CollectDebris } = useCollectDebris(selectedMissionId);
+  }, [selectedMission]);
 
-  const handleAttackClick = (missionIndex: number) => {
-    setSelectedMissionId(missionIndex + 1);
+  const handleAttackClick = (mission: Mission) => {
+    setSelectedMission(mission);
   };
 
   const getTimeDifference = (arrivalTime: number) => {