Updated to use new api and new weapon display

app/components/float.tsx

@@ -0,0 +1,16 @@
+export function Float({ float }: { float: number }) {
+    return (
+        <>
+            <div className="w-full flex justify-center">
+                <div className="absolute mx-2 h-4 w-1 mt-1 rounded-xl bg-white" style={{left: `calc(${float}*100% - var(--spacing))`}}></div>
+                <div className="w-full h-2 flex my-2 px-2">
+                    <div className="w-7/100 h-full rounded-l-xl bg-green-800"></div>
+                    <div className="w-8/100 h-full bg-green-500"></div>
+                    <div className="w-23/100 h-full bg-lime-400"></div>
+                    <div className="w-7/100 h-full bg-orange-400"></div>
+                    <div className="w-55/100 h-full rounded-r-xl bg-red-400"></div>
+                </div>
+            </div>
+        </>
+    );
+}

app/components/inventory.tsx

@@ -7,15 +7,15 @@ import { useNotification } from "~/hooks/notification";
 export function Inventory({ side }: { side: "T" | "CT" }) {
     const [loading, setLoading] = useState(true);
     const [agent, setAgent] = useState({});
-    const [gloves, setGloves] = useState({ name: "", color: "", paint_index: 0 });
+    const [gloves, setGloves] = useState({ name: "", color: "", display: "", paint_index: 0, float: 0.0, pattern: 0 });
-    const [knife, setKnife] = useState({ name: "", color: "", paint_index: 0 });
+    const [knife, setKnife] = useState({ name: "", color: "", display: "", paint_index: 0, float: 0.0, pattern: 0 });
     const [weapons, setWeapons] = useState([]);
     const { notify } = useNotification();
 
     useEffect(() => {
         const fetch_weapons = async () => {
             let response = await fetch(
-                `${import.meta.env.VITE_BASE_API_URL}/knife?team=${side}`,
+                `${import.meta.env.VITE_BASE_API_URL}/skin?team=${side}&category=Knives`,
                 { credentials: "include" },
             )
                 .then((r) => r.json())
@@ -31,10 +31,10 @@ export function Inventory({ side }: { side: "T" | "CT" }) {
                     );
                 });
 
-            setKnife(response);
+            setKnife(response[0]);
 
             response = await fetch(
-                `${import.meta.env.VITE_BASE_API_URL}/gloves?team=${side}`,
+                `${import.meta.env.VITE_BASE_API_URL}/skin?team=${side}&category=Gloves`,
                 { credentials: "include" },
             )
                 .then((r) => r.json())
@@ -50,7 +50,7 @@ export function Inventory({ side }: { side: "T" | "CT" }) {
                     );
                 });
 
-            setGloves(response)
+            setGloves(response[0])
             setLoading(false);
         };
 
@@ -100,11 +100,17 @@ export function Inventory({ side }: { side: "T" | "CT" }) {
                             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"}

app/components/weapon.tsx

@@ -1,24 +1,46 @@
-import { Button } from "@heroui/react";
+import { Button, Surface, Typography } from "@heroui/react";
+import { Float } from "./float";
 
 export function Weapon({
     weapon_id,
     color,
+    display = "Weapon",
+    float = 0,
+    pattern = 0,
     paint_index = 0,
 }: {
     weapon_id: string;
     color: string;
+    display?: string;
+    float?: number;
+    pattern?: number;
     paint_index?: number;
 }) {
-    const acolor = `${color}64`
+    const acolor = `${color}64`;
     return (
+        <Surface className="bg-mist-700">
             <Button className="flex flex-col h-fit w-fit p-0 rounded-none bg-transparent gap-0 hover:bg-indigo-800 active:bg-indigo-900">
-            <div className="bg-linear-to-b pointer-events-none" style={{background: `linear-gradient(to bottom, #1f2937, ${acolor})`}}>
+                <div className="flex flex-col">
+                    <div
+                        className="bg-linear-to-b pointer-events-none"
+                        style={{
+                            background: `linear-gradient(to bottom, #1f2937, ${acolor})`,
+                        }}
+                    >
                         <img
                             src={`/skins/${weapon_id}_${paint_index}.png`}
                             className="pointer-events-none"
                         />
                     </div>
-            <div className={`h-1 w-full`} style={{background: `${color}`}}></div>
+                    <div
+                        className={`h-1 w-full`}
+                        style={{ background: `${color}` }}
+                    ></div>
+                    <Typography.Heading level={6} className="px-2">{display}</Typography.Heading>
+                    <Float float={float} />
+                    <Typography.Paragraph className="px-2">Pattern: {pattern}</Typography.Paragraph>
+                </div>
             </Button>
+        </Surface>
     );
 }