remote button triggers next player

app.js

@@ -13,6 +13,7 @@ let pushSubscription = null;
 const PUBLIC_VAPID_KEY = 'BKfRJXjSQmAJ452gLwlK_8scGrW6qMU1mBRp39ONtcQHkSsQgmLAaODIyGbgHyRpnDEv3HfXV1oGh3SC0fHxY0E';
 const BACKEND_URL = 'https://webpush.virtonline.eu';
 const BUTTON_ID = 'your_button1_serial';
+const SINGLE_CLICK = 'SingleClick';
 
 // DOM Elements
 const carousel = document.getElementById('carousel');
@@ -459,6 +460,35 @@ carousel.addEventListener('touchend', (e) => {
     
     // If dragged more than 10% of width, change player
     if (Math.abs(diff) > carousel.offsetWidth * 0.1) {
+        moveCarousel(diff);
+    }
+    
+    // Reset carousel to proper position
+    carousel.style.transform = `translateX(${-100 * currentPlayerIndex}%)`;
+    renderPlayers();
+    saveData();
+});
+
+carousel.addEventListener('push', (e) => {
+    console.log('[carousel] Push received');
+    if (!isDragging) return;
+    
+    isDragging = false;
+
+    const data = e.data ? e.data.json() : {};
+    const button_id = data.body ? data.body.button_id : '';
+    const click_type = data.body ? data.body.click_type : '';
+    if (button_id === BUTTON_ID && click_type === SINGLE_CLICK) {
+        moveCarousel(-1);
+    }
+    
+    // Reset carousel to proper position
+    carousel.style.transform = `translateX(${-100 * currentPlayerIndex}%)`;
+    renderPlayers();
+    saveData();
+});
+
+function moveCarousel(diff) {
     const previousIndex = currentPlayerIndex;
 
     // Only change players that have remaining time during a running game
@@ -490,12 +520,6 @@ carousel.addEventListener('touchend', (e) => {
     }
 }
 
-    // Reset carousel to proper position
-    carousel.style.transform = `translateX(${-100 * currentPlayerIndex}%)`;
-    renderPlayers();
-    saveData();
-});
-
 // Find next player with time in specified direction
 function findNextPlayerWithTimeCircular(startIndex, direction) {
     let index = startIndex;

sw.js

@@ -151,18 +151,18 @@ self.addEventListener('message', event => {
 self.addEventListener('push', event => {
   console.log('[ServiceWorker] Push received');
   
-  const data = event.data ? event.data.json() : {};
-  const title = data.title || 'Game Timer Notification';
-  const options = {
-    body: data.body || 'You have a new notification',
-    icon: '/icons/android-chrome-192x192.png',
-    badge: '/icons/android-chrome-192x192.png',
-    data: data
-  };
+  // const data = event.data ? event.data.json() : {};
+  // const title = data.title || 'Game Timer Notification';
+  // const options = {
+  //   body: data.body || 'You have a new notification',
+  //   icon: '/icons/android-chrome-192x192.png',
+  //   badge: '/icons/android-chrome-192x192.png',
+  //   data: data
+  // };
 
-  event.waitUntil(
-    self.registration.showNotification(title, options)
-  );
+  // event.waitUntil(
+  //   self.registration.showNotification(title, options)
+  // );
 });
 
 // This helps with navigation after app is installed