176 lines
6.3 KiB
TypeScript
176 lines
6.3 KiB
TypeScript
import { useEffect, useState } from "react";
|
|
import { Skeleton, Surface } from "@heroui/react";
|
|
import { Agent } from "./agent";
|
|
import { SkinTile } from "./skin_tile";
|
|
import { useNotification } from "~/hooks/notification";
|
|
import { WeaponInfo, AgentInfo } from "~/types/skin";
|
|
|
|
export function Inventory({ side }: { side: "T" | "CT" }) {
|
|
const [loading, setLoading] = useState(true);
|
|
const [agent, setAgent] = useState<AgentInfo>();
|
|
const [gloves, setGloves] = useState<WeaponInfo>();
|
|
const [knife, setKnife] = useState<WeaponInfo>();
|
|
const [weapons, setWeapons] = useState<Array<WeaponInfo>>([]);
|
|
const { notify } = useNotification();
|
|
|
|
useEffect(() => {
|
|
const fetch_weapons = async () => {
|
|
let response = await fetch(
|
|
`${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(new WeaponInfo(response[0]));
|
|
|
|
response = await fetch(
|
|
`${import.meta.env.VITE_BASE_API_URL}/skin?team=${side}&category=Gloves`,
|
|
{ credentials: "include" },
|
|
)
|
|
.then((r) => r.json())
|
|
.catch((e) => {
|
|
notify(
|
|
{
|
|
type: "danger",
|
|
loading: false,
|
|
title: "An error occured.",
|
|
message: `An error occured: ${e}`,
|
|
},
|
|
10000,
|
|
);
|
|
});
|
|
|
|
setGloves(new WeaponInfo(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.map((item: any) => (new WeaponInfo(item))));
|
|
|
|
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(new AgentInfo(response));
|
|
|
|
setLoading(false);
|
|
};
|
|
|
|
if (loading) fetch_weapons();
|
|
}, [loading]);
|
|
|
|
useEffect(() => {
|
|
setLoading(true);
|
|
}, [side]);
|
|
|
|
if (loading) {
|
|
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"
|
|
variant="secondary"
|
|
>
|
|
<Skeleton className="flex-1 h-55 w-full rounded-xl" />
|
|
<div className="flex gap-2">
|
|
<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
|
|
className="flex-1 flex flex-col rounded-xl w-2/3 p-4"
|
|
variant="secondary"
|
|
>
|
|
<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-55 rounded-xl"
|
|
/>
|
|
))}
|
|
</div>
|
|
</Surface>
|
|
</div>
|
|
);
|
|
} else {
|
|
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 min-h-0"
|
|
variant="secondary"
|
|
>
|
|
{agent && <Agent agent_id={agent["name"]}></Agent>}
|
|
<div className="flex gap-2">
|
|
{knife && (
|
|
<SkinTile
|
|
skin={knife}
|
|
></SkinTile>
|
|
)}
|
|
{gloves && (
|
|
<SkinTile
|
|
skin={gloves}
|
|
></SkinTile>
|
|
)}
|
|
{agent && (
|
|
<SkinTile
|
|
skin={agent}
|
|
></SkinTile>
|
|
)}
|
|
</div>
|
|
</Surface>
|
|
<Surface
|
|
className="flex-1 flex flex-col rounded-xl w-2/3 p-4"
|
|
variant="secondary"
|
|
>
|
|
<div className="absolute inset-4 flex-1 grid grid-cols-5 gap-2 overflow-y-scroll">
|
|
{weapons.map((v, i) => (
|
|
<SkinTile
|
|
key={i}
|
|
skin={v}
|
|
/>
|
|
))}
|
|
</div>
|
|
</Surface>
|
|
</div>
|
|
);
|
|
}
|
|
}
|