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 '••••••••';
+ };
+
+ 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 += '
' + key + ': ' + info[key] + '
';
+ var value = info[key];
+ if (key === 'Address') {
+ value = maskIp(value);
+ }
+ fieldsHtml += '' + key + ': ' + value + '
';
}
}
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) {
'' + (p.DisplayName || '') + ' | ' +
'' + p.SteamID + ' | ' +
'' + (p.VoiationLevel || 0) + ' | ' +
- '' + (p.Address || '') + ' | ' +
+ '' + maskIp(p.Address) + ' | ' +
'' + (p.Ping || 0) + ' | ' +
'' + secondsToDuration(p.ConnectedSeconds || 0) + ' | ' +
'';
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);