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

Inventory and dialog revamp from user feedback

Browse Source
This commit is contained in:
AINDUSTRIES
2026-09-30 01:13:09 +02:00
parent 038451e0f3
commit b22ee15a24
2 changed files with 29 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
app/components/skin_dialog.tsx
View File

@@ -37,7 +37,7 @@ export function SkinDialog({
const applySkin = (side: "SIDE" | "BOTH") => {
setSkin(localSkin);
}
};
useEffect(() => {
if (!selectorOpen) {
@@ -82,14 +82,8 @@ export function SkinDialog({
>
{localSkin.display}
</Typography.Heading>
<Button
onClick={() => {
setCanClose(false);
setSelectorOpen(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="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={{
@@ -101,25 +95,6 @@ export function SkinDialog({
className="pointer-events-none object-contain object-bottom h-full"
alt="Weapon image"
/>
<Surface
className="rounded-full w-fit h-fit p-2 absolute bottom-2 right-2"
variant="secondary"
>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
strokeWidth={1.5}
stroke="currentColor"
className="size-6 m-0"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0 1 15.75 21H5.25A2.25 2.25 0 0 1 3 18.75V8.25A2.25 2.25 0 0 1 5.25 6H10"
/>
</svg>
</Surface>
</div>
<div
className={`h-1 w-full`}
@@ -128,7 +103,16 @@ export function SkinDialog({
}}
></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}
@@ -156,12 +140,24 @@ export function SkinDialog({
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">
<Button
onClick={() => {
applySkin("BOTH");
}}
variant="secondary"
>
Apply to Both
</Button>
)}
<Button onClick={() => {applySkin("SIDE")}}>
<Button
onClick={() => {
applySkin("SIDE");
}}
>
Apply
{localSkin instanceof WeaponInfo
? ` to ${side}`

5
app/pages/inventory.tsx
View File

@@ -1,6 +1,6 @@
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() {
@@ -11,7 +11,7 @@ export function InventoryPage() {
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>