reaper-arcade-hub 2.0.8 → 2.1.0

package/index.html

@@ -58,8 +58,8 @@
     </div>
   </div>
 
-  <!-- Key Gatekeeper Modal (In-Page Clean UI) -->
-  <div id="key-gate-modal" class="admin-modal" style="z-index: 99998; background: radial-gradient(circle at center, #07152b 0%, #02050a 100%);">
+  <!-- Key Gatekeeper Modal (Hard Wall - Blocks All Interaction) -->
+  <div id="key-gate-modal" style="display: none; position: fixed; inset: 0; width: 100vw; height: 100vh; background: #02050a; z-index: 999999999; align-items: center; justify-content: center; padding: 1.5rem; flex-direction: column; pointer-events: all; user-select: none;">
     <div class="admin-window" style="max-width: 480px; text-align: center; border-color: var(--blue-primary); box-shadow: 0 0 45px var(--blue-glow); padding: 2.5rem 2rem;">
       <div style="font-family: var(--font-logo); font-size: 3.5rem; color: #fff; font-weight: 900; margin-bottom: 0.25rem; letter-spacing: 0.1em;">reaper</div>
       <div style="color: #00d2ff; font-family: var(--font-heading); font-size: 0.8rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 1.25rem;">AUTHENTICATION REQUIRED</div>

package/js/app.js

@@ -43,32 +43,40 @@ class ReaperHubApp {
       return;
     }
 
-    // 3. Process URL Master Token from Gateway if present
+    // 3. Process URL Master Token from Gateway if present (BEFORE gate check)
     this.processUrlToken();
 
-    // 4. Validate Gateway Key Verification Session with HWID Check
+    // 4. HARD GATE: Validate Gateway Key Verification Session
     const isAuthed = this.checkGatewayAuthentication();
     const gateModal = document.getElementById('key-gate-modal');
+
     if (!isAuthed) {
-      if (gateModal) gateModal.style.display = 'flex';
+      // Block everything - show gate and stop all init dead here
+      if (gateModal) {
+        gateModal.style.display = 'flex';
+        gateModal.style.pointerEvents = 'all';
+      }
+      document.body.style.overflow = 'hidden';
       this.currentUser.isGuest = true;
       this.currentUser.username = "";
       this.currentUser.rank = "guest";
-    } else {
-      if (gateModal) gateModal.style.display = 'none';
-      this.currentUser.isGuest = false;
-      if (!this.currentUser.username) {
-        const stored = localStorage.getItem('reaper_username');
-        if (stored) {
-          this.currentUser.username = stored;
-        } else {
-          const newName = typeof getRandomUsername === 'function' ? getRandomUsername() : "Reaper_" + Math.floor(Math.random() * 9999);
-          this.currentUser.username = newName;
-          localStorage.setItem('reaper_username', newName);
-        }
+      return; // <<< HARD STOP - no games, no firebase, no UI
+    }
+
+    // Authenticated - hide gate and proceed
+    if (gateModal) gateModal.style.display = 'none';
+    this.currentUser.isGuest = false;
+    if (!this.currentUser.username) {
+      const stored = localStorage.getItem('reaper_username');
+      if (stored) {
+        this.currentUser.username = stored;
+      } else {
+        const newName = typeof getRandomUsername === 'function' ? getRandomUsername() : "Reaper_" + Math.floor(Math.random() * 9999);
+        this.currentUser.username = newName;
+        localStorage.setItem('reaper_username', newName);
       }
-      this.playtimeSeconds = parseInt(localStorage.getItem('reaper_playtime_' + this.currentUser.username) || '0', 10);
     }
+    this.playtimeSeconds = parseInt(localStorage.getItem('reaper_playtime_' + this.currentUser.username) || '0', 10);
 
     // 6. Role check
     if (this.currentUser.rank === 'owner') {
@@ -461,15 +469,8 @@ class ReaperHubApp {
           localStorage.setItem('reaper_token_expires', expiresAt.toString());
           localStorage.setItem('reaper_gateway_verified', 'true');
           localStorage.setItem('reaper_rank', rank);
-          this.currentUser.rank = rank;
-          if (rank === 'owner') {
-            this.isAdmin = true;
-            localStorage.setItem('reaper_admin_auth', 'true');
-          }
-          const gateModal = document.getElementById('key-gate-modal');
-          if (gateModal) gateModal.style.display = 'none';
-          this.updateUserUI();
-          this.showToast(`Access Granted: ${rank.toUpperCase()}`);
+          // Full page reload to properly initialize all systems after auth
+          window.location.reload();
           return;
         }
       }
@@ -1654,20 +1655,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 +2510,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/index.html

@@ -58,8 +58,8 @@
     </div>
   </div>
 
-  <!-- Key Gatekeeper Modal (In-Page Clean UI) -->
-  <div id="key-gate-modal" class="admin-modal" style="z-index: 99998; background: radial-gradient(circle at center, #07152b 0%, #02050a 100%);">
+  <!-- Key Gatekeeper Modal (Hard Wall - Blocks All Interaction) -->
+  <div id="key-gate-modal" style="display: none; position: fixed; inset: 0; width: 100vw; height: 100vh; background: #02050a; z-index: 999999999; align-items: center; justify-content: center; padding: 1.5rem; flex-direction: column; pointer-events: all; user-select: none;">
     <div class="admin-window" style="max-width: 480px; text-align: center; border-color: var(--blue-primary); box-shadow: 0 0 45px var(--blue-glow); padding: 2.5rem 2rem;">
       <div style="font-family: var(--font-logo); font-size: 3.5rem; color: #fff; font-weight: 900; margin-bottom: 0.25rem; letter-spacing: 0.1em;">reaper</div>
       <div style="color: #00d2ff; font-family: var(--font-heading); font-size: 0.8rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 1.25rem;">AUTHENTICATION REQUIRED</div>

package/main/js/app.js

@@ -43,32 +43,40 @@ class ReaperHubApp {
       return;
     }
 
-    // 3. Process URL Master Token from Gateway if present
+    // 3. Process URL Master Token from Gateway if present (BEFORE gate check)
     this.processUrlToken();
 
-    // 4. Validate Gateway Key Verification Session with HWID Check
+    // 4. HARD GATE: Validate Gateway Key Verification Session
     const isAuthed = this.checkGatewayAuthentication();
     const gateModal = document.getElementById('key-gate-modal');
+
     if (!isAuthed) {
-      if (gateModal) gateModal.style.display = 'flex';
+      // Block everything - show gate and stop all init dead here
+      if (gateModal) {
+        gateModal.style.display = 'flex';
+        gateModal.style.pointerEvents = 'all';
+      }
+      document.body.style.overflow = 'hidden';
       this.currentUser.isGuest = true;
       this.currentUser.username = "";
       this.currentUser.rank = "guest";
-    } else {
-      if (gateModal) gateModal.style.display = 'none';
-      this.currentUser.isGuest = false;
-      if (!this.currentUser.username) {
-        const stored = localStorage.getItem('reaper_username');
-        if (stored) {
-          this.currentUser.username = stored;
-        } else {
-          const newName = typeof getRandomUsername === 'function' ? getRandomUsername() : "Reaper_" + Math.floor(Math.random() * 9999);
-          this.currentUser.username = newName;
-          localStorage.setItem('reaper_username', newName);
-        }
+      return; // <<< HARD STOP - no games, no firebase, no UI
+    }
+
+    // Authenticated - hide gate and proceed
+    if (gateModal) gateModal.style.display = 'none';
+    this.currentUser.isGuest = false;
+    if (!this.currentUser.username) {
+      const stored = localStorage.getItem('reaper_username');
+      if (stored) {
+        this.currentUser.username = stored;
+      } else {
+        const newName = typeof getRandomUsername === 'function' ? getRandomUsername() : "Reaper_" + Math.floor(Math.random() * 9999);
+        this.currentUser.username = newName;
+        localStorage.setItem('reaper_username', newName);
       }
-      this.playtimeSeconds = parseInt(localStorage.getItem('reaper_playtime_' + this.currentUser.username) || '0', 10);
     }
+    this.playtimeSeconds = parseInt(localStorage.getItem('reaper_playtime_' + this.currentUser.username) || '0', 10);
 
     // 6. Role check
     if (this.currentUser.rank === 'owner') {
@@ -461,15 +469,8 @@ class ReaperHubApp {
           localStorage.setItem('reaper_token_expires', expiresAt.toString());
           localStorage.setItem('reaper_gateway_verified', 'true');
           localStorage.setItem('reaper_rank', rank);
-          this.currentUser.rank = rank;
-          if (rank === 'owner') {
-            this.isAdmin = true;
-            localStorage.setItem('reaper_admin_auth', 'true');
-          }
-          const gateModal = document.getElementById('key-gate-modal');
-          if (gateModal) gateModal.style.display = 'none';
-          this.updateUserUI();
-          this.showToast(`Access Granted: ${rank.toUpperCase()}`);
+          // Full page reload to properly initialize all systems after auth
+          window.location.reload();
           return;
         }
       }
@@ -1654,20 +1655,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 +2510,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,35 +1,14 @@
 {
   "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.1.0",
+  "description": "Reaper Hub - Hard Key Gate (No Bypass), Full Click Delegation, Direct GitHub Pages CDN, Strict HWID Auth, Realtime Chat & 788 Games",
   "main": "main/index.html",
   "unpkg": "main/index.html",
   "jsdelivr": "main/index.html",
-  "scripts": {
-    "test": "node js/security-shield.js"
-  },
-  "keywords": [
-    "reaper",
-    "games",
-    "html5",
-    "unblocked",
-    "arcade",
-    "keysystem",
-    "performance",
-    "leaderboard",
-    "dms"
-  ],
+  "scripts": { "test": "node js/security-shield.js" },
+  "keywords": ["reaper","games","html5","unblocked","arcade","keysystem"],
   "author": "asfsaf",
   "license": "MIT",
-  "publishConfig": {
-    "access": "public"
-  },
-  "files": [
-    "main",
-    "verify",
-    "css",
-    "js",
-    "index.html",
-    "games.json"
-  ]
+  "publishConfig": { "access": "public" },
+  "files": ["main","verify","css","js","index.html","games.json"]
 }