Using the new category to filter skins shown in the right panel

app/components/agent.tsx

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

app/components/float.tsx

@@ -1,16 +1,85 @@
-export function Float({ float }: { float: number }) {
+import { Slider, Label, Typography, Input } from "@heroui/react";
+import {
+    useEffect,
+    type ChangeEvent,
+    type Dispatch,
+    type SetStateAction,
+} from "react";
+import { AgentInfo, WeaponInfo } from "~/types/skin";
+
+export function Float({
+    skin,
+    setSkin,
+    acceptInput = false,
+    hasLabel = false,
+}: {
+    skin: WeaponInfo;
+    setSkin: Dispatch<SetStateAction<WeaponInfo | AgentInfo>>;
+    minFloat?: number;
+    maxFloat?: number;
+    acceptInput?: boolean;
+    hasLabel?: boolean;
+}) {
+    useEffect(() => {
+        const newSkin = new WeaponInfo(skin);
+        newSkin.float = Math.max(
+            skin.min_float,
+            Math.min(skin.max_float, skin.float),
+        );
+        setSkin(newSkin);
+    }, [skin.min_float, skin.max_float]);
+
+    const handleChange = (newValue: number | number[]) => {
+        const val = Array.isArray(newValue) ? newValue[0] : newValue;
+        const newSkin = new WeaponInfo(skin);
+        newSkin.float = Math.max(skin.min_float, Math.min(skin.max_float, val));
+        setSkin(newSkin);
+    };
+
+    const handleInputChange = (event: ChangeEvent<HTMLInputElement>) => {
+        const val = event.currentTarget.valueAsNumber;
+        const newSkin = new WeaponInfo(skin);
+        newSkin.float = Math.max(skin.min_float, Math.min(skin.max_float, val));
+        setSkin(newSkin);
+    };
+
     return (
         <>
-            <div className="w-full flex justify-center">
+            {hasLabel && (
-                <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="flex items-center gap-2">
-                <div className="w-full h-2 flex my-2 px-2">
+                    <Typography.Paragraph>Float</Typography.Paragraph>
-                    <div className="w-7/100 h-full rounded-l-xl bg-green-800"></div>
+                    <Input
-                    <div className="w-8/100 h-full bg-green-500"></div>
+                        className="flex-1"
-                    <div className="w-23/100 h-full bg-lime-400"></div>
+                        id="float"
-                    <div className="w-7/100 h-full bg-orange-400"></div>
+                        type="number"
-                    <div className="w-55/100 h-full rounded-r-xl bg-red-400"></div>
+                        step={0.0001}
-                </div>
+                        value={skin.float}
+                        onChange={handleInputChange}
+                    />
                 </div>
+            )}
+            <Slider
+                value={skin.float}
+                maxValue={1}
+                step={0.0001}
+                onChange={handleChange}
+            >
+                <Slider.Track
+                    className="border-0 h-2 rounded-xl"
+                    style={{
+                        background:
+                            "linear-gradient(90deg, var(--color-green-800) 7%, var(--color-green-500) 7%, var(--color-green-500) 15%, var(--color-lime-400) 15%, var(--color-lime-400) 38%, var(--color-orange-400) 38%, var(--color-orange-400) 38%, var(--color-orange-400) 45%, var(--color-red-400) 45%",
+                    }}
+                >
+                    <div
+                        className="h-full rounded-xl"
+                        style={{
+                            background: `linear-gradient(90deg, rgba(0, 0, 0, 0.8) ${skin.min_float * 100}%, transparent ${skin.min_float * 100}%, transparent ${skin.max_float * 100}%, rgba(0, 0, 0, 0.8) ${skin.max_float * 100}%)`,
+                        }}
+                    />
+                    <Slider.Thumb className="w-1" isDisabled={!acceptInput} />
+                </Slider.Track>
+            </Slider>
         </>
     );
 }

app/components/inventory.tsx

@@ -1,56 +1,42 @@
 import { useEffect, useState } from "react";
 import { Skeleton, Surface } from "@heroui/react";
 import { Agent } from "./agent";
-import { Weapon } from "./weapon";
+import { SkinTile } from "./skin_tile";
 import { useNotification } from "~/hooks/notification";
+import { WeaponInfo, AgentInfo } from "~/types/skin";
+import { useApi } from "~/hooks/api";
 
 export function Inventory({ side }: { side: "T" | "CT" }) {
     const [loading, setLoading] = useState(true);
-    const [agent, setAgent] = useState({});
+    const [agent, setAgent] = useState<AgentInfo>();
-    const [gloves, setGloves] = useState({ name: "", color: "", display: "", paint_index: 0, float: 0.0, pattern: 0 });
+    const [gloves, setGloves] = useState<WeaponInfo>();
-    const [knife, setKnife] = useState({ name: "", color: "", display: "", paint_index: 0, float: 0.0, pattern: 0 });
+    const [knife, setKnife] = useState<WeaponInfo>();
-    const [weapons, setWeapons] = useState([]);
+    const [weapons, setWeapons] = useState<Array<WeaponInfo>>([]);
     const { notify } = useNotification();
+    const { get } = useApi();
+
+    const setWeapon = (index:number, newWeapon:WeaponInfo) => {
+        setWeapons(weapons.map((v,i) => (i===index ? newWeapon: v)))
+    }
 
     useEffect(() => {
         const fetch_weapons = async () => {
-            let response = await fetch(
+            let [success, data] = await get(`skin?team=${side}&category=Knives`)
-                `${import.meta.env.VITE_BASE_API_URL}/skin?team=${side}&category=Knives`,
-                { credentials: "include" },
-            )
-                .then((r) => r.json())
-                .catch((e) => {
-                    notify(
-                        {
-                            type: "danger",
-                            loading: false,
-                            title: "An error occured.",
-                            message: `An error occured: ${e}`,
-                        },
-                        10000,
-                    );
-                });
 
-            setKnife(response[0]);
+            setKnife(new WeaponInfo(data[0]));
 
-            response = await fetch(
+            [success, data] = await get(`skin?team=${side}&category=Gloves`)
-                `${import.meta.env.VITE_BASE_API_URL}/skin?team=${side}&category=Gloves`,
+
-                { credentials: "include" },
+            setGloves(new WeaponInfo(data[0]));
-            )
+
-                .then((r) => r.json())
+            [success, data] = await get(`skin?team=${side}&category=Weapons`);
-                .catch((e) => {
+
-                    notify(
+            setWeapons(data.map((item: any) => (new WeaponInfo(item))));
-                        {
+
-                            type: "danger",
+            [success, data] = await get(`agent?team=${side}`);
-                            loading: false,
+
-                            title: "An error occured.",
+            setAgent(new AgentInfo(data));
-                            message: `An error occured: ${e}`,
-                        },
-                        10000,
-                    );
-                });
 
-            setGloves(response[0])
             setLoading(false);
         };
 
@@ -68,11 +54,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-55 rounded-xl" />
-                        <Skeleton className="flex-1 h-40 rounded-xl" />
+                        <Skeleton className="flex-1 h-55 rounded-xl" />
-                        <Skeleton className="flex-1 h-40 rounded-xl" />
+                        <Skeleton className="flex-1 h-55 rounded-xl" />
                     </div>
                 </Surface>
                 <Surface
@@ -81,7 +67,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 +80,32 @@ 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={agent}></Agent>}
                     <div className="flex gap-2">
-                        <Weapon
+                        {knife && (
-                            weapon_id={knife["name"]}
+                            <SkinTile
-                            color={knife["color"]}
+                                skin={knife}
-                            paint_index={knife["paint_index"]}
+                                setSkin={(newSkin) => setKnife(newSkin as WeaponInfo)}
-                            display={knife["display"]}
+                                side={side}
-                            float={knife["float"]}
+                            ></SkinTile>
-                            pattern={knife["pattern"]}
+                        )}
-                        ></Weapon>
+                        {gloves && (
-                        <Weapon
+                            <SkinTile
-                            weapon_id={gloves["name"]}
+                                skin={gloves}
-                            color={gloves["color"]}
+                                setSkin={(newSkin) => setGloves(newSkin as WeaponInfo)}
-                            paint_index={gloves["paint_index"]}
+                                side={side}
-                            display={gloves["display"]}
+                            ></SkinTile>
-                            float={gloves["float"]}
+                        )}
-                            pattern={gloves["pattern"]}
+                        {agent && (
-                        ></Weapon>
+                            <SkinTile
-                        <Weapon
+                                skin={agent}
-                            weapon_id={"agent-4730"}
+                                setSkin={(newSkin) => setAgent(newSkin as AgentInfo)}
-                            color="#8847ff"
+                                side={side}
-                        ></Weapon>
+                            ></SkinTile>
+                        )}
                     </div>
                 </Surface>
                 <Surface
@@ -123,11 +113,12 @@ 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
+                            <SkinTile
-                                key={index}
+                                key={i}
-                                weapon_id="weapon_ak47"
+                                skin={v}
-                                color="#e4ae39"
+                                setSkin={(newWeapon) => setWeapon(i, newWeapon as WeaponInfo)}
+                                side={side}
                             />
                         ))}
                     </div>

app/components/settings.tsx

@@ -9,8 +9,11 @@ import {
     Label,
     Typography,
     Spinner,
+    AlertDialog,
+    useOverlayState,
 } from "@heroui/react";
-import { useState, type Dispatch, type SetStateAction } from "react";
+import { useEffect, useState, type Dispatch, type SetStateAction } from "react";
+import { useApi } from "~/hooks/api";
 import { useAuth } from "~/hooks/auth";
 import { useNotification } from "~/hooks/notification";
 
@@ -21,9 +24,20 @@ export function Settings({
     show: boolean;
     setShow: Dispatch<SetStateAction<boolean>>;
 }) {
-    const { user, update } = useAuth();
+    const { user, update, logout } = useAuth();
     const { notify } = useNotification();
     const [loading, setLoading] = useState(false);
+    const [canClose, setCanClose] = useState(true);
+    const deleteState = useOverlayState();
+    const { get, post } = useApi();
+
+    useEffect(() => {
+        if (!deleteState.isOpen) {
+            setTimeout(() => {
+                setCanClose(true);
+            }, 100);
+        }
+    }, [deleteState]);
 
     const notifySucess = () => {
         notify(
@@ -49,29 +63,7 @@ export function Settings({
 
         const save = async () => {
             setLoading(true);
-            let ok = await fetch(
+            let ok = await post("update", data);
-                `${import.meta.env.VITE_BASE_API_URL}/update`,
-                {
-                    body: JSON.stringify(data),
-                    credentials: "include",
-                    method: "POST",
-                    headers: {
-                        "Content-Type": "application/json",
-                    },
-                },
-            )
-                .then((r) => r.ok)
-                .catch((e) => {
-                    notify(
-                        {
-                            type: "danger",
-                            loading: false,
-                            title: "An error occured.",
-                            message: `An error occured: ${e}`,
-                        },
-                        10000,
-                    );
-                });
 
             if (ok) {
                 await update();
@@ -85,21 +77,7 @@ export function Settings({
 
     const loadFromSteam = async () => {
         setLoading(true);
-        let ok = await fetch(`${import.meta.env.VITE_BASE_API_URL}/reload`, {
+        let [ok, _] = await get("reload");
-            credentials: "include",
-        })
-            .then((r) => r.ok)
-            .catch((e) => {
-                notify(
-                    {
-                        type: "danger",
-                        loading: false,
-                        title: "An error occured.",
-                        message: `An error occured: ${e}`,
-                    },
-                    10000,
-                );
-            });
         
         if (ok) {
             await update();
@@ -109,12 +87,26 @@ export function Settings({
         setLoading(false);
     };
 
+    const deleteAccount = async () => {
+        setLoading(true);
+        let [ok, _] = await get("delete");
+
+        if (ok) {
+            await logout();
+            notifySucess();
+        }
+
+        setLoading(false);
+        deleteState.close();
+    };
+
     return (
         <div>
             <Modal isOpen={show}>
                 <Modal.Backdrop
                     variant="blur"
                     shouldCloseOnInteractOutside={(_element) => {
+                        if (!canClose) return false;
                         setShow(false);
                         return true;
                     }}
@@ -158,10 +150,8 @@ export function Settings({
                                                     image url.
                                                 </Description>
                                             </TextField>
-                                        </Fieldset.Group>
-                                        <Fieldset.Actions className="flex justify-end">
-                                            <div className="flex-1">
                                             <Button
+                                                className="w-full"
                                                 variant="tertiary"
                                                 isPending={loading}
                                                 onPress={() => {
@@ -177,7 +167,28 @@ export function Settings({
                                                     "Load from Steam"
                                                 )}
                                             </Button>
+                                        </Fieldset.Group>
+                                        <Fieldset.Actions className="flex justify-end">
+                                            <div className="flex-1">
+                                                <Button
+                                                    variant="danger"
+                                                    isPending={loading}
+                                                    onPress={() => {
+                                                        deleteState.open();
+                                                        setCanClose(false);
+                                                    }}
+                                                >
+                                                    {loading ? (
+                                                        <Spinner
+                                                            color="current"
+                                                            size="md"
+                                                        />
+                                                    ) : (
+                                                        "Delete account"
+                                                    )}
+                                                </Button>
                                             </div>
+
                                             <Button
                                                 variant="secondary"
                                                 onPress={() => {
@@ -208,6 +219,50 @@ export function Settings({
                     </Modal.Container>
                 </Modal.Backdrop>
             </Modal>
+            <AlertDialog>
+                <AlertDialog.Backdrop
+                    isOpen={deleteState.isOpen}
+                    onOpenChange={deleteState.setOpen}
+                >
+                    <AlertDialog.Container>
+                        <AlertDialog.Dialog>
+                            <AlertDialog.CloseTrigger />
+                            <AlertDialog.Header>
+                                <AlertDialog.Icon status="danger" />
+                                <AlertDialog.Heading>
+                                    Delete account permanently?
+                                </AlertDialog.Heading>
+                            </AlertDialog.Header>
+                            <AlertDialog.Body>
+                                <p>
+                                    This will permanently delete your account
+                                    and all of its data. This action cannot be
+                                    undone.
+                                </p>
+                            </AlertDialog.Body>
+                            <AlertDialog.Footer>
+                                <Button slot="close" variant="tertiary">
+                                    {loading ? (
+                                        <Spinner color="current" size="md" />
+                                    ) : (
+                                        "Cancel"
+                                    )}
+                                </Button>
+                                <Button
+                                    onClick={deleteAccount}
+                                    variant="danger"
+                                >
+                                    {loading ? (
+                                        <Spinner color="current" size="md" />
+                                    ) : (
+                                        "Delete account"
+                                    )}
+                                </Button>
+                            </AlertDialog.Footer>
+                        </AlertDialog.Dialog>
+                    </AlertDialog.Container>
+                </AlertDialog.Backdrop>
+            </AlertDialog>
         </div>
     );
 }

app/components/skin_dialog.tsx

@@ -0,0 +1,182 @@
+import { Button, Input, Modal, Surface, Typography } from "@heroui/react";
+import {
+    useEffect,
+    useState,
+    type ChangeEvent,
+    type Dispatch,
+    type SetStateAction,
+} from "react";
+import { AgentInfo, WeaponInfo } from "~/types/skin";
+import { Float } from "./float";
+import { SkinSelector } from "./skin_selector";
+
+export function SkinDialog({
+    isOpen,
+    setIsOpen,
+    skin,
+    setSkin,
+    side,
+}: {
+    isOpen: boolean;
+    setIsOpen: Dispatch<SetStateAction<boolean>>;
+    skin: WeaponInfo | AgentInfo;
+    setSkin: Dispatch<SetStateAction<WeaponInfo | AgentInfo>>;
+    side: "T" | "CT";
+}) {
+    const [selectorOpen, setSelectorOpen] = useState(false);
+    const [canClose, setCanClose] = useState(true);
+    const [localSkin, setLocalSkin] = useState(skin);
+    const acolor = `${localSkin.color}64`;
+
+    const handleInputChange = (event: ChangeEvent<HTMLInputElement>) => {
+        if (localSkin instanceof AgentInfo) return;
+        const newSkin = new WeaponInfo(localSkin);
+        newSkin.pattern = event.currentTarget.valueAsNumber;
+        setLocalSkin(newSkin);
+    };
+
+    const applySkin = (side: "SIDE" | "BOTH") => {
+        setSkin(localSkin);
+    };
+
+    useEffect(() => {
+        if (!selectorOpen) {
+            setTimeout(() => {
+                setCanClose(true);
+            }, 100);
+        }
+    }, [selectorOpen]);
+
+    useEffect(() => {
+        if (isOpen) {
+            setLocalSkin(skin);
+        }
+    }, [isOpen, skin]);
+
+    return (
+        <>
+            <Modal isOpen={isOpen}>
+                <Modal.Backdrop
+                    variant="blur"
+                    shouldCloseOnInteractOutside={(_element) => {
+                        if (canClose) {
+                            setIsOpen(false);
+                        }
+                        return canClose;
+                    }}
+                >
+                    <Modal.Container size="lg">
+                        <Modal.Dialog>
+                            <Modal.CloseTrigger
+                                onPress={() => {
+                                    if (!selectorOpen) {
+                                        setIsOpen(false);
+                                    }
+                                }}
+                            />
+                            <Modal.Body>
+                                <div className="flex flex-col gap-2">
+                                    <Typography.Heading
+                                        level={4}
+                                        className="py-1 text-wrap"
+                                    >
+                                        {localSkin.display}
+                                    </Typography.Heading>
+                                    <div className="gap-0">
+                                        <div className="bg-mist-700 flex flex-col h-full p-0 rounded-none gap-0 w-full">
+                                            <div
+                                                className="bg-linear-to-b pointer-events-none w-full h-full relative"
+                                                style={{
+                                                    background: `linear-gradient(to bottom, #1f2937, ${acolor})`,
+                                                }}
+                                            >
+                                                <img
+                                                    src={`/skins/${localSkin.name}_${localSkin instanceof WeaponInfo ? localSkin.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: `${localSkin.color}`,
+                                                }}
+                                            ></div>
+                                        </div>
+                                    <Button
+                                        onClick={() => {
+                                            setCanClose(false);
+                                            setSelectorOpen(true);
+                                        }}
+                                        className="w-full rounded-b-xl rounded-t-none"
+                                    >
+                                        Change skin
+                                    </Button>
+                                    </div>
+                                    {localSkin instanceof WeaponInfo && (
+                                        <Float
+                                            skin={localSkin}
+                                            setSkin={setLocalSkin}
+                                            acceptInput
+                                            hasLabel
+                                        />
+                                    )}
+                                    {localSkin instanceof WeaponInfo && (
+                                        <div className="flex items-center gap-2">
+                                            <Typography.Paragraph>
+                                                Pattern:{" "}
+                                            </Typography.Paragraph>
+                                            <Input
+                                                className="flex-1"
+                                                id="pattern"
+                                                type="number"
+                                                step={1}
+                                                value={localSkin.pattern}
+                                                onChange={handleInputChange}
+                                            />
+                                        </div>
+                                    )}
+                                    <Typography.Code>
+                                        Transaction id: {localSkin.id}
+                                    </Typography.Code>
+                                    <div className="flex gap-2 justify-end">
+                                        <div className="flex-1">
+                                            <Button>Inspect</Button>
+                                        </div>
+                                        {localSkin instanceof WeaponInfo && (
+                                            <Button
+                                                onClick={() => {
+                                                    applySkin("BOTH");
+                                                }}
+                                                variant="secondary"
+                                            >
+                                                Apply to Both
+                                            </Button>
+                                        )}
+                                        <Button
+                                            onClick={() => {
+                                                applySkin("SIDE");
+                                            }}
+                                        >
+                                            Apply
+                                            {localSkin instanceof WeaponInfo
+                                                ? ` to ${side}`
+                                                : ""}
+                                        </Button>
+                                    </div>
+                                </div>
+                            </Modal.Body>
+                        </Modal.Dialog>
+                    </Modal.Container>
+                </Modal.Backdrop>
+            </Modal>
+            <SkinSelector
+                isOpen={selectorOpen}
+                setIsOpen={setSelectorOpen}
+                skin={localSkin}
+                setSkin={setLocalSkin}
+                side={side}
+            />
+        </>
+    );
+}

app/components/skin_selector.tsx

@@ -0,0 +1,116 @@
+import { Button, Modal, Typography } from "@heroui/react";
+import { useEffect, useState, type Dispatch, type SetStateAction } from "react";
+import { useApi } from "~/hooks/api";
+import { useNotification } from "~/hooks/notification";
+import { AgentInfo, WeaponInfo } from "~/types/skin";
+
+interface Info {
+    name: string;
+    paint_index: number;
+    display: string;
+    color: string;
+    min_float: number;
+    max_float: number;
+}
+
+export function SkinSelector({
+    isOpen,
+    setIsOpen,
+    skin,
+    setSkin,
+    side,
+}: {
+    isOpen: boolean;
+    setIsOpen: Dispatch<SetStateAction<boolean>>;
+    skin: WeaponInfo | AgentInfo;
+    setSkin: Dispatch<SetStateAction<WeaponInfo | AgentInfo>>;
+    side: "T" | "CT" | "BOTH";
+}) {
+    const [skins, setSkins] = useState<Array<Info>>([]);
+    const { notify } = useNotification();
+    const { get } = useApi();
+
+    const setPaint = (v: Info) => {
+        if (skin instanceof WeaponInfo) {
+            const newSkin = new WeaponInfo(skin);
+            newSkin.name = v.name;
+            newSkin.paint_index = v.paint_index;
+            newSkin.display = v.display === "" ? newSkin.display : newSkin.display.split("|")[0] + " | " + v.display;
+            newSkin.min_float = v.min_float;
+            newSkin.max_float = v.max_float;
+            newSkin.color = v.color;
+            setSkin(newSkin);
+        } else {
+            const newSkin = new AgentInfo(skin);
+            newSkin.name = v.name;
+            newSkin.color = v.color;
+            setSkin(newSkin);
+        }
+    };
+
+    useEffect(() => {
+        const fetchSkins = async () => {
+            let [_, response] = await get(`index?weapon=${skin.weapon_id}&team=${side}${skin instanceof AgentInfo ? "&agent=true" : ""}&gloves=${skin.name.includes("gloves") || skin.name.includes("wraps")}`)
+
+            setSkins(response);
+        };
+        if (skins.length === 0 && isOpen) {
+            fetchSkins();
+        }
+    }, [isOpen]);
+
+    return (
+        <Modal isOpen={isOpen}>
+            <Modal.Backdrop
+                variant="blur"
+                shouldCloseOnInteractOutside={(_element) => {
+                    setIsOpen(false);
+                    return true;
+                }}
+            >
+                <Modal.Container size="cover">
+                    <Modal.Dialog>
+                        <Modal.CloseTrigger
+                            onPress={() => {
+                                setIsOpen(false);
+                            }}
+                        />
+                        <Modal.Body className="mt-6">
+                            <div className="grid grid-cols-4 gap-2">
+                                {skins &&
+                                    skins.map((v, i) => (
+                                        <Button
+                                            onClick={() => {
+                                                setPaint(v);
+                                                setIsOpen(false);
+                                            }}
+                                            className="flex flex-col w-full h-fit items-center justify-start rounded-none p-0"
+                                            style={{
+                                                background: `linear-gradient(to bottom, #1f2937, ${v.color}64)`,
+                                            }}
+                                        >
+                                            <img
+                                                key={i}
+                                                src={`/skins/${v.name}_${skin instanceof WeaponInfo ? v.paint_index : 0}.png`}
+                                                className="pointer-events-none object-contain object-bottom"
+                                                alt="Weapon image"
+                                            />
+                                            <Typography.Heading level={3}>
+                                                {v.display}
+                                            </Typography.Heading>
+                                            <div
+                                                className="h-1 w-full"
+                                                style={{
+                                                    backgroundColor: v.color,
+                                                }}
+                                            ></div>
+                                        </Button>
+                                    ))}
+                            </div>
+                        </Modal.Body>
+                    </Modal.Dialog>
+                </Modal.Container>
+            </Modal.Backdrop>
+        </Modal>
+    );
+}

app/components/skin_tile.tsx

@@ -0,0 +1,68 @@
+import { Button, Typography } from "@heroui/react";
+import { Float } from "./float";
+import { useState, type Dispatch, type SetStateAction } from "react";
+import { SkinDialog } from "./skin_dialog";
+import { WeaponInfo, AgentInfo } from "~/types/skin";
+
+export function SkinTile({
+    skin,
+    setSkin,
+    side,
+}: {
+    skin: WeaponInfo | AgentInfo;
+    setSkin: Dispatch<SetStateAction<WeaponInfo | AgentInfo>>
+    side: "T" | "CT";
+}) {
+    const [isDialogOpen, setIsDialogOpen] = useState(false);
+    const acolor = `${skin.color}64`;
+    return (
+        <>
+            <SkinDialog
+                isOpen={isDialogOpen}
+                setIsOpen={setIsDialogOpen}
+                skin={skin}
+                setSkin={setSkin}
+                side={side}
+            />
+            <Button
+                onClick={() => setIsDialogOpen(true)}
+                className="bg-mist-700 flex flex-col h-full p-0 rounded-none gap-0 hover:bg-indigo-800 active:bg-indigo-900"
+            >
+                <div className="flex flex-col w-full h-full">
+                    <div
+                        className="bg-linear-to-b pointer-events-none w-full h-full"
+                        style={{
+                            background: `linear-gradient(to bottom, #1f2937, ${acolor})`,
+                        }}
+                    >
+                        <img
+                            src={`/skins/${skin.name}_${skin instanceof WeaponInfo ? skin.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: `${skin.color}` }}
+                    ></div>
+                    <div className="px-2">
+                        <Typography.Heading
+                            level={6}
+                            className="py-1 text-wrap"
+                        >
+                            {skin.display}
+                        </Typography.Heading>
+                        {skin instanceof WeaponInfo && (
+                            <Float skin={skin} setSkin={setSkin} />
+                        )}
+                        {skin instanceof WeaponInfo && (
+                            <Typography.Paragraph>
+                                Pattern: {skin.pattern}
+                            </Typography.Paragraph>
+                        )}
+                    </div>
+                </div>
+            </Button>
+        </>
+    );
+}

app/components/weapon.tsx

@@ -1,48 +0,0 @@
-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`;
-    return (
-        <Button className="bg-mist-700 flex flex-col h-full p-0 rounded-none gap-0 hover:bg-indigo-800 active:bg-indigo-900">
-            <div className="flex flex-col w-full h-full">
-                <div
-                    className="bg-linear-to-b pointer-events-none w-full h-full"
-                    style={{
-                        background: `linear-gradient(to bottom, #1f2937, ${acolor})`,
-                    }}
-                >
-                    <img
-                        src={`/skins/${weapon_id}_${paint_index}.png`}
-                        className="pointer-events-none object-contain object-bottom h-full"
-                    />
-                </div>
-                <div
-                    className={`h-1 w-full`}
-                    style={{ background: `${color}` }}
-                ></div>
-                <Typography.Heading level={6} className="px-2 text-wrap">
-                    {display}
-                </Typography.Heading>
-                <Float float={float} />
-                <Typography.Paragraph className="px-2">
-                    Pattern: {pattern}
-                </Typography.Paragraph>
-            </div>
-        </Button>
-    );
-}

app/hooks/api.tsx

@@ -0,0 +1,96 @@
+import {
+    useState,
+    createContext,
+    useContext,
+    type PropsWithChildren,
+} from "react";
+import { useNotification } from "./notification";
+import type { NotificationType } from "~/components/notification";
+
+type ApiContextType = {
+    get: (arg0: string) => Promise<[boolean, any]>;
+    post: (arg0: string, arg1: any) => Promise<boolean>;
+};
+
+const apiContext = createContext<ApiContextType>({
+    get: async (_: string) => {
+        return [true, undefined];
+    },
+    post: async (_a: string, _b: any) => {
+        return true;
+    },
+});
+
+export function ApiProvider({ children }: PropsWithChildren) {
+    const { notify } = useNotification();
+
+    const get = async (endpoint: string): Promise<[boolean, any]> => {
+        let response = await fetch(
+            `${import.meta.env.VITE_BASE_API_URL}/${endpoint}`,
+            { credentials: "include" },
+        ).catch((e) => notifyError(notify, e.code, e.message));
+
+        if (!response) {
+            notifyError(notify, 1, "No data in response from server.");
+            return [false, undefined];
+        }
+
+        if (!response.ok) {
+            notifyError(notify, response.status, await response.text());
+            return [false, undefined];
+        }
+        const text = await response.text();
+        const data = text ? JSON.parse(text) : undefined;
+
+        return [true, data];
+    };
+
+    const post = async (endpoint: string, data: any) => {
+        let response = await fetch(
+            `${import.meta.env.VITE_BASE_API_URL}/${endpoint}`,
+            {
+                credentials: "include",
+                method: "POST",
+                body: JSON.stringify(data),
+                headers: {
+                    "Content-Type": "application/json",
+                },
+            },
+        ).catch((e) => notifyError(notify, e.code, e.message));
+
+        if (!response) {
+            notifyError(notify, 1, "No data in response from server.");
+            return false;
+        } else if (!response.ok) {
+            notifyError(notify, response.status, await response.text());
+            return false;
+        }
+        return true;
+    };
+
+    return (
+        <apiContext.Provider value={{ get, post }}>
+            {children}
+        </apiContext.Provider>
+    );
+}
+
+export function useApi() {
+    return useContext(apiContext);
+}
+
+function notifyError(
+    notify: (arg0: NotificationType, arg1: number) => void,
+    code: number,
+    message: string,
+) {
+    notify(
+        {
+            type: "danger",
+            loading: false,
+            title: "Oops, something went wrong.",
+            message: `There was an issue on our end: ${message} (Error ${code})`,
+        },
+        10000,
+    );
+}

app/hooks/auth.tsx

@@ -7,6 +7,7 @@ import {
 } from "react";
 import { useLocation, useSearchParams } from "react-router";
 import { useNotification } from "./notification";
+import { useApi } from "./api";
 
 type User = {
     id: string;
@@ -39,6 +40,7 @@ export function AuthProvider({ children }: PropsWithChildren) {
     const [searchParams, setSeachParams] = useSearchParams();
     const { notify } = useNotification();
     const location = useLocation();
+    const { get } = useApi();
 
     useEffect(() => {
         const load = async () => {
@@ -56,22 +58,7 @@ export function AuthProvider({ children }: PropsWithChildren) {
                 );
                 let query = searchParams.toString();
                 setSeachParams({}, { replace: true });
-                let response = await fetch(
+                await get(`login?${query}`);
-                    `${import.meta.env.VITE_BASE_API_URL}/login?${query}`,
-                    { credentials: "include" },
-                )
-                    .then((r) => r.text())
-                    .catch((e) => {
-                        notify(
-                            {
-                                type: "danger",
-                                loading: false,
-                                title: "An error occured.",
-                                message: `An error occured: ${e}`,
-                            },
-                            10000,
-                        );
-                    });
             }
 
             if (await update()) {
@@ -98,10 +85,8 @@ export function AuthProvider({ children }: PropsWithChildren) {
     };
 
     const logout = async () => {
-        await fetch(import.meta.env.VITE_BASE_API_URL + "/logout", {
+        const [ok, _] = await get("logout");
-            credentials: "include",
+        if (ok) {
-        })
-            .then(() => {
             setUser(null);
             notify(
                 {
@@ -112,36 +97,11 @@ export function AuthProvider({ children }: PropsWithChildren) {
                 },
                 2000,
             );
-            })
+        }
-            .catch((e) => {
-                notify(
-                    {
-                        type: "danger",
-                        loading: false,
-                        title: "An error occured.",
-                        message: `An error occured: ${e}`,
-                    },
-                    10000,
-                );
-            });
     };
 
     const update = async () => {
-        let data = await fetch(`${import.meta.env.VITE_BASE_API_URL}/me`, {
+        let [_, data] = await get("me");
-            credentials: "include",
-        })
-            .then((r) => r.json())
-            .catch((e) => {
-                notify(
-                    {
-                        type: "danger",
-                        loading: false,
-                        title: "An error occured.",
-                        message: `An error occured: ${e}`,
-                    },
-                    10000,
-                );
-            });
 
         if (data !== undefined) {
             setUser(data);

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 pt-20 min-h-dvh ${fixedHeight && "h-dvh"}`}>
-                <div className="flex flex-col flex-1">
+                <div className="flex flex-col flex-1 min-h-0">
                     {needsLogin ? <Guard>{children}</Guard> : children}
                 </div>
                 <Footer />

app/pages/inventory.tsx

@@ -1,17 +1,17 @@
 import { useState } from "react";
 import Base from "./base";
-import { Surface, Tabs } from "@heroui/react";
+import { Button, Surface, Tabs } from "@heroui/react";
 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"
             >
-                <div className="w-full h-min flex">
+                <div className="w-full h-min flex justify-between items-center">
                     <Tabs
                         selectedKey={side}
                         onSelectionChange={(key) => {
@@ -40,6 +40,7 @@ export function InventoryPage() {
                             </Tabs.List>
                         </Tabs.ListContainer>
                     </Tabs>
+                    <Button>Need help?</Button>
                 </div>
                 <Inventory side={side} />
             </Surface>

app/root.tsx

@@ -11,6 +11,7 @@ import type { Route } from "./+types/root";
 import "./app.css";
 import { AuthProvider } from "./hooks/auth";
 import { NotificationProvider } from "./hooks/notification";
+import { ApiProvider } from "./hooks/api";
 
 export const links: Route.LinksFunction = () => [
     { rel: "preconnect", href: "https://fonts.googleapis.com" },
@@ -39,7 +40,9 @@ export function Layout({ children }: { children: React.ReactNode }) {
             </head>
             <body className="bg-background text-foreground">
                 <NotificationProvider>
+                    <ApiProvider>
                         <AuthProvider>{children}</AuthProvider>
+                    </ApiProvider>
                 </NotificationProvider>
                 <ScrollRestoration />
                 <Scripts />

app/types/skin.ts

@@ -0,0 +1,28 @@
+export class WeaponInfo {
+  id!: string;
+  weapon_id!: string;
+  name!: string;
+  color!: string;
+  display!: string;
+  paint_index!: number;
+  float!: number;
+  min_float!: number;
+  max_float!: number;
+  pattern!: number;
+  
+  constructor(data: WeaponInfo) {
+    Object.assign(this, data);
+  }
+}
+
+export class AgentInfo {
+  id!: string;
+  weapon_id!: string;
+  name!: string;
+  color!: string;
+  display!: string;
+  
+  constructor(data: AgentInfo) {
+    Object.assign(this, data);
+  }
+}