From aa20b0acbeb24c2f736ab834b6a8ac6b0fdd0c35 Mon Sep 17 00:00:00 2001
From: duckietm <troop@mailtjes.com>
Date: Wed, 6 May 2026 08:57:44 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=86=99=20Small=20fix=20Background=20to=20?=
 =?UTF-8?q?load=20from=20json?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../infostand_backgrounds.json                |  0
 .../backgrounds/BackgroundsView.tsx           | 35 ++++++++++++++-----
 2 files changed, 27 insertions(+), 8 deletions(-)
 rename public/{ => configuration}/infostand_backgrounds.json (100%)

diff --git a/public/infostand_backgrounds.json b/public/configuration/infostand_backgrounds.json
similarity index 100%
rename from public/infostand_backgrounds.json
rename to public/configuration/infostand_backgrounds.json
diff --git a/src/components/backgrounds/BackgroundsView.tsx b/src/components/backgrounds/BackgroundsView.tsx
index dc347f3..9216447 100644
--- a/src/components/backgrounds/BackgroundsView.tsx
+++ b/src/components/backgrounds/BackgroundsView.tsx
@@ -1,7 +1,8 @@
-import { Dispatch, FC, SetStateAction, useCallback, useMemo, useState } from 'react';
+import { Dispatch, FC, SetStateAction, useCallback, useEffect, useMemo, useState } from 'react';
 import { Base, Grid, Flex, NitroCardView, NitroCardHeaderView, NitroCardTabsView, NitroCardTabsItemView, NitroCardContentView, Text } from '../../common';
 import { useRoom } from '../../hooks';
-import { GetConfigurationValue } from '../../api';
+import { GetOptionalConfigurationValue } from '../../api';
+import { configFileUrl } from '../../secure-assets';
 
 interface ItemData {
     id: number;
@@ -22,6 +23,8 @@ interface BackgroundsViewProps {
 const TABS = ['backgrounds', 'stands', 'overlays', 'cards'] as const;
 type TabType = typeof TABS[number];
 
+type RemoteData = Partial<Record<'backgrounds.data' | 'stands.data' | 'overlays.data' | 'cards.data', any[]>>;
+
 export const BackgroundsView: FC<BackgroundsViewProps> = ({
     setIsVisible,
     selectedBackground,
@@ -34,20 +37,36 @@ export const BackgroundsView: FC<BackgroundsViewProps> = ({
     setSelectedCardBackground
 }) => {
     const [activeTab, setActiveTab] = useState<TabType>('backgrounds');
+    const [remoteData, setRemoteData] = useState<RemoteData | null>(null);
     const { roomSession } = useRoom();
 
+    useEffect(() => {
+        let cancelled = false;
+        fetch(configFileUrl('infostand_backgrounds.json'), { credentials: 'omit' })
+            .then(r => r.ok ? r.json() : null)
+            .then(json => { if(!cancelled && json && typeof json === 'object') setRemoteData(json as RemoteData); })
+            .catch(() => {});
+        return () => { cancelled = true; };
+    }, []);
+
     const processData = useCallback((configData: any[], idField: string): ItemData[] => {
         if (!configData?.length) return [];
 
-        return configData.map(item => ({ id: item[idField] }));
+        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 fromRemote = remoteData?.[key];
+        if(Array.isArray(fromRemote)) return fromRemote;
+        return GetOptionalConfigurationValue<any[]>(key, []) || [];
+    }, [remoteData]);
+
     const allData = useMemo(() => ({
-        backgrounds: processData(GetConfigurationValue('backgrounds.data'), 'backgroundId'),
-        stands: processData(GetConfigurationValue('stands.data'), 'standId'),
-        overlays: processData(GetConfigurationValue('overlays.data'), 'overlayId'),
-        cards: processData(GetConfigurationValue('cards.data') || GetConfigurationValue('backgrounds.data'), 'backgroundId')
-    }), [processData]);
+        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')
+    }), [processData, readData]);
 
     const handleSelection = useCallback((id: number) => {
         if (!roomSession) return;