From 5f25974cf21bcb098845b157986dc6a07629e4a6 Mon Sep 17 00:00:00 2001
From: oOHiyoriOo <sidney.marvin.fricke@gmail.com>
Date: Sat, 13 Jun 2026 18:53:18 +0200
Subject: [PATCH] feat: hide IP addresses by default, click to reveal
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Added maskIp() helper that replaces IPs with ••••••••. A global
delegated click handler reveals the address on click. Applied to:
- Player list 'Address' column
- Player info 'Address' field

Styled .ip-masked with dimmed text and purple hover glow.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
---
 js/app.js              | 17 +++++++++++++++++
 js/pages/playerInfo.js |  6 +++++-
 js/pages/playerlist.js |  2 +-
 rcon.css               | 14 ++++++++++++++
 4 files changed, 37 insertions(+), 2 deletions(-)

diff --git a/js/app.js b/js/app.js
index 8d6ac21..6d34ac1 100644
--- a/js/app.js
+++ b/js/app.js
@@ -109,6 +109,23 @@
 
   Router.start('#app-view');
 
+  // ---- IP address masking ----
+  window.maskIp = function (ip) {
+    if (!ip) return '';
+    return '<span class="ip-masked" data-ip="' + ip + '" title="Click to reveal IP">••••••••</span>';
+  };
+
+  document.addEventListener('click', function (e) {
+    var el = e.target.closest('.ip-masked');
+    if (el) {
+      el.classList.remove('ip-masked');
+      el.classList.add('ip-revealed');
+      el.textContent = el.dataset.ip;
+      el.title = '';
+      e.preventDefault();
+    }
+  });
+
   // ---- Initial state ----
   showDisconnected();
 })();
diff --git a/js/pages/playerInfo.js b/js/pages/playerInfo.js
index fcd26b7..4594562 100644
--- a/js/pages/playerInfo.js
+++ b/js/pages/playerInfo.js
@@ -59,7 +59,11 @@ function PlayerInfoPage(params, container) {
       var fieldsHtml = '';
       for (var key in info) {
         if (info.hasOwnProperty(key)) {
-          fieldsHtml += '<div class="col-sm-4"><p>' + key + ': <span class="badge">' + info[key] + '</span></p></div>';
+          var value = info[key];
+          if (key === 'Address') {
+            value = maskIp(value);
+          }
+          fieldsHtml += '<div class="col-sm-4"><p>' + key + ': <span class="badge">' + value + '</span></p></div>';
         }
       }
       document.getElementById('pi-fields').innerHTML = fieldsHtml;
diff --git a/js/pages/playerlist.js b/js/pages/playerlist.js
index 19c805a..4ea9930 100644
--- a/js/pages/playerlist.js
+++ b/js/pages/playerlist.js
@@ -84,7 +84,7 @@ function PlayerListPage(params, container) {
           '<td><a href="#/' + address + '/player/' + p.SteamID + '/">' + (p.DisplayName || '') + '</a></td>' +
           '<td class="text-end"><a href="#/' + address + '/player/' + p.SteamID + '/">' + p.SteamID + '</a></td>' +
           '<td class="text-end"' + fadeClass + '>' + (p.VoiationLevel || 0) + '</td>' +
-          '<td class="text-end">' + (p.Address || '') + '</td>' +
+          '<td class="text-end ip-cell">' + maskIp(p.Address) + '</td>' +
           '<td class="text-end">' + (p.Ping || 0) + '</td>' +
           '<td class="text-end">' + secondsToDuration(p.ConnectedSeconds || 0) + '</td>' +
         '</tr>';
diff --git a/rcon.css b/rcon.css
index f778c43..eb0870c 100644
--- a/rcon.css
+++ b/rcon.css
@@ -47,6 +47,20 @@ a:hover { color: #fff; text-decoration: none; }
 /* Fade utility */
 .fade { opacity: 0.5; }
 
+/* IP address masking */
+.ip-masked {
+  cursor: pointer;
+  color: rgba(255,255,255,0.35);
+  transition: color 0.2s;
+  user-select: none;
+}
+.ip-masked:hover {
+  color: var(--rcon-accent);
+}
+.ip-revealed {
+  color: rgba(255,255,255,0.85);
+}
+
 /* Table styles */
 #PlayerListController .table-responsive {
   min-height: calc(100vh - 200px);