changed to .md

config.js

@@ -0,0 +1,50 @@
+// config.js - Zentrale Konfiguration für WhoPays App
+
+export const CONFIG = {
+  A: {
+    name: "Lumpia",              // Name Marc
+    colorHex: "#6495ED",       // Farbe: Blau
+    colorDiscord: 0x6495ed,    //  Discord Embed
+    icon: "a.png",             // Profilbild
+    background: "bgA.jpg"      // Hintergrundbild
+  },
+  B: {
+    name: "Pierogi",             // Name Laila
+    colorHex: "#3C0061",       // Farbe: Lila
+    colorDiscord: 0x3C0061,    // Discord Embed
+    icon: "b.png",             // Profilbild
+    background: "bgB.jpg"      // Hintergrundbild
+  }
+};
+
+// Discord Webhook URL
+export const DISCORD_WEBHOOK_URL = process.env.DISCORD_WEBHOOK_URL;
+
+// Server URL (für Discord Thumbnails)
+export const PUBLIC_BASE_URL = process.env.PUBLIC_BASE_URL 
+  || "http://localhost:3000";
+
+// Port
+export const PORT = process.env.PORT || 3000;
+
+/*
+ * ANLEITUNG ZUM ANPASSEN:
+ * 
+ * 1. Namen ändern:
+ *    name: "DeinName"
+ * 
+ * 2. Farben ändern (Web und Discord müssen gleich sein):
+ *    colorHex: "#3498db"       // Hex-Format für Web
+ *    colorDiscord: 0x3498db    // Hex ohne # für Discord
+ * 
+ *    Beispiele:
+ *    Blau:   colorHex: "#3498db", colorDiscord: 0x3498db
+ *    Lila:   colorHex: "#9b59b6", colorDiscord: 0x9b59b6
+ *    Orange: colorHex: "#e67e22", colorDiscord: 0xe67e22
+ *    Pink:   colorHex: "#e91e63", colorDiscord: 0xe91e63
+ * 
+ * 3. Bilder ändern:
+ *    icon: "mein-bild.png"
+ *    background: "mein-hintergrund.jpg"
+ *    (Dateien müssen in /root/whopays/img/ liegen!)
+ */

public/index.html

@@ -3,10 +3,10 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
+    <link rel="icon" type="image/x-icon" href="icons/icon-192.png">
     
     <!-- 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 -->
@@ -18,27 +18,44 @@
     <!-- Android Specific -->
     <meta name="mobile-web-app-capable" content="yes" />
     
-    <title>Wer zahlt?</title>
+    <title>Who Pays?</title>
     <script src="https://cdn.tailwindcss.com"></script>
     <link rel="stylesheet" href="style.css" />
+    
+    <style>
+      /* Preload images to prevent flickering */
+      body::after {
+        content: '';
+        position: absolute;
+        width: 0;
+        height: 0;
+        overflow: hidden;
+        z-index: -1;
+        background-image: url('img/a.png'), url('img/b.png'), url('img/bgA.jpg'), url('img/bgB.jpg');
+      }
+      
+      /* Smooth background transitions */
+      body {
+        background-size: cover;
+        background-position: center;
+        transition: background-image 0.6s ease-in-out;
+      }
+      
+      /* Hide content until loaded */
+      .loaded {
+        opacity: 1;
+        transition: opacity 0.3s ease-in;
+      }
+      
+      .loading {
+        opacity: 0;
+      }
+    </style>
   </head>
   <body
     class="flex flex-col items-center justify-center min-h-screen bg-gradient-to-br from-yellow-50 to-pink-50 text-gray-800 p-4"
   >
-    <!-- Install Banner (shows on compatible devices) -->
+    <div class="text-center space-y-8 w-full max-w-md loading" id="mainContent">
-    <div id="installBanner" class="hidden fixed top-0 left-0 right-0 bg-pink-500 text-white p-3 shadow-lg z-50">
-      <div class="max-w-md mx-auto flex items-center justify-between">
-        <span class="text-sm">📱 App installieren für bessere Erfahrung!</span>
-        <div class="space-x-2">
-          <button id="installBtn" class="bg-white text-pink-500 px-3 py-1 rounded-lg text-sm font-medium">
-            Installieren
-          </button>
-          <button id="dismissBtn" class="text-white text-sm">✕</button>
-        </div>
-      </div>
-    </div>
-
-    <div class="text-center space-y-8 w-full max-w-md mt-16">
       <h1 class="text-4xl font-extrabold drop-shadow-sm tracking-tight">
         Who pays?
       </h1>
@@ -52,12 +69,13 @@
           src="img/a.png"
           alt="Person"
           class="w-48 h-48 rounded-full shadow-md border-4 border-white object-cover transition-transform duration-500"
+          style="display: none;"
         />
         <div
           id="personName"
-          class="text-3xl font-semibold text-blue-800 transition-all duration-500"
+          class="text-3xl font-semibold transition-all duration-500"
         >
-          Load ...
+          Lädt ...
         </div>
       </div>
 
@@ -94,39 +112,6 @@
       .then(reg => console.log("✅ Service Worker registriert", reg.scope))
       .catch(err => console.error("❌ SW Fehler:", err));
     }
-
-    // PWA Install Prompt
-    let deferredPrompt;
-    const installBanner = document.getElementById("installBanner");
-    const installBtn = document.getElementById("installBtn");
-    const dismissBtn = document.getElementById("dismissBtn");
-
-    window.addEventListener("beforeinstallprompt", (e) => {
-      console.log("✅ PWA installierbar!");
-      e.preventDefault();
-      deferredPrompt = e;
-      installBanner.classList.remove("hidden");
-    });
-
-    installBtn.addEventListener("click", async () => {
-      if (!deferredPrompt) return;
-      
-      deferredPrompt.prompt();
-      const { outcome } = await deferredPrompt.userChoice;
-      console.log(`PWA install: ${outcome}`);
-      
-      deferredPrompt = null;
-      installBanner.classList.add("hidden");
-    });
-
-    dismissBtn.addEventListener("click", () => {
-      installBanner.classList.add("hidden");
-    });
-
-    window.addEventListener("appinstalled", () => {
-      console.log("✅ PWA erfolgreich installiert!");
-      deferredPrompt = null;
-    });
     </script>
 
   </body>

public/manifest.json

@@ -1,35 +1,35 @@
 {
-  "name": "Wer zahlt? - Who Pays",
+  "name": "WhoPays? Who's turn is it",
   "short_name": "WhoPays",
-  "description": "Entscheide spielerisch, wer zahlt",
+  "description": "Battle on who's gonna pay.",
   "start_url": "/",
   "scope": "/",
   "display": "standalone",
-  "background_color": "#fef3c7",
+  "background_color": "#5F9EA0",
-  "theme_color": "#ec4899",
+  "theme_color": "#556B2F",
   "orientation": "portrait-primary",
   "categories": ["utilities", "lifestyle"],
   "icons": [
     {
-      "src": "/img/icon-192.png",
+      "src": "/icons/icon-192.png",
       "sizes": "192x192",
       "type": "image/png",
       "purpose": "any"
     },
     {
-      "src": "/img/icon-192.png",
+      "src": "/icons/icon-192.png",
       "sizes": "192x192",
       "type": "image/png",
       "purpose": "maskable"
     },
     {
-      "src": "/img/icon-512.png",
+      "src": "/icons/icon-512.png",
       "sizes": "512x512",
       "type": "image/png",
       "purpose": "any"
     },
     {
-      "src": "/img/icon-512.png",
+      "src": "/icons/icon-512.png",
       "sizes": "512x512",
       "type": "image/png",
       "purpose": "maskable"

public/script.js

@@ -4,11 +4,90 @@ const button = document.getElementById("toggleButton");
 const reasonInput = document.getElementById("reasonInput");
 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) {
+  return new Promise((resolve, reject) => {
+    if (imageCache[src]) {
+      resolve(imageCache[src]);
+      return;
+    }
+    
+    const image = new Image();
+    image.onload = () => {
+      imageCache[src] = image;
+      resolve(image);
+    };
+    image.onerror = reject;
+    image.src = 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/${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) {
+    console.warn("⚠️ Fehler beim Vorladen:", err);
+  }
+}
 
 async function loadStatus() {
+  // Config und Bilder laden
+  await loadConfig();
+  await preloadAllImages();
+  
   const res = await fetch("/status");
   const data = await res.json();
-  showStatus(data.current, false);
+  
+  // Set background and image without animation on first load
+  setBackgroundAndImage(data.current, false);
+  
+  // Show content smoothly
+  img.style.display = 'block';
+  mainContent.classList.remove('loading');
+  mainContent.classList.add('loaded');
   
   // Show last reason if available
   if (data.lastReason) {
@@ -17,40 +96,49 @@ async function loadStatus() {
   }
 }
 
-function showStatus(person, animate = true) {
+function setBackgroundAndImage(person, animate = true) {
-  const file = person === "A" ? "img/a.png" : "img/b.png";
+  if (!CONFIG) {
-  const label = person === "A" ? "Honey" : "Kirby";
+    console.error("Config nicht geladen!");
+    return;
+  }
 
-  // Hintergrundbilder für A und B
+  const personConfig = CONFIG[person];
-  const bgA = "url('img/bgA.jpg')";
+  const file = `img/${personConfig.icon}`;
-  const bgB = "url('img/bgB.jpg')";
+  const label = personConfig.name;
+  const bgImage = `url('img/${personConfig.background}')`;
+  const nameColor = personConfig.colorHex;
 
-  // Hintergrundanimation (optional)
+  // Set background immediately (smooth transition via CSS)
-  document.body.style.transition = "background 0.4s ease";
+  document.body.style.backgroundImage = bgImage;
-
-  // Hintergrund setzen
-  document.body.style.backgroundImage = person === "A" ? bgA : bgB;
   document.body.style.backgroundSize = "cover";
   document.body.style.backgroundPosition = "center";
 
   if (animate) {
     img.classList.add("rotate");
-  }
     
+    // Change image, name and color in the middle of rotation
     setTimeout(() => {
       img.src = file;
       nameEl.textContent = label;
-  }, 150);
+      nameEl.style.color = nameColor;
+    }, 300); // Half of rotation duration
     
+    // Remove rotation class after animation
     setTimeout(() => {
       img.classList.remove("rotate");
     }, 600);
+  } else {
+    // First load - no animation
+    img.src = file;
+    nameEl.textContent = label;
+    nameEl.style.color = nameColor;
+  }
 }
 
-
 button.addEventListener("click", async () => {
   const reason = reasonInput.value.trim();
   
+  try {
     const res = await fetch("/toggle", { 
       method: "POST",
       headers: {
@@ -60,7 +148,7 @@ button.addEventListener("click", async () => {
     });
     
     const data = await res.json();
-  showStatus(data.current);
+    setBackgroundAndImage(data.current, true);
     
     // Update last reason display
     if (reason) {
@@ -70,6 +158,10 @@ button.addEventListener("click", async () => {
     
     // Clear input
     reasonInput.value = "";
+  } catch (err) {
+    console.error("Fehler beim Wechseln:", err);
+    nameEl.textContent = "Fehler!";
+  }
 });
 
 // Allow Enter key to trigger switch
@@ -79,4 +171,5 @@ reasonInput.addEventListener("keypress", (e) => {
   }
 });
 
+// Start loading
 loadStatus();

public/style.css

@@ -19,11 +19,11 @@
     opacity: 1;
   }
   50% {
-    transform: rotateY(180deg); /* Half flip */
+    transform: rotateY(90deg);
-    opacity: 0; /* Make the front disappear */
+    opacity: 0.3;
   }
   100% {
-    transform: rotateY(360deg); /* Complete flip */
+    transform: rotateY(0deg);
     opacity: 1;
   }
 }
@@ -31,5 +31,19 @@
 .rotate {
   animation: rotate 0.6s ease-in-out;
   transform-style: preserve-3d;
-  backface-visibility: hidden; /* Hide the back during flip */
+}
+
+/* Smooth transitions */
+#personImg {
+  will-change: transform, opacity;
+}
+
+#personName {
+  will-change: opacity, color;
+  transition: opacity 0.3s ease, color 0.3s ease;
+}
+
+/* Background transition */
+body {
+  will-change: background-image;
 }

readme.md

@@ -0,0 +1,360 @@
+# 💸 WhoPays - Who Pays Next?
+
+Ein einfaches, elegantes Tool um zu entscheiden, wer als nächstes zahlt - mit Discord-Benachrichtigungen und PWA-Support!
+
+![Version](https://img.shields.io/badge/version-1.0.0-blue)
+![License](https://img.shields.io/badge/license-MIT-green)
+![PWA](https://img.shields.io/badge/PWA-Ready-purple)
+
+## 🎯 Features
+
+- ✅ **Wechsel zwischen zwei Personen** - Einfacher Button-Klick
+- 🎨 **Individuelle Farben & Namen** - Komplett anpassbar
+- 📝 **Grund-Angabe** - Optional Grund für den Wechsel angeben
+- 🔔 **Discord-Benachrichtigungen** - Automatische Webhooks mit farbigen Embeds
+- 💾 **Persistenter Speicher** - Letzter Grund bleibt nach Container-Restart erhalten
+- 📱 **PWA-Support** - Als App auf Handy & Desktop installierbar
+- 🎭 **Animierte Übergänge** - Smooth Hintergrund- und Profilbild-Wechsel
+- 🐳 **Docker-Ready** - Einfache Deployment mit Docker Compose
+- 🔒 **Reverse-Proxy kompatibel** - Funktioniert mit Nginx, Caddy, Traefik, etc.
+
+---
+
+## 🚀 Quick Start
+
+### Voraussetzungen
+
+- Docker & Docker Compose
+- Discord Webhook URL (optional)
+- Profilbilder (a.png, b.png)
+- Hintergrundbilder (bgA.jpg, bgB.jpg)
+
+### Installation
+
+```bash
+# 1. Repository klonen oder Dateien herunterladen
+git clone https://github.com/dein-username/whopays.git
+cd whopays
+
+# 2. Bilder hinzufügen
+cp deine-bilder/* img/
+
+# 3. config.js anpassen (siehe Konfiguration)
+nano config.js
+
+# 4. Docker Container starten
+docker-compose up -d
+
+# 5. Öffne http://localhost:3000
+```
+
+**Das war's!** 🎉
+
+---
+
+## ⚙️ Konfiguration
+
+### config.js - Zentrale Konfiguration
+
+Alle Einstellungen sind in **einer** Datei:
+
+```javascript
+// config.js
+export const CONFIG = {
+  A: {
+    name: "Alice",              // Name Person A
+    colorHex: "#2ecc71",        // Farbe im Web (Grün)
+    colorDiscord: 0x2ecc71,     // Farbe in Discord (gleich!)
+    icon: "a.png",              // Profilbild
+    background: "bgA.jpg"       // Hintergrundbild
+  },
+  B: {
+    name: "Bob",                // Name Person B
+    colorHex: "#e74c3c",        // Farbe im Web (Rot)
+    colorDiscord: 0xe74c3c,     // Farbe in Discord (gleich!)
+    icon: "b.png",              // Profilbild
+    background: "bgB.jpg"       // Hintergrundbild
+  }
+};
+
+// Discord Webhook (optional)
+export const DISCORD_WEBHOOK_URL = "https://discord.com/api/webhooks/...";
+
+// Öffentliche URL (für Discord Thumbnails)
+export const PUBLIC_BASE_URL = "https://your-domain.com";
+```
+
+### Farben ändern
+
+```javascript
+// Blau & Orange
+A: { colorHex: "#3498db", colorDiscord: 0x3498db }
+B: { colorHex: "#e67e22", colorDiscord: 0xe67e22 }
+
+// Lila & Pink
+A: { colorHex: "#9b59b6", colorDiscord: 0x9b59b6 }
+B: { colorHex: "#e91e63", colorDiscord: 0xe91e63 }
+
+// Türkis & Gold
+A: { colorHex: "#1abc9c", colorDiscord: 0x1abc9c }
+B: { colorHex: "#f39c12", colorDiscord: 0xf39c12 }
+```
+
+**Wichtig:** Hex-Farbe muss genau 6 Zeichen haben (0-9, A-F)!
+
+---
+
+## 📂 Projektstruktur
+
+```
+whopays/
+├── config.js                 # Zentrale Konfiguration
+├── server.js                 # Express Server
+├── package.json              # Node.js Dependencies
+├── Dockerfile               # Docker Build Instructions
+├── docker-compose.yml       # Docker Compose Config
+├── state.json              # Persistent State (auto-generiert)
+│
+└── public/                  # Statische Dateien
+    ├── index.html          # Frontend HTML
+    ├── script.js           # Frontend JavaScript
+    ├── style.css           # CSS Animationen
+    ├── manifest.json       # PWA Manifest
+    ├── service-worker.js   # PWA Service Worker
+    │
+    └── img/                # Bilder
+        ├── a.png           # Profilbild Person A
+        ├── b.png           # Profilbild Person B
+        ├── bgA.jpg         # Hintergrund Person A
+        ├── bgB.jpg         # Hintergrund Person B
+        ├── icon-192.png    # PWA Icon (192x192)
+        └── icon-512.png    # PWA Icon (512x512)
+```
+
+---
+
+## 🐳 Docker Deployment
+
+### docker-compose.yml
+
+```yaml
+version: '3.8'
+
+services:
+  whopays:
+    build: .
+    ports:
+      - "3000:3000"
+    environment:
+      - NODE_ENV=production
+      - PORT=3000
+      - PUBLIC_BASE_URL=https://your-domain.com
+      - DISCORD_WEBHOOK_URL = "https://discord.com/api/webhooks/...";
+    volumes:
+      # Bilder (persistent)
+      - ./img:/app/public/img
+      
+      # State (persistent über Neustarts)
+      - ./state.json:/app/state.json
+    
+    restart: unless-stopped
+```
+
+### Befehle
+
+```bash
+# Container starten
+docker-compose up -d
+
+# Logs anschauen
+docker-compose logs -f
+
+# Container neustarten
+docker-compose restart
+
+# Container stoppen
+docker-compose down
+
+# Neu bauen (nach Code-Änderungen)
+docker-compose down
+docker-compose build --no-cache
+docker-compose up -d
+```
+
+---
+
+## 📱 PWA Installation
+
+### iOS (Safari)
+
+1. Öffne die Website in Safari
+2. Tippe auf das **Teilen**-Symbol (⎙)
+3. Scrolle und tippe **"Zum Home-Bildschirm"**
+4. Tippe **"Hinzufügen"**
+
+### Android (Chrome)
+
+1. Öffne die Website in Chrome
+2. Tippe auf **Menü** (⋮)
+3. Tippe **"App installieren"**
+4. Tippe **"Installieren"**
+
+### Desktop (Chrome/Edge)
+
+1. Öffne die Website
+2. Klicke auf das **⊕ Icon** in der Adressleiste
+3. Oder: Menü → "WhoPays installieren"
+
+**Wichtig:** PWA funktioniert nur über HTTPS (oder localhost)!
+
+---
+
+## 🔒 Reverse Proxy Setup
+
+### Nginx
+
+```nginx
+server {
+    listen 443 ssl http2;
+    server_name whopays.your-domain.com;
+    
+    # PWA Files - NO AUTH
+    location ~ ^/(service-worker\.js|manifest\.json)$ {
+        proxy_pass http://localhost:3000;
+        proxy_set_header X-Forwarded-Proto $scheme;
+        add_header Service-Worker-Allowed "/" always;
+    }
+    
+    # Main app
+    location / {
+        proxy_pass http://localhost:3000;
+        proxy_set_header Host $host;
+        proxy_set_header X-Forwarded-Proto $scheme;
+    }
+}
+```
+
+### Caddy (Einfachste Option!)
+
+```caddy
+whopays.your-domain.com {
+    reverse_proxy localhost:3000
+}
+```
+
+Caddy macht automatisch HTTPS mit Let's Encrypt! ✅
+
+---
+
+## 🔧 API Endpoints
+
+### GET /status
+
+```bash
+curl http://localhost:3000/status
+```
+
+Response:
+```json
+{
+  "current": "A",
+  "lastReason": "Pizza bestellt"
+}
+```
+
+### POST /toggle
+
+```bash
+curl -X POST http://localhost:3000/toggle \
+  -H "Content-Type: application/json" \
+  -d '{"reason":"Kaffee trinken"}'
+```
+
+Response:
+```json
+{
+  "current": "B",
+  "name": "Bob",
+  "lastReason": "Kaffee trinken"
+}
+```
+
+### GET /config
+
+```bash
+curl http://localhost:3000/config
+```
+
+---
+
+## 🐛 Troubleshooting
+
+### PWA lässt sich nicht installieren
+
+- Stelle sicher, dass du HTTPS verwendest
+- Prüfe ob `manifest.json` erreichbar ist
+- Icons müssen existieren: `icon-192.png` und `icon-512.png`
+
+### Discord sendet keine Benachrichtigungen
+
+- Prüfe Webhook URL in `config.js`
+- Logs prüfen: `docker-compose logs | grep Discord`
+- Stelle sicher `PUBLIC_BASE_URL` ist korrekt
+
+### Bilder werden nicht angezeigt
+
+- Prüfe ob Bilder in `/img/` existieren
+- Berechtigungen: `chmod -R 755 img/`
+- Container neu starten
+
+### Farbe in Discord ungültig (HTTP 400)
+
+- Hex-Farbe muss genau 6 Zeichen haben
+- ✅ Richtig: `0x2ecc71`
+- ❌ Falsch: `0x2ecc71c` (extra Buchstabe!)
+
+---
+
+## 📊 Features im Detail
+
+### Persistent Storage
+
+```json
+{
+  "current": "A",
+  "lastReason": "Restaurant bezahlt"
+}
+```
+
+Bleibt erhalten durch Docker Volume Mount.
+
+### Smooth Animations
+
+- Rotation-Animation (0.6s)
+- Background-Transition (0.6s)
+- Farb-Übergang (0.3s)
+- Image Preloading
+
+---
+
+## 📜 Lizenz
+
+MIT License - Frei nutzbar!
+
+---
+
+## 💡 Tipps
+
+### Custom Domain mit Let's Encrypt
+
+```bash
+sudo certbot --nginx -d whopays.your-domain.com
+```
+
+### Mehrere Instanzen
+
+Unterschiedliche Ports in docker-compose.yml für mehrere Apps!
+
+---
+
+**Viel Spaß beim Entscheiden, wer zahlt!** 🎉💸

server.js

@@ -2,6 +2,7 @@ import express from "express";
 import fs from "fs";
 import path from "path";
 import { fileURLToPath } from "url";
+import { CONFIG, DISCORD_WEBHOOK_URL, PUBLIC_BASE_URL, PORT } from "./config.js";
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
@@ -38,39 +39,43 @@ app.use(express.static(path.join(__dirname, "public"), {
 const stateFile = path.join(__dirname, "state.json");
 
 // --------------------
-// Konfiguration
+// State Handling - MIT PERSISTENT lastReason
-// --------------------
-const CONFIG = {
-  A: {
-    name: "Marc",
-    color: 0x2ecc71,
-    icon: "a.png"
-  },
-  B: {
-    name: "Laila",
-    color: 0xe74c3c,
-    icon: "b.png"
-  }
-};
-
-const PUBLIC_BASE_URL = process.env.PUBLIC_BASE_URL || "http://localhost:3000";
-const DISCORD_WEBHOOK_URL = process.env.DISCORD_WEBHOOK_URL || "https://discord.com/api/webhooks/1450872860607381515/zRbiXOykKPUfLJ_H87wD2OxQJPLdro6yQzU2T48Pg4fxSNaXEqBFgxdHGTiIDmmKGHIF";
-
-// --------------------
-// State Handling
 // --------------------
 function getState() {
   if (!fs.existsSync(stateFile)) {
+    const initialState = { 
+      current: "A", 
+      lastReason: null 
+    };
     fs.writeFileSync(
       stateFile,
-      JSON.stringify({ current: "A", lastReason: null }, null, 2)
+      JSON.stringify(initialState, null, 2)
     );
+    console.log("✅ Neue state.json erstellt");
+    return initialState;
+  }
+  
+  try {
+    const state = JSON.parse(fs.readFileSync(stateFile, "utf-8"));
+    // Ensure lastReason exists in state
+    if (!state.hasOwnProperty('lastReason')) {
+      state.lastReason = null;
+    }
+    console.log(`📖 State geladen: ${state.current}, Letzter Grund: ${state.lastReason || 'keiner'}`);
+    return state;
+  } catch (err) {
+    console.error("❌ Fehler beim Lesen von state.json:", err);
+    return { current: "A", lastReason: null };
   }
-  return JSON.parse(fs.readFileSync(stateFile, "utf-8"));
 }
 
 function setState(newState) {
+  try {
     fs.writeFileSync(stateFile, JSON.stringify(newState, null, 2));
+    console.log(`💾 State gespeichert: ${newState.current}, Grund: ${newState.lastReason || 'keiner'}`);
+  } catch (err) {
+    console.error("❌ Fehler beim Speichern von state.json:", err);
+  }
 }
 
 // --------------------
@@ -80,21 +85,25 @@ async function sendDiscordEmbed(previousKey, currentKey, reason) {
   const previous = CONFIG[previousKey];
   const current = CONFIG[currentKey];
 
-  if (!DISCORD_WEBHOOK_URL) return;
+  if (!DISCORD_WEBHOOK_URL) {
+    console.log("⚠️ DISCORD_WEBHOOK_URL nicht gesetzt, keine Benachrichtigung gesendet");
+    return;
+  }
 
   const fields = [
     {
-      name: "Von",
+      name: "Paid",
       value: previous.name,
       inline: true
     },
     {
-      name: "Zu",
+      name: "Now's turn",
       value: current.name,
       inline: true
     }
   ];
 
+  // Grund hinzufügen falls vorhanden
   if (reason) {
     fields.push({
       name: "📝 Grund",
@@ -104,9 +113,9 @@ async function sendDiscordEmbed(previousKey, currentKey, reason) {
   }
 
   const embed = {
-    title: "💸 Zahl-Wechsel",
+    title: "💸 Pay-Switch",
-    description: `**${current.name}** ist jetzt dran zu zahlen`,
+    description: `**${current.name}**'s turn`,
-    color: current.color,
+    color: current.colorDiscord,
     thumbnail: {
       url: `${PUBLIC_BASE_URL}/img/${current.icon}`
     },
@@ -116,24 +125,59 @@ async function sendDiscordEmbed(previousKey, currentKey, reason) {
     }
   };
 
+  // Debug-Ausgabe
+  console.log(`\n📤 Sende Discord Webhook:`);
+  console.log(`   Von: ${previous.name} → Zu: ${current.name}`);
+  console.log(`   Grund: ${reason || '(keiner)'}`);
+  console.log(`   Farbe: 0x${current.colorDiscord.toString(16)}`);
+  console.log(`   Webhook URL: ${DISCORD_WEBHOOK_URL.substring(0, 50)}...`);
+
   try {
-    await fetch(DISCORD_WEBHOOK_URL, {
+    const response = await fetch(DISCORD_WEBHOOK_URL, {
       method: "POST",
       headers: { "Content-Type": "application/json" },
       body: JSON.stringify({ embeds: [embed] })
     });
-    console.log("✅ Discord Benachrichtigung gesendet");
+
+    if (response.ok) {
+      console.log(`✅ Discord Benachrichtigung gesendet (HTTP ${response.status})`);
+    } else {
+      const errorText = await response.text();
+      console.error(`❌ Discord Webhook Fehler (HTTP ${response.status}):`, errorText);
+    }
   } catch (err) {
     console.error("❌ Discord Webhook Fehler:", err.message);
   }
+  console.log(""); // Leerzeile für bessere Lesbarkeit
 }
 
 // --------------------
 // API Routes
 // --------------------
 
+// Config API endpoint - sendet Config an Frontend
+app.get("/config", (req, res) => {
+  // Nur relevante Daten fürs Frontend senden
+  const frontendConfig = {
+    A: {
+      name: CONFIG.A.name,
+      colorHex: CONFIG.A.colorHex,
+      icon: CONFIG.A.icon,
+      background: CONFIG.A.background
+    },
+    B: {
+      name: CONFIG.B.name,
+      colorHex: CONFIG.B.colorHex,
+      icon: CONFIG.B.icon,
+      background: CONFIG.B.background
+    }
+  };
+  res.json(frontendConfig);
+});
+
 app.get("/status", (req, res) => {
-  res.json(getState());
+  const state = getState();
+  res.json(state);
 });
 
 app.post("/toggle", async (req, res) => {
@@ -141,16 +185,22 @@ app.post("/toggle", async (req, res) => {
   const previousKey = state.current;
   const reason = req.body?.reason;
 
+  // Wechseln
   state.current = state.current === "A" ? "B" : "A";
+  
+  // Grund speichern (oder null wenn keiner angegeben)
   state.lastReason = reason || null;
+  
+  // State persistent speichern
   setState(state);
 
   const logMessage = reason
-    ? `Zahl-Wechsel: ${CONFIG[previousKey].name} → ${CONFIG[state.current].name} (Grund: ${reason})`
+    ? `Pay-Switch: ${CONFIG[previousKey].name} → ${CONFIG[state.current].name} (Grund: ${reason})`
-    : `Zahl-Wechsel: ${CONFIG[previousKey].name} → ${CONFIG[state.current].name}`;
+    : `Pay-Switch: ${CONFIG[previousKey].name} → ${CONFIG[state.current].name} (kein Grund)`;
   
   console.log(logMessage);
 
+  // Discord Benachrichtigung - IMMER senden, auch ohne Grund!
   await sendDiscordEmbed(previousKey, state.current, reason);
 
   res.json({
@@ -167,27 +217,22 @@ app.get("/health", (req, res) => {
 // --------------------
 // SPA Fallback - NO CRASH
 // --------------------
-// Only serve index.html for navigation requests, not for missing static files
 app.use((req, res, next) => {
-  // If request already handled by static middleware, skip
   if (res.headersSent) return;
   
-  // If it's an API route that wasn't matched, 404
   if (req.url.startsWith('/api/')) {
     return res.status(404).json({ error: 'Not found' });
   }
   
-  // If Accept header indicates browser navigation (HTML), serve index.html
   const acceptsHtml = req.accepts('html');
   if (acceptsHtml) {
     return res.sendFile(path.join(__dirname, "public/index.html"));
   }
   
-  // Otherwise 404
   res.status(404).send('Not found');
 });
 
-// Error handler to prevent crashes
+// Error handler
 app.use((err, req, res, next) => {
   console.error('Server error:', err);
   res.status(500).json({ error: 'Internal server error' });
@@ -196,12 +241,29 @@ app.use((err, req, res, next) => {
 // --------------------
 // Start
 // --------------------
-const PORT = process.env.PORT || 3000;
 app.listen(PORT, "0.0.0.0", () => {
   console.log(`\n✅ WhoPays läuft auf http://0.0.0.0:${PORT}\n`);
   console.log(`📁 Static files directory: ${path.join(__dirname, "public")}`);
   console.log(`🔒 Trust proxy: enabled (for reverse proxy support)`);
   
+  // Initial state laden und anzeigen
+  const initialState = getState();
+  console.log(`\n🎲 Aktueller Status:`);
+  console.log(`   👤 Wer zahlt: ${CONFIG[initialState.current].name}`);
+  console.log(`   📝 Letzter Grund: ${initialState.lastReason || 'Keiner gespeichert'}`);
+  
+  console.log(`\n👥 Konfigurierte Personen:`);
+  console.log(`   A: ${CONFIG.A.name} (${CONFIG.A.colorHex})`);
+  console.log(`   B: ${CONFIG.B.name} (${CONFIG.B.colorHex})`);
+  
+  // Discord Webhook Test
+  console.log(`\n🔔 Discord Webhook:`);
+  if (DISCORD_WEBHOOK_URL) {
+    console.log(`   ✅ Konfiguriert: ${DISCORD_WEBHOOK_URL.substring(0, 50)}...`);
+  } else {
+    console.log(`   ❌ NICHT konfiguriert!`);
+  }
+  
   // Verify critical files exist
   const criticalFiles = [
     'public/index.html',
@@ -216,7 +278,7 @@ app.listen(PORT, "0.0.0.0", () => {
     console.log(`   ${exists ? '✅' : '❌'} ${file}`);
   });
   
-  console.log('\n📝 Test URLs (adjust domain for your setup):');
+  console.log('\n📝 Test URLs:');
   console.log(`   http://localhost:${PORT}/`);
   console.log(`   http://localhost:${PORT}/service-worker.js`);
   console.log(`   http://localhost:${PORT}/manifest.json\n`);