Using new api
This commit is contained in:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user