#824 Restructured frontend using leagues from database

Author: bogadisa

src/frontend/.env

@@ -1,6 +1,3 @@
 VITE_API_URL=http://localhost:8000 # This is the URL for the FastAPI backend
-VITE_APP_DEFAULT_LEAGUES="Mirage|Keepers|Mercenaries|Phrecia" # This is the default leagues, the first one is the current league to show on the frontend
-VITE_APP_ADDITIONAL_LEAGUES="Hardcore Mirage|Hardcore Keepers|Hardcore Mercenaries|Hardcore Phrecia" # NB: Separate by '|' for each league
 VITE_APP_TURNSTILE_SITE_KEY=1x00000000000000000000AA # This is the site key for the Turnstile captcha
-VITE_APP_LEAGUE_LAUNCH_TIME=2026-03-06T19:00:00Z # ISO 8601 format. Round backwards to whole hour number
 VITE_APP_PLOTTING_WINDOW_HOURS=336

src/frontend/src/components/Common/DateDaysHoursSinceLaunchStats.tsx

@@ -4,42 +4,68 @@ import { useEffect, useState } from "react";
 import {
   getHoursSinceLaunch,
   formatHoursSinceLaunch,
-  LEAGUE_LAUNCH_DATETIME,
 } from "../../hooks/graphing/utils";
-import { DEFAULT_LEAGUES } from "../../config";
 import { setupHourlyUpdate } from "../../utils";
+import { useLeagueLaunchStats } from "../../store/LeagueLaunchStatsStore";
 
 const DateDaysHoursSinceLaunchStats = (props: StatProps) => {
-  const defaultLeague = DEFAULT_LEAGUES[0];
+  const [currentTime, setCurrentTime] = useState(new Date());
+  const { league, leagueLaunch, hoursSinceLaunch, setHoursSinceLaunch } =
+    useLeagueLaunchStats();
+  useEffect(() => {
+    return setupHourlyUpdate(setCurrentTime);
+  }, []);
 
-  const leagueLaunchDay = LEAGUE_LAUNCH_DATETIME.getDate();
-  const leagueLaunchMonth = LEAGUE_LAUNCH_DATETIME.toLocaleString("default", {
+  const leagueLaunchDay = leagueLaunch.getDate();
+  const leagueLaunchMonth = leagueLaunch.toLocaleString("default", {
     month: "short",
   });
+  const leagueLaunchYear = leagueLaunch.toLocaleString("default", {
+    year: "numeric",
+  });
 
-  const [currentTime, setCurrentTime] = useState(new Date());
   const currentDay = currentTime.getDate();
   const currentMonth = currentTime.toLocaleString("default", {
     month: "short",
   });
+  const currentYear = currentTime.toLocaleString("default", {
+    year: "numeric",
+  });
 
-  const hoursSinceLaunch = getHoursSinceLaunch(currentTime);
-  const daysHoursSinceLaunchFormat = formatHoursSinceLaunch(hoursSinceLaunch);
-  const [sinceLaunchDays, sinceLaunchHours] =
-    daysHoursSinceLaunchFormat.split("T");
-
+  const curHoursSinceLaunch = getHoursSinceLaunch(currentTime, leagueLaunch);
+  const [localHoursSinceLaunch, setLocalHoursSinceLaunch] =
+    useState(curHoursSinceLaunch);
   useEffect(() => {
-    return setupHourlyUpdate(setCurrentTime);
-  }, []);
+    console.log(currentTime, leagueLaunch);
+    const curHoursSinceLaunch = getHoursSinceLaunch(currentTime, leagueLaunch);
+    setLocalHoursSinceLaunch(hoursSinceLaunch);
+    if (curHoursSinceLaunch !== hoursSinceLaunch) {
+      setHoursSinceLaunch(curHoursSinceLaunch);
+    }
+  }, [
+    leagueLaunch,
+    hoursSinceLaunch,
+    setHoursSinceLaunch,
+    currentTime,
+    localHoursSinceLaunch,
+  ]);
+
+  const daysHoursSinceLaunchFormat = formatHoursSinceLaunch(
+    localHoursSinceLaunch,
+  );
+  const [yearsDays, sinceLaunchHours] = daysHoursSinceLaunchFormat.split("T");
+  const [sinceLaunchYears, sinceLaunchDays] = yearsDays.split("Y");
 
   return (
     <Stat {...props}>
       <StatNumber>
-        {sinceLaunchDays} days and {sinceLaunchHours} hours since{" "}
-        {defaultLeague} launched
+        {sinceLaunchYears !== "0" ? `${sinceLaunchYears} years, ` : ""}
+        {sinceLaunchDays} days and {sinceLaunchHours} hours since {league.name}{" "}
+        launched
       </StatNumber>
       <StatHelpText>
-        {leagueLaunchMonth} {leagueLaunchDay} - {currentMonth} {currentDay}
+        {leagueLaunchMonth} {leagueLaunchDay} {leagueLaunchYear} -{" "}
+        {currentMonth} {currentDay} {currentYear}
       </StatHelpText>
     </Stat>
   );

src/frontend/src/components/Common/MultiSelectButtonGrid.tsx

@@ -1,6 +1,4 @@
-import {
-  Box, Flex, FlexProps
-} from "@chakra-ui/layout";
+import { Box, Flex, FlexProps } from "@chakra-ui/layout";
 import { Button } from "@chakra-ui/react";
 import { capitalizeFirstLetter } from "../../hooks/utils";
 import { TextWithUnderline } from "../Text/TextWithUnderline";
@@ -24,12 +22,18 @@ const MultiSelectButtonGrid = (props: MultiSelectProps) => {
 
   let defaultSelectedOptionsBoolean: boolean[];
   if (defaultSelectedOptions !== undefined) {
-    defaultSelectedOptionsBoolean = options.map((val) => defaultSelectedOptions.includes(val));
+    defaultSelectedOptionsBoolean = options.map((val) =>
+      defaultSelectedOptions.includes(val),
+    );
   } else {
-    defaultSelectedOptionsBoolean = new Array<boolean>(numberOfOptions).fill(false);
+    defaultSelectedOptionsBoolean = new Array<boolean>(numberOfOptions).fill(
+      false,
+    );
   }
 
-  const [selectedOptions, setSelectedOptions] = useState<boolean[]>(defaultSelectedOptionsBoolean);
+  const [selectedOptions, setSelectedOptions] = useState<boolean[]>(
+    defaultSelectedOptionsBoolean,
+  );
 
   const clearClicked = useGraphInputStore((state) => state.clearClicked);
 
@@ -38,47 +42,48 @@ const MultiSelectButtonGrid = (props: MultiSelectProps) => {
       props.onClearClick();
       setSelectedOptions(defaultSelectedOptionsBoolean);
     }
-  }, [clearClicked])
+  }, [clearClicked, defaultSelectedOptionsBoolean, props]);
 
   const buttons = options.map((val, idx) => {
-    return <Box textAlign="center" mr={2} mb={2} key={val}>
-      <Button
-        variant="solid"
-        bg={selectedOptions[idx] ? "ui.lightInput" : "ui.input"}
-        color="ui.white"
-        _hover={{
-          bg: "ui.grey"
-        }}
-        borderWidth={1}
-        borderColor="ui.grey"
-        maxW="bgBoxes.mediumPPBox"
-        fontWeight="normal"
-        onClick={() => {
-          setSelectedOptions((currentSelectedOptions) => [
-            ...currentSelectedOptions.slice(0, idx),
-            !selectedOptions[idx],
-            ...currentSelectedOptions.slice(idx + 1)])
-          if (!selectedOptions[idx]) {
-            props.setValue(val);
-          } else {
-            props.removeValue(val)
-          }
-        }}
-      >
-        {capitalizeFirstLetter(val)}
-      </Button>
-    </Box>
-  })
-  return <Flex direction="column">
-    <TextWithUnderline text={props.optionsName} />
-    <Flex
-      direction="row"
-      flexWrap="wrap"
-      mt={2}
-    >
-      {...buttons}
+    return (
+      <Box textAlign="center" mr={2} mb={2} key={val}>
+        <Button
+          variant="solid"
+          bg={selectedOptions[idx] ? "ui.lightInput" : "ui.input"}
+          color="ui.white"
+          _hover={{
+            bg: "ui.grey",
+          }}
+          borderWidth={1}
+          borderColor="ui.grey"
+          maxW="bgBoxes.mediumPPBox"
+          fontWeight="normal"
+          onClick={() => {
+            setSelectedOptions((currentSelectedOptions) => [
+              ...currentSelectedOptions.slice(0, idx),
+              !selectedOptions[idx],
+              ...currentSelectedOptions.slice(idx + 1),
+            ]);
+            if (!selectedOptions[idx]) {
+              props.setValue(val);
+            } else {
+              props.removeValue(val);
+            }
+          }}
+        >
+          {capitalizeFirstLetter(val)}
+        </Button>
+      </Box>
+    );
+  });
+  return (
+    <Flex direction="column">
+      <TextWithUnderline text={props.optionsName} />
+      <Flex direction="row" flexWrap="wrap" mt={2}>
+        {...buttons}
+      </Flex>
     </Flex>
-  </Flex>
-}
+  );
+};
 
 export default MultiSelectButtonGrid;

src/frontend/src/components/Common/QueryButtons.tsx

@@ -9,6 +9,7 @@ import {
 import { useErrorStore } from "../../store/ErrorStore";
 import { ErrorMessage } from "../../components/Input/StandardLayoutInput/ErrorMessage";
 import { getOptimizedPlotQuery } from "../../hooks/graphing/utils";
+import { useLeagueLaunchStats } from "../../store/LeagueLaunchStatsStore";
 
 const QueryButtons = (props: FlexProps) => {
   const { setExpandedGraphInputFilters } = useExpandedComponentStore();
@@ -20,6 +21,7 @@ const QueryButtons = (props: FlexProps) => {
     modifiersUnidentifiedError,
     baseSpecDoesNotMatchError,
   } = useErrorStore();
+  const { hoursSinceLaunch } = useLeagueLaunchStats();
   const { stateHash, fetchStatus, setHashFromStore, setPlotQuery } =
     useGraphInputStore();
   const isFetching = fetchStatus === "fetching";
@@ -42,13 +44,13 @@ const QueryButtons = (props: FlexProps) => {
     }, 10);
   };
 
-  const handlePlotQuery = () => {
+  const handlePlotQuery = (hoursSinceLaunch: number) => {
     if (isFetching) return;
     if (stateHash) return;
     const leagueValid = checkGraphQueryLeagueInput();
     const modifierValid = checkGraphQueryModifierInput();
     if (!leagueValid || !modifierValid) return;
-    const plotQuery = getOptimizedPlotQuery();
+    const plotQuery = getOptimizedPlotQuery(hoursSinceLaunch);
     if (plotQuery === undefined) return;
     setPlotQuery(plotQuery);
     useGraphInputStore.getState().setQueryClicked();
@@ -89,7 +91,7 @@ const QueryButtons = (props: FlexProps) => {
           borderColor="ui.grey"
           width={["inputSizes.defaultBox", "inputSizes.lgBox"]}
           maxW="98vw"
-          onClick={handlePlotQuery}
+          onClick={() => handlePlotQuery(hoursSinceLaunch)}
           disabled={isFetching}
           opacity={isFetching ? 0.5 : 1}
           cursor={isFetching ? "not-allowed" : "pointer"}

src/frontend/src/components/Graph/CustomTooltip.tsx

@@ -12,6 +12,7 @@ import { capitalizeFirstLetter } from "../../hooks/utils";
 import { BiError } from "react-icons/bi";
 import { getHoursSinceLaunch } from "../../hooks/graphing/utils";
 import { setupHourlyUpdate } from "../../utils";
+import { useLeagueLaunchStats } from "../../store/LeagueLaunchStatsStore";
 
 interface CustomTooltipProps extends TooltipContentProps<ValueType, NameType> {
   upperBoundry: number;
@@ -21,10 +22,11 @@ interface CustomTooltipProps extends TooltipContentProps<ValueType, NameType> {
 
 export const CustomTooltip = (props: CustomTooltipProps) => {
   const [currentTime, setCurrentTime] = useState(new Date());
+  const { leagueLaunch } = useLeagueLaunchStats();
 
   let hoursAgo = -1;
   if (typeof props.label == "number") {
-    hoursAgo = getHoursSinceLaunch(currentTime) - props.label;
+    hoursAgo = getHoursSinceLaunch(currentTime, leagueLaunch) - props.label;
   }
 
   const daysToDisplay = Math.floor(hoursAgo / 24);

src/frontend/src/components/Graph/GraphComponent.tsx

@@ -33,7 +33,7 @@ import PlotCustomizationButtons from "../Common/PlotCustomizationButtons";
  * and a graph if there has been
  */
 function GraphComponent(props: BoxProps) {
-  const { plotQuery, leagues } = useGraphInputStore();
+  const { plotQuery, choosableLeagues } = useGraphInputStore();
   const {
     result: plotData,
     mostCommonCurrencyUsed,
@@ -51,7 +51,10 @@ function GraphComponent(props: BoxProps) {
   const showSecondary = usePlotSettingsStore((state) => state.showSecondary);
 
   if (error || plotData == undefined) return;
-  const fetchedLeagues = plotData.data.map((val) => val.name);
+  const fetchedLeagueIds = plotData.data.map((val) => val.name);
+  const fetchedLeagues = choosableLeagues
+    .filter((league) => fetchedLeagueIds.includes(league.leagueId))
+    .map((league) => league.name);
 
   const isLowConfidence = confidenceRating === "low";
   const isMediumConfidence = confidenceRating === "medium";
@@ -171,13 +174,13 @@ function GraphComponent(props: BoxProps) {
             <Legend verticalAlign="top" height={36} />
             {plotData.data.map(
               (series, idx) =>
-                leagues.includes(series.name) && (
+                fetchedLeagueIds.includes(series.name) && (
                   <Line
                     type="monotone"
                     data={series.data}
                     dataKey={"valueInChaos"}
                     key={series.name}
-                    name={series.name + " - " + "Chaos Value"}
+                    name={fetchedLeagues[idx] + " - " + "Chaos Value"}
                     stroke={colors[idx]}
                     yAxisId={0}
                     hide={!showChaos}
@@ -204,13 +207,15 @@ function GraphComponent(props: BoxProps) {
             {mostCommonCurrencyUsed !== "chaos" &&
               plotData.data.map(
                 (series, idx) =>
-                  leagues.includes(series.name) && (
+                  fetchedLeagueIds.includes(series.name) && (
                     <Line
                       type="monotone"
                       data={series.data}
                       dataKey={"valueInMostCommonCurrencyUsed"}
                       key={series.name}
-                      name={series.name + " - " + mostCommonCurrencyUsedName}
+                      name={
+                        fetchedLeagues[idx] + " - " + mostCommonCurrencyUsedName
+                      }
                       stroke={colors[idx]}
                       yAxisId={1}
                       hide={!showSecondary}

src/frontend/src/components/Input/LeagueInput.tsx

@@ -1,23 +1,33 @@
 import { useGraphInputStore } from "../../store/GraphInputStore";
-import { DEFAULT_LEAGUES, ADDITIONAL_LEAGUES } from "../../config";
+import { useLeagueLaunchStats } from "../../store/LeagueLaunchStatsStore";
 import MultiSelectButtonGrid from "../Common/MultiSelectButtonGrid";
 
 // Set the default league in the environment variables file.
 // League Input Component  -  This component is used to select the league of the game.
 export const LeagueInput = () => {
-  const { leagues, addLeague, removeLeague } = useGraphInputStore();
-
-
-  const selectLeagueOptions: string[] = [...DEFAULT_LEAGUES, ...ADDITIONAL_LEAGUES]
+  const { league } = useLeagueLaunchStats();
+  const { leagues, choosableLeagues, addLeague, removeLeague } =
+    useGraphInputStore();
 
+  const selectLeagueOptions: string[] = choosableLeagues.map(
+    (league) => league.name,
+  );
+  let defaultLeagues;
+  if (leagues.length > 0) {
+    defaultLeagues = leagues;
+  } else {
+    defaultLeagues = league ? [league.name] : undefined;
+  }
   return (
     <MultiSelectButtonGrid
       optionsName="Select one or more Leagues"
       options={selectLeagueOptions}
-      defaultSelectedOptions={leagues}
+      defaultSelectedOptions={defaultLeagues}
       setValue={addLeague}
       removeValue={removeLeague}
-      onClearClick={() => useGraphInputStore.setState({ leagues: DEFAULT_LEAGUES })}
+      onClearClick={() =>
+        useGraphInputStore.setState({ leagues: defaultLeagues })
+      }
     />
-  )
+  );
 };

src/frontend/src/config.tsx

@@ -2,8 +2,5 @@
 
 export const VITE_API_URL = import.meta.env.VITE_API_URL;
 export const TURNSTILE_SITE_KEY = import.meta.env.VITE_APP_TURNSTILE_SITE_KEY;
-export const LEAGUE_LAUNCH_TIME = import.meta.env.VITE_APP_LEAGUE_LAUNCH_TIME;
-export const PLOTTING_WINDOW_HOURS = import.meta.env.VITE_APP_PLOTTING_WINDOW_HOURS;
-
-export const DEFAULT_LEAGUES = (import.meta.env.VITE_APP_DEFAULT_LEAGUES).split("|") as Array<string>;
-export const ADDITIONAL_LEAGUES = (import.meta.env.VITE_APP_ADDITIONAL_LEAGUES).split("|") as Array<string>;
+export const PLOTTING_WINDOW_HOURS = import.meta.env
+  .VITE_APP_PLOTTING_WINDOW_HOURS;