reaper-arcade-hub 1.0.6 → 1.0.7

package/css/styles.css

@@ -960,12 +960,21 @@ body {
   flex: 1;
   position: relative;
   background: #000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: calc(100vh - 52px);
+  overflow: hidden;
 }
 
 .player-iframe {
   width: 100%;
   height: 100%;
   border: none;
+  display: block;
+  background: #000;
+  outline: none;
 }
 
 .reaper-watermark {

package/index.html

@@ -588,7 +588,7 @@
       </div>
     </div>
     <div class="player-frame-wrapper">
-      <iframe id="player-iframe" class="player-iframe" src="about:blank" allowfullscreen="true" allow="autoplay; fullscreen; gamepad"></iframe>
+      <iframe id="player-iframe" class="player-iframe" src="about:blank" allowfullscreen="true" allow="autoplay; fullscreen; gamepad; focus-without-user-activation; pointer-lock"></iframe>
       <div class="reaper-watermark">REAPER HUB</div>
     </div>
   </div>

package/js/app.js

@@ -1705,6 +1705,71 @@ class ReaperHubApp {
     }
   }
 
+  cleanAndOptimizeGameHTML(html) {
+    if (!html || typeof html !== 'string') return '';
+    let cleaned = html;
+
+    // 1. Strip sidebar ads and blocking overlays
+    cleaned = cleaned.replace(/<div id="sidebarad1"[\s\S]*?<\/div>\s*<\/div>/gi, '');
+    cleaned = cleaned.replace(/<div id="sidebarad2"[\s\S]*?<\/div>\s*<\/div>/gi, '');
+    cleaned = cleaned.replace(/<style>[\s\S]*?#sidebarad1[\s\S]*?<\/style>/gi, '');
+
+    // 2. Inject high-performance responsive scaling, centering & click-focus engine
+    const injectStyles = `
+      <style id="reaper-game-enhancer">
+        * { box-sizing: border-box; }
+        html, body {
+          margin: 0 !important;
+          padding: 0 !important;
+          width: 100vw !important;
+          height: 100vh !important;
+          overflow: hidden !important;
+          background: #000 !important;
+          display: flex !important;
+          align-items: center !important;
+          justify-content: center !important;
+        }
+        canvas, #canvas, #game, #game-container, #unity-container, #unity-canvas, .game-canvas, #c2canvas, embed, object {
+          max-width: 100vw !important;
+          max-height: 100vh !important;
+          width: 100% !important;
+          height: 100% !important;
+          object-fit: contain !important;
+          display: block !important;
+          margin: auto !important;
+          outline: none !important;
+          pointer-events: auto !important;
+        }
+        #sidebarad1, #sidebarad2, [id*="sidebarad" i], [class*="sidebarad" i], [id*="google_ads" i], [id*="ad-container" i], [class*="ad-container" i] {
+          display: none !important;
+          visibility: hidden !important;
+          width: 0 !important;
+          height: 0 !important;
+          pointer-events: none !important;
+          z-index: -9999 !important;
+        }
+      </style>
+      <script>
+        // Neutralize ad popups & focus game canvas
+        window.open = function() { return null; };
+        window.addEventListener('load', function() {
+          const c = document.querySelector('canvas') || document.querySelector('#game');
+          if (c && c.focus) c.focus();
+        });
+      <\/script>
+    `;
+
+    if (cleaned.includes('<head>')) {
+      cleaned = cleaned.replace('<head>', '<head>' + injectStyles);
+    } else if (cleaned.includes('<html>')) {
+      cleaned = cleaned.replace('<html>', '<html><head>' + injectStyles + '</head>');
+    } else {
+      cleaned = injectStyles + cleaned;
+    }
+
+    return cleaned;
+  }
+
   async launchGame(gameId) {
     const game = this.games.find(g => g.id === gameId);
     if (!game) return;
@@ -1742,11 +1807,8 @@ class ReaperHubApp {
         if (res.ok) {
           let html = await res.text();
           if (html && html.length > 50) {
-            html = html.replace(/https?:\/\/cdn\.jsdelivr\.net\/gh\//g, 'https://fastly.jsdelivr.net/gh/');
-            html = html.replace(/https?:\/\/cdn\.jsdelivr\.net\/npm\//g, 'https://fastly.jsdelivr.net/npm/');
-            
-            iframe.srcdoc = html;
-            if (statusBadge) statusBadge.textContent = 'ONLINE';
+            iframe.srcdoc = this.cleanAndOptimizeGameHTML(html);
+            if (statusBadge) statusBadge.textContent = 'ONLINE (60 FPS)';
             return;
           }
         }
@@ -1754,8 +1816,16 @@ class ReaperHubApp {
         console.warn("Direct fetch fallback:", err);
       }
 
-      iframe.src = `https://fastly.jsdelivr.net/gh/gn-math/html@main/${filename}`;
-      if (statusBadge) statusBadge.textContent = 'FALLBACK CDN';
+      // High-speed fallback directly via proxy
+      try {
+        const fallbackRes = await fetch(`https://raw.githubusercontent.com/gn-math/html/main/${filename}`);
+        const fallbackHtml = await fallbackRes.text();
+        iframe.srcdoc = this.cleanAndOptimizeGameHTML(fallbackHtml);
+        if (statusBadge) statusBadge.textContent = 'ONLINE';
+      } catch(e) {
+        iframe.src = `https://fastly.jsdelivr.net/gh/gn-math/html@main/${filename}`;
+        if (statusBadge) statusBadge.textContent = 'ONLINE';
+      }
     }
   }
 
@@ -1858,7 +1928,7 @@ class ReaperHubApp {
             <button onclick="document.getElementById('game-frame').contentWindow.location.reload()" class="btn-action">🔄 RELOAD</button>
           </div>
           <div class="reaper-watermark">REAPER HUB</div>
-          <iframe id="game-frame" allow="autoplay; fullscreen; gamepad" ${gameHtml ? '' : `src="https://fastly.jsdelivr.net/gh/gn-math/html@main/${filename}"`}></iframe>
+          <iframe id="game-frame" allow="autoplay; fullscreen; gamepad; focus-without-user-activation; pointer-lock" ${gameHtml ? '' : `src="https://raw.githubusercontent.com/gn-math/html/main/${filename}"`}></iframe>
         </body>
         </html>
       `);
@@ -1866,7 +1936,7 @@ class ReaperHubApp {
 
       if (gameHtml) {
         const f = doc.getElementById('game-frame');
-        if (f) f.srcdoc = gameHtml;
+        if (f) f.srcdoc = this.cleanAndOptimizeGameHTML(gameHtml);
       }
 
       this.showToast("Game opened in about:blank tab with watermark & return controls.");

package/main/css/styles.css

@@ -960,12 +960,21 @@ body {
   flex: 1;
   position: relative;
   background: #000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: calc(100vh - 52px);
+  overflow: hidden;
 }
 
 .player-iframe {
   width: 100%;
   height: 100%;
   border: none;
+  display: block;
+  background: #000;
+  outline: none;
 }
 
 .reaper-watermark {

package/main/index.html

@@ -588,7 +588,7 @@
       </div>
     </div>
     <div class="player-frame-wrapper">
-      <iframe id="player-iframe" class="player-iframe" src="about:blank" allowfullscreen="true" allow="autoplay; fullscreen; gamepad"></iframe>
+      <iframe id="player-iframe" class="player-iframe" src="about:blank" allowfullscreen="true" allow="autoplay; fullscreen; gamepad; focus-without-user-activation; pointer-lock"></iframe>
       <div class="reaper-watermark">REAPER HUB</div>
     </div>
   </div>

package/main/js/app.js

@@ -1705,6 +1705,71 @@ class ReaperHubApp {
     }
   }
 
+  cleanAndOptimizeGameHTML(html) {
+    if (!html || typeof html !== 'string') return '';
+    let cleaned = html;
+
+    // 1. Strip sidebar ads and blocking overlays
+    cleaned = cleaned.replace(/<div id="sidebarad1"[\s\S]*?<\/div>\s*<\/div>/gi, '');
+    cleaned = cleaned.replace(/<div id="sidebarad2"[\s\S]*?<\/div>\s*<\/div>/gi, '');
+    cleaned = cleaned.replace(/<style>[\s\S]*?#sidebarad1[\s\S]*?<\/style>/gi, '');
+
+    // 2. Inject high-performance responsive scaling, centering & click-focus engine
+    const injectStyles = `
+      <style id="reaper-game-enhancer">
+        * { box-sizing: border-box; }
+        html, body {
+          margin: 0 !important;
+          padding: 0 !important;
+          width: 100vw !important;
+          height: 100vh !important;
+          overflow: hidden !important;
+          background: #000 !important;
+          display: flex !important;
+          align-items: center !important;
+          justify-content: center !important;
+        }
+        canvas, #canvas, #game, #game-container, #unity-container, #unity-canvas, .game-canvas, #c2canvas, embed, object {
+          max-width: 100vw !important;
+          max-height: 100vh !important;
+          width: 100% !important;
+          height: 100% !important;
+          object-fit: contain !important;
+          display: block !important;
+          margin: auto !important;
+          outline: none !important;
+          pointer-events: auto !important;
+        }
+        #sidebarad1, #sidebarad2, [id*="sidebarad" i], [class*="sidebarad" i], [id*="google_ads" i], [id*="ad-container" i], [class*="ad-container" i] {
+          display: none !important;
+          visibility: hidden !important;
+          width: 0 !important;
+          height: 0 !important;
+          pointer-events: none !important;
+          z-index: -9999 !important;
+        }
+      </style>
+      <script>
+        // Neutralize ad popups & focus game canvas
+        window.open = function() { return null; };
+        window.addEventListener('load', function() {
+          const c = document.querySelector('canvas') || document.querySelector('#game');
+          if (c && c.focus) c.focus();
+        });
+      <\/script>
+    `;
+
+    if (cleaned.includes('<head>')) {
+      cleaned = cleaned.replace('<head>', '<head>' + injectStyles);
+    } else if (cleaned.includes('<html>')) {
+      cleaned = cleaned.replace('<html>', '<html><head>' + injectStyles + '</head>');
+    } else {
+      cleaned = injectStyles + cleaned;
+    }
+
+    return cleaned;
+  }
+
   async launchGame(gameId) {
     const game = this.games.find(g => g.id === gameId);
     if (!game) return;
@@ -1742,11 +1807,8 @@ class ReaperHubApp {
         if (res.ok) {
           let html = await res.text();
           if (html && html.length > 50) {
-            html = html.replace(/https?:\/\/cdn\.jsdelivr\.net\/gh\//g, 'https://fastly.jsdelivr.net/gh/');
-            html = html.replace(/https?:\/\/cdn\.jsdelivr\.net\/npm\//g, 'https://fastly.jsdelivr.net/npm/');
-            
-            iframe.srcdoc = html;
-            if (statusBadge) statusBadge.textContent = 'ONLINE';
+            iframe.srcdoc = this.cleanAndOptimizeGameHTML(html);
+            if (statusBadge) statusBadge.textContent = 'ONLINE (60 FPS)';
             return;
           }
         }
@@ -1754,8 +1816,16 @@ class ReaperHubApp {
         console.warn("Direct fetch fallback:", err);
       }
 
-      iframe.src = `https://fastly.jsdelivr.net/gh/gn-math/html@main/${filename}`;
-      if (statusBadge) statusBadge.textContent = 'FALLBACK CDN';
+      // High-speed fallback directly via proxy
+      try {
+        const fallbackRes = await fetch(`https://raw.githubusercontent.com/gn-math/html/main/${filename}`);
+        const fallbackHtml = await fallbackRes.text();
+        iframe.srcdoc = this.cleanAndOptimizeGameHTML(fallbackHtml);
+        if (statusBadge) statusBadge.textContent = 'ONLINE';
+      } catch(e) {
+        iframe.src = `https://fastly.jsdelivr.net/gh/gn-math/html@main/${filename}`;
+        if (statusBadge) statusBadge.textContent = 'ONLINE';
+      }
     }
   }
 
@@ -1858,7 +1928,7 @@ class ReaperHubApp {
             <button onclick="document.getElementById('game-frame').contentWindow.location.reload()" class="btn-action">🔄 RELOAD</button>
           </div>
           <div class="reaper-watermark">REAPER HUB</div>
-          <iframe id="game-frame" allow="autoplay; fullscreen; gamepad" ${gameHtml ? '' : `src="https://fastly.jsdelivr.net/gh/gn-math/html@main/${filename}"`}></iframe>
+          <iframe id="game-frame" allow="autoplay; fullscreen; gamepad; focus-without-user-activation; pointer-lock" ${gameHtml ? '' : `src="https://raw.githubusercontent.com/gn-math/html/main/${filename}"`}></iframe>
         </body>
         </html>
       `);
@@ -1866,7 +1936,7 @@ class ReaperHubApp {
 
       if (gameHtml) {
         const f = doc.getElementById('game-frame');
-        if (f) f.srcdoc = gameHtml;
+        if (f) f.srcdoc = this.cleanAndOptimizeGameHTML(gameHtml);
       }
 
       this.showToast("Game opened in about:blank tab with watermark & return controls.");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "reaper-arcade-hub",
-  "version": "1.0.6",
+  "version": "1.0.7",
   "description": "Reaper Hub - 788 High-Speed HTML5 Games, Realtime Chat, Private DMs, Playtime Leaderboard & Verification Gateway",
   "main": "main/index.html",
   "unpkg": "main/index.html",

package/verify/css/styles.css

@@ -960,12 +960,21 @@ body {
   flex: 1;
   position: relative;
   background: #000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: calc(100vh - 52px);
+  overflow: hidden;
 }
 
 .player-iframe {
   width: 100%;
   height: 100%;
   border: none;
+  display: block;
+  background: #000;
+  outline: none;
 }
 
 .reaper-watermark {