From e3046d45bb2765cdeb265e29e6f68341cd5d4110 Mon Sep 17 00:00:00 2001 From: ametel01 Date: Mon, 11 Dec 2023 05:13:17 +0800 Subject: [PATCH] ui improvements --- .../buttons/ButtonCollectDebris.tsx | 34 ++++++++-- .../leaderboards/LeaderBoardFleet.tsx | 2 +- .../leaderboards/LeaderBoardMain.tsx | 4 +- .../leaderboards/LeaderBoardTech.tsx | 2 +- .../src/components/ui/DebrisFieldView.tsx | 1 + .../src/components/ui/FleetMovements.tsx | 67 +++++++++---------- 6 files changed, 68 insertions(+), 42 deletions(-) diff --git a/packages/frontend/src/components/buttons/ButtonCollectDebris.tsx b/packages/frontend/src/components/buttons/ButtonCollectDebris.tsx index cbd8569..77126ee 100644 --- a/packages/frontend/src/components/buttons/ButtonCollectDebris.tsx +++ b/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")(({ 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>({}); const [travelTime, setTravelTime] = useState(0); @@ -240,6 +258,12 @@ export function ButtonCollectDebris({ style={{ width: "80px" }} /> + + Total Debris{" "} + + {Number(debrisField.steel) + Number(debrisField.quartz)} + + diff --git a/packages/frontend/src/components/leaderboards/LeaderBoardFleet.tsx b/packages/frontend/src/components/leaderboards/LeaderBoardFleet.tsx index 51ec473..9a3d08a 100644 --- a/packages/frontend/src/components/leaderboards/LeaderBoardFleet.tsx +++ b/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!"); } diff --git a/packages/frontend/src/components/leaderboards/LeaderBoardMain.tsx b/packages/frontend/src/components/leaderboards/LeaderBoardMain.tsx index fa0da74..e1a2bb7 100644 --- a/packages/frontend/src/components/leaderboards/LeaderBoardMain.tsx +++ b/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!"); } diff --git a/packages/frontend/src/components/leaderboards/LeaderBoardTech.tsx b/packages/frontend/src/components/leaderboards/LeaderBoardTech.tsx index 2a61e7e..e1d5f43 100644 --- a/packages/frontend/src/components/leaderboards/LeaderBoardTech.tsx +++ b/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!"); } diff --git a/packages/frontend/src/components/ui/DebrisFieldView.tsx b/packages/frontend/src/components/ui/DebrisFieldView.tsx index 569473b..cd1bcf9 100644 --- a/packages/frontend/src/components/ui/DebrisFieldView.tsx +++ b/packages/frontend/src/components/ui/DebrisFieldView.tsx @@ -94,6 +94,7 @@ export function DebrisFieldView({ ownFleet={ownFleet!} techs={techs!} ownPosition={ownPosition!} + debrisField={debris} /> diff --git a/packages/frontend/src/components/ui/FleetMovements.tsx b/packages/frontend/src/components/ui/FleetMovements.tsx index 13d31ac..4cde6ca 100644 --- a/packages/frontend/src/components/ui/FleetMovements.tsx +++ b/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 = ({ {mission.is_debris ? "Debris" : "Attack"} {countdown || "Arrived"} - {decayPercentage ? `${decayPercentage}%` : "0%"} + + {decayPercentage ? `${decayPercentage}%` : "0%"} + Recall 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([]); const [decayPercentages, setDecayPercentages] = useState([]); - const [, setMissionDestinations] = useState([]); + const [selectedMission, setSelectedMission] = useState(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( - 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) => {