reaper-arcade-hub 2.0.8 → 2.0.9

package/js/app.js

@@ -1654,20 +1654,20 @@ class ReaperHubApp {
       const coverUrl = game.cover || `https://placehold.co/400x250/041022/ffffff?text=${encodeURIComponent(game.name)}`;
 
       return `
-        <div class="game-card" onclick="app.launchGame('${game.id}')">
+        <div class="game-card" data-id="${game.id}" onclick="app.launchGame('${game.id}')">
           <div class="game-thumb-container">
-            <img class="game-thumb" src="${coverUrl}" alt="${game.name}" loading="lazy" onerror="this.onerror=null; this.src='https://placehold.co/400x250/041022/ffffff?text=${encodeURIComponent(game.name)}';" />
+            <img class="game-thumb" src="${coverUrl}" alt="${this.escapeHtml(game.name)}" loading="lazy" onerror="this.onerror=null; this.src='https://placehold.co/400x250/041022/ffffff?text=${encodeURIComponent(game.name)}';" />
             ${game.featured ? '<span class="game-badge-featured">FEATURED</span>' : ''}
           </div>
           <div class="game-info">
-            <div class="game-title" title="${game.name}">${game.name}</div>
+            <div class="game-title" title="${this.escapeHtml(game.name)}">${this.escapeHtml(game.name)}</div>
             <div class="game-meta">
-              <span class="game-author">${game.author || 'GN-Math'}</span>
-              <button class="btn-fav ${isFav ? 'active' : ''}" onclick="event.stopPropagation(); app.toggleFavorite('${game.id}')" title="${isFav ? 'Remove from favorites' : 'Add to favorites'}">
+              <span class="game-author">${this.escapeHtml(game.author || 'GN-Math')}</span>
+              <button class="btn-fav ${isFav ? 'active' : ''}" data-id="${game.id}" onclick="event.stopPropagation(); app.toggleFavorite('${game.id}')" title="${isFav ? 'Remove from favorites' : 'Add to favorites'}">
                 ${isFav ? '★ SAVED' : '☆ FAV'}
               </button>
             </div>
-            <button class="btn-card-play" onclick="event.stopPropagation(); app.launchGame('${game.id}')">PLAY GAME</button>
+            <button class="btn-card-play" data-id="${game.id}" onclick="event.stopPropagation(); app.launchGame('${game.id}')">PLAY GAME</button>
           </div>
         </div>
       `;
@@ -2509,6 +2509,48 @@ class ReaperHubApp {
         }
       }
     });
+
+    // Guaranteed Click Delegation for Games Grid & Recent Games Grid
+    const gamesGrid = document.getElementById('games-grid');
+    if (gamesGrid) {
+      gamesGrid.addEventListener('click', (e) => {
+        const favBtn = e.target.closest('.btn-fav');
+        if (favBtn) {
+          e.preventDefault();
+          e.stopPropagation();
+          const id = favBtn.getAttribute('data-id');
+          if (id !== null) this.toggleFavorite(id);
+          return;
+        }
+
+        const card = e.target.closest('.game-card');
+        const playBtn = e.target.closest('.btn-card-play');
+        if (card || playBtn) {
+          e.preventDefault();
+          e.stopPropagation();
+          const target = playBtn || card;
+          const id = target.getAttribute('data-id') || (card ? card.getAttribute('data-id') : null);
+          if (id !== null) {
+            this.launchGame(id);
+          }
+        }
+      });
+    }
+
+    const recentGrid = document.getElementById('recent-games-grid');
+    if (recentGrid) {
+      recentGrid.addEventListener('click', (e) => {
+        const card = e.target.closest('.recent-card');
+        if (card) {
+          e.preventDefault();
+          e.stopPropagation();
+          const id = card.getAttribute('data-id');
+          if (id !== null) {
+            this.launchGame(id);
+          }
+        }
+      });
+    }
   }
 
   openSettingsModal() {

package/main/js/app.js

@@ -1654,20 +1654,20 @@ class ReaperHubApp {
       const coverUrl = game.cover || `https://placehold.co/400x250/041022/ffffff?text=${encodeURIComponent(game.name)}`;
 
       return `
-        <div class="game-card" onclick="app.launchGame('${game.id}')">
+        <div class="game-card" data-id="${game.id}" onclick="app.launchGame('${game.id}')">
           <div class="game-thumb-container">
-            <img class="game-thumb" src="${coverUrl}" alt="${game.name}" loading="lazy" onerror="this.onerror=null; this.src='https://placehold.co/400x250/041022/ffffff?text=${encodeURIComponent(game.name)}';" />
+            <img class="game-thumb" src="${coverUrl}" alt="${this.escapeHtml(game.name)}" loading="lazy" onerror="this.onerror=null; this.src='https://placehold.co/400x250/041022/ffffff?text=${encodeURIComponent(game.name)}';" />
             ${game.featured ? '<span class="game-badge-featured">FEATURED</span>' : ''}
           </div>
           <div class="game-info">
-            <div class="game-title" title="${game.name}">${game.name}</div>
+            <div class="game-title" title="${this.escapeHtml(game.name)}">${this.escapeHtml(game.name)}</div>
             <div class="game-meta">
-              <span class="game-author">${game.author || 'GN-Math'}</span>
-              <button class="btn-fav ${isFav ? 'active' : ''}" onclick="event.stopPropagation(); app.toggleFavorite('${game.id}')" title="${isFav ? 'Remove from favorites' : 'Add to favorites'}">
+              <span class="game-author">${this.escapeHtml(game.author || 'GN-Math')}</span>
+              <button class="btn-fav ${isFav ? 'active' : ''}" data-id="${game.id}" onclick="event.stopPropagation(); app.toggleFavorite('${game.id}')" title="${isFav ? 'Remove from favorites' : 'Add to favorites'}">
                 ${isFav ? '★ SAVED' : '☆ FAV'}
               </button>
             </div>
-            <button class="btn-card-play" onclick="event.stopPropagation(); app.launchGame('${game.id}')">PLAY GAME</button>
+            <button class="btn-card-play" data-id="${game.id}" onclick="event.stopPropagation(); app.launchGame('${game.id}')">PLAY GAME</button>
           </div>
         </div>
       `;
@@ -2509,6 +2509,48 @@ class ReaperHubApp {
         }
       }
     });
+
+    // Guaranteed Click Delegation for Games Grid & Recent Games Grid
+    const gamesGrid = document.getElementById('games-grid');
+    if (gamesGrid) {
+      gamesGrid.addEventListener('click', (e) => {
+        const favBtn = e.target.closest('.btn-fav');
+        if (favBtn) {
+          e.preventDefault();
+          e.stopPropagation();
+          const id = favBtn.getAttribute('data-id');
+          if (id !== null) this.toggleFavorite(id);
+          return;
+        }
+
+        const card = e.target.closest('.game-card');
+        const playBtn = e.target.closest('.btn-card-play');
+        if (card || playBtn) {
+          e.preventDefault();
+          e.stopPropagation();
+          const target = playBtn || card;
+          const id = target.getAttribute('data-id') || (card ? card.getAttribute('data-id') : null);
+          if (id !== null) {
+            this.launchGame(id);
+          }
+        }
+      });
+    }
+
+    const recentGrid = document.getElementById('recent-games-grid');
+    if (recentGrid) {
+      recentGrid.addEventListener('click', (e) => {
+        const card = e.target.closest('.recent-card');
+        if (card) {
+          e.preventDefault();
+          e.stopPropagation();
+          const id = card.getAttribute('data-id');
+          if (id !== null) {
+            this.launchGame(id);
+          }
+        }
+      });
+    }
   }
 
   openSettingsModal() {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "reaper-arcade-hub",
-  "version": "2.0.8",
-  "description": "Reaper Hub - High-Speed 788-Game Arcade Engine (Official GitHub Pages CDN Endpoint), Strict Key Gatekeeper, Security Shield, Realtime Chat & Working Game Engine",
+  "version": "2.0.9",
+  "description": "Reaper Hub - Full Click Delegation & Recoded Games Tab, Direct 788-Game Loading (GitHub Pages CDN), Strict Key Gatekeeper, Security Shield & Realtime Chat",
   "main": "main/index.html",
   "unpkg": "main/index.html",
   "jsdelivr": "main/index.html",