mirror of
https://github.com/duckietm/Nitro-V3.git
synced 2026-06-19 15:06:20 +00:00
🆕 Infostand Borders
This commit is contained in:
duckietm
@@ -24,6 +24,7 @@ export class AvatarInfoUser implements IAvatarInfo
|
||||
public standId: number = 0;
|
||||
public overlayId: number = 0;
|
||||
public cardBackgroundId: number = 0;
|
||||
public borderId: number = 0;
|
||||
public webID: number = 0;
|
||||
public xp: number = 0;
|
||||
public userType: number = -1;
|
||||
|
||||
@@ -194,6 +194,7 @@ export class AvatarInfoUtilities
|
||||
userInfo.standId = userData.stand;
|
||||
userInfo.overlayId = userData.overlay;
|
||||
userInfo.cardBackgroundId = userData.cardBackground ?? 0;
|
||||
userInfo.borderId = (userData as any).borderId ?? 0;
|
||||
userInfo.achievementScore = userData.activityPoints;
|
||||
userInfo.webID = userData.webID;
|
||||
userInfo.roomIndex = userData.roomIndex;
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 1.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 138 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.3 KiB |
@@ -18,12 +18,14 @@ interface BackgroundsViewProps {
|
||||
setSelectedOverlay: Dispatch<SetStateAction<number>>;
|
||||
selectedCardBackground: number;
|
||||
setSelectedCardBackground: Dispatch<SetStateAction<number>>;
|
||||
selectedBorder: number;
|
||||
setSelectedBorder: Dispatch<SetStateAction<number>>;
|
||||
}
|
||||
|
||||
const TABS = ['backgrounds', 'stands', 'overlays', 'cards'] as const;
|
||||
const TABS = ['backgrounds', 'stands', 'overlays', 'cards', 'borders'] as const;
|
||||
type TabType = typeof TABS[number];
|
||||
|
||||
type RemoteData = Partial<Record<'backgrounds.data' | 'stands.data' | 'overlays.data' | 'cards.data', any[]>>;
|
||||
type RemoteData = Partial<Record<'backgrounds.data' | 'stands.data' | 'overlays.data' | 'cards.data' | 'borders.data', any[]>>;
|
||||
|
||||
export const BackgroundsView: FC<BackgroundsViewProps> = ({
|
||||
setIsVisible,
|
||||
@@ -34,7 +36,9 @@ export const BackgroundsView: FC<BackgroundsViewProps> = ({
|
||||
selectedOverlay,
|
||||
setSelectedOverlay,
|
||||
selectedCardBackground,
|
||||
setSelectedCardBackground
|
||||
setSelectedCardBackground,
|
||||
selectedBorder,
|
||||
setSelectedBorder
|
||||
}) => {
|
||||
const [activeTab, setActiveTab] = useState<TabType>('backgrounds');
|
||||
const [remoteData, setRemoteData] = useState<RemoteData | null>(null);
|
||||
@@ -55,7 +59,7 @@ export const BackgroundsView: FC<BackgroundsViewProps> = ({
|
||||
return configData.map(item => ({ id: typeof item === 'number' ? item : item[idField] }));
|
||||
}, []);
|
||||
|
||||
const readData = useCallback((key: 'backgrounds.data' | 'stands.data' | 'overlays.data' | 'cards.data'): any[] => {
|
||||
const readData = useCallback((key: 'backgrounds.data' | 'stands.data' | 'overlays.data' | 'cards.data' | 'borders.data'): any[] => {
|
||||
const fromRemote = remoteData?.[key];
|
||||
if(Array.isArray(fromRemote)) return fromRemote;
|
||||
return GetOptionalConfigurationValue<any[]>(key, []) || [];
|
||||
@@ -65,20 +69,27 @@ export const BackgroundsView: FC<BackgroundsViewProps> = ({
|
||||
backgrounds: processData(readData('backgrounds.data'), 'backgroundId'),
|
||||
stands: processData(readData('stands.data'), 'standId'),
|
||||
overlays: processData(readData('overlays.data'), 'overlayId'),
|
||||
cards: processData(readData('cards.data').length ? readData('cards.data') : readData('backgrounds.data'), 'backgroundId')
|
||||
cards: processData(readData('cards.data').length ? readData('cards.data') : readData('backgrounds.data'), 'backgroundId'),
|
||||
borders: processData(readData('borders.data'), 'borderId')
|
||||
}), [processData, readData]);
|
||||
|
||||
const handleSelection = useCallback((id: number) => {
|
||||
if (!roomSession) return;
|
||||
|
||||
const setters = { backgrounds: setSelectedBackground, stands: setSelectedStand, overlays: setSelectedOverlay, cards: setSelectedCardBackground };
|
||||
const setters = { backgrounds: setSelectedBackground, stands: setSelectedStand, overlays: setSelectedOverlay, cards: setSelectedCardBackground, borders: setSelectedBorder };
|
||||
|
||||
const currentValues = { backgrounds: selectedBackground, stands: selectedStand, overlays: selectedOverlay, cards: selectedCardBackground };
|
||||
const currentValues = { backgrounds: selectedBackground, stands: selectedStand, overlays: selectedOverlay, cards: selectedCardBackground, borders: selectedBorder };
|
||||
|
||||
setters[activeTab](id);
|
||||
const newValues = { ...currentValues, [activeTab]: id };
|
||||
roomSession.sendBackgroundMessage( newValues.backgrounds, newValues.stands, newValues.overlays, newValues.cards );
|
||||
}, [activeTab, roomSession, selectedBackground, selectedStand, selectedOverlay, selectedCardBackground, setSelectedBackground, setSelectedStand, setSelectedOverlay, setSelectedCardBackground]);
|
||||
roomSession.sendBackgroundMessage( newValues.backgrounds, newValues.stands, newValues.overlays, newValues.cards, newValues.borders );
|
||||
}, [activeTab, roomSession, selectedBackground, selectedStand, selectedOverlay, selectedCardBackground, selectedBorder, setSelectedBackground, setSelectedStand, setSelectedOverlay, setSelectedCardBackground, setSelectedBorder]);
|
||||
|
||||
const itemTypeFor = (tab: TabType): string => {
|
||||
if(tab === 'cards') return 'card-background';
|
||||
if(tab === 'borders') return 'border';
|
||||
return tab.slice(0, -1);
|
||||
};
|
||||
|
||||
const renderItem = useCallback((item: ItemData, type: string) => (
|
||||
<Flex
|
||||
@@ -89,7 +100,11 @@ export const BackgroundsView: FC<BackgroundsViewProps> = ({
|
||||
>
|
||||
<Base
|
||||
className={`profile-${type} ${type}-${item.id}`}
|
||||
style={type === 'card-background' ? { width: 60, height: 80, borderRadius: 4 } : undefined}
|
||||
style={
|
||||
type === 'card-background' ? { width: 60, height: 80, borderRadius: 4 }
|
||||
: type === 'border' ? { width: 60, height: 76, backgroundSize: 'contain', backgroundRepeat: 'no-repeat', backgroundPosition: 'center' }
|
||||
: undefined
|
||||
}
|
||||
/>
|
||||
</Flex>
|
||||
), [handleSelection]);
|
||||
@@ -111,7 +126,7 @@ export const BackgroundsView: FC<BackgroundsViewProps> = ({
|
||||
<NitroCardContentView gap={1}>
|
||||
<Text bold center>Select an Option</Text>
|
||||
<Grid gap={1} columnCount={7} overflow="auto">
|
||||
{allData[activeTab].map(item => renderItem(item, activeTab === 'cards' ? 'card-background' : activeTab.slice(0, -1)))}
|
||||
{allData[activeTab].map(item => renderItem(item, itemTypeFor(activeTab)))}
|
||||
</Grid>
|
||||
</NitroCardContentView>
|
||||
</NitroCardView>
|
||||
|
||||
@@ -25,6 +25,7 @@ export const InfoStandWidgetUserView: FC<InfoStandWidgetUserViewProps> = props =
|
||||
const [standId, setStandId] = useState<number>(null);
|
||||
const [overlayId, setOverlayId] = useState<number>(null);
|
||||
const [cardBackgroundId, setCardBackgroundId] = useState<number>(null);
|
||||
const [borderId, setBorderId] = useState<number>(null);
|
||||
const [isVisible, setIsVisible] = useState(false);
|
||||
const { roomSession = null } = useRoom();
|
||||
|
||||
@@ -32,6 +33,7 @@ export const InfoStandWidgetUserView: FC<InfoStandWidgetUserViewProps> = props =
|
||||
const infostandStandClass = `stand-${standId ?? 'default'}`;
|
||||
const infostandOverlayClass = `overlay-${overlayId ?? 'default'}`;
|
||||
const infostandCardBackgroundClass = cardBackgroundId ? `card-background-${cardBackgroundId}` : '';
|
||||
const infostandBorderClass = borderId ? `border-${borderId}` : '';
|
||||
const handleProfileClick = useCallback(() => { GetUserProfile(avatarInfo.webID); }, [avatarInfo.webID]);
|
||||
|
||||
const handleEditClick = useCallback((event: React.MouseEvent) => { event.stopPropagation(); setIsVisible(prev => !prev); }, []);
|
||||
@@ -99,6 +101,7 @@ export const InfoStandWidgetUserView: FC<InfoStandWidgetUserViewProps> = props =
|
||||
newValue.standId = event.standId;
|
||||
newValue.overlayId = event.overlayId;
|
||||
newValue.cardBackgroundId = event.cardBackgroundId ?? 0;
|
||||
newValue.borderId = event.borderId ?? 0;
|
||||
return newValue;
|
||||
});
|
||||
});
|
||||
@@ -134,6 +137,7 @@ export const InfoStandWidgetUserView: FC<InfoStandWidgetUserViewProps> = props =
|
||||
setStandId(avatarInfo.standId);
|
||||
setOverlayId(avatarInfo.overlayId);
|
||||
setCardBackgroundId(avatarInfo.cardBackgroundId ?? 0);
|
||||
setBorderId(avatarInfo.borderId ?? 0);
|
||||
|
||||
SendMessageComposer(new UserRelationshipsComposer(avatarInfo.webID));
|
||||
|
||||
@@ -146,7 +150,9 @@ export const InfoStandWidgetUserView: FC<InfoStandWidgetUserViewProps> = props =
|
||||
|
||||
return (
|
||||
<>
|
||||
<Column className={`relative min-w-[190px] max-w-[190px] z-30 pointer-events-auto ${cardBackgroundId ? '' : 'bg-[rgba(28,28,32,0.95)]'} [box-shadow:inset_0_5px_#22222799,inset_0_-4px_#12121599] rounded overflow-hidden profile-card-background ${infostandCardBackgroundClass}`}>
|
||||
<div className="relative min-w-[190px] max-w-[190px] pointer-events-auto z-30">
|
||||
{borderId ? <Base className={`infostand-border ${infostandBorderClass}`} /> : null}
|
||||
<Column className={`relative min-w-[190px] max-w-[190px] ${cardBackgroundId ? '' : 'bg-[rgba(28,28,32,0.95)]'} [box-shadow:inset_0_5px_#22222799,inset_0_-4px_#12121599] rounded overflow-hidden profile-card-background ${infostandCardBackgroundClass}`}>
|
||||
<Column className="h-full p-[8px] overflow-auto" gap={1} overflow="visible">
|
||||
<div className="flex flex-col gap-1">
|
||||
<div className="flex items-center justify-between">
|
||||
@@ -281,6 +287,7 @@ export const InfoStandWidgetUserView: FC<InfoStandWidgetUserViewProps> = props =
|
||||
)}
|
||||
</Column>
|
||||
</Column>
|
||||
</div>
|
||||
{isVisible && avatarInfo.type === AvatarInfoUser.OWN_USER && (
|
||||
<div className="backgrounds-view-container">
|
||||
<BackgroundsView
|
||||
@@ -293,6 +300,8 @@ export const InfoStandWidgetUserView: FC<InfoStandWidgetUserViewProps> = props =
|
||||
setSelectedOverlay={setOverlayId}
|
||||
selectedCardBackground={cardBackgroundId}
|
||||
setSelectedCardBackground={setCardBackgroundId}
|
||||
selectedBorder={borderId}
|
||||
setSelectedBorder={setBorderId}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
@@ -1594,4 +1594,129 @@
|
||||
&.overlay-8 {
|
||||
background-image: url('@/assets/images/backgrounds/overlay/overlay_8.png');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Infostand-only colored border. A thin CSS-drawn rounded ring drawn 5px
|
||||
outside the card on each side. Pure CSS — no artwork files. */
|
||||
.infostand-border {
|
||||
position: absolute;
|
||||
top: -5px;
|
||||
bottom: -5px;
|
||||
left: -5px;
|
||||
right: -5px;
|
||||
pointer-events: none;
|
||||
z-index: 5;
|
||||
border-width: 5px;
|
||||
border-style: solid;
|
||||
border-radius: 10px;
|
||||
box-sizing: content-box;
|
||||
}
|
||||
|
||||
.infostand-border.border-1 { border-color: #ef4444; } /* Red */
|
||||
.infostand-border.border-2 { border-color: #f97316; } /* Orange */
|
||||
.infostand-border.border-3 { border-color: #eab308; } /* Yellow */
|
||||
.infostand-border.border-4 { border-color: #84cc16; } /* Lime */
|
||||
.infostand-border.border-5 { border-color: #22c55e; } /* Green */
|
||||
.infostand-border.border-6 { border-color: #14b8a6; } /* Teal */
|
||||
.infostand-border.border-7 { border-color: #06b6d4; } /* Cyan */
|
||||
.infostand-border.border-8 { border-color: #3b82f6; } /* Blue */
|
||||
.infostand-border.border-9 { border-color: #6366f1; } /* Indigo */
|
||||
.infostand-border.border-10 { border-color: #a855f7; } /* Purple */
|
||||
.infostand-border.border-11 { border-color: #ec4899; } /* Pink */
|
||||
.infostand-border.border-12 { border-color: #f43f5e; } /* Rose */
|
||||
.infostand-border.border-13 { border-color: #92400e; } /* Brown */
|
||||
.infostand-border.border-14 { border-color: #d4a020; } /* Gold */
|
||||
.infostand-border.border-15 { border-color: #cbd5e1; } /* Silver */
|
||||
.infostand-border.border-16 { border-color: #1f2937; } /* Black */
|
||||
|
||||
/* Image-based borders (17-25). These override the colour-border insets and
|
||||
strip the CSS border so the artwork sits ~22px outside the card and
|
||||
stretches to fill the frame area. */
|
||||
.infostand-border.border-17,
|
||||
.infostand-border.border-18,
|
||||
.infostand-border.border-19,
|
||||
.infostand-border.border-20,
|
||||
.infostand-border.border-21,
|
||||
.infostand-border.border-22,
|
||||
.infostand-border.border-23,
|
||||
.infostand-border.border-24,
|
||||
.infostand-border.border-25 {
|
||||
top: -22px;
|
||||
bottom: -22px;
|
||||
left: -22px;
|
||||
right: -22px;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.infostand-border.border-17 { background-image: url('@/assets/images/backgrounds/borders/border_17.webp'); }
|
||||
.infostand-border.border-18 { background-image: url('@/assets/images/backgrounds/borders/border_18.webp'); }
|
||||
.infostand-border.border-19 { background-image: url('@/assets/images/backgrounds/borders/border_19.webp'); }
|
||||
.infostand-border.border-20 { background-image: url('@/assets/images/backgrounds/borders/border_20.webp'); }
|
||||
.infostand-border.border-21 { background-image: url('@/assets/images/backgrounds/borders/border_21.webp'); }
|
||||
.infostand-border.border-22 { background-image: url('@/assets/images/backgrounds/borders/border_22.webp'); }
|
||||
.infostand-border.border-23 { background-image: url('@/assets/images/backgrounds/borders/border_23.webp'); }
|
||||
.infostand-border.border-24 { background-image: url('@/assets/images/backgrounds/borders/border_24.webp'); }
|
||||
.infostand-border.border-25 { background-image: url('@/assets/images/backgrounds/borders/border_25.webp'); }
|
||||
|
||||
/* Picker thumbnails inside the BackgroundsView "Borders" tab.
|
||||
Each thumbnail is a small rounded box outlined in its border colour. */
|
||||
.profile-border {
|
||||
width: 60px;
|
||||
height: 76px;
|
||||
border-width: 4px;
|
||||
border-style: solid;
|
||||
border-radius: 8px;
|
||||
box-sizing: border-box;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
/* border-0 = no border (default) — show as a dashed translucent outline */
|
||||
.profile-border.border-0 { border: 2px dashed rgba(255, 255, 255, 0.25); }
|
||||
|
||||
.profile-border.border-1 { border-color: #ef4444; }
|
||||
.profile-border.border-2 { border-color: #f97316; }
|
||||
.profile-border.border-3 { border-color: #eab308; }
|
||||
.profile-border.border-4 { border-color: #84cc16; }
|
||||
.profile-border.border-5 { border-color: #22c55e; }
|
||||
.profile-border.border-6 { border-color: #14b8a6; }
|
||||
.profile-border.border-7 { border-color: #06b6d4; }
|
||||
.profile-border.border-8 { border-color: #3b82f6; }
|
||||
.profile-border.border-9 { border-color: #6366f1; }
|
||||
.profile-border.border-10 { border-color: #a855f7; }
|
||||
.profile-border.border-11 { border-color: #ec4899; }
|
||||
.profile-border.border-12 { border-color: #f43f5e; }
|
||||
.profile-border.border-13 { border-color: #92400e; }
|
||||
.profile-border.border-14 { border-color: #d4a020; }
|
||||
.profile-border.border-15 { border-color: #cbd5e1; }
|
||||
.profile-border.border-16 { border-color: #1f2937; }
|
||||
|
||||
/* Image-border picker thumbnails — drop the CSS frame and show the artwork. */
|
||||
.profile-border.border-17,
|
||||
.profile-border.border-18,
|
||||
.profile-border.border-19,
|
||||
.profile-border.border-20,
|
||||
.profile-border.border-21,
|
||||
.profile-border.border-22,
|
||||
.profile-border.border-23,
|
||||
.profile-border.border-24,
|
||||
.profile-border.border-25 {
|
||||
border: none;
|
||||
background: transparent;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: contain;
|
||||
}
|
||||
|
||||
.profile-border.border-17 { background-image: url('@/assets/images/backgrounds/borders/border_17.webp'); }
|
||||
.profile-border.border-18 { background-image: url('@/assets/images/backgrounds/borders/border_18.webp'); }
|
||||
.profile-border.border-19 { background-image: url('@/assets/images/backgrounds/borders/border_19.webp'); }
|
||||
.profile-border.border-20 { background-image: url('@/assets/images/backgrounds/borders/border_20.webp'); }
|
||||
.profile-border.border-21 { background-image: url('@/assets/images/backgrounds/borders/border_21.webp'); }
|
||||
.profile-border.border-22 { background-image: url('@/assets/images/backgrounds/borders/border_22.webp'); }
|
||||
.profile-border.border-23 { background-image: url('@/assets/images/backgrounds/borders/border_23.webp'); }
|
||||
.profile-border.border-24 { background-image: url('@/assets/images/backgrounds/borders/border_24.webp'); }
|
||||
.profile-border.border-25 { background-image: url('@/assets/images/backgrounds/borders/border_25.webp'); }
|
||||
Reference in New Issue
Block a user