reaper-arcade-hub 1.1.2 → 1.1.3
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/index.html +26 -17
- package/js/app.js +12 -4
- package/main/index.html +26 -17
- package/main/js/app.js +12 -4
- package/package.json +2 -5
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
|
|
package/js/app.js
CHANGED
|
@@ -1645,7 +1645,7 @@ class ReaperHubApp {
|
|
|
1645
1645
|
const playCountStr = this.formatPlayCount(playCount);
|
|
1646
1646
|
|
|
1647
1647
|
return `
|
|
1648
|
-
<div class="game-card" onclick="app.launchGame(${game.id})">
|
|
1648
|
+
<div class="game-card" onclick="app.launchGame('${game.id}')">
|
|
1649
1649
|
<div class="game-thumb-container">
|
|
1650
1650
|
<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
1651
|
${game.featured ? '<span class="game-badge-featured">FEATURED</span>' : ''}
|
|
@@ -1777,7 +1777,7 @@ class ReaperHubApp {
|
|
|
1777
1777
|
grid.innerHTML = recent.map(g => {
|
|
1778
1778
|
const coverUrl = g.cover || `https://placehold.co/400x250/041022/ffffff?text=${encodeURIComponent(g.name)}`;
|
|
1779
1779
|
return `
|
|
1780
|
-
<div class="recent-card" onclick="app.launchGame(${g.id})">
|
|
1780
|
+
<div class="recent-card" onclick="app.launchGame('${g.id}')">
|
|
1781
1781
|
<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
1782
|
<div class="recent-card-name" title="${g.name}">${this.escapeHtml(g.name)}</div>
|
|
1783
1783
|
</div>
|
|
@@ -1887,8 +1887,16 @@ class ReaperHubApp {
|
|
|
1887
1887
|
}
|
|
1888
1888
|
|
|
1889
1889
|
async launchGame(gameId) {
|
|
1890
|
-
|
|
1891
|
-
|
|
1890
|
+
if (gameId === undefined || gameId === null) return;
|
|
1891
|
+
const cleanId = String(gameId).trim();
|
|
1892
|
+
const game = this.games.find(g => String(g.id) === cleanId || Number(g.id) === Number(cleanId)) ||
|
|
1893
|
+
this.games.find(g => g.name && String(g.name).toLowerCase() === cleanId.toLowerCase()) ||
|
|
1894
|
+
this.games.find(g => g.url && String(g.url).toLowerCase().includes(cleanId.toLowerCase()));
|
|
1895
|
+
if (!game) {
|
|
1896
|
+
console.warn("[REAPER] Game not found for identifier:", gameId);
|
|
1897
|
+
this.showToast("Could not find requested game.");
|
|
1898
|
+
return;
|
|
1899
|
+
}
|
|
1892
1900
|
this.currentGame = game;
|
|
1893
1901
|
this.recordRecentlyPlayed(game);
|
|
1894
1902
|
|
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
|
|
package/main/js/app.js
CHANGED
|
@@ -1645,7 +1645,7 @@ class ReaperHubApp {
|
|
|
1645
1645
|
const playCountStr = this.formatPlayCount(playCount);
|
|
1646
1646
|
|
|
1647
1647
|
return `
|
|
1648
|
-
<div class="game-card" onclick="app.launchGame(${game.id})">
|
|
1648
|
+
<div class="game-card" onclick="app.launchGame('${game.id}')">
|
|
1649
1649
|
<div class="game-thumb-container">
|
|
1650
1650
|
<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
1651
|
${game.featured ? '<span class="game-badge-featured">FEATURED</span>' : ''}
|
|
@@ -1777,7 +1777,7 @@ class ReaperHubApp {
|
|
|
1777
1777
|
grid.innerHTML = recent.map(g => {
|
|
1778
1778
|
const coverUrl = g.cover || `https://placehold.co/400x250/041022/ffffff?text=${encodeURIComponent(g.name)}`;
|
|
1779
1779
|
return `
|
|
1780
|
-
<div class="recent-card" onclick="app.launchGame(${g.id})">
|
|
1780
|
+
<div class="recent-card" onclick="app.launchGame('${g.id}')">
|
|
1781
1781
|
<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
1782
|
<div class="recent-card-name" title="${g.name}">${this.escapeHtml(g.name)}</div>
|
|
1783
1783
|
</div>
|
|
@@ -1887,8 +1887,16 @@ class ReaperHubApp {
|
|
|
1887
1887
|
}
|
|
1888
1888
|
|
|
1889
1889
|
async launchGame(gameId) {
|
|
1890
|
-
|
|
1891
|
-
|
|
1890
|
+
if (gameId === undefined || gameId === null) return;
|
|
1891
|
+
const cleanId = String(gameId).trim();
|
|
1892
|
+
const game = this.games.find(g => String(g.id) === cleanId || Number(g.id) === Number(cleanId)) ||
|
|
1893
|
+
this.games.find(g => g.name && String(g.name).toLowerCase() === cleanId.toLowerCase()) ||
|
|
1894
|
+
this.games.find(g => g.url && String(g.url).toLowerCase().includes(cleanId.toLowerCase()));
|
|
1895
|
+
if (!game) {
|
|
1896
|
+
console.warn("[REAPER] Game not found for identifier:", gameId);
|
|
1897
|
+
this.showToast("Could not find requested game.");
|
|
1898
|
+
return;
|
|
1899
|
+
}
|
|
1892
1900
|
this.currentGame = game;
|
|
1893
1901
|
this.recordRecentlyPlayed(game);
|
|
1894
1902
|
|
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.3",
|
|
4
|
+
"description": "Reaper Hub - 788 High-Speed HTML5 Games, Sleek Cyber Orbit Loader, Robust Game Launcher & Recently Played Fix, AI Name Privacy Filter, Potato PC Performance Mode, Top Plays, 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,9 +14,6 @@
|
|
|
14
14
|
"html5",
|
|
15
15
|
"unblocked",
|
|
16
16
|
"arcade",
|
|
17
|
-
"unban",
|
|
18
|
-
"moderation",
|
|
19
|
-
"privacy",
|
|
20
17
|
"performance",
|
|
21
18
|
"leaderboard",
|
|
22
19
|
"dms",
|