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

Reworked base weapon display

Browse Source
This commit is contained in:
AINDUSTRIES
2026-09-08 18:26:17 +02:00
parent 9a1bf23fcf
commit 843bf30cae
2 changed files with 49 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
app/components/float.tsx Normal file
View File

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

44
app/components/weapon.tsx
View File

@@ -1,24 +1,46 @@
import { Button } from "@heroui/react"; import { Button, Surface, Typography } from "@heroui/react";
import { Float } from "./float";
export function Weapon({ export function Weapon({
weapon_id, weapon_id,
color, color,
display = "Weapon",
float = 0,
pattern = 0,
paint_index = 0, paint_index = 0,
}: { }: {
weapon_id: string; weapon_id: string;
color: string; color: string;
display?: string;
float?: number;
pattern?: number;
paint_index?: number; paint_index?: number;
}) { }) {
const acolor = `${color}64` const acolor = `${color}64`;
return ( return (
<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"> <Surface className="bg-mist-700">
<div className="bg-linear-to-b pointer-events-none" style={{background: `linear-gradient(to bottom, #1f2937, ${acolor})`}}> <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">
<img <div className="flex flex-col">
src={`/skins/${weapon_id}_${paint_index}.png`} <div
className="pointer-events-none" className="bg-linear-to-b pointer-events-none"
/> style={{
</div> background: `linear-gradient(to bottom, #1f2937, ${acolor})`,
<div className={`h-1 w-full`} style={{background: `${color}`}}></div> }}
</Button> >
<img
src={`/skins/${weapon_id}_${paint_index}.png`}
className="pointer-events-none"
/>
</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>
); );
} }