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 +2 -3
- package/index.html +26 -18
- package/js/app.js +17 -29
- package/main/css/styles.css +2 -3
- package/main/index.html +26 -18
- package/main/js/app.js +17 -29
- package/package.json +3 -7
- package/verify/css/styles.css +2 -3
package/css/styles.css
CHANGED
|
@@ -937,12 +937,11 @@ body {
|
|
|
937
937
|
.game-player-modal {
|
|
938
938
|
display: none;
|
|
939
939
|
position: fixed;
|
|
940
|
-
|
|
941
|
-
left: 0;
|
|
940
|
+
inset: 0;
|
|
942
941
|
width: 100vw;
|
|
943
942
|
height: 100vh;
|
|
944
943
|
background: #000;
|
|
945
|
-
z-index:
|
|
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
|
-
<!--
|
|
22
|
-
<div id="app-splash-screen" style="position: fixed; inset: 0; width: 100vw; height: 100vh; background: radial-gradient(circle at center, #
|
|
23
|
-
<div class="splash-content" style="max-width:
|
|
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
|
|
26
|
-
<div style="
|
|
27
|
-
<
|
|
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
|
-
<
|
|
31
|
-
|
|
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
|
-
<!--
|
|
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: #
|
|
36
|
-
<span style="font-size: 0.65rem; color: #00d2ff; background: #
|
|
37
|
-
<span style="font-size: 0.65rem; color: #ffd700; background: #
|
|
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
|
-
<!--
|
|
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.
|
|
42
|
-
<div id="splash-quote-text" class="splash-quote-text" style="font-size: 0.
|
|
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:
|
|
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.
|
|
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
|
-
|
|
1891
|
-
|
|
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 = '
|
|
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
|
-
|
|
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/main/css/styles.css
CHANGED
|
@@ -937,12 +937,11 @@ body {
|
|
|
937
937
|
.game-player-modal {
|
|
938
938
|
display: none;
|
|
939
939
|
position: fixed;
|
|
940
|
-
|
|
941
|
-
left: 0;
|
|
940
|
+
inset: 0;
|
|
942
941
|
width: 100vw;
|
|
943
942
|
height: 100vh;
|
|
944
943
|
background: #000;
|
|
945
|
-
z-index:
|
|
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
|
-
<!--
|
|
22
|
-
<div id="app-splash-screen" style="position: fixed; inset: 0; width: 100vw; height: 100vh; background: radial-gradient(circle at center, #
|
|
23
|
-
<div class="splash-content" style="max-width:
|
|
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
|
|
26
|
-
<div style="
|
|
27
|
-
<
|
|
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
|
-
<
|
|
31
|
-
|
|
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
|
-
<!--
|
|
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: #
|
|
36
|
-
<span style="font-size: 0.65rem; color: #00d2ff; background: #
|
|
37
|
-
<span style="font-size: 0.65rem; color: #ffd700; background: #
|
|
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
|
-
<!--
|
|
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.
|
|
42
|
-
<div id="splash-quote-text" class="splash-quote-text" style="font-size: 0.
|
|
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:
|
|
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.
|
|
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
|
-
|
|
1891
|
-
|
|
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 = '
|
|
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
|
-
|
|
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.
|
|
4
|
-
"description": "Reaper Hub - 788 High-Speed HTML5 Games,
|
|
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",
|
package/verify/css/styles.css
CHANGED
|
@@ -937,12 +937,11 @@ body {
|
|
|
937
937
|
.game-player-modal {
|
|
938
938
|
display: none;
|
|
939
939
|
position: fixed;
|
|
940
|
-
|
|
941
|
-
left: 0;
|
|
940
|
+
inset: 0;
|
|
942
941
|
width: 100vw;
|
|
943
942
|
height: 100vh;
|
|
944
943
|
background: #000;
|
|
945
|
-
z-index:
|
|
944
|
+
z-index: 99999;
|
|
946
945
|
flex-direction: column;
|
|
947
946
|
}
|
|
948
947
|
|