Progress on implementation of skin selector
This commit is contained in:
@@ -1,10 +1,11 @@
|
||||
import { Surface } from "@heroui/react";
|
||||
import type { AgentInfo } from "~/types/skin";
|
||||
|
||||
export function Agent({ agent_id }: { agent_id: string }) {
|
||||
export function Agent({ agent }: { agent: AgentInfo }) {
|
||||
return (
|
||||
<Surface className="bg-[#1f2937] flex justify-center flex-1 min-h-0 p-4">
|
||||
<img
|
||||
src={`/skins/${agent_id}_big.png`}
|
||||
src={`/skins/${agent.name}_big.png`}
|
||||
className="pointer-events-none object-contain object-bottom h-full w-full"
|
||||
alt="Agent image"
|
||||
/>
|
||||
|
||||
@@ -1,31 +1,60 @@
|
||||
import { Slider, Label } from "@heroui/react";
|
||||
import { useEffect, useState } from "react";
|
||||
import { Slider, Label, Typography, Input } from "@heroui/react";
|
||||
import {
|
||||
useEffect,
|
||||
type ChangeEvent,
|
||||
type Dispatch,
|
||||
type SetStateAction,
|
||||
} from "react";
|
||||
import { AgentInfo, WeaponInfo } from "~/types/skin";
|
||||
|
||||
export function Float({
|
||||
float,
|
||||
minFloat = 0,
|
||||
maxFloat = 1,
|
||||
skin,
|
||||
setSkin,
|
||||
acceptInput = false,
|
||||
hasLabel = false,
|
||||
}: {
|
||||
float: number;
|
||||
skin: WeaponInfo;
|
||||
setSkin: Dispatch<SetStateAction<WeaponInfo | AgentInfo>>;
|
||||
minFloat?: number;
|
||||
maxFloat?: number;
|
||||
acceptInput?: boolean;
|
||||
hasLabel?: boolean;
|
||||
}) {
|
||||
const [value, setValue] = useState(float);
|
||||
|
||||
useEffect(() => {
|
||||
setValue(Math.max(minFloat, Math.min(maxFloat, float)));
|
||||
}, [float, minFloat, maxFloat]);
|
||||
|
||||
const handleChange = (newValue: number | number[]) => {
|
||||
const val = Array.isArray(newValue) ? newValue[0]: newValue;
|
||||
setValue(Math.max(minFloat, Math.min(maxFloat, val)));
|
||||
const val = Array.isArray(newValue) ? newValue[0] : newValue;
|
||||
const newSkin = new WeaponInfo(skin);
|
||||
newSkin.float = Math.max(skin.min_float, Math.min(skin.max_float, val));
|
||||
setSkin(newSkin);
|
||||
};
|
||||
|
||||
const handleInputChange = (event: ChangeEvent<HTMLInputElement>) => {
|
||||
const val = event.currentTarget.valueAsNumber;
|
||||
const newSkin = new WeaponInfo(skin);
|
||||
newSkin.float = Math.max(skin.min_float, Math.min(skin.max_float, val));
|
||||
setSkin(newSkin);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Slider value={value} maxValue={1} step={0.0001} onChange={handleChange}>
|
||||
{hasLabel && (
|
||||
<div className="flex items-center gap-2">
|
||||
<Typography.Paragraph>Float</Typography.Paragraph>
|
||||
<Input
|
||||
className="flex-1"
|
||||
id="float"
|
||||
type="number"
|
||||
step={0.0001}
|
||||
value={skin.float}
|
||||
onChange={handleInputChange}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
<Slider
|
||||
value={skin.float}
|
||||
maxValue={1}
|
||||
step={0.0001}
|
||||
onChange={handleChange}
|
||||
>
|
||||
<Slider.Track
|
||||
className="border-0 h-2 rounded-xl"
|
||||
style={{
|
||||
@@ -36,7 +65,7 @@ export function Float({
|
||||
<div
|
||||
className="h-full rounded-xl"
|
||||
style={{
|
||||
background: `linear-gradient(90deg, rgba(0, 0, 0, 0.8) ${minFloat*100}%, transparent ${minFloat*100}%, transparent ${maxFloat*100}%, rgba(0, 0, 0, 0.8) ${maxFloat*100}%)`,
|
||||
background: `linear-gradient(90deg, rgba(0, 0, 0, 0.8) ${skin.min_float * 100}%, transparent ${skin.min_float * 100}%, transparent ${skin.max_float * 100}%, rgba(0, 0, 0, 0.8) ${skin.max_float * 100}%)`,
|
||||
}}
|
||||
/>
|
||||
<Slider.Thumb className="w-1" isDisabled={!acceptInput} />
|
||||
|
||||
@@ -137,23 +137,23 @@ export function Inventory({ side }: { side: "T" | "CT" }) {
|
||||
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>}
|
||||
{agent && <Agent agent={agent}></Agent>}
|
||||
<div className="flex gap-2">
|
||||
{knife && (
|
||||
<SkinTile
|
||||
skin={knife}
|
||||
skinInfo={knife}
|
||||
side={side}
|
||||
></SkinTile>
|
||||
)}
|
||||
{gloves && (
|
||||
<SkinTile
|
||||
skin={gloves}
|
||||
skinInfo={gloves}
|
||||
side={side}
|
||||
></SkinTile>
|
||||
)}
|
||||
{agent && (
|
||||
<SkinTile
|
||||
skin={agent}
|
||||
skinInfo={agent}
|
||||
side={side}
|
||||
></SkinTile>
|
||||
)}
|
||||
@@ -167,7 +167,7 @@ export function Inventory({ side }: { side: "T" | "CT" }) {
|
||||
{weapons.map((v, i) => (
|
||||
<SkinTile
|
||||
key={i}
|
||||
skin={v}
|
||||
skinInfo={v}
|
||||
side={side}
|
||||
/>
|
||||
))}
|
||||
|
||||
@@ -1,107 +1,186 @@
|
||||
import { Button, Modal, Surface, Typography } from "@heroui/react";
|
||||
import type { Dispatch, SetStateAction } from "react";
|
||||
import { Button, Input, Modal, Surface, Typography } from "@heroui/react";
|
||||
import {
|
||||
useEffect,
|
||||
useState,
|
||||
type ChangeEvent,
|
||||
type Dispatch,
|
||||
type SetStateAction,
|
||||
} from "react";
|
||||
import { AgentInfo, WeaponInfo } from "~/types/skin";
|
||||
import { Float } from "./float";
|
||||
import { SkinSelector } from "./skin_selector";
|
||||
|
||||
export function SkinDialog({
|
||||
isOpen,
|
||||
setIsOpen,
|
||||
skin,
|
||||
side
|
||||
setSkin,
|
||||
side,
|
||||
}: {
|
||||
isOpen: boolean;
|
||||
setIsOpen: Dispatch<SetStateAction<boolean>>;
|
||||
skin: WeaponInfo | AgentInfo;
|
||||
side: "T" | "CT"
|
||||
setSkin: Dispatch<SetStateAction<WeaponInfo | AgentInfo>>;
|
||||
side: "T" | "CT";
|
||||
}) {
|
||||
const acolor = `${skin.color}64`;
|
||||
const [selectorOpen, setSelectorOpen] = useState(false);
|
||||
const [canClose, setCanClose] = useState(true);
|
||||
const [localSkin, setLocalSkin] = useState(skin);
|
||||
|
||||
const handleInputChange = (event: ChangeEvent<HTMLInputElement>) => {
|
||||
if (localSkin instanceof AgentInfo) return;
|
||||
const newSkin = new WeaponInfo(localSkin);
|
||||
newSkin.pattern = event.currentTarget.valueAsNumber;
|
||||
setLocalSkin(newSkin);
|
||||
};
|
||||
|
||||
const applySkin = (side: "SIDE" | "BOTH") => {
|
||||
setSkin(localSkin);
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
if (!selectorOpen) {
|
||||
setTimeout(() => {
|
||||
setCanClose(true);
|
||||
}, 100);
|
||||
}
|
||||
}, [selectorOpen]);
|
||||
|
||||
useEffect(() => {
|
||||
if (isOpen) {
|
||||
setLocalSkin(skin);
|
||||
}
|
||||
}, [isOpen, skin]);
|
||||
|
||||
return (
|
||||
<Modal isOpen={isOpen}>
|
||||
<Modal.Backdrop
|
||||
variant="blur"
|
||||
shouldCloseOnInteractOutside={(_element) => {
|
||||
setIsOpen(false);
|
||||
return true;
|
||||
}}
|
||||
>
|
||||
<Modal.Container size="lg">
|
||||
<Modal.Dialog>
|
||||
<Modal.CloseTrigger
|
||||
onPress={() => {
|
||||
setIsOpen(false);
|
||||
}}
|
||||
/>
|
||||
<Modal.Body>
|
||||
<div className="flex flex-col gap-2">
|
||||
<Typography.Heading
|
||||
level={4}
|
||||
className="py-1 text-wrap"
|
||||
>
|
||||
{skin.display}
|
||||
</Typography.Heading>
|
||||
<Button 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="bg-linear-to-b pointer-events-none w-full h-full relative"
|
||||
style={{
|
||||
background: `linear-gradient(to bottom, #1f2937, ${acolor})`,
|
||||
}}
|
||||
>
|
||||
<img
|
||||
src={`/skins/${skin.name}_${skin instanceof WeaponInfo ? skin.paint_index : 0}.png`}
|
||||
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"
|
||||
<>
|
||||
<Modal isOpen={isOpen}>
|
||||
<Modal.Backdrop
|
||||
variant="blur"
|
||||
shouldCloseOnInteractOutside={(_element) => {
|
||||
if (canClose) {
|
||||
setIsOpen(false);
|
||||
}
|
||||
return canClose;
|
||||
}}
|
||||
>
|
||||
<Modal.Container size="lg">
|
||||
<Modal.Dialog>
|
||||
<Modal.CloseTrigger
|
||||
onPress={() => {
|
||||
if (!selectorOpen) {
|
||||
setIsOpen(false);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<Modal.Body>
|
||||
<div className="flex flex-col gap-2">
|
||||
<Typography.Heading
|
||||
level={4}
|
||||
className="py-1 text-wrap"
|
||||
>
|
||||
{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="bg-linear-to-b pointer-events-none w-full h-full relative"
|
||||
style={{
|
||||
background: `linear-gradient(to bottom, #1f2937, ${acolor})`,
|
||||
}}
|
||||
>
|
||||
<img
|
||||
src={`/skins/${localSkin.name}_${localSkin instanceof WeaponInfo ? localSkin.paint_index : 0}.png`}
|
||||
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"
|
||||
>
|
||||
<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>
|
||||
<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`}
|
||||
style={{
|
||||
background: `${localSkin.color}`,
|
||||
}}
|
||||
></div>
|
||||
</div>
|
||||
<div
|
||||
className={`h-1 w-full`}
|
||||
style={{
|
||||
background: `${skin.color}`,
|
||||
}}
|
||||
></div>
|
||||
</Button>
|
||||
{localSkin instanceof WeaponInfo && (
|
||||
<Float
|
||||
skin={localSkin}
|
||||
setSkin={setLocalSkin}
|
||||
acceptInput
|
||||
hasLabel
|
||||
/>
|
||||
)}
|
||||
{localSkin instanceof WeaponInfo && (
|
||||
<div className="flex items-center gap-2">
|
||||
<Typography.Paragraph>
|
||||
Pattern:{" "}
|
||||
</Typography.Paragraph>
|
||||
<Input
|
||||
className="flex-1"
|
||||
id="pattern"
|
||||
type="number"
|
||||
step={1}
|
||||
value={localSkin.pattern}
|
||||
onChange={handleInputChange}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
<Typography.Code>
|
||||
Transaction id: {localSkin.id}
|
||||
</Typography.Code>
|
||||
<div className="flex gap-2 justify-end">
|
||||
{localSkin instanceof WeaponInfo && (
|
||||
<Button onClick={() => {applySkin("BOTH")}} variant="secondary">
|
||||
Apply to Both
|
||||
</Button>
|
||||
)}
|
||||
<Button onClick={() => {applySkin("SIDE")}}>
|
||||
Apply
|
||||
{localSkin instanceof WeaponInfo
|
||||
? ` to ${side}`
|
||||
: ""}
|
||||
</Button>
|
||||
</div>
|
||||
</Button>
|
||||
{skin instanceof WeaponInfo && (
|
||||
<>
|
||||
<Typography.Paragraph>
|
||||
Float: {skin.float}
|
||||
</Typography.Paragraph>
|
||||
<Float float={skin.float} minFloat={skin.min_float} maxFloat={skin.max_float} acceptInput/>
|
||||
</>
|
||||
)}
|
||||
{skin instanceof WeaponInfo && (
|
||||
<Typography.Paragraph>
|
||||
Pattern: {skin.pattern}
|
||||
</Typography.Paragraph>
|
||||
)}
|
||||
<Typography.Code>
|
||||
Transaction id: {skin.id}
|
||||
</Typography.Code>
|
||||
<div className="flex gap-2 justify-end">
|
||||
{skin instanceof WeaponInfo && <Button variant="secondary">Apply to Both</Button>}
|
||||
<Button>Apply{skin instanceof WeaponInfo ? ` to ${side}` : ""}</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Modal.Body>
|
||||
</Modal.Dialog>
|
||||
</Modal.Container>
|
||||
</Modal.Backdrop>
|
||||
</Modal>
|
||||
</Modal.Body>
|
||||
</Modal.Dialog>
|
||||
</Modal.Container>
|
||||
</Modal.Backdrop>
|
||||
</Modal>
|
||||
<SkinSelector
|
||||
isOpen={selectorOpen}
|
||||
setIsOpen={setSelectorOpen}
|
||||
skin={localSkin}
|
||||
setSkin={setLocalSkin}
|
||||
side={side}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
115
app/components/skin_selector.tsx
Normal file
115
app/components/skin_selector.tsx
Normal file
@@ -0,0 +1,115 @@
|
||||
import { Button, Modal, Typography } from "@heroui/react";
|
||||
import { useEffect, useState, type Dispatch, type SetStateAction } from "react";
|
||||
import { useNotification } from "~/hooks/notification";
|
||||
import { AgentInfo, WeaponInfo } from "~/types/skin";
|
||||
|
||||
interface Info {
|
||||
name: string;
|
||||
paint_index: number;
|
||||
display: string;
|
||||
color: string;
|
||||
min_float: number;
|
||||
max_float: number;
|
||||
}
|
||||
|
||||
export function SkinSelector({
|
||||
isOpen,
|
||||
setIsOpen,
|
||||
skin,
|
||||
setSkin,
|
||||
side
|
||||
}: {
|
||||
isOpen: boolean;
|
||||
setIsOpen: Dispatch<SetStateAction<boolean>>;
|
||||
skin: WeaponInfo | AgentInfo;
|
||||
setSkin: Dispatch<SetStateAction<WeaponInfo | AgentInfo>>;
|
||||
side: "T" | "CT" | "BOTH";
|
||||
}) {
|
||||
const [skins, setSkins] = useState<Array<Info>>([]);
|
||||
const { notify } = useNotification();
|
||||
|
||||
const setPaint = (v: Info) => {
|
||||
if (skin instanceof WeaponInfo) {
|
||||
const newSkin = new WeaponInfo(skin);
|
||||
newSkin.paint_index = v.paint_index;
|
||||
newSkin.display = newSkin.display.split("|")[0] + " | " + v.display;
|
||||
newSkin.min_float = v.min_float;
|
||||
newSkin.max_float = v.max_float;
|
||||
setSkin(newSkin);
|
||||
} else {
|
||||
const newSkin = new AgentInfo(skin);
|
||||
newSkin.name = v.name;
|
||||
setSkin(newSkin);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const fetchSkins = async () => {
|
||||
let response = await fetch(
|
||||
`${import.meta.env.VITE_BASE_API_URL}/index?weapon=${skin.weapon_id}&team=${side}${skin instanceof AgentInfo ? "&agent=true" : ""}`,
|
||||
{ credentials: "include" },
|
||||
)
|
||||
.then((r) => r.json())
|
||||
.catch((e) => {
|
||||
notify(
|
||||
{
|
||||
type: "danger",
|
||||
loading: false,
|
||||
title: "An error occured.",
|
||||
message: `An error occured: ${e}`,
|
||||
},
|
||||
10000,
|
||||
);
|
||||
});
|
||||
|
||||
setSkins(response);
|
||||
};
|
||||
if (skins.length === 0 && isOpen) {
|
||||
fetchSkins();
|
||||
}
|
||||
}, [isOpen]);
|
||||
return (
|
||||
<Modal isOpen={isOpen}>
|
||||
<Modal.Backdrop
|
||||
variant="blur"
|
||||
shouldCloseOnInteractOutside={(_element) => {
|
||||
setIsOpen(false);
|
||||
return true;
|
||||
}}
|
||||
>
|
||||
<Modal.Container size="lg">
|
||||
<Modal.Dialog>
|
||||
<Modal.CloseTrigger
|
||||
onPress={() => {
|
||||
setIsOpen(false);
|
||||
}}
|
||||
/>
|
||||
<Modal.Body className="mt-6">
|
||||
<div className="flex flex-col gap-2">
|
||||
{skins &&
|
||||
skins.map((v, i) => (
|
||||
<Button
|
||||
onClick={() => {
|
||||
setPaint(v);
|
||||
}}
|
||||
className="flex flex-col w-full h-fit items-center justify-start"
|
||||
>
|
||||
<img
|
||||
key={i}
|
||||
src={`/skins/${v.name}_${skin instanceof WeaponInfo ? v.paint_index : 0}.png`}
|
||||
className="pointer-events-none object-contain object-bottom"
|
||||
alt="Weapon image"
|
||||
/>
|
||||
<Typography.Heading level={3}>
|
||||
{v.display}
|
||||
</Typography.Heading>
|
||||
</Button>
|
||||
))}
|
||||
</div>
|
||||
</Modal.Body>
|
||||
</Modal.Dialog>
|
||||
</Modal.Container>
|
||||
</Modal.Backdrop>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
@@ -5,20 +5,22 @@ import { SkinDialog } from "./skin_dialog";
|
||||
import { WeaponInfo, AgentInfo } from "~/types/skin";
|
||||
|
||||
export function SkinTile({
|
||||
skin,
|
||||
skinInfo,
|
||||
side,
|
||||
}: {
|
||||
skin: WeaponInfo | AgentInfo;
|
||||
skinInfo: WeaponInfo | AgentInfo;
|
||||
side: "T" | "CT";
|
||||
}) {
|
||||
const [isDialogOpen, setIsDialogOpen] = useState(false);
|
||||
const acolor = `${skin.color}64`;
|
||||
const acolor = `${skinInfo.color}64`;
|
||||
const [skin, setSkin] = useState(skinInfo);
|
||||
return (
|
||||
<>
|
||||
<SkinDialog
|
||||
isOpen={isDialogOpen}
|
||||
setIsOpen={setIsDialogOpen}
|
||||
skin={skin}
|
||||
setSkin={setSkin}
|
||||
side={side}
|
||||
/>
|
||||
<Button
|
||||
@@ -50,7 +52,7 @@ export function SkinTile({
|
||||
{skin.display}
|
||||
</Typography.Heading>
|
||||
{skin instanceof WeaponInfo && (
|
||||
<Float float={skin.float} minFloat={skin.min_float} maxFloat={skin.max_float}/>
|
||||
<Float skin={skin} setSkin={setSkin} />
|
||||
)}
|
||||
{skin instanceof WeaponInfo && (
|
||||
<Typography.Paragraph>
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
export class WeaponInfo {
|
||||
id!: string;
|
||||
weapon_id!: string;
|
||||
name!: string;
|
||||
color!: string;
|
||||
display!: string;
|
||||
@@ -16,6 +17,7 @@ export class WeaponInfo {
|
||||
|
||||
export class AgentInfo {
|
||||
id!: string;
|
||||
weapon_id!: string;
|
||||
name!: string;
|
||||
color!: string;
|
||||
display!: string;
|
||||
|
||||
Reference in New Issue
Block a user