Porning/app
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Using new api

Browse Source
This commit is contained in:
AINDUSTRIES
2026-09-11 00:03:23 +02:00
parent b41265842f
commit d72d635702
1 changed files with 99 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

135
app/components/inventory.tsx
View File

@@ -4,12 +4,22 @@ import { Agent } from "./agent";
import { Weapon } from "./weapon"; import { Weapon } from "./weapon";
import { useNotification } from "~/hooks/notification"; 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" }) { export function Inventory({ side }: { side: "T" | "CT" }) {
const [loading, setLoading] = useState(true); const [loading, setLoading] = useState(true);
const [agent, setAgent] = useState({}); const [agent, setAgent] = useState<SkinInfo>();
const [gloves, setGloves] = useState({ name: "", color: "", display: "", paint_index: 0, float: 0.0, pattern: 0 }); const [gloves, setGloves] = useState<SkinInfo>();
const [knife, setKnife] = useState({ name: "", color: "", display: "", paint_index: 0, float: 0.0, pattern: 0 }); const [knife, setKnife] = useState<SkinInfo>();
const [weapons, setWeapons] = useState([]); const [weapons, setWeapons] = useState<Array<SkinInfo>>([]);
const { notify } = useNotification(); const { notify } = useNotification();
useEffect(() => { 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); 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" className="flex flex-col rounded-xl w-1/3 p-4 gap-2"
variant="secondary" 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"> <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> </div>
</Surface> </Surface>
<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"> <div className="absolute inset-4 flex-1 grid grid-cols-5 gap-2 overflow-y-scroll">
{Array.from({ length: 50 }, (_, index) => ( {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> </div>
</Surface> </Surface>
@@ -91,31 +143,38 @@ export function Inventory({ side }: { side: "T" | "CT" }) {
return ( return (
<div className="flex flex-1 gap-2 min-h-0"> <div className="flex flex-1 gap-2 min-h-0">
<Surface <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" variant="secondary"
> >
<Agent side={side}></Agent> {agent && <Agent agent_id={agent["name"]}></Agent>}
<div className="flex gap-2"> <div className="flex gap-2">
<Weapon {knife && (
weapon_id={knife["name"]} <Weapon
color={knife["color"]} weapon_id={knife["name"]}
paint_index={knife["paint_index"]} color={knife["color"]}
display={knife["display"]} paint_index={knife["paint_index"]}
float={knife["float"]} display={knife["display"]}
pattern={knife["pattern"]} float={knife["float"]}
></Weapon> pattern={knife["pattern"]}
<Weapon ></Weapon>
weapon_id={gloves["name"]} )}
color={gloves["color"]} {gloves && (
paint_index={gloves["paint_index"]} <Weapon
display={gloves["display"]} weapon_id={gloves["name"]}
float={gloves["float"]} color={gloves["color"]}
pattern={gloves["pattern"]} paint_index={gloves["paint_index"]}
></Weapon> display={gloves["display"]}
<Weapon float={gloves["float"]}
weapon_id={"agent-4730"} pattern={gloves["pattern"]}
color="#8847ff" ></Weapon>
></Weapon> )}
{agent && (
<Weapon
weapon_id={agent["name"]}
color={agent["color"]}
display={agent["display"]}
></Weapon>
)}
</div> </div>
</Surface> </Surface>
<Surface <Surface
@@ -123,11 +182,15 @@ export function Inventory({ side }: { side: "T" | "CT" }) {
variant="secondary" variant="secondary"
> >
<div className="absolute inset-4 flex-1 grid grid-cols-5 gap-2 overflow-y-scroll"> <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 <Weapon
key={index} key={i}
weapon_id="weapon_ak47" weapon_id={v.name}
color="#e4ae39" color={v.color}
paint_index={v.paint_index}
display={v.display}
float={v.float}
pattern={v.pattern}
/> />
))} ))}
</div> </div>