reaper-arcade-hub 2.2.0 → 2.4.0

package/js/app.js

@@ -1,4 +1,6 @@
-// REAPER HUB - Core Engine (3 Roles: Member/Chat Mod/Owner, Key Limits, Cyber Font, Mod Tab)
+// REAPER HUB - Core Engine (v2.4.0 Next-Gen UI & Instant Auto-Redirect)
+window.REAPER_VERSION = "2.4.0";
+window.REAPER_LATEST_URL = "https://unpkg.com/reaper-arcade-hub@2.4.0/main/index.html";
 
 class ReaperHubApp {
   constructor() {
@@ -28,6 +30,7 @@ class ReaperHubApp {
     this.lastActivityTime = Date.now();
     this.isPausedForInactivity = false;
     this.leaderboardData = [];
+    this.onlineUsers = [];
 
     // Turbo Anti-Lag Engine & Superpower State
     this.turboMode = localStorage.getItem('reaper_turbo_mode') !== 'false'; // Default TRUE for high FPS
@@ -218,6 +221,25 @@ class ReaperHubApp {
         const select = document.getElementById('admin-slowmode-interval');
         if (select) select.value = this.slowModeInterval.toString();
       });
+      window.reaperFirebase.purgeGhostUsers();
+      window.reaperFirebase.registerOnlinePresence({
+        username: this.currentUser.username,
+        rank: this.currentUser.rank,
+        version: window.REAPER_VERSION,
+        playtime: this.playtimeSeconds
+      });
+      window.reaperFirebase.listenOnlineUsers((users) => {
+        this.onlineUsers = users || [];
+        this.renderAdminUsersDirectory();
+        this.renderModUsersDirectory();
+        const onlineCountEl = document.getElementById('admin-stat-online');
+        if (onlineCountEl) onlineCountEl.textContent = this.onlineUsers.length;
+      });
+      window.reaperFirebase.listenLatestVersion((info) => {
+        if (info && info.version && info.version !== window.REAPER_VERSION && info.forceUpgrade !== false) {
+          this.handleOldVersionDetected(info);
+        }
+      });
     }
 
     // 9. Render UI, Games, Leaderboard, Turbo Engine
@@ -508,6 +530,21 @@ class ReaperHubApp {
     alert("[ACCESS DENIED]\nInvalid, exhausted, or expired Key/Token. Please obtain a valid key from the Owner.");
   }
 
+  async pasteKeyFromClipboard() {
+    const input = document.getElementById('gate-token-input');
+    if (!input) return;
+    try {
+      const text = await navigator.clipboard.readText();
+      if (text) {
+        input.value = text.trim();
+        this.submitGateToken();
+      }
+    } catch (e) {
+      input.focus();
+      this.showToast("Paste manually or press Enter.");
+    }
+  }
+
   // ==========================================
   // CUSTOM KEY CREATION WITH MAX USES & DELETION
   // ==========================================
@@ -795,40 +832,189 @@ class ReaperHubApp {
     const container = document.getElementById('admin-users-directory');
     if (!container) return;
 
-    if (this.leaderboardData.length === 0) {
-      this.leaderboardData = [
-        { username: this.currentUser.username, seconds: this.playtimeSeconds, rank: this.currentUser.rank }
-      ];
+    // Collect REAL active users only (Zero fake bots/users)
+    const userMap = new Map();
+    if (this.currentUser && this.currentUser.username && this.currentUser.username !== 'User') {
+      userMap.set(this.currentUser.username, {
+        username: this.currentUser.username,
+        rank: this.currentUser.rank || 'member',
+        version: window.REAPER_VERSION || '2.3.0',
+        playtime: this.playtimeSeconds || 0
+      });
+    }
+
+    if (this.onlineUsers && this.onlineUsers.length > 0) {
+      this.onlineUsers.forEach(u => {
+        if (u && u.username && u.username !== 'User' && u.username !== 'Member' && u.username !== 'Anon') {
+          userMap.set(u.username, u);
+        }
+      });
+    }
+
+    const realUsers = Array.from(userMap.values());
+
+    if (realUsers.length <= 1) {
+      container.innerHTML = `
+        <div style="color: #88aacc; padding: 1.15rem; text-align: center; font-size: 0.82rem; font-family: var(--font-mono); background: #040912; border: 1px dashed var(--blue-border); border-radius: 6px;">
+          🟢 Only you are currently online. (0 fake users / 0 ghost bots)
+        </div>
+      `;
+      return;
     }
 
-    container.innerHTML = this.leaderboardData.map(u => {
+    container.innerHTML = realUsers.map(u => {
       const isSelf = u.username === this.currentUser.username;
       const currentRank = (u.rank || 'member').toLowerCase();
-      const timeStr = this.formatPlaytime(u.seconds || 0);
+      const timeStr = this.formatPlaytime(u.playtime || u.seconds || 0);
+      const userVer = u.version || '2.3.0';
+      const isLatest = userVer === window.REAPER_VERSION;
+
+      const verBadge = isLatest
+        ? `<span style="color: #00ffaa; font-size: 0.68rem; font-weight: 800; border: 1px solid #00ffaa; padding: 1px 5px; border-radius: 4px;">v${this.escapeHtml(userVer)} (LATEST)</span>`
+        : `<span style="color: #ff3377; font-size: 0.68rem; font-weight: 800; border: 1px solid #ff3377; background: rgba(255, 51, 119, 0.15); padding: 1px 5px; border-radius: 4px;">⚠️ OLD VER (v${this.escapeHtml(userVer)})</span>`;
 
       return `
-        <div style="display: flex; justify-content: space-between; align-items: center; background: #041022; padding: 0.45rem 0.75rem; border-radius: 6px; border: 1px solid var(--blue-border); font-size: 0.8rem;">
-          <div>
-            <strong style="color: #fff;" class="${currentRank === 'owner' ? 'owner-animated-name' : ''}">${this.escapeHtml(u.username || 'User')}</strong>
+        <div style="display: flex; justify-content: space-between; align-items: center; background: #041022; padding: 0.5rem 0.75rem; border-radius: 6px; border: 1px solid var(--blue-border); font-size: 0.8rem; margin-bottom: 0.35rem;">
+          <div style="display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;">
+            <span style="display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #00ffaa; box-shadow: 0 0 8px #00ffaa;"></span>
+            <strong style="color: #fff;" class="${currentRank === 'owner' ? 'owner-animated-name' : ''}">${this.escapeHtml(u.username)}</strong>
             <span class="rank-pill rank-${currentRank}">${currentRank.toUpperCase()}</span>
-            <span style="color: #88ccff; margin-left: 0.5rem;">Playtime: ${timeStr}</span>
+            ${verBadge}
+            <span style="color: #88ccff; font-size: 0.75rem;">Playtime: ${timeStr}</span>
           </div>
           <div style="display: flex; gap: 0.35rem;">
             ${!isSelf ? `
               ${currentRank === 'member' ? `
-                <button onclick="app.setUserRank('${u.username}', 'chat_mod')" class="btn-stealth" style="color: #00ffaa; padding: 0.2rem 0.5rem; font-size: 0.72rem;">+ PROMOTE MOD</button>
+                <button onclick="app.setUserRank('${this.escapeHtml(u.username)}', 'chat_mod')" class="btn-stealth" style="color: #00ffaa; padding: 0.2rem 0.5rem; font-size: 0.72rem;">+ PROMOTE MOD</button>
               ` : currentRank === 'chat_mod' || currentRank === 'mod' ? `
-                <button onclick="app.setUserRank('${u.username}', 'member')" class="btn-stealth" style="color: #ffaa00; padding: 0.2rem 0.5rem; font-size: 0.72rem;">- DE-RANK MEMBER</button>
+                <button onclick="app.setUserRank('${this.escapeHtml(u.username)}', 'member')" class="btn-stealth" style="color: #ffaa00; padding: 0.2rem 0.5rem; font-size: 0.72rem;">- DE-RANK</button>
               ` : ''}
-              <button onclick="app.kickUser('${u.username}')" class="btn-stealth" style="color: #ffaa00; padding: 0.2rem 0.5rem; font-size: 0.72rem;">KICK</button>
-              <button onclick="app.banUser('${u.username}')" class="btn-stealth" style="color: #ff5555; padding: 0.2rem 0.5rem; font-size: 0.72rem;">BAN</button>
-            ` : '<span style="color: #ffd700; font-weight: 800;">YOU</span>'}
+              <button onclick="app.kickUser('${this.escapeHtml(u.username)}')" class="btn-stealth" style="color: #ffaa00; padding: 0.2rem 0.5rem; font-size: 0.72rem;">KICK</button>
+              <button onclick="app.banUser('${this.escapeHtml(u.username)}')" class="btn-stealth" style="color: #ff5555; padding: 0.2rem 0.5rem; font-size: 0.72rem;">BAN</button>
+            ` : '<span style="color: #ffd700; font-weight: 800; font-size: 0.75rem;">YOU</span>'}
           </div>
         </div>
       `;
     }).join('');
   }
 
+  renderModUsersDirectory() {
+    const container = document.getElementById('mod-users-directory');
+    if (!container) return;
+
+    const userMap = new Map();
+    if (this.currentUser && this.currentUser.username && this.currentUser.username !== 'User') {
+      userMap.set(this.currentUser.username, {
+        username: this.currentUser.username,
+        rank: this.currentUser.rank || 'member',
+        version: window.REAPER_VERSION || '2.3.0'
+      });
+    }
+
+    if (this.onlineUsers && this.onlineUsers.length > 0) {
+      this.onlineUsers.forEach(u => {
+        if (u && u.username && u.username !== 'User' && u.username !== 'Member' && u.username !== 'Anon') {
+          userMap.set(u.username, u);
+        }
+      });
+    }
+
+    const realUsers = Array.from(userMap.values());
+
+    if (realUsers.length <= 1) {
+      container.innerHTML = `
+        <div style="color: #88aacc; padding: 0.85rem; text-align: center; font-size: 0.8rem; font-family: var(--font-mono); background: #040912; border: 1px dashed var(--blue-border); border-radius: 6px;">
+          🟢 Only you are currently online. (0 fake users)
+        </div>
+      `;
+      return;
+    }
+
+    container.innerHTML = realUsers.map(u => {
+      const isSelf = u.username === this.currentUser.username;
+      const currentRank = (u.rank || 'member').toLowerCase();
+      const userVer = u.version || '2.3.0';
+      const isLatest = userVer === window.REAPER_VERSION;
+
+      const verBadge = isLatest
+        ? `<span style="color: #00ffaa; font-size: 0.65rem; font-weight: 800; border: 1px solid #00ffaa; padding: 1px 4px; border-radius: 4px;">v${this.escapeHtml(userVer)} (LATEST)</span>`
+        : `<span style="color: #ff3377; font-size: 0.65rem; font-weight: 800; border: 1px solid #ff3377; background: rgba(255, 51, 119, 0.15); padding: 1px 4px; border-radius: 4px;">⚠️ OLD VER (v${this.escapeHtml(userVer)})</span>`;
+
+      return `
+        <div style="display: flex; justify-content: space-between; align-items: center; background: #041022; padding: 0.4rem 0.65rem; border-radius: 6px; border: 1px solid var(--blue-border); font-size: 0.78rem; margin-bottom: 0.3rem;">
+          <div style="display: flex; align-items: center; gap: 0.45rem;">
+            <span style="display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #00ffaa;"></span>
+            <strong style="color: #fff;">${this.escapeHtml(u.username)}</strong>
+            <span class="rank-pill rank-${currentRank}">${currentRank.toUpperCase()}</span>
+            ${verBadge}
+          </div>
+          <div>
+            ${!isSelf ? `
+              <button onclick="app.modApplyTimeoutToUser('${this.escapeHtml(u.username)}')" class="btn-stealth" style="color: #ffaa00; padding: 0.2rem 0.4rem; font-size: 0.7rem;">MUTE</button>
+            ` : '<span style="color: #00ffaa; font-size: 0.7rem;">YOU</span>'}
+          </div>
+        </div>
+      `;
+    }).join('');
+  }
+
+  // Cross-Site Old Version Interceptor & Forwarder
+  handleOldVersionDetected(info) {
+    if (!info || !info.version || info.version === window.REAPER_VERSION) return;
+    if (info.forceUpgrade === false) return;
+
+    const currentVer = window.REAPER_VERSION;
+    const latestVer = info.version;
+    const latestUrl = info.url || window.REAPER_LATEST_URL;
+
+    let modal = document.getElementById('version-upgrade-modal');
+    if (!modal) {
+      modal = document.createElement('div');
+      modal.id = 'version-upgrade-modal';
+      modal.style.cssText = 'position: fixed; inset: 0; background: rgba(2, 5, 10, 0.98); z-index: 9999999999; display: flex; align-items: center; justify-content: center; padding: 1.5rem; text-align: center; font-family: var(--font-heading); backdrop-filter: blur(20px);';
+      document.body.appendChild(modal);
+    }
+    
+    modal.innerHTML = `
+      <div style="max-width: 480px; background: #040e1c; border: 2px solid #00ffaa; border-radius: 16px; padding: 2.5rem 2rem; box-shadow: 0 0 60px rgba(0, 255, 170, 0.5);">
+        <div style="font-size: 3.5rem; margin-bottom: 0.5rem;">⚡</div>
+        <div style="font-size: 1.5rem; font-weight: 900; color: #00ffaa; letter-spacing: 0.08em; margin-bottom: 0.5rem;">UPGRADING TO NEW VERSION</div>
+        <p style="color: #adc4e2; font-size: 0.9rem; line-height: 1.6; margin-bottom: 1.25rem;">
+          You were on an older site build (<strong style="color: #ff5555;">v${currentVer}</strong>).<br>
+          Bringing you to the new high-speed version <strong style="color: #00ffaa;">v${latestVer}</strong> right now...
+        </p>
+        <div style="color: #00d2ff; font-size: 0.88rem; font-weight: 800; font-family: var(--font-mono);">
+          🚀 REDIRECTING NOW...
+        </div>
+      </div>
+    `;
+
+    setTimeout(() => {
+      window.location.replace(latestUrl);
+    }, 400);
+  }
+
+  // Root Owner Version Control Broadcast
+  async publishLatestVersionToFirebase() {
+    const verInput = document.getElementById('admin-latest-version-input');
+    const urlInput = document.getElementById('admin-latest-url-input');
+    const version = verInput && verInput.value.trim() ? verInput.value.trim() : window.REAPER_VERSION;
+    const url = urlInput && urlInput.value.trim() ? urlInput.value.trim() : window.REAPER_LATEST_URL;
+
+    if (window.reaperFirebase) {
+      await window.reaperFirebase.setLatestVersionInfo({
+        version: version,
+        url: url,
+        forceUpgrade: true,
+        updatedAt: Date.now()
+      });
+      // Also broadcast an emergency alert to all legacy versions (like 1.0.9) that listen to reaperGlobalAlert
+      await window.reaperFirebase.setGlobalAlert(`NOTICE: Please update to the latest Reaper site: ${url}`);
+    }
+
+    this.showToast(`Version ${version} broadcasted! All older sites will forward here.`);
+  }
+
   async sendGlobalAlert() {
     if (this.currentUser.rank !== 'owner') return;
     const input = document.getElementById('admin-broadcast-msg');
@@ -1053,31 +1239,38 @@ class ReaperHubApp {
       }
     }, 1100);
 
+    const terminalText = document.getElementById('splash-terminal-text');
+
     let progress = 0;
-    const interval = 100;
+    const interval = 18; // Super snappy 1.8-second cyber boot sequence
     
     const timer = setInterval(() => {
       progress += 1;
       bar.style.width = `${progress}%`;
 
-      if (progress < 20) {
-        if (status) status.textContent = `[${progress}%] INITIALIZING REAPER CORE...`;
-      } else if (progress < 45) {
+      if (progress < 25) {
+        if (status) status.textContent = `[${progress}%] INITIALIZING REAPER KERNEL...`;
+        if (terminalText) terminalText.textContent = "[KERNEL] WebGL 2.0 & Canvas Accelerator Active";
+      } else if (progress < 50) {
         if (status) status.textContent = `[${progress}%] CONNECTING REALTIME FIREBASE DB...`;
-      } else if (progress < 70) {
-        if (status) status.textContent = `[${progress}%] UNBLOCKING FASTLY CDN ASSETS...`;
-      } else if (progress < 90) {
-        if (status) status.textContent = `[${progress}%] DECRYPTING 788 GAME MANIFESTS...`;
-      } else if (progress < 100) {
-        if (status) status.textContent = `[${progress}%] PREPARING STARFIELD ENGINE...`;
+        if (terminalText) terminalText.textContent = "[DATABASE] Firebase Realtime Sync Established";
+      } else if (progress < 75) {
+        if (status) status.textContent = `[${progress}%] UNBLOCKING GITHUB PAGES CDN...`;
+        if (terminalText) terminalText.textContent = "[CDN] High-Speed GitHub Pages Stream Ready";
+      } else if (progress < 95) {
+        if (status) status.textContent = `[${progress}%] TURBO PRE-CACHING 788 GAMES...`;
+        if (terminalText) terminalText.textContent = "[TURBO ENGINE] 788 Games Cached & Ready (60 FPS)";
       } else {
         if (status) status.textContent = `[100%] ALL SYSTEMS ONLINE`;
+        if (terminalText) terminalText.textContent = "[BOOT] Core Online. Welcome to Reaper Hub!";
         clearInterval(timer);
         clearInterval(quoteInterval);
         setTimeout(() => {
+          splash.style.transition = 'opacity 0.4s ease, transform 0.4s ease';
           splash.style.opacity = '0';
-          setTimeout(() => { splash.style.display = 'none'; }, 600);
-        }, 400);
+          splash.style.transform = 'scale(1.03)';
+          setTimeout(() => { splash.style.display = 'none'; }, 400);
+        }, 200);
       }
     }, interval);
   }
@@ -1167,24 +1360,18 @@ class ReaperHubApp {
         window.reaperFirebase.db.ref("reaperPlaytime").on("value", (snap) => {
           const val = snap.val();
           if (val) {
-            this.leaderboardData = Object.values(val);
+            this.leaderboardData = Object.values(val).filter(u => {
+              return u && u.username && u.username !== 'User' && u.username !== 'Member' && u.username !== 'Anon' && (u.seconds || 0) > 0;
+            });
             this.leaderboardData.sort((a, b) => (b.seconds || 0) - (a.seconds || 0));
           } else {
-            this.leaderboardData = [
-              { username: this.currentUser.username, seconds: this.playtimeSeconds, rank: this.currentUser.rank }
-            ];
+            this.leaderboardData = [];
           }
           this.renderLeaderboardUI();
-          this.renderAdminUsersDirectory();
         });
       } catch (e) {
         this.renderLeaderboardUI();
       }
-    } else {
-      this.leaderboardData = [
-        { username: this.currentUser.username, seconds: this.playtimeSeconds, rank: this.currentUser.rank }
-      ];
-      this.renderLeaderboardUI();
     }
   }
 
@@ -1200,13 +1387,21 @@ class ReaperHubApp {
     const container = document.getElementById('leaderboard-rows-container');
     if (!container) return;
 
-    if (this.leaderboardData.length === 0) {
-      this.leaderboardData = [
-        { username: this.currentUser.username, seconds: this.playtimeSeconds, rank: this.currentUser.rank }
-      ];
+    // Filter strictly to real players with recorded playtime
+    const realPlayers = (this.leaderboardData || []).filter(p => {
+      return p && p.username && p.username !== 'User' && p.username !== 'Member' && p.username !== 'Anon' && (p.seconds || 0) > 0;
+    });
+
+    if (realPlayers.length === 0) {
+      container.innerHTML = `
+        <div style="text-align: center; padding: 2rem; color: #88aacc; font-family: var(--font-mono); font-size: 0.85rem;">
+          Play any game to register your playtime on the global leaderboard!
+        </div>
+      `;
+      return;
     }
 
-    container.innerHTML = this.leaderboardData.slice(0, 20).map((player, idx) => {
+    container.innerHTML = realPlayers.slice(0, 20).map((player, idx) => {
       const rankNum = idx + 1;
       const timeStr = this.formatPlaytime(player.seconds || 0);
       const isSelf = player.username === this.currentUser.username;

package/js/firebase-client.js

@@ -742,6 +742,102 @@ class FirebaseService {
       } catch (e) {}
     }
   }
+
+  // Real-time Online Users Presence System (Zero Fake Users)
+  registerOnlinePresence(userObj) {
+    if (!this.db || !userObj || !userObj.username || userObj.username === 'User' || userObj.username === 'guest') return;
+
+    try {
+      const cleanUsername = userObj.username.replace(/[.#$[\]]/g, '_');
+      const userPresenceRef = this.db.ref(`reaperOnlineUsers/${cleanUsername}`);
+      const connectedRef = this.db.ref('.info/connected');
+
+      connectedRef.on('value', (snap) => {
+        if (snap.val() === true) {
+          userPresenceRef.onDisconnect().remove();
+          userPresenceRef.set({
+            username: userObj.username,
+            rank: userObj.rank || 'member',
+            version: userObj.version || window.REAPER_VERSION || '2.3.0',
+            playtime: userObj.playtime || 0,
+            connectedAt: Date.now(),
+            lastSeen: Date.now()
+          });
+        }
+      });
+
+      // Keepalive heartbeat every 20 seconds
+      if (this.presenceHeartbeat) clearInterval(this.presenceHeartbeat);
+      this.presenceHeartbeat = setInterval(() => {
+        userPresenceRef.update({
+          lastSeen: Date.now(),
+          playtime: userObj.playtime || 0
+        }).catch(() => {});
+      }, 20000);
+    } catch (e) {
+      console.warn("Online presence error:", e);
+    }
+  }
+
+  listenOnlineUsers(callback) {
+    if (this.db) {
+      try {
+        this.db.ref("reaperOnlineUsers").on("value", (snap) => {
+          const val = snap.val();
+          let list = [];
+          if (val) {
+            const now = Date.now();
+            list = Object.values(val).filter(u => {
+              return u && u.username && u.username !== 'User' && u.username !== 'Member' && (now - (u.lastSeen || 0) < 60000);
+            });
+          }
+          callback(list);
+        });
+      } catch (e) {
+        callback([]);
+      }
+    } else {
+      callback([]);
+    }
+  }
+
+  // Cross-Version Global Upgrade & Redirect Detection
+  listenLatestVersion(callback) {
+    if (this.db) {
+      try {
+        this.db.ref("reaperLatestVersionInfo").on("value", (snap) => {
+          const val = snap.val();
+          if (val) {
+            callback(val);
+          }
+        });
+      } catch (e) {}
+    }
+  }
+
+  async setLatestVersionInfo(versionInfo) {
+    if (this.db) {
+      try {
+        await this.db.ref("reaperLatestVersionInfo").set(versionInfo);
+      } catch (e) {}
+    }
+  }
+
+  // Auto-clean ghost dummy accounts from Firebase DB
+  async purgeGhostUsers() {
+    if (!this.db) return;
+    try {
+      const snap = await this.db.ref("reaperPlaytime").once("value");
+      const val = snap.val();
+      if (val) {
+        for (const k of Object.keys(val)) {
+          if (!k || k === 'User' || k === 'Member' || k === 'null' || k === 'undefined' || !val[k].username || val[k].username === 'User') {
+            await this.db.ref(`reaperPlaytime/${k}`).remove();
+          }
+        }
+      }
+    } catch (e) {}
+  }
 }
 
 window.reaperFirebase = new FirebaseService();