24.04.27

updated...
	- reading of fetched api.helldivers2.dev data
	- WarMap UX

src/components/widgets/latestOrder.tsx

@@ -77,11 +77,11 @@ export default async function majorOrder() {
           {order.major_order[0].setting.tasks.map(
             (task: Task, index: number) => {
               const planetNumber = task.values[2];
-              const planet = status.planet_status[planetNumber];
+              const planet = status[planetNumber];
 
               let borderClassName = "";
 
-              if (planet && planet.liberation === 100) {
+              if (planet && planet.health / 10000 === 100) {
                 borderClassName += "border border-primary";
               }
 
@@ -94,10 +94,10 @@ export default async function majorOrder() {
                     {planet ? (
                       <>
                         <p id="title" role="progressbar">
-                          {planet.planet.name}
+                          {planet.name}
                         </p>
                         <Progress
-                          value={planet.liberation}
+                          value={planet.health / 10000}
                           className="mt-1 h-2 w-full bg-background"
                           role="progressbar"
                           aria-labelledby="title"

src/components/widgets/targets/components/columns.tsx

@@ -7,6 +7,7 @@ import { Badge } from "@/components/ui/badge";
 import { species } from "../data/data";
 import { Target } from "../data/schema";
 import { DataTableColumnHeader } from "./data-table-column-header";
+import { formatNumber } from "@/components/widgets/globalStats";
 
 export const columns: ColumnDef<Target>[] = [
   {
@@ -15,44 +16,43 @@ export const columns: ColumnDef<Target>[] = [
       <DataTableColumnHeader column={column} title="Name" />
     ),
     cell: ({ row }) => (
-      <div className="w-[40px] md:w-[80px]">{row.getValue("name")}</div>
+      <div className="w-[60px] md:w-[80px]">{row.getValue("name")}</div>
     ),
     enableSorting: false,
     enableHiding: false,
   },
   {
-    accessorKey: "liberation",
+    accessorKey: "health",
     header: ({ column }) => (
       <DataTableColumnHeader column={column} title="Liberation" />
     ),
     cell: ({ row }) => (
       <div className="flex w-[40px] items-center md:w-[80px]">
-        <Badge className="mr-1">
-          {Math.round(row.getValue("liberation"))}%
-        </Badge>
+        <Badge className="mr-1">{Math.round(row.getValue("health"))}%</Badge>
       </div>
     ),
   },
   {
-    accessorKey: "players",
+    accessorKey: "playerCount",
     header: ({ column }) => (
       <DataTableColumnHeader column={column} title="Player Count" />
     ),
     cell: ({ row }) => (
-      <div className="w-[40px] md:w-[80px]">{row.getValue("players")}</div>
+      <div className="w-[40px] md:w-[80px]">
+        {formatNumber(row.getValue("playerCount"))}
+      </div>
     ),
     enableHiding: false,
     enableSorting: false,
   },
   {
-    accessorKey: "initial_owner",
+    accessorKey: "initialOwner",
     header: ({ column }) => (
       <DataTableColumnHeader column={column} title="Owner" />
     ),
     cell: ({ row }) => {
       const initial_owner = species.find(
-        (initial_owner) =>
-          initial_owner.value === row.getValue("initial_owner"),
+        (initial_owner) => initial_owner.value === row.getValue("initialOwner"),
       );
 
       if (!initial_owner) {

src/components/widgets/targets/components/data-table.tsx

@@ -61,7 +61,7 @@ export function DataTable<TData, TValue>({
     initialState: {
       sorting: [
         {
-          id: "liberation",
+          id: "health",
           desc: true, // sort by name in descending order by default
         },
       ],

src/components/widgets/targets/currentTargets.tsx

@@ -1,35 +1,44 @@
 import { columns } from "./components/columns";
 import { DataTable } from "./components/data-table";
-
 import { statusAPI } from "@/components/widgets/util/getApiData";
 
+interface Planet {
+  playerCount: number;
+  health: number;
+  name: string;
+  initialOwner: string;
+  position: {
+    x: number;
+    y: number;
+  };
+}
+
 export default async function TargetsTable() {
   const targets = await statusAPI();
 
-  const flattenedPlanets = targets.planet_status.map(
+  const flattenedPlanets = targets.map(
     ({
-      planet,
-      players,
-      liberation,
-      initial_owner,
+      name,
+      health,
+      initialOwner,
+      statistics,
     }: {
-      planet: { name: string; initial_owner: string };
+      statistics: { playerCount: string };
+      name: string;
       players: number;
-      liberation: number;
-      initial_owner: string;
+      health: number;
+      initialOwner: string;
     }) => ({
-      name: planet.name,
-      players,
-      liberation,
-      initial_owner: planet.initial_owner,
+      name,
+      health: health / 10000,
+      initialOwner,
+      playerCount: statistics.playerCount,
     }),
   );
 
-  const filteredPlanets = flattenedPlanets.filter(
-    (planet: { players: number; liberation: number }) => {
-      return planet.players > 500 && planet.liberation !== 100;
-    },
-  );
+  const filteredPlanets = flattenedPlanets.filter((planet: Planet) => {
+    return planet.playerCount > 500 && planet.health !== 100;
+  });
 
   return <DataTable data={filteredPlanets} columns={columns} />;
 }

src/components/widgets/util/getApiData.ts

@@ -10,7 +10,7 @@ export async function API() {
 }
 
 export async function statusAPI(){
-  const res = await fetch("https://helldivers-2.fly.dev/api/801/status",{
+  const res = await fetch("https://api.helldivers2.dev/api/v1/planets",{
     headers: {
       "User-Agent": "Helldivers 2 Companion - helldiverscompanion.app",
       "Accept-Language": "en-US"

src/components/widgets/util/getWarMap.ts

@@ -1,46 +1,45 @@
 import axios from "axios";
 
 interface Planet {
-  players: number;
-  liberation: number;
-  planet: {
-    name: string;
-    initial_owner: string;
-    position: {
-      x: number;
-      y: number;
-    };
+  playerCount: number;
+  health: number;
+  name: string;
+  initialOwner: string;
+  position: {
+    x: number;
+    y: number;
   };
 }
 
 export async function fetchPlanetsData(): Promise<Planet[]> {
   try {
     const response = await axios.get(
-      "https://helldivers-2.fly.dev/api/801/status"
+      "https://api.helldivers2.dev/api/v1/planets"
     );
 
-    const flattenedPlanets = response.data.planet_status.map(
+    const flattenedPlanets = response.data.map(
       ({
+        name,
         players,
-        liberation,
-        planet,
+        health,
+        initialOwner,
+        statistics,
+        position
       }: {
+        statistics: { playerCount: string };
+        name: string;
         players: number;
-        liberation: number;
-        planet: {
-          position: { x: number; y: number };
-          name: string;
-          initial_owner: string;
-        };
+        health: number;
+        initialOwner: string;
+        position: { x: number; y: number };
       }) => ({
+        name,
         players,
-        liberation,
-        planet: {
-          name: planet.name,
-          initial_owner: planet.initial_owner,
-          position: { x: planet.position.x, y: planet.position.y },
-        },
-      })
+        health: health / 10000,
+        initialOwner,
+        playerCount: statistics.playerCount,
+        position: { x: position.x, y: position.y }
+      }),
     );
 
     return flattenedPlanets;

src/components/widgets/warMap.tsx

@@ -14,17 +14,16 @@ import "leaflet/dist/leaflet.css";
 import { LatLngBounds } from "leaflet";
 import { fetchPlanetsData } from "@/components/widgets/util/getWarMap"; // Import the fetchPlanetsData function
 import { Progress } from "../ui/progress";
+import { formatNumber } from "@/components/widgets/globalStats";
 
 interface Status {
-  players: number;
-  liberation: number;
-  planet: {
-    name: string;
-    initial_owner: string;
-    position: {
-      x: number;
-      y: number;
-    };
+  playerCount: number;
+  health: number;
+  name: string;
+  initialOwner: string;
+  position: {
+    x: number;
+    y: number;
   };
 }
 
@@ -42,16 +41,14 @@ export default function MyMap() {
   const allPlanets = planets;
 
   const activePlanets = planets.filter(
-    (planet: { players: number; liberation: number }) => {
-      return planet.players > 2000 && planet.liberation !== 100;
+    (planet: { playerCount: number }, health: number) => {
+      return planet.playerCount > 500 && health != 100;
     },
   );
 
-  const liberatedPlanets = planets.filter(
-    (planet: { players: number; liberation: number }) => {
-      return planet.liberation === 100;
-    },
-  );
+  const liberatedPlanets = planets.filter((planet: Status) => {
+    return planet.health === 100;
+  });
 
   {
     /*
@@ -71,22 +68,18 @@ export default function MyMap() {
     return filteredPlanets.map((planet, index) => {
       // Calculate new coordinates with angle offset
       const newX =
-        planet.planet.position.x *
-          Math.cos(angleOffsetDegrees * (Math.PI / 180)) -
-        planet.planet.position.y *
-          Math.sin(angleOffsetDegrees * (Math.PI / 180));
+        planet.position.x * Math.cos(angleOffsetDegrees * (Math.PI / 180)) -
+        planet.position.y * Math.sin(angleOffsetDegrees * (Math.PI / -180));
       const newY =
-        planet.planet.position.x *
-          Math.sin(angleOffsetDegrees * (Math.PI / 180)) +
-        planet.planet.position.y *
-          Math.cos(angleOffsetDegrees * (Math.PI / 180));
+        planet.position.x * Math.sin(angleOffsetDegrees * (Math.PI / 180)) +
+        planet.position.y * Math.cos(angleOffsetDegrees * (Math.PI / -180));
 
       let fillColor = "";
       let fillOpacity = 0;
       let color = "";
       let radius = 5;
 
-      if (planet.liberation < 100) {
+      if (planet.health < 100) {
         fillColor = "";
         fillOpacity = 0.6;
         color = "red";
@@ -101,19 +94,19 @@ export default function MyMap() {
       return (
         <CircleMarker
           key={index}
-          center={[newX / -100, newY / 100]}
+          center={[newX, newY]}
           radius={radius}
           fillColor={fillColor}
           fillOpacity={fillOpacity}
           color={color}
           weight={1}
         >
           <Popup>
-            <p>Name: {planet.planet.name}</p>
-            <p>Players: {planet.players}</p>
+            <p>Name: {planet.name}</p>
+            <p>Players: {formatNumber(planet.playerCount)}</p>
             <p>
-              {Math.round(planet.liberation)}% Liberation
-              <Progress value={planet.liberation} />
+              {Math.round(planet.health)}% Liberation
+              <Progress value={planet.health} />
             </p>
           </Popup>
         </CircleMarker>
@@ -128,7 +121,11 @@ export default function MyMap() {
       zoom={window.innerWidth < 768 ? 7 : 8}
       maxZoom={9}
       minZoom={7}
-      maxBounds={new LatLngBounds([-1.5, -1.5], [1.5, 1.5])}
+      maxBounds={
+        window.innerWidth < 768
+          ? new LatLngBounds([-2, -2], [2, 2])
+          : new LatLngBounds([-1.5, -1.5], [1.5, 1.5])
+      }
       boxZoom={false}
       doubleClickZoom={false}
       keyboard={false}