5UP3RB/actaeon
1
0
Fork 0
forked from sk1982/actaeon
Code Pull Requests Activity

chuni: fix userbox avatar id

Browse Source
This commit is contained in:
sk1982 2024-04-11 05:13:24 -04:00
parent 9a6d5e8f6c
commit 435b8a4369
3 changed files with 14 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/actions/chuni/userbox.ts
View File

@ -34,7 +34,7 @@ export type UserboxItems = {
trophy: Pick<DB['actaeon_chuni_static_trophies'], 'id' | 'name' | 'rareType' | 'explainText'>[] trophy: Pick<DB['actaeon_chuni_static_trophies'], 'id' | 'name' | 'rareType' | 'explainText'>[]
} & { } & {
[K in `avatar${'Wear' | 'Head' | 'Face' | 'Skin' | 'Item' | 'Front' | 'Back'}`]: [K in `avatar${'Wear' | 'Head' | 'Face' | 'Skin' | 'Item' | 'Front' | 'Back'}`]:
Pick<DB['chuni_static_avatar'], 'avatarAccessoryId' | 'name' | 'iconPath' | 'texturePath'>[] Pick<DB['chuni_static_avatar'], 'id' | 'name' | 'iconPath' | 'texturePath'>[]
}; };
export const getUserboxItems = async (user: UserPayload, profile: ChuniUserData): Promise<UserboxItems> => { export const getUserboxItems = async (user: UserPayload, profile: ChuniUserData): Promise<UserboxItems> => {

6
src/app/(with-header)/chuni/userbox/userbox.tsx
View File

@ -45,7 +45,7 @@ type SavedItem = { [K in keyof RequiredUserbox]: boolean };
export const ChuniUserbox = ({ profile, userboxItems }: ChuniUserboxProps) => { export const ChuniUserbox = ({ profile, userboxItems }: ChuniUserboxProps) => {
const initialEquipped = useRef(Object.fromEntries(Object.entries(ITEM_KEYS) const initialEquipped = useRef(Object.fromEntries(Object.entries(ITEM_KEYS)
.map(([key, profileKey]) => [key, userboxItems[key as keyof RequiredUserbox] .map(([key, profileKey]) => [key, userboxItems[key as keyof RequiredUserbox]
.find(i => ('id' in i ? i.id : i.avatarAccessoryId) === profile?.[profileKey])])) as EquippedItem); .find(i => i.id === profile?.[profileKey])])) as EquippedItem);
const [equipped, setEquipped] = useState<EquippedItem>(initialEquipped.current); const [equipped, setEquipped] = useState<EquippedItem>(initialEquipped.current);
const [saved, setSaved] = useState<SavedItem>(Object.fromEntries(Object.keys(ITEM_KEYS).map(k => [k, true])) as any); const [saved, setSaved] = useState<SavedItem>(Object.fromEntries(Object.keys(ITEM_KEYS).map(k => [k, true])) as any);
const [playingVoice, setPlayingVoice] = useState(false); const [playingVoice, setPlayingVoice] = useState(false);
@ -82,7 +82,7 @@ export const ChuniUserbox = ({ profile, userboxItems }: ChuniUserboxProps) => {
const update: Partial<ProfileUpdate> = Object.fromEntries((Object.entries(equipped) as Entries<typeof equipped>) const update: Partial<ProfileUpdate> = Object.fromEntries((Object.entries(equipped) as Entries<typeof equipped>)
.filter(([k]) => items.includes(k as any)) .filter(([k]) => items.includes(k as any))
.map(([k, v]) => [ITEM_KEYS[k], 'id' in v ? v.id : v.avatarAccessoryId])); .map(([k, v]) => [ITEM_KEYS[k], v.id]));
setSaved(s => ({ ...s, ...Object.fromEntries(items.map(i => [i, true])) })); setSaved(s => ({ ...s, ...Object.fromEntries(items.map(i => [i, true])) }));
@ -209,7 +209,7 @@ export const ChuniUserbox = ({ profile, userboxItems }: ChuniUserboxProps) => {
</div> </div>
<div className="grid grid-cols-2 w-full px-2 sm:px-0 sm:flex flex-col gap-1.5 sm:ml-3 flex-grow"> <div className="grid grid-cols-2 w-full px-2 sm:px-0 sm:flex flex-col gap-1.5 sm:ml-3 flex-grow">
{(['avatarHead', 'avatarFace', 'avatarWear', 'avatarSkin', 'avatarItem', 'avatarBack'] as const).map(k => ((k !== 'avatarSkin' || userboxItems.avatarSkin.length > 1) && <SelectModalButton {(['avatarHead', 'avatarFace', 'avatarWear', 'avatarSkin', 'avatarItem', 'avatarBack'] as const).map(k => ((k !== 'avatarSkin' || userboxItems.avatarSkin.length > 1) && <SelectModalButton
key={k} displayMode="grid" modalSize="3xl" colSize={175} rowSize={205} gap={5} modalId={k} itemId="avatarAccessoryId" key={k} displayMode="grid" modalSize="3xl" colSize={175} rowSize={205} gap={5} modalId={k} itemId="id"
className={(k === 'avatarBack' && userboxItems.avatarSkin.length === 1) ? 'w-full col-span-full' : 'w-full'} className={(k === 'avatarBack' && userboxItems.avatarSkin.length === 1) ? 'w-full col-span-full' : 'w-full'}
onSelected={i => equipItem(k, i)} items={userboxItems[k]} selectedItem={equipped[k]} onSelected={i => equipItem(k, i)} items={userboxItems[k]} selectedItem={equipped[k]}
renderItem={i => renderItem(i, getImageUrl(`chuni/avatar/${i.iconPath}`)) }> renderItem={i => renderItem(i, getImageUrl(`chuni/avatar/${i.iconPath}`)) }>

20
src/components/select-modal.tsx
View File

@ -10,11 +10,11 @@ import { useWindowListener } from '@/helpers/use-window-listener';
import { useReloaded } from './client-providers'; import { useReloaded } from './client-providers';
import { useVirtualizer } from '@tanstack/react-virtual'; import { useVirtualizer } from '@tanstack/react-virtual';
type Data<I extends string> = { type Data = {
name?: string | null, name?: string | null,
} & { [K in I]: any }; };
export type SelectModalProps<T extends 'grid' | 'list', I extends string, D extends Data<I>> = { export type SelectModalProps<T extends 'grid' | 'list', D extends Data, I extends keyof D> = {
isOpen: boolean, isOpen: boolean,
onSelected: (item: D | null | undefined) => void, onSelected: (item: D | null | undefined) => void,
selectedItem: D | null | undefined, selectedItem: D | null | undefined,
@ -33,8 +33,8 @@ export type SelectModalProps<T extends 'grid' | 'list', I extends string, D exte
colSize?: never colSize?: never
}); });
const SelectModalList = <I extends string, D extends Data<I>>({ onSelectionChanged, setSelected, gap, rowSize, renderItem, items, selected, itemId }: const SelectModalList = <D extends Data, I extends keyof D>({ onSelectionChanged, setSelected, gap, rowSize, renderItem, items, selected, itemId }:
Pick<SelectModalProps<'list', I, D>, 'itemId' | 'onSelectionChanged' | 'gap' | 'rowSize' | 'renderItem' | 'items'> & { selected?: D | null, setSelected: (d: D) => void }) => { Pick<SelectModalProps<'list', D, I>, 'itemId' | 'onSelectionChanged' | 'gap' | 'rowSize' | 'renderItem' | 'items'> & { selected?: D | null, setSelected: (d: D) => void }) => {
const listRef = useRef<HTMLDivElement | null>(null); const listRef = useRef<HTMLDivElement | null>(null);
const lastHeight = useRef(rowSize); const lastHeight = useRef(rowSize);
@ -76,8 +76,8 @@ const SelectModalList = <I extends string, D extends Data<I>>({ onSelectionChang
</div>) </div>)
}; };
const SelectModalGrid = <I extends string, D extends Data<I>>({ onSelectionChanged, setSelected, gap, rowSize, renderItem, items, selected, colSize, itemId }: const SelectModalGrid = <D extends Data, I extends keyof D>({ onSelectionChanged, setSelected, gap, rowSize, renderItem, items, selected, colSize, itemId }:
Pick<SelectModalProps<'grid', I, D>, 'itemId' | 'onSelectionChanged' | 'gap' | 'rowSize' | 'renderItem' | 'items' | 'colSize'> & { selected?: D | null, setSelected: (d: D) => void; }) => { Pick<SelectModalProps<'grid', D, I>, 'itemId' | 'onSelectionChanged' | 'gap' | 'rowSize' | 'renderItem' | 'items' | 'colSize'> & { selected?: D | null, setSelected: (d: D) => void; }) => {
const listRef = useRef<HTMLDivElement | null>(null); const listRef = useRef<HTMLDivElement | null>(null);
const lastHeight = useRef(rowSize); const lastHeight = useRef(rowSize);
const [width, setWidth] = useState(0) const [width, setWidth] = useState(0)
@ -134,7 +134,7 @@ const SelectModalGrid = <I extends string, D extends Data<I>>({ onSelectionChang
</div>) </div>)
}; };
const SelectModal = <T extends 'grid' | 'list', I extends string, D extends Data<I>>({ footer, onSelectionChanged, gap, selectedItem, renderItem, displayMode, items, isOpen, onSelected, modalSize, colSize, rowSize, itemId }: SelectModalProps<T, I, D>) => { const SelectModal = <T extends 'grid' | 'list', D extends Data, I extends keyof D>({ footer, onSelectionChanged, gap, selectedItem, renderItem, displayMode, items, isOpen, onSelected, modalSize, colSize, rowSize, itemId }: SelectModalProps<T, D, I>) => {
const [selected, setSelected] = useState(selectedItem); const [selected, setSelected] = useState(selectedItem);
const [filteredItems, setFilteredItems] = useState(items); const [filteredItems, setFilteredItems] = useState(items);
const outputSelected = useRef<null | undefined | D>(null); const outputSelected = useRef<null | undefined | D>(null);
@ -194,8 +194,8 @@ const SelectModal = <T extends 'grid' | 'list', I extends string, D extends Data
</Modal>) </Modal>)
}; };
export const SelectModalButton = <T extends 'grid' | 'list', I extends string, D extends Data<I>>(props: Omit<ButtonProps, 'onClick'> & export const SelectModalButton = <T extends 'grid' | 'list', D extends Data, I extends keyof D>(props: Omit<ButtonProps, 'onClick'> &
Pick<SelectModalProps<T, I, D>, 'itemId' | 'modalSize' | 'displayMode' | 'colSize' | 'rowSize' | 'items' | 'renderItem' | 'selectedItem' | 'onSelected' | 'gap' | 'onSelectionChanged' | 'footer'> & Pick<SelectModalProps<T, D, I>, 'itemId' | 'modalSize' | 'displayMode' | 'colSize' | 'rowSize' | 'items' | 'renderItem' | 'selectedItem' | 'onSelected' | 'gap' | 'onSelectionChanged' | 'footer'> &
{ modalId: string; }) => { { modalId: string; }) => {
const router = useRouter(); const router = useRouter();
const [isOpen, setOpen] = useState(false); const [isOpen, setOpen] = useState(false);