Reworked base 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/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>
     );
 }