duckietm/Nitro-V3
1
0
Fork 0
mirror of https://github.com/duckietm/Nitro-V3.git synced 2026-06-20 07:26:19 +00:00
Code Issues Packages Projects Releases Wiki Activity

🆕 Infostand Borders

Browse Source
This commit is contained in:
duckietm
2026-05-19 16:55:44 +02:00
parent 53b208e7b0
commit de899c3138
14 changed files with 164 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/backgrounds/BackgroundsView.tsx
+26 -11
View File
@@ -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>