PWA Banner entfernt und Laden verbessert

public/index.html

@@ -21,24 +21,41 @@
     <title>Wer zahlt?</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"
         >
-          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

@@ -11,25 +11,25 @@
   "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,56 @@ 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");
+
+// 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;
+  });
+}
+
+// Preload all images on page load
+async function preloadAllImages() {
+  try {
+    await Promise.all([
+      preloadImage('img/a.png'),
+      preloadImage('img/b.png'),
+      preloadImage('img/bgA.jpg'),
+      preloadImage('img/bgB.jpg')
+    ]);
+    console.log("✅ Alle Bilder vorgeladen");
+  } catch (err) {
+    console.warn("⚠️ Fehler beim Vorladen:", err);
+  }
+}
 
 async function loadStatus() {
+  // Preload images first
+  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,59 +62,63 @@ async function loadStatus() {
   }
 }
 
-function showStatus(person, animate = true) {
+function setBackgroundAndImage(person, animate = true) {
   const file = person === "A" ? "img/a.png" : "img/b.png";
   const label = person === "A" ? "Honey" : "Kirby";
+  const bgImage = person === "A" ? "url('img/bgA.jpg')" : "url('img/bgB.jpg')";
 
-  // Hintergrundbilder für A und B
+  // Set background immediately (smooth transition via CSS)
-  const bgA = "url('img/bgA.jpg')";
+  document.body.style.backgroundImage = bgImage;
-  const bgB = "url('img/bgB.jpg')";
-
-  // Hintergrundanimation (optional)
-  document.body.style.transition = "background 0.4s ease";
-
-  // 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");
-  }
     
-  setTimeout(() => {
+    // Change image and name in the middle of rotation
+    setTimeout(() => {
+      img.src = file;
+      nameEl.textContent = label;
+    }, 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;
-  }, 150);
+  }
-
-  setTimeout(() => {
-    img.classList.remove("rotate");
-  }, 600);
 }
 
-
 button.addEventListener("click", async () => {
   const reason = reasonInput.value.trim();
   
-  const res = await fetch("/toggle", { 
+  try {
-    method: "POST",
+    const res = await fetch("/toggle", { 
-    headers: {
+      method: "POST",
-      "Content-Type": "application/json"
+      headers: {
-    },
+        "Content-Type": "application/json"
-    body: JSON.stringify({ reason: reason || undefined })
+      },
-  });
+      body: JSON.stringify({ reason: reason || undefined })
+    });
     
-  const data = await res.json();
+    const data = await res.json();
-  showStatus(data.current);
+    setBackgroundAndImage(data.current, true);
     
-  // Update last reason display
+    // Update last reason display
-  if (reason) {
+    if (reason) {
-    lastReasonText.textContent = reason;
+      lastReasonText.textContent = reason;
-    lastReasonBox.classList.remove("hidden");
+      lastReasonBox.classList.remove("hidden");
+    }
+    
+    // Clear input
+    reasonInput.value = "";
+  } catch (err) {
+    console.error("Fehler beim Wechseln:", err);
+    nameEl.textContent = "Fehler!";
   }
-  
-  // Clear input
-  reasonInput.value = "";
 });
 
 // Allow Enter key to trigger switch
@@ -79,4 +128,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;
+  transition: opacity 0.3s ease;
+}
+
+/* Background transition */
+body {
+  will-change: background-image;
 }

server.js

@@ -57,20 +57,43 @@ 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
+// State Handling - MIT PERSISTENT lastReason
 // --------------------
 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) {
-  fs.writeFileSync(stateFile, JSON.stringify(newState, null, 2));
+  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);
+  }
 }
 
 // --------------------
@@ -133,7 +156,8 @@ async function sendDiscordEmbed(previousKey, currentKey, reason) {
 // --------------------
 
 app.get("/status", (req, res) => {
-  res.json(getState());
+  const state = getState();
+  res.json(state);
 });
 
 app.post("/toggle", async (req, res) => {
@@ -141,8 +165,13 @@ 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
@@ -151,6 +180,7 @@ app.post("/toggle", async (req, res) => {
   
   console.log(logMessage);
 
+  // Discord Benachrichtigung
   await sendDiscordEmbed(previousKey, state.current, reason);
 
   res.json({
@@ -167,27 +197,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' });
@@ -202,6 +227,12 @@ app.listen(PORT, "0.0.0.0", () => {
   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'}`);
+  
   // Verify critical files exist
   const criticalFiles = [
     'public/index.html',
@@ -216,7 +247,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`);