Revamped weapon display and agent display

app/components/agent.tsx

@@ -1,3 +1,13 @@
-export function Agent({side}: {side: "T" | "CT"}) {
-    return <>{side}</>
-}
+import { Surface } from "@heroui/react";
+
+export function Agent({ agent_id }: { agent_id: string }) {
+    return (
+        <Surface className="bg-[#1f2937] flex justify-center flex-1 min-h-0 p-4">
+            <img
+                src={`/skins/${agent_id}_big.png`}
+                className="pointer-events-none object-contain object-bottom h-full w-full"
+                alt="Agent image"
+            />
+        </Surface>
+    );
+}

app/components/inventory.tsx

@@ -4,12 +4,22 @@ import { Agent } from "./agent";
 import { Weapon } from "./weapon";
 import { useNotification } from "~/hooks/notification";
 
+interface SkinInfo {
+    id: string;
+    name: string;
+    color: string;
+    display: string;
+    paint_index: number;
+    float: number;
+    pattern: number;
+}
+
 export function Inventory({ side }: { side: "T" | "CT" }) {
     const [loading, setLoading] = useState(true);
-    const [agent, setAgent] = useState({});
-    const [gloves, setGloves] = useState({ name: "", color: "", display: "", paint_index: 0, float: 0.0, pattern: 0 });
-    const [knife, setKnife] = useState({ name: "", color: "", display: "", paint_index: 0, float: 0.0, pattern: 0 });
-    const [weapons, setWeapons] = useState([]);
+    const [agent, setAgent] = useState<SkinInfo>();
+    const [gloves, setGloves] = useState<SkinInfo>();
+    const [knife, setKnife] = useState<SkinInfo>();
+    const [weapons, setWeapons] = useState<Array<SkinInfo>>([]);
     const { notify } = useNotification();
 
     useEffect(() => {
@@ -50,7 +60,46 @@ export function Inventory({ side }: { side: "T" | "CT" }) {
                     );
                 });
 
-            setGloves(response[0])
+            setGloves(response[0]);
+
+            response = await fetch(
+                `${import.meta.env.VITE_BASE_API_URL}/skin?team=${side}`,
+                { credentials: "include" },
+            )
+                .then((r) => r.json())
+                .catch((e) => {
+                    notify(
+                        {
+                            type: "danger",
+                            loading: false,
+                            title: "An error occured.",
+                            message: `An error occured: ${e}`,
+                        },
+                        10000,
+                    );
+                });
+
+            setWeapons(response);
+
+            response = await fetch(
+                `${import.meta.env.VITE_BASE_API_URL}/agent?team=${side}`,
+                { credentials: "include" },
+            )
+                .then((r) => r.json())
+                .catch((e) => {
+                    notify(
+                        {
+                            type: "danger",
+                            loading: false,
+                            title: "An error occured.",
+                            message: `An error occured: ${e}`,
+                        },
+                        10000,
+                    );
+                });
+
+            setAgent(response);
+
             setLoading(false);
         };
 
@@ -68,11 +117,11 @@ export function Inventory({ side }: { side: "T" | "CT" }) {
                     className="flex flex-col rounded-xl w-1/3 p-4 gap-2"
                     variant="secondary"
                 >
-                    <Skeleton className="flex-1 h-40 w-full rounded-xl" />
+                    <Skeleton className="flex-1 h-55 w-full rounded-xl" />
                     <div className="flex gap-2">
-                        <Skeleton className="flex-1 h-40 rounded-xl" />
-                        <Skeleton className="flex-1 h-40 rounded-xl" />
-                        <Skeleton className="flex-1 h-40 rounded-xl" />
+                        <Skeleton className="flex-1 h-55 rounded-xl" />
+                        <Skeleton className="flex-1 h-55 rounded-xl" />
+                        <Skeleton className="flex-1 h-55 rounded-xl" />
                     </div>
                 </Surface>
                 <Surface
@@ -81,7 +130,10 @@ export function Inventory({ side }: { side: "T" | "CT" }) {
                 >
                     <div className="absolute inset-4 flex-1 grid grid-cols-5 gap-2 overflow-y-scroll">
                         {Array.from({ length: 50 }, (_, index) => (
-                        <Skeleton key={index} className="flex-1 h-40 rounded-xl" />
+                            <Skeleton
+                                key={index}
+                                className="flex-1 h-55 rounded-xl"
+                            />
                         ))}
                     </div>
                 </Surface>
@@ -91,31 +143,38 @@ export function Inventory({ side }: { side: "T" | "CT" }) {
         return (
             <div className="flex flex-1 gap-2 min-h-0">
                 <Surface
-                    className="flex flex-col rounded-xl w-1/3 p-4 gap-2"
+                    className="flex flex-col rounded-xl w-1/3 p-4 gap-2 min-h-0"
                     variant="secondary"
                 >
-                    <Agent side={side}></Agent>
+                    {agent && <Agent agent_id={agent["name"]}></Agent>}
                     <div className="flex gap-2">
-                        <Weapon
-                            weapon_id={knife["name"]}
-                            color={knife["color"]}
-                            paint_index={knife["paint_index"]}
-                            display={knife["display"]}
-                            float={knife["float"]}
-                            pattern={knife["pattern"]}
-                        ></Weapon>
-                        <Weapon
-                            weapon_id={gloves["name"]}
-                            color={gloves["color"]}
-                            paint_index={gloves["paint_index"]}
-                            display={gloves["display"]}
-                            float={gloves["float"]}
-                            pattern={gloves["pattern"]}
-                        ></Weapon>
-                        <Weapon
-                            weapon_id={"agent-4730"}
-                            color="#8847ff"
-                        ></Weapon>
+                        {knife && (
+                            <Weapon
+                                weapon_id={knife["name"]}
+                                color={knife["color"]}
+                                paint_index={knife["paint_index"]}
+                                display={knife["display"]}
+                                float={knife["float"]}
+                                pattern={knife["pattern"]}
+                            ></Weapon>
+                        )}
+                        {gloves && (
+                            <Weapon
+                                weapon_id={gloves["name"]}
+                                color={gloves["color"]}
+                                paint_index={gloves["paint_index"]}
+                                display={gloves["display"]}
+                                float={gloves["float"]}
+                                pattern={gloves["pattern"]}
+                            ></Weapon>
+                        )}
+                        {agent && (
+                            <Weapon
+                                weapon_id={agent["name"]}
+                                color={agent["color"]}
+                                display={agent["display"]}
+                            ></Weapon>
+                        )}
                     </div>
                 </Surface>
                 <Surface
@@ -123,11 +182,15 @@ export function Inventory({ side }: { side: "T" | "CT" }) {
                     variant="secondary"
                 >
                     <div className="absolute inset-4 flex-1 grid grid-cols-5 gap-2 overflow-y-scroll">
-                        {Array.from({ length: 50 }, (_, index) => (
+                        {weapons.map((v, i) => (
                             <Weapon
-                                key={index}
-                                weapon_id="weapon_ak47"
-                                color="#e4ae39"
+                                key={i}
+                                weapon_id={v.name}
+                                color={v.color}
+                                paint_index={v.paint_index}
+                                display={v.display}
+                                float={v.float}
+                                pattern={v.pattern}
                             />
                         ))}
                     </div>

app/components/weapon.tsx

@@ -5,8 +5,8 @@ export function Weapon({
     weapon_id,
     color,
     display = "Weapon",
-    float = 0,
-    pattern = 0,
+    float,
+    pattern,
     paint_index = 0,
 }: {
     weapon_id: string;
@@ -27,21 +27,24 @@ export function Weapon({
                     }}
                 >
                     <img
-                        src={`/skins/${weapon_id}_${paint_index}.png`}
+                        src={`/skins/${weapon_id}_${paint_index || 0}.png`}
                         className="pointer-events-none object-contain object-bottom h-full"
+                        alt="Weapon image"
                     />
                 </div>
                 <div
                     className={`h-1 w-full`}
                     style={{ background: `${color}` }}
                 ></div>
-                <Typography.Heading level={6} className="px-2 text-wrap">
+                <Typography.Heading level={6} className="px-2 py-1 text-wrap">
                     {display}
                 </Typography.Heading>
-                <Float float={float} />
-                <Typography.Paragraph className="px-2">
-                    Pattern: {pattern}
-                </Typography.Paragraph>
+                {float !== undefined && <Float float={float} />}
+                {pattern !== undefined && (
+                    <Typography.Paragraph className="px-2">
+                        Pattern: {pattern}
+                    </Typography.Paragraph>
+                )}
             </div>
         </Button>
     );

app/pages/base.tsx

@@ -6,11 +6,12 @@ import { Header } from "~/components/header";
 export default function Base({
     children,
     needsLogin = false,
-}: PropsWithChildren<{ needsLogin?: boolean }>) {
+    fixedHeight = false,
+}: PropsWithChildren<{ needsLogin?: boolean, fixedHeight?: boolean }>) {
     return (
         <>
-            <div className="flex flex-col pt-20 min-h-dvh">
-                <div className="flex flex-col flex-1">
+            <div className={`flex flex-col pt-20 min-h-dvh ${fixedHeight && "h-dvh"}`}>
+                <div className="flex flex-col flex-1 min-h-0">
                     {needsLogin ? <Guard>{children}</Guard> : children}
                 </div>
                 <Footer />

app/pages/inventory.tsx

@@ -6,7 +6,7 @@ import { Inventory } from "~/components/inventory";
 export function InventoryPage() {
     const [side, setSide] = useState<"T" | "CT">("T");
     return (
-        <Base needsLogin>
+        <Base needsLogin fixedHeight>
             <Surface
                 className="flex flex-col flex-1 min-h-0 h-0 shadow-lg shadow-indigo-900 ring-1 ring-indigo-800 p-2 m-2 rounded-3xl gap-2"
                 variant="default"