reaper-arcade-hub 2.1.0 → 2.3.0
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 +69 -47
- package/index.html +155 -62
- package/js/app.js +607 -225
- package/js/firebase-client.js +230 -21
- package/js/moderator.js +3 -51
- package/js/visuals.js +46 -17
- package/main/css/styles.css +69 -47
- package/main/index.html +155 -62
- package/main/js/app.js +607 -225
- package/main/js/firebase-client.js +230 -21
- package/main/js/moderator.js +3 -51
- package/main/js/visuals.js +46 -17
- package/package.json +17 -6
- package/verify/css/styles.css +69 -47
- package/verify/js/firebase-client.js +230 -21
- package/verify/js/visuals.js +46 -17
package/css/styles.css
CHANGED
|
@@ -936,13 +936,14 @@ body {
|
|
|
936
936
|
|
|
937
937
|
.game-player-modal {
|
|
938
938
|
display: none;
|
|
939
|
-
position: fixed
|
|
940
|
-
|
|
941
|
-
|
|
942
|
-
|
|
943
|
-
|
|
944
|
-
|
|
945
|
-
|
|
939
|
+
position: fixed;
|
|
940
|
+
top: 0;
|
|
941
|
+
left: 0;
|
|
942
|
+
width: 100vw;
|
|
943
|
+
height: 100vh;
|
|
944
|
+
background: #000;
|
|
945
|
+
z-index: 1000;
|
|
946
|
+
flex-direction: column;
|
|
946
947
|
}
|
|
947
948
|
|
|
948
949
|
.player-toolbar {
|
|
@@ -953,7 +954,6 @@ body {
|
|
|
953
954
|
align-items: center;
|
|
954
955
|
justify-content: space-between;
|
|
955
956
|
padding: 0 1.25rem;
|
|
956
|
-
z-index: 10;
|
|
957
957
|
}
|
|
958
958
|
|
|
959
959
|
.player-frame-wrapper {
|
|
@@ -969,12 +969,12 @@ body {
|
|
|
969
969
|
}
|
|
970
970
|
|
|
971
971
|
.player-iframe {
|
|
972
|
-
width: 100
|
|
973
|
-
height: 100
|
|
974
|
-
border: none
|
|
975
|
-
display: block
|
|
976
|
-
background: #000
|
|
977
|
-
outline: none
|
|
972
|
+
width: 100%;
|
|
973
|
+
height: 100%;
|
|
974
|
+
border: none;
|
|
975
|
+
display: block;
|
|
976
|
+
background: #000;
|
|
977
|
+
outline: none;
|
|
978
978
|
}
|
|
979
979
|
|
|
980
980
|
.reaper-watermark {
|
|
@@ -1079,52 +1079,74 @@ body {
|
|
|
1079
1079
|
}
|
|
1080
1080
|
|
|
1081
1081
|
/* ========================================== */
|
|
1082
|
-
/*
|
|
1082
|
+
/* TURBO MODE - ZERO-LAG PERFORMANCE ENGINE */
|
|
1083
1083
|
/* ========================================== */
|
|
1084
|
-
|
|
1085
|
-
|
|
1084
|
+
.btn-turbo {
|
|
1085
|
+
background: rgba(0, 210, 255, 0.12);
|
|
1086
|
+
border: 1.5px solid #00d2ff;
|
|
1087
|
+
color: #00d2ff;
|
|
1088
|
+
font-family: var(--font-mono);
|
|
1089
|
+
font-size: 0.78rem;
|
|
1090
|
+
font-weight: 800;
|
|
1091
|
+
padding: 0.35rem 0.75rem;
|
|
1092
|
+
border-radius: 6px;
|
|
1093
|
+
cursor: pointer;
|
|
1094
|
+
display: flex;
|
|
1095
|
+
align-items: center;
|
|
1096
|
+
gap: 0.4rem;
|
|
1097
|
+
transition: all 0.2s ease;
|
|
1098
|
+
letter-spacing: 0.05em;
|
|
1086
1099
|
}
|
|
1087
1100
|
|
|
1088
|
-
|
|
1089
|
-
|
|
1090
|
-
|
|
1091
|
-
|
|
1092
|
-
-
|
|
1093
|
-
|
|
1094
|
-
|
|
1101
|
+
.btn-turbo.active {
|
|
1102
|
+
background: #00e676;
|
|
1103
|
+
border-color: #00ff88;
|
|
1104
|
+
color: #02050a;
|
|
1105
|
+
box-shadow: 0 0 16px rgba(0, 255, 136, 0.6);
|
|
1106
|
+
}
|
|
1107
|
+
|
|
1108
|
+
.btn-turbo:hover {
|
|
1109
|
+
transform: scale(1.04);
|
|
1095
1110
|
}
|
|
1096
1111
|
|
|
1097
|
-
|
|
1098
|
-
|
|
1112
|
+
/* Ultra Low-Lag / Turbo Mode Active Overrides */
|
|
1113
|
+
body.turbo-mode-active * {
|
|
1114
|
+
text-shadow: none !important;
|
|
1099
1115
|
}
|
|
1100
1116
|
|
|
1101
|
-
body.
|
|
1102
|
-
|
|
1103
|
-
|
|
1117
|
+
body.turbo-mode-active .app-header,
|
|
1118
|
+
body.turbo-mode-active .admin-modal,
|
|
1119
|
+
body.turbo-mode-active .recent-bar-container,
|
|
1120
|
+
body.turbo-mode-active .game-card {
|
|
1121
|
+
backdrop-filter: none !important;
|
|
1122
|
+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6) !important;
|
|
1104
1123
|
}
|
|
1105
1124
|
|
|
1106
|
-
body.
|
|
1107
|
-
|
|
1108
|
-
|
|
1109
|
-
body.performance-mode .splash-content,
|
|
1110
|
-
body.performance-mode .recent-bar-container,
|
|
1111
|
-
body.performance-mode .game-card {
|
|
1112
|
-
background: #040c18 !important;
|
|
1113
|
-
box-shadow: none !important;
|
|
1114
|
-
transition: border-color 0.15s ease !important;
|
|
1115
|
-
transform: none !important;
|
|
1125
|
+
body.turbo-mode-active .game-card {
|
|
1126
|
+
contain: content;
|
|
1127
|
+
transform: translateZ(0);
|
|
1116
1128
|
}
|
|
1117
1129
|
|
|
1118
|
-
body.
|
|
1119
|
-
|
|
1120
|
-
border-color: #0088ff !important;
|
|
1121
|
-
box-shadow: none !important;
|
|
1130
|
+
body.turbo-mode-active #bg-canvas {
|
|
1131
|
+
opacity: 0.25;
|
|
1122
1132
|
}
|
|
1123
1133
|
|
|
1124
|
-
|
|
1125
|
-
|
|
1134
|
+
/* Spotlight Featured Game Banner */
|
|
1135
|
+
.spotlight-banner {
|
|
1136
|
+
background: linear-gradient(135deg, rgba(255, 215, 0, 0.12) 0%, rgba(0, 210, 255, 0.12) 100%);
|
|
1137
|
+
border: 2px solid #ffd700;
|
|
1138
|
+
border-radius: var(--radius-md);
|
|
1139
|
+
padding: 1rem 1.25rem;
|
|
1140
|
+
margin-bottom: 1.5rem;
|
|
1141
|
+
display: flex;
|
|
1142
|
+
align-items: center;
|
|
1143
|
+
justify-content: space-between;
|
|
1144
|
+
box-shadow: 0 0 25px rgba(255, 215, 0, 0.3);
|
|
1145
|
+
animation: spotlightGlow 3s infinite alternate;
|
|
1126
1146
|
}
|
|
1127
1147
|
|
|
1128
|
-
|
|
1129
|
-
|
|
1148
|
+
@keyframes spotlightGlow {
|
|
1149
|
+
from { box-shadow: 0 0 15px rgba(255, 215, 0, 0.2); }
|
|
1150
|
+
to { box-shadow: 0 0 35px rgba(255, 215, 0, 0.5); }
|
|
1130
1151
|
}
|
|
1152
|
+
|
package/index.html
CHANGED
|
@@ -18,48 +18,39 @@
|
|
|
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
|
+
<!-- 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);">
|
|
24
24
|
|
|
25
|
-
<!--
|
|
26
|
-
<div style="
|
|
27
|
-
<
|
|
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>
|
|
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>
|
|
32
28
|
</div>
|
|
33
29
|
|
|
34
|
-
<style>
|
|
35
|
-
|
|
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>
|
|
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>
|
|
41
32
|
|
|
42
|
-
<!--
|
|
33
|
+
<!-- Live System Diagnostic Pills -->
|
|
43
34
|
<div style="display: flex; gap: 0.5rem; justify-content: center; flex-wrap: wrap; margin-bottom: 1.5rem;">
|
|
44
|
-
<span style="font-size: 0.65rem; color: #00ffaa; background: #
|
|
45
|
-
<span style="font-size: 0.65rem; color: #00d2ff; background: #
|
|
46
|
-
<span style="font-size: 0.65rem; color: #ffd700; background: #
|
|
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>
|
|
47
38
|
</div>
|
|
48
39
|
|
|
49
|
-
<!-- Rotating Feel-Good
|
|
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.
|
|
51
|
-
<div id="splash-quote-text" class="splash-quote-text" style="font-size: 0.
|
|
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>
|
|
52
43
|
</div>
|
|
53
44
|
|
|
54
|
-
<div class="splash-progress-track" style="height:
|
|
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;">
|
|
55
46
|
<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>
|
|
56
47
|
</div>
|
|
57
|
-
<div id="splash-status-text" class="splash-status-text" style="font-family: var(--font-mono); font-size: 0.
|
|
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>
|
|
58
49
|
</div>
|
|
59
50
|
</div>
|
|
60
51
|
|
|
61
|
-
<!-- Key Gatekeeper Modal (
|
|
62
|
-
<div id="key-gate-modal" style="
|
|
52
|
+
<!-- Key Gatekeeper Modal (In-Page Clean UI) -->
|
|
53
|
+
<div id="key-gate-modal" class="admin-modal" style="z-index: 99998; background: radial-gradient(circle at center, #07152b 0%, #02050a 100%);">
|
|
63
54
|
<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;">
|
|
64
55
|
<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>
|
|
65
56
|
<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>
|
|
@@ -94,20 +85,19 @@
|
|
|
94
85
|
|
|
95
86
|
<div style="font-size: 0.88rem; line-height: 1.7; color: #d0e4ff; display: flex; flex-direction: column; gap: 1rem;">
|
|
96
87
|
<div>
|
|
97
|
-
<strong style="color: #00d2ff; font-size: 1.15rem;"
|
|
98
|
-
<p style="color: #88aacc; font-size: 0.82rem;">
|
|
88
|
+
<strong style="color: #00d2ff; font-size: 1.15rem;">⚡ Reaper Hub v2.2.0 Turbo Edition is Live!</strong>
|
|
89
|
+
<p style="color: #88aacc; font-size: 0.82rem;">Ultra High-FPS Turbo Engine & Expanded Admin Superpowers</p>
|
|
99
90
|
</div>
|
|
100
91
|
|
|
101
92
|
<p style="color: #ffffff; font-weight: 600;">
|
|
102
|
-
Welcome to Reaper Hub!
|
|
93
|
+
Welcome to Reaper Hub v2.2.0! Built on the clean, rock-solid 1.0.9 foundation with maximum lag reduction:
|
|
103
94
|
</p>
|
|
104
95
|
|
|
105
96
|
<ul style="padding-left: 1.25rem; display: flex; flex-direction: column; gap: 0.55rem; color: #e5f0ff;">
|
|
106
|
-
<li><strong
|
|
107
|
-
<li><strong
|
|
108
|
-
<li><strong
|
|
109
|
-
<li><strong
|
|
110
|
-
<li><strong>🌟 100 Feel-Good Splash Quotes:</strong> Over 100 motivating, funny, and uplifting quotes rotating smoothly on the cyber startup loader.</li>
|
|
97
|
+
<li><strong>⚡ Turbo Anti-Lag Engine:</strong> Instant memory pre-caching for 0.01s game launches, automated background canvas pausing while playing, and GPU containment for silky 60 FPS on school Chromebooks and laptops!</li>
|
|
98
|
+
<li><strong>👑 Expanded Admin Superpowers:</strong> Real-time Hub Analytics card (FPS, games, cache, keys), Enforce Global Turbo Mode broadcast, Remote Client Force-Reload, Message of the Day (MOTD), Spotlight Featured Game Pin, Clear Chat Only, and Custom Slow-Mode intervals!</li>
|
|
99
|
+
<li><strong>🎮 Direct 788-Game Streaming:</strong> Ultra-fast game delivery directly via official GitHub Pages CDN (<code>gn-math.github.io/html/</code>) with guaranteed click delegation.</li>
|
|
100
|
+
<li><strong>🔒 Hardened Key Gatekeeper:</strong> Complete protection for the hub with instant Master Owner Key (<code>679-102</code>) bypass.</li>
|
|
111
101
|
</ul>
|
|
112
102
|
</div>
|
|
113
103
|
</div>
|
|
@@ -138,10 +128,6 @@
|
|
|
138
128
|
</nav>
|
|
139
129
|
|
|
140
130
|
<div class="header-right">
|
|
141
|
-
<button class="btn-stealth" id="btn-turbo-toggle" onclick="app.togglePerformanceMode()" style="color: #00ffaa; border-color: #00ffaa; font-weight: 800;" title="Toggle Potato PC Turbo Performance Mode (Auto ON)">
|
|
142
|
-
⚡ TURBO: ON
|
|
143
|
-
</button>
|
|
144
|
-
|
|
145
131
|
<button class="btn-stealth" id="btn-sfx-toggle" onclick="app.toggleSoundFX()" title="Toggle Sci-Fi SFX">
|
|
146
132
|
🔊 SFX
|
|
147
133
|
</button>
|
|
@@ -163,6 +149,11 @@
|
|
|
163
149
|
<span class="bind-rank rank-pill rank-member" id="header-rank-badge">MEMBER</span>
|
|
164
150
|
</div>
|
|
165
151
|
|
|
152
|
+
<!-- Turbo Anti-Lag Engine Button -->
|
|
153
|
+
<button class="btn-turbo" id="header-turbo-btn" onclick="app.toggleTurboMode()" title="Toggle High-FPS Turbo Mode (Kills canvas particle lag & boosts game performance)">
|
|
154
|
+
<span id="turbo-btn-icon">⚡</span> <span id="turbo-btn-text">TURBO: OFF</span>
|
|
155
|
+
</button>
|
|
156
|
+
|
|
166
157
|
<button class="btn-stealth" id="btn-settings-toggle" onclick="app.openSettingsModal()" style="border-color: var(--blue-bright); color: #00d2ff; font-weight: 800;" title="Settings & Security Shield">
|
|
167
158
|
⚙️ Settings
|
|
168
159
|
</button>
|
|
@@ -220,6 +211,9 @@
|
|
|
220
211
|
<p class="hero-desc" style="color: var(--text-sub); font-size: 0.85rem;">788 High-Speed HTML5 Games with instant in-site player & active playtime tracker.</p>
|
|
221
212
|
</div>
|
|
222
213
|
|
|
214
|
+
<!-- Admin Spotlight / Featured Game Banner -->
|
|
215
|
+
<div id="spotlight-game-container" style="display: none;"></div>
|
|
216
|
+
|
|
223
217
|
<div class="controls-bar">
|
|
224
218
|
<div class="search-box">
|
|
225
219
|
<span style="color: #0088ff; font-size: 0.75rem; font-weight: 700;">FILTER</span>
|
|
@@ -228,6 +222,7 @@
|
|
|
228
222
|
|
|
229
223
|
<div class="filter-pills">
|
|
230
224
|
<button class="filter-btn active" data-cat="all">ALL</button>
|
|
225
|
+
<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>
|
|
231
226
|
<button class="filter-btn" data-cat="featured">FEATURED</button>
|
|
232
227
|
<button class="filter-btn" data-cat="favorites">FAVORITES</button>
|
|
233
228
|
<button class="filter-btn" data-cat="fnf">FNF (50+)</button>
|
|
@@ -285,6 +280,16 @@
|
|
|
285
280
|
<input type="checkbox" id="mod-slowmode-toggle" style="width: 22px; height: 22px; cursor: pointer; accent-color: #00ffaa;" onchange="app.toggleSlowMode(this.checked)">
|
|
286
281
|
</div>
|
|
287
282
|
|
|
283
|
+
<!-- Live Online Users for Mods -->
|
|
284
|
+
<div class="mod-section">
|
|
285
|
+
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem;">
|
|
286
|
+
<h3 style="font-size: 0.95rem; color: #00e676;">🟢 ACTIVE PLAYERS ONLINE (REALTIME)</h3>
|
|
287
|
+
<button onclick="app.renderModUsersDirectory()" class="btn-stealth" style="font-size: 0.75rem;">REFRESH</button>
|
|
288
|
+
</div>
|
|
289
|
+
<p style="color: #88aacc; font-size: 0.8rem; margin-bottom: 0.65rem;">See connected users, their rank, and their active site version.</p>
|
|
290
|
+
<div id="mod-users-directory" style="max-height: 200px; overflow-y: auto; display: flex; flex-direction: column; gap: 0.4rem;"></div>
|
|
291
|
+
</div>
|
|
292
|
+
|
|
288
293
|
<!-- Timeout User Box -->
|
|
289
294
|
<div class="mod-section">
|
|
290
295
|
<h3 style="font-size: 0.95rem; color: #fff; margin-bottom: 0.35rem;">TIMEOUT / MUTE USER</h3>
|
|
@@ -322,6 +327,92 @@
|
|
|
322
327
|
</div>
|
|
323
328
|
</div>
|
|
324
329
|
|
|
330
|
+
<!-- Superpower 1: Live Real-Time Analytics Dashboard -->
|
|
331
|
+
<div class="admin-section" style="border-color: #00d2ff; background: rgba(0, 210, 255, 0.05);">
|
|
332
|
+
<h3 style="font-size: 0.95rem; color: #00d2ff; margin-bottom: 0.6rem;">📊 LIVE HUB SYSTEM ANALYTICS</h3>
|
|
333
|
+
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 0.65rem;">
|
|
334
|
+
<div style="background: #040912; border: 1px solid var(--blue-border); padding: 0.65rem; border-radius: 6px; text-align: center;">
|
|
335
|
+
<div style="font-size: 0.7rem; color: #88aacc;">TOTAL GAMES</div>
|
|
336
|
+
<div style="font-size: 1.3rem; font-weight: 800; color: #00ffaa;" id="admin-stat-games">788</div>
|
|
337
|
+
</div>
|
|
338
|
+
<div style="background: #040912; border: 1px solid var(--blue-border); padding: 0.65rem; border-radius: 6px; text-align: center;">
|
|
339
|
+
<div style="font-size: 0.7rem; color: #88aacc;">ONLINE USERS</div>
|
|
340
|
+
<div style="font-size: 1.3rem; font-weight: 800; color: #00e676;" id="admin-stat-online">1</div>
|
|
341
|
+
</div>
|
|
342
|
+
<div style="background: #040912; border: 1px solid var(--blue-border); padding: 0.65rem; border-radius: 6px; text-align: center;">
|
|
343
|
+
<div style="font-size: 0.7rem; color: #88aacc;">TURBO CACHED</div>
|
|
344
|
+
<div style="font-size: 1.3rem; font-weight: 800; color: #00d2ff;" id="admin-stat-cached">0</div>
|
|
345
|
+
</div>
|
|
346
|
+
<div style="background: #040912; border: 1px solid var(--blue-border); padding: 0.65rem; border-radius: 6px; text-align: center;">
|
|
347
|
+
<div style="font-size: 0.7rem; color: #88aacc;">ACTIVE KEYS</div>
|
|
348
|
+
<div style="font-size: 1.3rem; font-weight: 800; color: #ffd700;" id="admin-stat-keys">0</div>
|
|
349
|
+
</div>
|
|
350
|
+
<div style="background: #040912; border: 1px solid var(--blue-border); padding: 0.65rem; border-radius: 6px; text-align: center;">
|
|
351
|
+
<div style="font-size: 0.7rem; color: #88aacc;">CLIENT FPS</div>
|
|
352
|
+
<div style="font-size: 1.3rem; font-weight: 800; color: #ff0055;" id="admin-stat-fps">60</div>
|
|
353
|
+
</div>
|
|
354
|
+
</div>
|
|
355
|
+
</div>
|
|
356
|
+
|
|
357
|
+
<!-- Superpower 6: Cross-Site Version Control & Auto-Forwarder -->
|
|
358
|
+
<div class="admin-section" style="border-color: #00ffaa; background: #02140a;">
|
|
359
|
+
<h3 style="font-size: 0.95rem; color: #00ffaa; margin-bottom: 0.4rem;">🌐 GLOBAL VERSION CONTROLLER & AUTO-REDIRECT</h3>
|
|
360
|
+
<p style="color: #88ffcc; font-size: 0.8rem; margin-bottom: 0.75rem;">
|
|
361
|
+
When you publish a new version, update this once. Any user visiting ANY old version (1.0.9, 2.0.x, etc.) will be notified and instantly brought to the new site!
|
|
362
|
+
</p>
|
|
363
|
+
<div style="display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.65rem;">
|
|
364
|
+
<input type="text" id="admin-latest-version-input" class="red-chat-input" placeholder="Latest Version (e.g. 2.3.0)" value="2.3.0" style="max-width: 140px;">
|
|
365
|
+
<input type="text" id="admin-latest-url-input" class="red-chat-input" placeholder="New UNPKG URL" value="https://unpkg.com/reaper-arcade-hub@2.3.0/main/index.html" style="flex: 1; min-width: 250px;">
|
|
366
|
+
<button class="btn-primary" style="background: #00e676; color: #02050a; font-weight: 900; border-color: #00ff88;" onclick="app.publishLatestVersionToFirebase()">
|
|
367
|
+
BROADCAST VERSION & FORWARD ALL SITES
|
|
368
|
+
</button>
|
|
369
|
+
</div>
|
|
370
|
+
</div>
|
|
371
|
+
|
|
372
|
+
<!-- Superpower 2: Global Enforce Turbo Mode (Anti-Lag Broadcast) -->
|
|
373
|
+
<div class="admin-section" style="border-color: #00ffaa; background: #03140c;">
|
|
374
|
+
<div style="display: flex; justify-content: space-between; align-items: center;">
|
|
375
|
+
<div>
|
|
376
|
+
<strong style="color: #00ffaa; font-size: 0.95rem;">⚡ ENFORCE GLOBAL TURBO MODE (ANTI-LAG)</strong>
|
|
377
|
+
<p style="color: #88ffcc; font-size: 0.8rem;">Forces low-lag Turbo Mode for ALL connected players across the hub, minimizing canvas load and maximizing game FPS.</p>
|
|
378
|
+
</div>
|
|
379
|
+
<input type="checkbox" id="admin-global-turbo-toggle" style="width: 24px; height: 24px; cursor: pointer; accent-color: #00ffaa;" onchange="app.toggleGlobalTurbo(this.checked)">
|
|
380
|
+
</div>
|
|
381
|
+
</div>
|
|
382
|
+
|
|
383
|
+
<!-- Superpower 3: Remote Force Client Refresh (Kick / Reload All) -->
|
|
384
|
+
<div class="admin-section" style="border-color: #ffaa00; background: #140d02;">
|
|
385
|
+
<div style="display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.5rem;">
|
|
386
|
+
<div>
|
|
387
|
+
<strong style="color: #ffbb33; font-size: 0.95rem;">🔄 FORCE RELOAD ALL CONNECTED PLAYERS</strong>
|
|
388
|
+
<p style="color: #ffe099; font-size: 0.8rem;">Broadcast an instant signal that triggers all connected clients to reload immediately to fetch latest site updates.</p>
|
|
389
|
+
</div>
|
|
390
|
+
<button class="btn-primary" style="background: #ff8800; border-color: #ffaa00;" onclick="app.broadcastForceReload()">FORCE ALL RELOAD NOW</button>
|
|
391
|
+
</div>
|
|
392
|
+
</div>
|
|
393
|
+
|
|
394
|
+
<!-- Superpower 4: Message of the Day (MOTD) Announcement -->
|
|
395
|
+
<div class="admin-section" style="border-color: #0088ff; background: #030c18;">
|
|
396
|
+
<h3 style="font-size: 0.95rem; color: #00d2ff; margin-bottom: 0.4rem;">📢 LIVE MESSAGE OF THE DAY (MOTD)</h3>
|
|
397
|
+
<p style="color: #adc4e2; font-size: 0.8rem; margin-bottom: 0.75rem;">Set a persistent Message of the Day displayed in the hub and global chat for all players.</p>
|
|
398
|
+
<div style="display: flex; gap: 0.5rem; flex-wrap: wrap;">
|
|
399
|
+
<input type="text" id="admin-motd-input" class="red-chat-input" placeholder="e.g. Welcome to Reaper Hub v2.2 - 60 FPS Turbo Active!" autocomplete="off" style="flex: 1; min-width: 250px;">
|
|
400
|
+
<button class="btn-primary" onclick="app.submitMotd()">SET MOTD</button>
|
|
401
|
+
<button class="btn-stealth" onclick="app.clearMotd()" style="color: #ff8888;">CLEAR</button>
|
|
402
|
+
</div>
|
|
403
|
+
</div>
|
|
404
|
+
|
|
405
|
+
<!-- Superpower 5: Pin Spotlight / Featured Game -->
|
|
406
|
+
<div class="admin-section" style="border-color: #ffd700; background: #141102;">
|
|
407
|
+
<h3 style="font-size: 0.95rem; color: #ffd700; margin-bottom: 0.4rem;">🎯 PIN SPOTLIGHT / FEATURED GAME</h3>
|
|
408
|
+
<p style="color: #ffe680; font-size: 0.8rem; margin-bottom: 0.75rem;">Choose a game to feature prominently at the very top of the Games shelf with a glowing gold banner.</p>
|
|
409
|
+
<div style="display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center;">
|
|
410
|
+
<input type="text" id="admin-spotlight-input" class="red-chat-input" placeholder="Game Name or Game ID (e.g. Slope, Retro Bowl, 12)" autocomplete="off" style="flex: 1; min-width: 220px;">
|
|
411
|
+
<button class="btn-primary" style="background: #ffd700; color: #000; font-weight: 800; border-color: #ffe066;" onclick="app.submitSpotlightGame()">SET SPOTLIGHT</button>
|
|
412
|
+
<button class="btn-stealth" onclick="app.clearSpotlightGame()" style="color: #ff8888;">CLEAR</button>
|
|
413
|
+
</div>
|
|
414
|
+
</div>
|
|
415
|
+
|
|
325
416
|
<!-- Superpower: Global Live Broadcast Alert -->
|
|
326
417
|
<div class="admin-section" style="border-color: #ff0055; background: #18030c;">
|
|
327
418
|
<h3 style="font-size: 0.95rem; color: #ff3377; margin-bottom: 0.4rem;">👑 GLOBAL LIVE BROADCAST BANNER</h3>
|
|
@@ -333,23 +424,31 @@
|
|
|
333
424
|
</div>
|
|
334
425
|
</div>
|
|
335
426
|
|
|
336
|
-
<!-- Superpower: Chat Slow-Mode Switch -->
|
|
337
|
-
<div class="admin-section" style="display: flex; justify-content: space-between; align-items: center;">
|
|
427
|
+
<!-- Superpower: Chat Slow-Mode Switch & Cooldown Selector -->
|
|
428
|
+
<div class="admin-section" style="display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.5rem;">
|
|
338
429
|
<div>
|
|
339
|
-
<strong style="color: #fff; font-size: 0.95rem;">CHAT SLOW-MODE
|
|
340
|
-
<p style="color: #88aacc; font-size: 0.8rem;">Enforces a
|
|
430
|
+
<strong style="color: #fff; font-size: 0.95rem;">CHAT SLOW-MODE COOLDOWN</strong>
|
|
431
|
+
<p style="color: #88aacc; font-size: 0.8rem;">Enforces a cooldown interval between chat messages for non-owner players.</p>
|
|
432
|
+
</div>
|
|
433
|
+
<div style="display: flex; gap: 0.5rem; align-items: center;">
|
|
434
|
+
<select id="admin-slowmode-interval" style="background: #040912; color: #00d2ff; border: 1px solid var(--blue-border); border-radius: 6px; padding: 0.45rem 0.65rem; font-size: 0.82rem; font-weight: 700;" onchange="app.changeSlowModeInterval(this.value)">
|
|
435
|
+
<option value="2">2 Seconds</option>
|
|
436
|
+
<option value="5" selected>5 Seconds (Default)</option>
|
|
437
|
+
<option value="10">10 Seconds</option>
|
|
438
|
+
<option value="30">30 Seconds</option>
|
|
439
|
+
</select>
|
|
440
|
+
<input type="checkbox" id="admin-slowmode-toggle" style="width: 22px; height: 22px; cursor: pointer; accent-color: #00d2ff;" onchange="app.toggleSlowMode(this.checked)">
|
|
341
441
|
</div>
|
|
342
|
-
<input type="checkbox" id="admin-slowmode-toggle" style="width: 22px; height: 22px; cursor: pointer; accent-color: #00d2ff;" onchange="app.toggleSlowMode(this.checked)">
|
|
343
442
|
</div>
|
|
344
443
|
|
|
345
|
-
<!-- Connected Players Directory (With
|
|
444
|
+
<!-- Connected Real Players Directory (With Version & Controls) -->
|
|
346
445
|
<div class="admin-section">
|
|
347
446
|
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem;">
|
|
348
|
-
<h3 style="font-size: 0.95rem; color: #
|
|
447
|
+
<h3 style="font-size: 0.95rem; color: #00e676;">🟢 REALTIME ONLINE PLAYERS (ZERO BOTS)</h3>
|
|
349
448
|
<button onclick="app.renderAdminUsersDirectory()" class="btn-stealth" style="font-size: 0.75rem;">REFRESH LIST</button>
|
|
350
449
|
</div>
|
|
351
|
-
<p style="color: #88aacc; font-size: 0.8rem; margin-bottom: 0.65rem;">
|
|
352
|
-
<div id="admin-users-directory" style="max-height:
|
|
450
|
+
<p style="color: #88aacc; font-size: 0.8rem; margin-bottom: 0.65rem;">Active real players currently connected to the hub. View their current site version, rank, and moderation actions.</p>
|
|
451
|
+
<div id="admin-users-directory" style="max-height: 220px; overflow-y: auto; display: flex; flex-direction: column; gap: 0.4rem;"></div>
|
|
353
452
|
</div>
|
|
354
453
|
|
|
355
454
|
<!-- Custom Access Key Generator -->
|
|
@@ -474,12 +573,15 @@
|
|
|
474
573
|
|
|
475
574
|
<!-- Server Data Purge -->
|
|
476
575
|
<div class="admin-section" style="border-color: #ffaa00;">
|
|
477
|
-
<div style="display: flex; justify-content: space-between; align-items: center;">
|
|
576
|
+
<div style="display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.5rem;">
|
|
478
577
|
<div>
|
|
479
|
-
<strong style="color: #ffaa00; font-size: 0.95rem;">PURGE
|
|
480
|
-
<p style="color: #88aacc; font-size: 0.8rem;">
|
|
578
|
+
<strong style="color: #ffaa00; font-size: 0.95rem;">PURGE SERVER DATA</strong>
|
|
579
|
+
<p style="color: #88aacc; font-size: 0.8rem;">Wipe chat messages only, or perform a total server data reset across Firebase.</p>
|
|
580
|
+
</div>
|
|
581
|
+
<div style="display: flex; gap: 0.5rem;">
|
|
582
|
+
<button onclick="app.clearChatOnly()" class="btn-stealth" style="color: #ffaa00; border-color: #ffaa00; font-size: 0.78rem;">CLEAR CHAT ONLY</button>
|
|
583
|
+
<button onclick="app.purgeAllServerData()" class="btn-primary" style="background: #ff4400; border-color: #ff8800; font-size: 0.78rem;">PURGE ALL</button>
|
|
481
584
|
</div>
|
|
482
|
-
<button onclick="app.purgeAllServerData()" class="btn-primary" style="background: #ff4400; border-color: #ff8800; font-size: 0.78rem;">PURGE ALL</button>
|
|
483
585
|
</div>
|
|
484
586
|
</div>
|
|
485
587
|
|
|
@@ -743,15 +845,6 @@
|
|
|
743
845
|
<div id="st-content-prefs" style="display: none;">
|
|
744
846
|
<div style="display: flex; flex-direction: column; gap: 1.2rem;">
|
|
745
847
|
|
|
746
|
-
<!-- Performance Turbo Mode toggle -->
|
|
747
|
-
<div style="background: #040e1e; border: 1.5px solid rgba(0, 255, 170, 0.4); padding: 1rem 1.25rem; border-radius: 8px; display: flex; justify-content: space-between; align-items: center;">
|
|
748
|
-
<div>
|
|
749
|
-
<strong style="color: #00ffaa; font-size: 0.95rem;">⚡ Potato PC & Old Laptop Turbo Mode (Auto ON)</strong>
|
|
750
|
-
<p style="color: #88aacc; font-size: 0.8rem; margin-top: 0.2rem;">Disables 3D space particles, heavy blur filters, and 3D card tilt for max 60 FPS on Chromebooks & old laptops.</p>
|
|
751
|
-
</div>
|
|
752
|
-
<input type="checkbox" id="perf-mode-toggle" style="width: 22px; height: 22px; cursor: pointer; accent-color: #00ffaa;" onchange="app.togglePerformanceMode()" checked>
|
|
753
|
-
</div>
|
|
754
|
-
|
|
755
848
|
<!-- Auto about:blank toggle -->
|
|
756
849
|
<div style="background: #040e1e; border: 1px solid var(--blue-border); padding: 1rem 1.25rem; border-radius: 8px; display: flex; justify-content: space-between; align-items: center;">
|
|
757
850
|
<div>
|