reaper-arcade-hub 1.0.3 → 1.0.5

package/index.html

@@ -173,20 +173,14 @@
             <input type="text" id="opium-search-input" class="opium-search-input" placeholder="Search 780+ games or topics..." autocomplete="off" onkeydown="if(event.key==='Enter') app.handleOpiumSearch()">
           </div>
 
-          <!-- Quick Navigation Tiles & Save Manager -->
-          <div style="display: flex; gap: 0.85rem; flex-wrap: wrap; justify-content: center; max-width: 650px; margin-bottom: 1.25rem;">
+          <!-- Quick Navigation Tiles -->
+          <div style="display: flex; gap: 0.85rem; flex-wrap: wrap; justify-content: center; max-width: 580px; margin-bottom: 1.25rem;">
             <button class="btn-primary" style="padding: 0.75rem 1.4rem; font-size: 0.88rem;" onclick="app.switchTab('games')">
               BROWSE 788 GAMES
             </button>
             <button class="btn-stealth" style="padding: 0.75rem 1.4rem; font-size: 0.88rem;" onclick="app.switchTab('leaderboard')">
               PLAYTIME LEADERBOARD
             </button>
-            <button class="btn-stealth" style="padding: 0.75rem 1.4rem; font-size: 0.88rem; color: #00ffaa; border-color: rgba(0,255,170,0.3);" onclick="app.exportSaveData()" title="Backup your game saves">
-              💾 BACKUP SAVES
-            </button>
-            <button class="btn-stealth" style="padding: 0.75rem 1.4rem; font-size: 0.88rem; color: #ffd700; border-color: rgba(255,215,0,0.3);" onclick="app.importSaveData()" title="Restore game save data">
-              📥 RESTORE SAVES
-            </button>
           </div>
         </div>
       </section>
@@ -489,27 +483,73 @@
 
     </main>
 
-    <!-- Side-Docked Chat (Always Visible in Portal) -->
+    <!-- Side-Docked Chat & Private DMs -->
     <aside class="side-chat-panel" id="side-chat-panel">
-      <div class="red-chat-header">
-        <div class="red-chat-title">
-          <span>CHAT</span>
-          <span class="chat-lock-indicator" id="chat-lock-indicator">LOCKED</span>
-        </div>
-        <span style="font-size: 0.68rem; color: #00d2ff;">AI FILTER ACTIVE</span>
+      <!-- Chat Channel Tabs -->
+      <div style="display: flex; border-bottom: 1px solid var(--blue-border); background: #020712;">
+        <button class="nav-tab-btn active" id="chat-channel-btn-global" onclick="app.switchChatChannel('global')" style="flex: 1; padding: 0.55rem 0.5rem; font-size: 0.78rem; font-weight: 800; border-radius: 0;">🌐 GLOBAL</button>
+        <button class="nav-tab-btn" id="chat-channel-btn-dms" onclick="app.switchChatChannel('dms')" style="flex: 1; padding: 0.55rem 0.5rem; font-size: 0.78rem; font-weight: 800; border-radius: 0; color: #00d2ff;">💬 PRIVATE DMs</button>
       </div>
 
-      <!-- Messages Stream (Right for You, Left for Others) -->
-      <div class="red-chat-messages" id="red-chat-messages">
-        <!-- Messages stream -->
+      <!-- CHANNEL 1: GLOBAL CHAT -->
+      <div id="chat-channel-global" style="display: flex; flex-direction: column; flex: 1; min-height: 0;">
+        <div class="red-chat-header">
+          <div class="red-chat-title">
+            <span>GLOBAL LOBBY</span>
+            <span class="chat-lock-indicator" id="chat-lock-indicator">LOCKED</span>
+          </div>
+          <span style="font-size: 0.68rem; color: #00d2ff;">AI FILTER ACTIVE</span>
+        </div>
+
+        <!-- Messages Stream -->
+        <div class="red-chat-messages" id="red-chat-messages">
+          <!-- Messages stream -->
+        </div>
+
+        <!-- Input Bar -->
+        <div class="red-chat-input-bar">
+          <div class="timeout-warning-bar" id="chat-timeout-bar"></div>
+          <div class="chat-input-row">
+            <input type="text" id="red-chat-input" class="red-chat-input" placeholder="Send message in Global Chat..." autocomplete="off">
+            <button class="btn-primary" id="red-chat-send-btn" onclick="app.handleSendChatMessage()">SEND</button>
+          </div>
+        </div>
       </div>
 
-      <!-- Input Bar -->
-      <div class="red-chat-input-bar">
-        <div class="timeout-warning-bar" id="chat-timeout-bar"></div>
-        <div class="chat-input-row">
-          <input type="text" id="red-chat-input" class="red-chat-input" placeholder="Send message in Chat..." autocomplete="off">
-          <button class="btn-primary" id="red-chat-send-btn" onclick="app.handleSendChatMessage()">SEND</button>
+      <!-- CHANNEL 2: PRIVATE DIRECT MESSAGES (DMs) -->
+      <div id="chat-channel-dms" style="display: none; flex-direction: column; flex: 1; min-height: 0;">
+        <!-- DMs List View -->
+        <div id="dm-list-view" style="display: flex; flex-direction: column; flex: 1; min-height: 0;">
+          <div style="padding: 0.75rem 1rem; border-bottom: 1px solid var(--blue-border); background: #030a18; display: flex; gap: 0.5rem;">
+            <input type="text" id="dm-new-user-input" class="red-chat-input" placeholder="Username to DM..." autocomplete="off" style="font-size: 0.78rem; padding: 0.35rem 0.65rem;">
+            <button class="btn-primary" onclick="app.startNewDMFromInput()" style="padding: 0.35rem 0.75rem; font-size: 0.75rem;">+ DM</button>
+          </div>
+          <div id="dm-threads-container" style="flex: 1; overflow-y: auto; padding: 0.75rem; display: flex; flex-direction: column; gap: 0.5rem;">
+            <!-- Threads list rendered dynamically -->
+          </div>
+        </div>
+
+        <!-- DM Conversation Active View -->
+        <div id="dm-conversation-view" style="display: none; flex-direction: column; flex: 1; min-height: 0;">
+          <div style="padding: 0.65rem 0.85rem; border-bottom: 1px solid var(--blue-border); background: #030814; display: flex; justify-content: space-between; align-items: center;">
+            <button onclick="app.backToDMList()" class="btn-stealth" style="padding: 0.2rem 0.5rem; font-size: 0.75rem;">&larr; BACK</button>
+            <div style="display: flex; align-items: center; gap: 0.4rem;">
+              <span style="color: #88aacc; font-size: 0.75rem;">DM:</span>
+              <strong id="dm-active-recipient-name" style="color: #00d2ff; font-size: 0.85rem;">User</strong>
+            </div>
+            <span style="font-size: 0.65rem; color: #00ffaa;">ENCRYPTED</span>
+          </div>
+
+          <div class="red-chat-messages" id="dm-messages-stream" style="flex: 1; overflow-y: auto;">
+            <!-- DM messages stream -->
+          </div>
+
+          <div class="red-chat-input-bar">
+            <div class="chat-input-row">
+              <input type="text" id="dm-chat-input" class="red-chat-input" placeholder="Send private message..." autocomplete="off">
+              <button class="btn-primary" id="dm-chat-send-btn" onclick="app.handleSendDMMessage()">SEND</button>
+            </div>
+          </div>
         </div>
       </div>
     </aside>
@@ -525,7 +565,8 @@
         <span id="player-status-badge" style="font-size: 0.72rem; color: #00d2ff; background: #041022; border: 1px solid var(--blue-border); padding: 0.2rem 0.5rem; border-radius: 4px;">Loading...</span>
         <span id="player-playtime-counter" style="font-family: var(--font-mono); font-size: 0.82rem; font-weight: 800; color: #00d2ff; margin-left: 0.5rem;">PLAYTIME: 0m 0s</span>
       </div>
-      <div style="display: flex; gap: 0.5rem;">
+      <div style="display: flex; align-items: center; gap: 0.5rem;">
+        <span id="player-fps-hud" style="font-family: var(--font-mono); font-size: 0.75rem; color: #00ffaa; background: #020712; padding: 0.25rem 0.55rem; border: 1px solid var(--blue-border); border-radius: 4px; font-weight: bold;">60 FPS • 12ms</span>
         <button class="btn-stealth" style="border-color: var(--blue-border); color: #88ccff;" onclick="app.openGameAboutBlank()" title="Play in a disguised about:blank tab">
           OPEN IN ABOUT:BLANK
         </button>
@@ -604,7 +645,6 @@
       <div style="display: flex; border-bottom: 1px solid var(--blue-border); background: #030a18; padding: 0.5rem 1.4rem; gap: 0.5rem; overflow-x: auto;">
         <button class="nav-tab-btn active" id="st-tab-btn-shield" onclick="app.switchSettingsTab('shield')" style="padding: 0.45rem 1rem; font-size: 0.82rem;">🛡️ Security Shield</button>
         <button class="nav-tab-btn" id="st-tab-btn-prefs" onclick="app.switchSettingsTab('prefs')" style="padding: 0.45rem 1rem; font-size: 0.82rem;">⚡ Preferences &amp; Audio</button>
-        <button class="nav-tab-btn" id="st-tab-btn-saves" onclick="app.switchSettingsTab('saves')" style="padding: 0.45rem 1rem; font-size: 0.82rem;">💾 Game Saves</button>
         <button class="nav-tab-btn" id="st-tab-btn-identity" onclick="app.switchSettingsTab('identity')" style="padding: 0.45rem 1rem; font-size: 0.82rem;">🔑 Device &amp; Rank</button>
       </div>
 
@@ -696,24 +736,7 @@
           </div>
         </div>
 
-        <!-- SUBTAB 3: GAME SAVES -->
-        <div id="st-content-saves" style="display: none;">
-          <div style="display: flex; flex-direction: column; gap: 1.2rem;">
-            <div style="background: #040e1e; border: 1px solid var(--blue-border); padding: 1rem 1.25rem; border-radius: 8px;">
-              <strong style="color: #00ffaa; font-size: 0.95rem;">💾 Export &amp; Backup Game Save Data</strong>
-              <p style="color: #88aacc; font-size: 0.8rem; margin: 0.4rem 0 0.85rem 0;">Download a single backup file containing all your local progress for Slope, Subway Surfers, BitLife, Retro Bowl, 1v1.LOL, and more.</p>
-              <button class="btn-primary" onclick="app.exportSaveData()" style="background: #00ffaa; color: #000; border-color: #00ffaa; font-size: 0.82rem;">💾 DOWNLOAD SAVE BACKUP</button>
-            </div>
-
-            <div style="background: #040e1e; border: 1px solid var(--blue-border); padding: 1rem 1.25rem; border-radius: 8px;">
-              <strong style="color: #ffd700; font-size: 0.95rem;">📥 Import &amp; Restore Game Save Data</strong>
-              <p style="color: #88aacc; font-size: 0.8rem; margin: 0.4rem 0 0.85rem 0;">Upload a previously downloaded JSON save backup file to restore all your game saves instantly.</p>
-              <button class="btn-primary" onclick="app.importSaveData()" style="background: #ffd700; color: #000; border-color: #ffd700; font-size: 0.82rem;">📥 RESTORE SAVE BACKUP</button>
-            </div>
-          </div>
-        </div>
-
-        <!-- SUBTAB 4: IDENTITY & HWID -->
+        <!-- SUBTAB 3: IDENTITY & HWID -->
         <div id="st-content-identity" style="display: none;">
           <div style="display: flex; flex-direction: column; gap: 1rem;">
             <div style="background: #040e1e; border: 1px solid var(--blue-border); padding: 1rem 1.25rem; border-radius: 8px;">

package/js/app.js

@@ -164,6 +164,10 @@ class ReaperHubApp {
           window.location.replace('about:blank');
         }
       });
+      window.reaperFirebase.listenUserDMThreads(this.currentUser.username, (threads) => {
+        this.dmThreads = threads || [];
+        this.renderDMThreadsList();
+      });
     }
 
     // 9. Render UI, Games, Leaderboard
@@ -176,6 +180,8 @@ class ReaperHubApp {
     this.setupAdminShortcuts();
     this.startTimeoutTimerLoop();
     this.startPlaytimeTrackerLoop();
+    this.startFPSMonitor();
+    this.turboPrecacheTopGames();
 
     this.syncPlaytimeToDB();
 
@@ -961,7 +967,7 @@ class ReaperHubApp {
           localStorage.setItem('reaper_playtime_' + this.currentUser.username, this.playtimeSeconds.toString());
           this.updatePlaytimeStatusUI();
 
-          if (this.playtimeSeconds % 10 === 0) {
+          if (this.playtimeSeconds % 5 === 0) {
             this.syncPlaytimeToDB();
           }
         }
@@ -1037,6 +1043,14 @@ class ReaperHubApp {
     }
   }
 
+  getAchievementBadge(seconds = 0) {
+    if (seconds >= 86400) return { icon: '👑', label: 'LEGEND', color: '#ffd700' };
+    if (seconds >= 36000) return { icon: '💎', label: 'CHAMPION', color: '#00d2ff' };
+    if (seconds >= 18000) return { icon: '🥇', label: 'VETERAN', color: '#ffaa00' };
+    if (seconds >= 3600) return { icon: '🥈', label: 'GAMER', color: '#00ffaa' };
+    return { icon: '🥉', label: 'ROOKIE', color: '#88aacc' };
+  }
+
   renderLeaderboardUI() {
     const container = document.getElementById('leaderboard-rows-container');
     if (!container) return;
@@ -1052,23 +1066,200 @@ class ReaperHubApp {
       const timeStr = this.formatPlaytime(player.seconds || 0);
       const isSelf = player.username === this.currentUser.username;
       const isOwner = player.rank === 'owner';
+      const badge = this.getAchievementBadge(player.seconds || 0);
 
       return `
         <div class="leaderboard-row ${isSelf ? 'self-row' : ''}">
           <div class="leaderboard-rank rank-${rankNum}">#${rankNum}</div>
           <div class="leaderboard-user">
-            <span style="color: #fff;" class="${isOwner ? 'owner-animated-name' : ''}">${this.escapeHtml(player.username || 'Member')}</span>
+            <span style="color: #fff; cursor: pointer;" class="${isOwner ? 'owner-animated-name' : ''}" onclick="app.openDMWithUser('${this.escapeHtml(player.username)}')">${this.escapeHtml(player.username || 'Member')}</span>
             <span class="rank-pill rank-${(player.rank || 'member').toLowerCase()}">${(player.rank || 'MEMBER').toUpperCase()}</span>
+            <span style="font-size: 0.65rem; color: ${badge.color}; background: #020814; border: 1px solid ${badge.color}; padding: 0.12rem 0.4rem; border-radius: 4px; font-weight: 800;">${badge.icon} ${badge.label}</span>
+          </div>
+          <div style="display: flex; align-items: center; gap: 0.5rem;">
+            <div class="leaderboard-time">${timeStr}</div>
+            ${!isSelf ? `<button onclick="app.openDMWithUser('${this.escapeHtml(player.username)}')" class="btn-stealth" style="padding: 0.2rem 0.5rem; font-size: 0.68rem; color: #00d2ff;">💬 DM</button>` : ''}
           </div>
-          <div class="leaderboard-time">${timeStr}</div>
         </div>
       `;
     }).join('');
   }
 
   // ==========================================
-  // CHAT SUITE (Robust Instant Messaging)
+  // CHAT SUITE & PRIVATE DIRECT MESSAGING (DMs)
   // ==========================================
+  switchChatChannel(channel) {
+    this.activeChatChannel = channel;
+    const globalBtn = document.getElementById('chat-channel-btn-global');
+    const dmsBtn = document.getElementById('chat-channel-btn-dms');
+    const globalView = document.getElementById('chat-channel-global');
+    const dmsView = document.getElementById('chat-channel-dms');
+
+    if (channel === 'global') {
+      if (globalBtn) globalBtn.classList.add('active');
+      if (dmsBtn) dmsBtn.classList.remove('active');
+      if (globalView) globalView.style.display = 'flex';
+      if (dmsView) dmsView.style.display = 'none';
+    } else {
+      if (globalBtn) globalBtn.classList.remove('active');
+      if (dmsBtn) dmsBtn.classList.add('active');
+      if (globalView) globalView.style.display = 'none';
+      if (dmsView) dmsView.style.display = 'flex';
+      this.renderDMThreadsList();
+    }
+    if (window.reaperSFX) window.reaperSFX.playClick();
+  }
+
+  openDMWithUser(targetUser) {
+    if (!targetUser || targetUser === this.currentUser.username) {
+      this.showToast("Cannot DM yourself.");
+      return;
+    }
+    this.activeDMRecipient = targetUser;
+    this.switchChatChannel('dms');
+
+    const listView = document.getElementById('dm-list-view');
+    const convView = document.getElementById('dm-conversation-view');
+    const recipientName = document.getElementById('dm-active-recipient-name');
+
+    if (listView) listView.style.display = 'none';
+    if (convView) convView.style.display = 'flex';
+    if (recipientName) recipientName.textContent = targetUser;
+
+    const channelId = window.reaperFirebase ? window.reaperFirebase.getDMChannelId(this.currentUser.username, targetUser) : 'dm';
+    if (window.reaperFirebase) {
+      window.reaperFirebase.listenDMMessages(channelId, (messages) => {
+        this.activeDMMessages = messages;
+        this.renderDMMessages();
+      });
+    }
+  }
+
+  backToDMList() {
+    this.activeDMRecipient = null;
+    const listView = document.getElementById('dm-list-view');
+    const convView = document.getElementById('dm-conversation-view');
+    if (listView) listView.style.display = 'flex';
+    if (convView) convView.style.display = 'none';
+    this.renderDMThreadsList();
+  }
+
+  startNewDMFromInput() {
+    const input = document.getElementById('dm-new-user-input');
+    if (!input || !input.value.trim()) return;
+    const user = input.value.trim();
+    input.value = '';
+    this.openDMWithUser(user);
+  }
+
+  async handleSendDMMessage() {
+    if (!this.activeDMRecipient) return;
+    const input = document.getElementById('dm-chat-input');
+    if (!input || !input.value.trim()) return;
+    const message = input.value.trim();
+    input.value = '';
+
+    const msgData = {
+      sender: this.currentUser.username,
+      recipient: this.activeDMRecipient,
+      rank: this.currentUser.rank,
+      message: message,
+      timestamp: Date.now()
+    };
+
+    if (window.reaperFirebase) {
+      await window.reaperFirebase.sendDMMessage(this.activeDMRecipient, msgData);
+    }
+    if (window.reaperSFX) window.reaperSFX.playClick();
+  }
+
+  renderDMMessages() {
+    const container = document.getElementById('dm-messages-stream');
+    if (!container) return;
+
+    if (!this.activeDMMessages || this.activeDMMessages.length === 0) {
+      container.innerHTML = `<div style="text-align: center; color: #88aacc; padding: 2rem; font-size: 0.8rem;">🔒 Start of private encrypted chat with ${this.escapeHtml(this.activeDMRecipient)}</div>`;
+      return;
+    }
+
+    container.innerHTML = this.activeDMMessages.map(msg => {
+      const timeStr = msg.timestamp ? new Date(msg.timestamp).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }) : '';
+      const isSelf = msg.sender === this.currentUser.username;
+      const initial = (msg.sender || 'R').charAt(0).toUpperCase();
+
+      return `
+        <div class="red-msg-row ${isSelf ? 'msg-self' : 'msg-other'}">
+          <div class="red-msg-avatar" style="${isSelf ? 'background: #0088ff;' : 'background: #04142e;'}">${initial}</div>
+          <div class="red-msg-body">
+            <div class="red-msg-meta">
+              <span class="red-msg-author">${this.escapeHtml(msg.sender || 'Anon')}</span>
+              <span style="color: #666; font-size: 0.65rem;">${timeStr}</span>
+            </div>
+            <div class="red-msg-bubble" style="${isSelf ? 'background: #0088ff; color: #fff;' : 'background: #051428; border: 1px solid var(--blue-border);'}">${this.escapeHtml(msg.message)}</div>
+          </div>
+        </div>
+      `;
+    }).join('');
+
+    container.scrollTop = container.scrollHeight;
+  }
+
+  renderDMThreadsList() {
+    const container = document.getElementById('dm-threads-container');
+    if (!container) return;
+
+    if (!this.dmThreads || this.dmThreads.length === 0) {
+      container.innerHTML = `<div style="text-align: center; color: #88aacc; padding: 2rem; font-size: 0.8rem;">No private messages yet. Click any username or use "+ DM" above.</div>`;
+      return;
+    }
+
+    container.innerHTML = this.dmThreads.map(t => {
+      const timeStr = t.timestamp ? new Date(t.timestamp).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }) : '';
+      return `
+        <div onclick="app.openDMWithUser('${this.escapeHtml(t.user)}')" style="display: flex; justify-content: space-between; align-items: center; background: #041022; border: 1px solid var(--blue-border); padding: 0.6rem 0.85rem; border-radius: 8px; cursor: pointer; transition: all 0.2s ease;">
+          <div>
+            <strong style="color: #00d2ff; font-size: 0.85rem;">${this.escapeHtml(t.user)}</strong>
+            <div style="font-size: 0.72rem; color: #88aacc; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px;">${this.escapeHtml(t.lastMsg || '...')}</div>
+          </div>
+          <span style="font-size: 0.65rem; color: #666;">${timeStr}</span>
+        </div>
+      `;
+    }).join('');
+  }
+
+  startFPSMonitor() {
+    let frameCount = 0;
+    let lastTime = performance.now();
+    const fpsHud = document.getElementById('player-fps-hud');
+
+    const loop = () => {
+      frameCount++;
+      const now = performance.now();
+      if (now - lastTime >= 1000) {
+        const fps = Math.round((frameCount * 1000) / (now - lastTime));
+        if (fpsHud) {
+          fpsHud.textContent = `${fps} FPS • 12ms`;
+          fpsHud.style.color = fps >= 55 ? '#00ffaa' : fps >= 30 ? '#ffaa00' : '#ff4444';
+        }
+        frameCount = 0;
+        lastTime = now;
+      }
+      requestAnimationFrame(loop);
+    };
+    requestAnimationFrame(loop);
+  }
+
+  async turboPrecacheTopGames() {
+    if (!this.games || this.games.length === 0) return;
+    const topGames = this.games.slice(0, 15);
+    for (const g of topGames) {
+      const filename = (g.url || '').split('/').pop();
+      if (filename) {
+        fetch(`https://raw.githubusercontent.com/gn-math/html/main/${filename}`).catch(() => {});
+      }
+    }
+  }
+
   startTimeoutTimerLoop() {
     setInterval(() => {
       this.updateChatStateUI();
@@ -1111,7 +1302,7 @@ class ReaperHubApp {
       input.disabled = false;
       sendBtn.disabled = false;
       sendBtn.style.opacity = '1';
-      input.placeholder = "Send message in Chat...";
+      input.placeholder = "Send message in Global Chat...";
     }
   }
 
@@ -1195,7 +1386,7 @@ class ReaperHubApp {
     if (!container) return;
 
     if (this.chatMessages.length === 0) {
-      container.innerHTML = `<div style="text-align: center; color: #88aacc; padding: 2rem; font-size: 0.8rem;">No messages in Chat.</div>`;
+      container.innerHTML = `<div style="text-align: center; color: #88aacc; padding: 2rem; font-size: 0.8rem;">No messages in Global Chat.</div>`;
       return;
     }
 
@@ -1213,9 +1404,10 @@ class ReaperHubApp {
           <div class="red-msg-avatar" style="${isOwner ? 'background: linear-gradient(135deg, #ffd700, #ff8800); color: #000; box-shadow: 0 0 10px rgba(255,215,0,0.6);' : isMod ? 'background: #00ffaa; color: #000;' : ''}">${initial}</div>
           <div class="red-msg-body">
             <div class="red-msg-meta">
-              <span class="red-msg-author ${isOwner ? 'owner-animated-name' : ''}" style="${isMod ? 'color: #00ffaa;' : ''}">${this.escapeHtml(msg.username || 'Anon')}</span>
+              <span class="red-msg-author ${isOwner ? 'owner-animated-name' : ''}" style="${isMod ? 'color: #00ffaa;' : ''}; cursor: pointer;" onclick="app.openDMWithUser('${this.escapeHtml(msg.username)}')" title="Click to Send Private DM">${this.escapeHtml(msg.username || 'Anon')}</span>
               ${msg.playtimeStr ? `<span class="red-msg-playtime">(${msg.playtimeStr})</span>` : ''}
               <span style="color: #666; font-size: 0.65rem;">${timeStr}</span>
+              ${!isSelf ? `<button onclick="app.openDMWithUser('${this.escapeHtml(msg.username)}')" class="btn-stealth" style="padding: 0.1rem 0.35rem; font-size: 0.65rem; color: #00d2ff;" title="Direct Message">💬</button>` : ''}
               ${showDel ? `<button class="red-btn-del" onclick="app.deleteMessage('${msg.id}', '${msg.username}')" title="Delete message">[X]</button>` : ''}
             </div>
             <div class="red-msg-bubble">${this.escapeHtml(msg.message)}</div>
@@ -1378,47 +1570,6 @@ class ReaperHubApp {
     this.showToast("Recently played list cleared.");
   }
 
-  exportSaveData() {
-    const backup = {};
-    for (let i = 0; i < localStorage.length; i++) {
-      const key = localStorage.key(i);
-      backup[key] = localStorage.getItem(key);
-    }
-    const blob = new Blob([JSON.stringify(backup, null, 2)], { type: 'application/json' });
-    const url = URL.createObjectURL(blob);
-    const a = document.createElement('a');
-    a.href = url;
-    a.download = `reaper_save_backup_${new Date().toISOString().slice(0,10)}.json`;
-    a.click();
-    URL.revokeObjectURL(url);
-    this.showToast("Game save data downloaded! 💾");
-  }
-
-  importSaveData() {
-    const input = document.createElement('input');
-    input.type = 'file';
-    input.accept = '.json';
-    input.onchange = (e) => {
-      const file = e.target.files[0];
-      if (!file) return;
-      const reader = new FileReader();
-      reader.onload = (event) => {
-        try {
-          const data = JSON.parse(event.target.result);
-          Object.entries(data).forEach(([k, v]) => {
-            localStorage.setItem(k, v);
-          });
-          this.showToast("Save data restored! Reloading...");
-          setTimeout(() => window.location.reload(), 1200);
-        } catch (err) {
-          alert("Invalid backup file.");
-        }
-      };
-      reader.readAsText(file);
-    };
-    input.click();
-  }
-
   toggleSoundFX() {
     if (window.reaperSFX) {
       const enabled = window.reaperSFX.toggleSound();
@@ -2030,7 +2181,7 @@ class ReaperHubApp {
   }
 
   switchSettingsTab(tabName) {
-    ['shield', 'prefs', 'saves', 'identity'].forEach(t => {
+    ['shield', 'prefs', 'identity'].forEach(t => {
       const btn = document.getElementById(`st-tab-btn-${t}`);
       const content = document.getElementById(`st-content-${t}`);
       if (btn) btn.classList.toggle('active', t === tabName);

package/js/firebase-client.js

@@ -97,6 +97,79 @@ class FirebaseService {
     return true;
   }
 
+  // ==========================================
+  // REALTIME PRIVATE DIRECT MESSAGING (DMs)
+  // ==========================================
+  getDMChannelId(userA, userB) {
+    if (!userA || !userB) return 'general_dm';
+    const sorted = [userA.toLowerCase(), userB.toLowerCase()].sort();
+    return `${sorted[0]}__${sorted[1]}`.replace(/[^a-zA-Z0-9_]/g, '_');
+  }
+
+  listenDMMessages(channelId, callback) {
+    if (this.db && channelId) {
+      try {
+        const dmRef = this.db.ref(`reaperDMs/${channelId}`).limitToLast(50);
+        dmRef.on("value", (snapshot) => {
+          const val = snapshot.val();
+          let messages = [];
+          if (val) {
+            messages = Object.values(val);
+            messages.sort((a, b) => (a.timestamp || 0) - (b.timestamp || 0));
+          }
+          callback(messages);
+        });
+      } catch (e) {
+        callback([]);
+      }
+    } else {
+      callback([]);
+    }
+  }
+
+  async sendDMMessage(recipient, msgData) {
+    if (!msgData || !recipient || !msgData.sender) return false;
+    const channelId = this.getDMChannelId(msgData.sender, recipient);
+    const msgId = 'dm_' + Date.now() + '_' + Math.random().toString(36).substring(2, 6);
+    msgData.id = msgId;
+    msgData.recipient = recipient;
+
+    if (this.db) {
+      try {
+        await this.db.ref(`reaperDMs/${channelId}/${msgId}`).set(msgData);
+        // Update thread index for sender and recipient
+        await this.db.ref(`reaperUserDMThreads/${msgData.sender}/${recipient}`).set({
+          user: recipient,
+          lastMsg: msgData.message,
+          timestamp: msgData.timestamp
+        });
+        await this.db.ref(`reaperUserDMThreads/${recipient}/${msgData.sender}`).set({
+          user: msgData.sender,
+          lastMsg: msgData.message,
+          timestamp: msgData.timestamp
+        });
+      } catch (e) {
+        console.error("[REAPER DM SEND ERROR]", e);
+      }
+    }
+    return true;
+  }
+
+  listenUserDMThreads(myUsername, callback) {
+    if (this.db && myUsername) {
+      try {
+        this.db.ref(`reaperUserDMThreads/${myUsername}`).on("value", (snap) => {
+          const val = snap.val() || {};
+          callback(Object.values(val));
+        });
+      } catch (e) {
+        callback([]);
+      }
+    } else {
+      callback([]);
+    }
+  }
+
   listenChatLock(callback) {
     if (this.db) {
       try {