reaper-arcade-hub 1.1.2 → 1.1.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/css/styles.css CHANGED
@@ -937,12 +937,11 @@ body {
937
937
  .game-player-modal {
938
938
  display: none;
939
939
  position: fixed;
940
- top: 0;
941
- left: 0;
940
+ inset: 0;
942
941
  width: 100vw;
943
942
  height: 100vh;
944
943
  background: #000;
945
- z-index: 1000;
944
+ z-index: 99999;
946
945
  flex-direction: column;
947
946
  }
948
947
 
package/index.html CHANGED
@@ -18,34 +18,43 @@
18
18
  </head>
19
19
  <body>
20
20
 
21
- <!-- 10-Second Initial Splash Screen -->
22
- <div id="app-splash-screen" style="position: fixed; inset: 0; width: 100vw; height: 100vh; background: radial-gradient(circle at center, #061630 0%, #01040a 100%); display: flex; align-items: center; justify-content: center; z-index: 999999; flex-direction: column; padding: 1.5rem;">
23
- <div class="splash-content" style="max-width: 580px; width: 100%; text-align: center; background: rgba(3, 10, 24, 0.85); backdrop-filter: blur(16px); border: 1.5px solid rgba(0, 136, 255, 0.4); border-radius: 16px; padding: 2.5rem 2rem; box-shadow: 0 0 50px rgba(0, 136, 255, 0.25), inset 0 0 30px rgba(0, 136, 255, 0.1);">
21
+ <!-- Sleek Modern Cyber Loader (No Clutter / Smooth Glowing Rings) -->
22
+ <div id="app-splash-screen" style="position: fixed; inset: 0; width: 100vw; height: 100vh; background: radial-gradient(circle at center, #07152b 0%, #01040a 100%); display: flex; align-items: center; justify-content: center; z-index: 999999; flex-direction: column; padding: 1.5rem; transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1);">
23
+ <div class="splash-content" style="max-width: 520px; width: 100%; text-align: center; background: rgba(4, 12, 28, 0.9); backdrop-filter: blur(20px); border: 1px solid rgba(0, 150, 255, 0.35); border-radius: 16px; padding: 2.75rem 2.25rem; box-shadow: 0 0 60px rgba(0, 136, 255, 0.2), inset 0 0 20px rgba(0, 136, 255, 0.08);">
24
24
 
25
- <!-- Glowing Logo -->
26
- <div style="display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 50%; background: linear-gradient(135deg, #0088ff, #00d2ff); box-shadow: 0 0 25px #0088ff; margin-bottom: 1rem;">
27
- <span style="font-size: 2rem;">⚡</span>
25
+ <!-- Futuristic Glowing Dual-Ring Orbit Spinner -->
26
+ <div style="position: relative; width: 72px; height: 72px; margin: 0 auto 1.5rem auto; display: flex; align-items: center; justify-content: center;">
27
+ <div style="position: absolute; inset: 0; border: 2.5px solid transparent; border-top-color: #00d2ff; border-right-color: #0088ff; border-radius: 50%; animation: reaperSpin 1s linear infinite;"></div>
28
+ <div style="position: absolute; inset: 6px; border: 2px dashed rgba(0, 210, 255, 0.4); border-radius: 50%; animation: reaperSpinRev 3s linear infinite;"></div>
29
+ <div style="width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(135deg, #0088ff, #00d2ff); display: flex; align-items: center; justify-content: center; box-shadow: 0 0 20px rgba(0, 210, 255, 0.8);">
30
+ <div style="width: 14px; height: 14px; background: #fff; border-radius: 50%; box-shadow: 0 0 10px #fff;"></div>
31
+ </div>
28
32
  </div>
29
33
 
30
- <h1 class="splash-logo" style="font-family: var(--font-logo); font-size: 3.2rem; font-weight: 900; color: #fff; letter-spacing: 0.12em; margin-bottom: 0.2rem; text-shadow: 0 0 20px rgba(0, 210, 255, 0.6);">reaper</h1>
31
- <div class="splash-sub" style="font-family: var(--font-heading); font-size: 0.8rem; font-weight: 800; color: #00d2ff; letter-spacing: 0.15em; text-transform: uppercase; margin-bottom: 1.25rem;">788-GAME CORE ARCADE ENGINE</div>
34
+ <style>
35
+ @keyframes reaperSpin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
36
+ @keyframes reaperSpinRev { 0% { transform: rotate(360deg); } 100% { transform: rotate(0deg); } }
37
+ </style>
38
+
39
+ <h1 class="splash-logo" style="font-family: var(--font-logo); font-size: 2.8rem; font-weight: 900; color: #ffffff; letter-spacing: 0.15em; margin: 0 0 0.25rem 0; text-shadow: 0 0 25px rgba(0, 180, 255, 0.6);">REAPER</h1>
40
+ <div class="splash-sub" style="font-family: var(--font-mono); font-size: 0.72rem; font-weight: 700; color: #00d2ff; letter-spacing: 0.2em; text-transform: uppercase; margin-bottom: 1.5rem;">HIGH-SPEED ARCADE ENGINE • 788 TITLES</div>
32
41
 
33
- <!-- Live System Diagnostic Pills -->
42
+ <!-- Clean Minimalist Diagnostic Status Badges -->
34
43
  <div style="display: flex; gap: 0.5rem; justify-content: center; flex-wrap: wrap; margin-bottom: 1.5rem;">
35
- <span style="font-size: 0.65rem; color: #00ffaa; background: #020814; border: 1px solid #00ffaa; padding: 0.2rem 0.5rem; border-radius: 4px; font-weight: 700;">⚡ FASTLY CDN: ONLINE</span>
36
- <span style="font-size: 0.65rem; color: #00d2ff; background: #020814; border: 1px solid #00d2ff; padding: 0.2rem 0.5rem; border-radius: 4px; font-weight: 700;">🛡️ SPY SHIELD: ARMED</span>
37
- <span style="font-size: 0.65rem; color: #ffd700; background: #020814; border: 1px solid #ffd700; padding: 0.2rem 0.5rem; border-radius: 4px; font-weight: 700;">🎮 788 GAMES: READY</span>
44
+ <span style="font-size: 0.65rem; color: #00ffaa; background: #020712; border: 1px solid rgba(0, 255, 170, 0.4); padding: 0.25rem 0.6rem; border-radius: 4px; font-weight: 700; letter-spacing: 0.05em;">CDN: CONNECTED</span>
45
+ <span style="font-size: 0.65rem; color: #00d2ff; background: #020712; border: 1px solid rgba(0, 210, 255, 0.4); padding: 0.25rem 0.6rem; border-radius: 4px; font-weight: 700; letter-spacing: 0.05em;">SHIELD: ARMED</span>
46
+ <span style="font-size: 0.65rem; color: #ffd700; background: #020712; border: 1px solid rgba(255, 215, 0, 0.4); padding: 0.25rem 0.6rem; border-radius: 4px; font-weight: 700; letter-spacing: 0.05em;">CORE: READY</span>
38
47
  </div>
39
48
 
40
- <!-- Dynamic Rotating Cyber Feel-Good Quotes -->
41
- <div class="splash-quote-wrapper" style="min-height: 52px; display: flex; align-items: center; justify-content: center; background: #020612; border: 1px solid rgba(0, 136, 255, 0.3); border-radius: 8px; padding: 0.75rem 1.2rem; margin-bottom: 1.5rem;">
42
- <div id="splash-quote-text" class="splash-quote-text" style="font-size: 0.88rem; color: #e2f1ff; font-style: italic; font-weight: 500; transition: opacity 0.2s ease, transform 0.2s ease; line-height: 1.4;">"You are capable of more than you know. Lock in and dominate today."</div>
49
+ <!-- Rotating Feel-Good Cyber Quotes Card -->
50
+ <div class="splash-quote-wrapper" style="min-height: 52px; display: flex; align-items: center; justify-content: center; background: #020612; border: 1px solid rgba(0, 136, 255, 0.25); border-radius: 8px; padding: 0.85rem 1.25rem; margin-bottom: 1.5rem;">
51
+ <div id="splash-quote-text" class="splash-quote-text" style="font-size: 0.86rem; color: #e2f1ff; font-style: italic; font-weight: 500; transition: opacity 0.2s ease, transform 0.2s ease; line-height: 1.45;">"You are capable of more than you know. Lock in and dominate today."</div>
43
52
  </div>
44
53
 
45
- <div class="splash-progress-track" style="height: 8px; background: #020714; border: 1px solid var(--blue-border); border-radius: 6px; overflow: hidden; margin-bottom: 0.75rem;">
54
+ <div class="splash-progress-track" style="height: 6px; background: #020714; border: 1px solid rgba(0, 136, 255, 0.3); border-radius: 6px; overflow: hidden; margin-bottom: 0.75rem;">
46
55
  <div id="splash-progress-bar" class="splash-progress-bar" style="height: 100%; width: 0%; background: linear-gradient(90deg, #0088ff, #00d2ff, #00ffaa); border-radius: 6px; transition: width 0.1s linear; box-shadow: 0 0 12px #00d2ff;"></div>
47
56
  </div>
48
- <div id="splash-status-text" class="splash-status-text" style="font-family: var(--font-mono); font-size: 0.75rem; color: #88aacc; font-weight: 700;">[0%] INITIALIZING REAPER CORE...</div>
57
+ <div id="splash-status-text" class="splash-status-text" style="font-family: var(--font-mono); font-size: 0.72rem; color: #88aacc; font-weight: 700; letter-spacing: 0.05em;">[0%] INITIALIZING REAPER CORE...</div>
49
58
  </div>
50
59
  </div>
51
60
 
@@ -219,7 +228,6 @@
219
228
 
220
229
  <div class="filter-pills">
221
230
  <button class="filter-btn active" data-cat="all">ALL</button>
222
- <button class="filter-btn" data-cat="top" style="color: #00ffaa; border-color: rgba(0, 255, 170, 0.4); background: rgba(0, 255, 170, 0.1);">🔥 TOP PLAYS</button>
223
231
  <button class="filter-btn" data-cat="featured">FEATURED</button>
224
232
  <button class="filter-btn" data-cat="favorites">FAVORITES</button>
225
233
  <button class="filter-btn" data-cat="fnf">FNF (50+)</button>
package/js/app.js CHANGED
@@ -1636,22 +1636,15 @@ class ReaperHubApp {
1636
1636
  return;
1637
1637
  }
1638
1638
 
1639
- const plays = this.gamePlays || JSON.parse(localStorage.getItem('reaper_game_plays') || '{}');
1640
-
1641
1639
  grid.innerHTML = this.filteredGames.map(game => {
1642
1640
  const isFav = this.favorites.map(String).includes(String(game.id));
1643
1641
  const coverUrl = game.cover || `https://placehold.co/400x250/041022/ffffff?text=${encodeURIComponent(game.name)}`;
1644
- const playCount = this.getGamePlayCount(game.id, plays);
1645
- const playCountStr = this.formatPlayCount(playCount);
1646
1642
 
1647
1643
  return `
1648
- <div class="game-card" onclick="app.launchGame(${game.id})">
1644
+ <div class="game-card" onclick="app.launchGame('${game.id}')">
1649
1645
  <div class="game-thumb-container">
1650
1646
  <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)}';" />
1651
1647
  ${game.featured ? '<span class="game-badge-featured">FEATURED</span>' : ''}
1652
- <span class="game-badge-plays" style="position: absolute; bottom: 8px; left: 8px; background: rgba(2, 8, 20, 0.85); backdrop-filter: blur(4px); border: 1px solid rgba(0, 210, 255, 0.4); color: #00d2ff; padding: 2px 7px; border-radius: 12px; font-size: 0.68rem; font-weight: 800; font-family: var(--font-mono); display: flex; align-items: center; gap: 4px; box-shadow: 0 2px 8px rgba(0,0,0,0.6);">
1653
- 🔥 ${playCountStr} Plays
1654
- </span>
1655
1648
  </div>
1656
1649
  <div class="game-info">
1657
1650
  <div class="game-title" title="${game.name}">${game.name}</div>
@@ -1661,7 +1654,7 @@ class ReaperHubApp {
1661
1654
  ${isFav ? '★ SAVED' : '☆ FAV'}
1662
1655
  </button>
1663
1656
  </div>
1664
- <button class="btn-card-play">PLAY GAME</button>
1657
+ <button class="btn-card-play" onclick="event.stopPropagation(); app.launchGame('${game.id}')">PLAY GAME</button>
1665
1658
  </div>
1666
1659
  </div>
1667
1660
  `;
@@ -1777,7 +1770,7 @@ class ReaperHubApp {
1777
1770
  grid.innerHTML = recent.map(g => {
1778
1771
  const coverUrl = g.cover || `https://placehold.co/400x250/041022/ffffff?text=${encodeURIComponent(g.name)}`;
1779
1772
  return `
1780
- <div class="recent-card" onclick="app.launchGame(${g.id})">
1773
+ <div class="recent-card" onclick="app.launchGame('${g.id}')">
1781
1774
  <img class="recent-card-img" src="${coverUrl}" alt="${g.name}" loading="lazy" onerror="this.onerror=null; this.src='https://placehold.co/400x250/041022/ffffff?text=${encodeURIComponent(g.name)}';" />
1782
1775
  <div class="recent-card-name" title="${g.name}">${this.escapeHtml(g.name)}</div>
1783
1776
  </div>
@@ -1887,16 +1880,19 @@ class ReaperHubApp {
1887
1880
  }
1888
1881
 
1889
1882
  async launchGame(gameId) {
1890
- const game = this.games.find(g => g.id === gameId);
1891
- if (!game) return;
1883
+ if (gameId === undefined || gameId === null) return;
1884
+ const cleanId = String(gameId).trim();
1885
+ const game = this.games.find(g => String(g.id) === cleanId || Number(g.id) === Number(cleanId)) ||
1886
+ this.games.find(g => g.name && String(g.name).toLowerCase() === cleanId.toLowerCase()) ||
1887
+ this.games.find(g => g.url && String(g.url).toLowerCase().includes(cleanId.toLowerCase()));
1888
+ if (!game) {
1889
+ console.warn("[REAPER] Game not found for identifier:", gameId);
1890
+ this.showToast("Could not find requested game.");
1891
+ return;
1892
+ }
1892
1893
  this.currentGame = game;
1893
1894
  this.recordRecentlyPlayed(game);
1894
1895
 
1895
- // Increment play counter in Firebase & local cache
1896
- if (window.reaperFirebase) {
1897
- window.reaperFirebase.incrementGamePlays(game.id, game.name);
1898
- }
1899
-
1900
1896
  if (window.reaperSFX) window.reaperSFX.playLaunch();
1901
1897
  if (window.reaperStarfield) {
1902
1898
  window.reaperStarfield.setWarpSpeed(true);
@@ -1909,8 +1905,8 @@ class ReaperHubApp {
1909
1905
  const statusBadge = document.getElementById('player-status-badge');
1910
1906
 
1911
1907
  if (modal && iframe) {
1912
- nameEl.textContent = game.name;
1913
- if (statusBadge) statusBadge.textContent = 'Loading...';
1908
+ if (nameEl) nameEl.textContent = game.name;
1909
+ if (statusBadge) statusBadge.textContent = 'CONNECTING...';
1914
1910
 
1915
1911
  modal.style.display = 'flex';
1916
1912
  document.body.style.overflow = 'hidden';
@@ -1922,6 +1918,7 @@ class ReaperHubApp {
1922
1918
 
1923
1919
  const filename = game.url.split('/').pop();
1924
1920
  iframe.removeAttribute('srcdoc');
1921
+ iframe.src = `https://fastly.jsdelivr.net/gh/gn-math/html@main/${filename}`;
1925
1922
 
1926
1923
  try {
1927
1924
  const res = await fetch(`https://raw.githubusercontent.com/gn-math/html/main/${filename}`);
@@ -1937,16 +1934,7 @@ class ReaperHubApp {
1937
1934
  console.warn("Direct fetch fallback:", err);
1938
1935
  }
1939
1936
 
1940
- // High-speed fallback directly via proxy
1941
- try {
1942
- const fallbackRes = await fetch(`https://raw.githubusercontent.com/gn-math/html/main/${filename}`);
1943
- const fallbackHtml = await fallbackRes.text();
1944
- iframe.srcdoc = this.cleanAndOptimizeGameHTML(fallbackHtml);
1945
- if (statusBadge) statusBadge.textContent = 'ONLINE';
1946
- } catch(e) {
1947
- iframe.src = `https://fastly.jsdelivr.net/gh/gn-math/html@main/${filename}`;
1948
- if (statusBadge) statusBadge.textContent = 'ONLINE';
1949
- }
1937
+ if (statusBadge) statusBadge.textContent = 'ONLINE (CDN)';
1950
1938
  }
1951
1939
  }
1952
1940
 
@@ -937,12 +937,11 @@ body {
937
937
  .game-player-modal {
938
938
  display: none;
939
939
  position: fixed;
940
- top: 0;
941
- left: 0;
940
+ inset: 0;
942
941
  width: 100vw;
943
942
  height: 100vh;
944
943
  background: #000;
945
- z-index: 1000;
944
+ z-index: 99999;
946
945
  flex-direction: column;
947
946
  }
948
947
 
package/main/index.html CHANGED
@@ -18,34 +18,43 @@
18
18
  </head>
19
19
  <body>
20
20
 
21
- <!-- 10-Second Initial Splash Screen -->
22
- <div id="app-splash-screen" style="position: fixed; inset: 0; width: 100vw; height: 100vh; background: radial-gradient(circle at center, #061630 0%, #01040a 100%); display: flex; align-items: center; justify-content: center; z-index: 999999; flex-direction: column; padding: 1.5rem;">
23
- <div class="splash-content" style="max-width: 580px; width: 100%; text-align: center; background: rgba(3, 10, 24, 0.85); backdrop-filter: blur(16px); border: 1.5px solid rgba(0, 136, 255, 0.4); border-radius: 16px; padding: 2.5rem 2rem; box-shadow: 0 0 50px rgba(0, 136, 255, 0.25), inset 0 0 30px rgba(0, 136, 255, 0.1);">
21
+ <!-- Sleek Modern Cyber Loader (No Clutter / Smooth Glowing Rings) -->
22
+ <div id="app-splash-screen" style="position: fixed; inset: 0; width: 100vw; height: 100vh; background: radial-gradient(circle at center, #07152b 0%, #01040a 100%); display: flex; align-items: center; justify-content: center; z-index: 999999; flex-direction: column; padding: 1.5rem; transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1);">
23
+ <div class="splash-content" style="max-width: 520px; width: 100%; text-align: center; background: rgba(4, 12, 28, 0.9); backdrop-filter: blur(20px); border: 1px solid rgba(0, 150, 255, 0.35); border-radius: 16px; padding: 2.75rem 2.25rem; box-shadow: 0 0 60px rgba(0, 136, 255, 0.2), inset 0 0 20px rgba(0, 136, 255, 0.08);">
24
24
 
25
- <!-- Glowing Logo -->
26
- <div style="display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 50%; background: linear-gradient(135deg, #0088ff, #00d2ff); box-shadow: 0 0 25px #0088ff; margin-bottom: 1rem;">
27
- <span style="font-size: 2rem;">⚡</span>
25
+ <!-- Futuristic Glowing Dual-Ring Orbit Spinner -->
26
+ <div style="position: relative; width: 72px; height: 72px; margin: 0 auto 1.5rem auto; display: flex; align-items: center; justify-content: center;">
27
+ <div style="position: absolute; inset: 0; border: 2.5px solid transparent; border-top-color: #00d2ff; border-right-color: #0088ff; border-radius: 50%; animation: reaperSpin 1s linear infinite;"></div>
28
+ <div style="position: absolute; inset: 6px; border: 2px dashed rgba(0, 210, 255, 0.4); border-radius: 50%; animation: reaperSpinRev 3s linear infinite;"></div>
29
+ <div style="width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(135deg, #0088ff, #00d2ff); display: flex; align-items: center; justify-content: center; box-shadow: 0 0 20px rgba(0, 210, 255, 0.8);">
30
+ <div style="width: 14px; height: 14px; background: #fff; border-radius: 50%; box-shadow: 0 0 10px #fff;"></div>
31
+ </div>
28
32
  </div>
29
33
 
30
- <h1 class="splash-logo" style="font-family: var(--font-logo); font-size: 3.2rem; font-weight: 900; color: #fff; letter-spacing: 0.12em; margin-bottom: 0.2rem; text-shadow: 0 0 20px rgba(0, 210, 255, 0.6);">reaper</h1>
31
- <div class="splash-sub" style="font-family: var(--font-heading); font-size: 0.8rem; font-weight: 800; color: #00d2ff; letter-spacing: 0.15em; text-transform: uppercase; margin-bottom: 1.25rem;">788-GAME CORE ARCADE ENGINE</div>
34
+ <style>
35
+ @keyframes reaperSpin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
36
+ @keyframes reaperSpinRev { 0% { transform: rotate(360deg); } 100% { transform: rotate(0deg); } }
37
+ </style>
38
+
39
+ <h1 class="splash-logo" style="font-family: var(--font-logo); font-size: 2.8rem; font-weight: 900; color: #ffffff; letter-spacing: 0.15em; margin: 0 0 0.25rem 0; text-shadow: 0 0 25px rgba(0, 180, 255, 0.6);">REAPER</h1>
40
+ <div class="splash-sub" style="font-family: var(--font-mono); font-size: 0.72rem; font-weight: 700; color: #00d2ff; letter-spacing: 0.2em; text-transform: uppercase; margin-bottom: 1.5rem;">HIGH-SPEED ARCADE ENGINE • 788 TITLES</div>
32
41
 
33
- <!-- Live System Diagnostic Pills -->
42
+ <!-- Clean Minimalist Diagnostic Status Badges -->
34
43
  <div style="display: flex; gap: 0.5rem; justify-content: center; flex-wrap: wrap; margin-bottom: 1.5rem;">
35
- <span style="font-size: 0.65rem; color: #00ffaa; background: #020814; border: 1px solid #00ffaa; padding: 0.2rem 0.5rem; border-radius: 4px; font-weight: 700;">⚡ FASTLY CDN: ONLINE</span>
36
- <span style="font-size: 0.65rem; color: #00d2ff; background: #020814; border: 1px solid #00d2ff; padding: 0.2rem 0.5rem; border-radius: 4px; font-weight: 700;">🛡️ SPY SHIELD: ARMED</span>
37
- <span style="font-size: 0.65rem; color: #ffd700; background: #020814; border: 1px solid #ffd700; padding: 0.2rem 0.5rem; border-radius: 4px; font-weight: 700;">🎮 788 GAMES: READY</span>
44
+ <span style="font-size: 0.65rem; color: #00ffaa; background: #020712; border: 1px solid rgba(0, 255, 170, 0.4); padding: 0.25rem 0.6rem; border-radius: 4px; font-weight: 700; letter-spacing: 0.05em;">CDN: CONNECTED</span>
45
+ <span style="font-size: 0.65rem; color: #00d2ff; background: #020712; border: 1px solid rgba(0, 210, 255, 0.4); padding: 0.25rem 0.6rem; border-radius: 4px; font-weight: 700; letter-spacing: 0.05em;">SHIELD: ARMED</span>
46
+ <span style="font-size: 0.65rem; color: #ffd700; background: #020712; border: 1px solid rgba(255, 215, 0, 0.4); padding: 0.25rem 0.6rem; border-radius: 4px; font-weight: 700; letter-spacing: 0.05em;">CORE: READY</span>
38
47
  </div>
39
48
 
40
- <!-- Dynamic Rotating Cyber Feel-Good Quotes -->
41
- <div class="splash-quote-wrapper" style="min-height: 52px; display: flex; align-items: center; justify-content: center; background: #020612; border: 1px solid rgba(0, 136, 255, 0.3); border-radius: 8px; padding: 0.75rem 1.2rem; margin-bottom: 1.5rem;">
42
- <div id="splash-quote-text" class="splash-quote-text" style="font-size: 0.88rem; color: #e2f1ff; font-style: italic; font-weight: 500; transition: opacity 0.2s ease, transform 0.2s ease; line-height: 1.4;">"You are capable of more than you know. Lock in and dominate today."</div>
49
+ <!-- Rotating Feel-Good Cyber Quotes Card -->
50
+ <div class="splash-quote-wrapper" style="min-height: 52px; display: flex; align-items: center; justify-content: center; background: #020612; border: 1px solid rgba(0, 136, 255, 0.25); border-radius: 8px; padding: 0.85rem 1.25rem; margin-bottom: 1.5rem;">
51
+ <div id="splash-quote-text" class="splash-quote-text" style="font-size: 0.86rem; color: #e2f1ff; font-style: italic; font-weight: 500; transition: opacity 0.2s ease, transform 0.2s ease; line-height: 1.45;">"You are capable of more than you know. Lock in and dominate today."</div>
43
52
  </div>
44
53
 
45
- <div class="splash-progress-track" style="height: 8px; background: #020714; border: 1px solid var(--blue-border); border-radius: 6px; overflow: hidden; margin-bottom: 0.75rem;">
54
+ <div class="splash-progress-track" style="height: 6px; background: #020714; border: 1px solid rgba(0, 136, 255, 0.3); border-radius: 6px; overflow: hidden; margin-bottom: 0.75rem;">
46
55
  <div id="splash-progress-bar" class="splash-progress-bar" style="height: 100%; width: 0%; background: linear-gradient(90deg, #0088ff, #00d2ff, #00ffaa); border-radius: 6px; transition: width 0.1s linear; box-shadow: 0 0 12px #00d2ff;"></div>
47
56
  </div>
48
- <div id="splash-status-text" class="splash-status-text" style="font-family: var(--font-mono); font-size: 0.75rem; color: #88aacc; font-weight: 700;">[0%] INITIALIZING REAPER CORE...</div>
57
+ <div id="splash-status-text" class="splash-status-text" style="font-family: var(--font-mono); font-size: 0.72rem; color: #88aacc; font-weight: 700; letter-spacing: 0.05em;">[0%] INITIALIZING REAPER CORE...</div>
49
58
  </div>
50
59
  </div>
51
60
 
@@ -219,7 +228,6 @@
219
228
 
220
229
  <div class="filter-pills">
221
230
  <button class="filter-btn active" data-cat="all">ALL</button>
222
- <button class="filter-btn" data-cat="top" style="color: #00ffaa; border-color: rgba(0, 255, 170, 0.4); background: rgba(0, 255, 170, 0.1);">🔥 TOP PLAYS</button>
223
231
  <button class="filter-btn" data-cat="featured">FEATURED</button>
224
232
  <button class="filter-btn" data-cat="favorites">FAVORITES</button>
225
233
  <button class="filter-btn" data-cat="fnf">FNF (50+)</button>
package/main/js/app.js CHANGED
@@ -1636,22 +1636,15 @@ class ReaperHubApp {
1636
1636
  return;
1637
1637
  }
1638
1638
 
1639
- const plays = this.gamePlays || JSON.parse(localStorage.getItem('reaper_game_plays') || '{}');
1640
-
1641
1639
  grid.innerHTML = this.filteredGames.map(game => {
1642
1640
  const isFav = this.favorites.map(String).includes(String(game.id));
1643
1641
  const coverUrl = game.cover || `https://placehold.co/400x250/041022/ffffff?text=${encodeURIComponent(game.name)}`;
1644
- const playCount = this.getGamePlayCount(game.id, plays);
1645
- const playCountStr = this.formatPlayCount(playCount);
1646
1642
 
1647
1643
  return `
1648
- <div class="game-card" onclick="app.launchGame(${game.id})">
1644
+ <div class="game-card" onclick="app.launchGame('${game.id}')">
1649
1645
  <div class="game-thumb-container">
1650
1646
  <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)}';" />
1651
1647
  ${game.featured ? '<span class="game-badge-featured">FEATURED</span>' : ''}
1652
- <span class="game-badge-plays" style="position: absolute; bottom: 8px; left: 8px; background: rgba(2, 8, 20, 0.85); backdrop-filter: blur(4px); border: 1px solid rgba(0, 210, 255, 0.4); color: #00d2ff; padding: 2px 7px; border-radius: 12px; font-size: 0.68rem; font-weight: 800; font-family: var(--font-mono); display: flex; align-items: center; gap: 4px; box-shadow: 0 2px 8px rgba(0,0,0,0.6);">
1653
- 🔥 ${playCountStr} Plays
1654
- </span>
1655
1648
  </div>
1656
1649
  <div class="game-info">
1657
1650
  <div class="game-title" title="${game.name}">${game.name}</div>
@@ -1661,7 +1654,7 @@ class ReaperHubApp {
1661
1654
  ${isFav ? '★ SAVED' : '☆ FAV'}
1662
1655
  </button>
1663
1656
  </div>
1664
- <button class="btn-card-play">PLAY GAME</button>
1657
+ <button class="btn-card-play" onclick="event.stopPropagation(); app.launchGame('${game.id}')">PLAY GAME</button>
1665
1658
  </div>
1666
1659
  </div>
1667
1660
  `;
@@ -1777,7 +1770,7 @@ class ReaperHubApp {
1777
1770
  grid.innerHTML = recent.map(g => {
1778
1771
  const coverUrl = g.cover || `https://placehold.co/400x250/041022/ffffff?text=${encodeURIComponent(g.name)}`;
1779
1772
  return `
1780
- <div class="recent-card" onclick="app.launchGame(${g.id})">
1773
+ <div class="recent-card" onclick="app.launchGame('${g.id}')">
1781
1774
  <img class="recent-card-img" src="${coverUrl}" alt="${g.name}" loading="lazy" onerror="this.onerror=null; this.src='https://placehold.co/400x250/041022/ffffff?text=${encodeURIComponent(g.name)}';" />
1782
1775
  <div class="recent-card-name" title="${g.name}">${this.escapeHtml(g.name)}</div>
1783
1776
  </div>
@@ -1887,16 +1880,19 @@ class ReaperHubApp {
1887
1880
  }
1888
1881
 
1889
1882
  async launchGame(gameId) {
1890
- const game = this.games.find(g => g.id === gameId);
1891
- if (!game) return;
1883
+ if (gameId === undefined || gameId === null) return;
1884
+ const cleanId = String(gameId).trim();
1885
+ const game = this.games.find(g => String(g.id) === cleanId || Number(g.id) === Number(cleanId)) ||
1886
+ this.games.find(g => g.name && String(g.name).toLowerCase() === cleanId.toLowerCase()) ||
1887
+ this.games.find(g => g.url && String(g.url).toLowerCase().includes(cleanId.toLowerCase()));
1888
+ if (!game) {
1889
+ console.warn("[REAPER] Game not found for identifier:", gameId);
1890
+ this.showToast("Could not find requested game.");
1891
+ return;
1892
+ }
1892
1893
  this.currentGame = game;
1893
1894
  this.recordRecentlyPlayed(game);
1894
1895
 
1895
- // Increment play counter in Firebase & local cache
1896
- if (window.reaperFirebase) {
1897
- window.reaperFirebase.incrementGamePlays(game.id, game.name);
1898
- }
1899
-
1900
1896
  if (window.reaperSFX) window.reaperSFX.playLaunch();
1901
1897
  if (window.reaperStarfield) {
1902
1898
  window.reaperStarfield.setWarpSpeed(true);
@@ -1909,8 +1905,8 @@ class ReaperHubApp {
1909
1905
  const statusBadge = document.getElementById('player-status-badge');
1910
1906
 
1911
1907
  if (modal && iframe) {
1912
- nameEl.textContent = game.name;
1913
- if (statusBadge) statusBadge.textContent = 'Loading...';
1908
+ if (nameEl) nameEl.textContent = game.name;
1909
+ if (statusBadge) statusBadge.textContent = 'CONNECTING...';
1914
1910
 
1915
1911
  modal.style.display = 'flex';
1916
1912
  document.body.style.overflow = 'hidden';
@@ -1922,6 +1918,7 @@ class ReaperHubApp {
1922
1918
 
1923
1919
  const filename = game.url.split('/').pop();
1924
1920
  iframe.removeAttribute('srcdoc');
1921
+ iframe.src = `https://fastly.jsdelivr.net/gh/gn-math/html@main/${filename}`;
1925
1922
 
1926
1923
  try {
1927
1924
  const res = await fetch(`https://raw.githubusercontent.com/gn-math/html/main/${filename}`);
@@ -1937,16 +1934,7 @@ class ReaperHubApp {
1937
1934
  console.warn("Direct fetch fallback:", err);
1938
1935
  }
1939
1936
 
1940
- // High-speed fallback directly via proxy
1941
- try {
1942
- const fallbackRes = await fetch(`https://raw.githubusercontent.com/gn-math/html/main/${filename}`);
1943
- const fallbackHtml = await fallbackRes.text();
1944
- iframe.srcdoc = this.cleanAndOptimizeGameHTML(fallbackHtml);
1945
- if (statusBadge) statusBadge.textContent = 'ONLINE';
1946
- } catch(e) {
1947
- iframe.src = `https://fastly.jsdelivr.net/gh/gn-math/html@main/${filename}`;
1948
- if (statusBadge) statusBadge.textContent = 'ONLINE';
1949
- }
1937
+ if (statusBadge) statusBadge.textContent = 'ONLINE (CDN)';
1950
1938
  }
1951
1939
  }
1952
1940
 
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "reaper-arcade-hub",
3
- "version": "1.1.2",
4
- "description": "Reaper Hub - 788 High-Speed HTML5 Games, Instant Reactive Unban & Ban Engine, AI Name Privacy Filter, Global Chat Deletion, Potato PC Performance Mode, Top Plays, Realtime Chat, Private DMs, Playtime Leaderboard & Verification Gateway",
3
+ "version": "1.1.4",
4
+ "description": "Reaper Hub - 788 High-Speed HTML5 Games, Clean Game Player, Fixed Recently Played Launcher, Sleek Cyber Orbit Loader, AI Name Privacy Filter, Potato PC Performance Mode, Realtime Chat, Private DMs & Playtime Leaderboard",
5
5
  "main": "main/index.html",
6
6
  "unpkg": "main/index.html",
7
7
  "jsdelivr": "main/index.html",
@@ -14,13 +14,9 @@
14
14
  "html5",
15
15
  "unblocked",
16
16
  "arcade",
17
- "unban",
18
- "moderation",
19
- "privacy",
20
17
  "performance",
21
18
  "leaderboard",
22
- "dms",
23
- "topplays"
19
+ "dms"
24
20
  ],
25
21
  "author": "asfsaf",
26
22
  "license": "MIT",
@@ -937,12 +937,11 @@ body {
937
937
  .game-player-modal {
938
938
  display: none;
939
939
  position: fixed;
940
- top: 0;
941
- left: 0;
940
+ inset: 0;
942
941
  width: 100vw;
943
942
  height: 100vh;
944
943
  background: #000;
945
- z-index: 1000;
944
+ z-index: 99999;
946
945
  flex-direction: column;
947
946
  }
948
947