config.js für Namen und Farbe Variable eingebaut

public/index.html

@@ -7,7 +7,6 @@
     
     <!-- PWA Meta Tags -->
     <link rel="manifest" href="/manifest.json" />
-    <meta name="theme-color" content="#ec4899" />
     <meta name="mobile-web-app-capable" content="yes" />
     
     <!-- iOS Specific -->

public/script.js

@@ -6,6 +6,9 @@ const lastReasonBox = document.getElementById("lastReasonBox");
 const lastReasonText = document.getElementById("lastReasonText");
 const mainContent = document.getElementById("mainContent");
 
+// Config wird vom Server geladen
+let CONFIG = null;
+
 // Preload images to prevent flickering
 const imageCache = {};
 function preloadImage(src) {
@@ -25,14 +28,44 @@ function preloadImage(src) {
   });
 }
 
+// Config vom Server laden
+async function loadConfig() {
+  try {
+    const res = await fetch("/config");
+    CONFIG = await res.json();
+    console.log("✅ Config geladen:", CONFIG);
+    return CONFIG;
+  } catch (err) {
+    console.error("❌ Fehler beim Laden der Config:", err);
+    // Fallback zur alten Konfiguration
+    CONFIG = {
+      A: {
+        name: "Honey",
+        colorHex: "#2ecc71",
+        icon: "a.png",
+        background: "bgA.jpg"
+      },
+      B: {
+        name: "Kirby",
+        colorHex: "#e74c3c",
+        icon: "b.png",
+        background: "bgB.jpg"
+      }
+    };
+    return CONFIG;
+  }
+}
+
 // Preload all images on page load
 async function preloadAllImages() {
+  if (!CONFIG) await loadConfig();
+  
   try {
     await Promise.all([
-      preloadImage('img/a.png'),
-      preloadImage('img/b.png'),
-      preloadImage('img/bgA.jpg'),
-      preloadImage('img/bgB.jpg')
+      preloadImage(`img/${CONFIG.A.icon}`),
+      preloadImage(`img/${CONFIG.B.icon}`),
+      preloadImage(`img/${CONFIG.A.background}`),
+      preloadImage(`img/${CONFIG.B.background}`)
     ]);
     console.log("✅ Alle Bilder vorgeladen");
   } catch (err) {
@@ -41,7 +74,8 @@ async function preloadAllImages() {
 }
 
 async function loadStatus() {
-  // Preload images first
+  // Config und Bilder laden
+  await loadConfig();
   await preloadAllImages();
   
   const res = await fetch("/status");
@@ -63,10 +97,16 @@ async function loadStatus() {
 }
 
 function setBackgroundAndImage(person, animate = true) {
-  const file = person === "A" ? "img/a.png" : "img/b.png";
-  const label = person === "A" ? "Lumpia" : "Pierogi";
-  const bgImage = person === "A" ? "url('img/bgA.jpg')" : "url('img/bgB.jpg')";
-  const nameColor = person === "A" ? "#4B0082" : "#DAA520";
+  if (!CONFIG) {
+    console.error("Config nicht geladen!");
+    return;
+  }
+
+  const personConfig = CONFIG[person];
+  const file = `img/${personConfig.icon}`;
+  const label = personConfig.name;
+  const bgImage = `url('img/${personConfig.background}')`;
+  const nameColor = personConfig.colorHex;
 
   // Set background immediately (smooth transition via CSS)
   document.body.style.backgroundImage = bgImage;