From d7306933b9ba14341fbd8f073006f6ece479fc1c Mon Sep 17 00:00:00 2001
From: MCHost <hypermc@ssh.surf>
Date: Mon, 7 Jul 2025 17:36:25 -0400
Subject: [PATCH] clean up UI

---
 public/index.html |   1 -
 public/js/app.js  | 115 +++++++++++++++-------------------------------
 2 files changed, 38 insertions(+), 78 deletions(-)

diff --git a/public/index.html b/public/index.html
index 4f14749..e2414e0 100644
--- a/public/index.html
+++ b/public/index.html
@@ -216,7 +216,6 @@
                     <div class="flex justify-between items-center">
                         <div class="flex flex-col space-y-1 text-sm">
                             <p><strong>User:</strong> <span id="user">Loading...</span></p>
-                            <p><strong>Key Expiry:</strong> <span id="keyExpiry">Loading...</span></p>
                             <p><strong>Status:</strong> <span id="serverStatus">Loading...</span></p>
                         </div>
                         <div class="flex space-x-3 justify-center">
diff --git a/public/js/app.js b/public/js/app.js
index f5fa212..570815f 100644
--- a/public/js/app.js
+++ b/public/js/app.js
@@ -926,34 +926,24 @@ document.addEventListener('DOMContentLoaded', () => {
       }
     }
 
-    if (message.type === 'time' && message.data?.keyexpireString) {
-      if (state.keyExpiry !== message.data.keyexpireString && elements.keyExpiry) {
-        const expiryDate = new Date(message.data.keyexpireString);
-        const formattedDate = expiryDate.toLocaleString('en-US', {
-          month: 'long',
-          day: 'numeric',
-          year: 'numeric',
-          hour: '2-digit',
-          minute: '2-digit',
-          hour12: true,
-          timeZoneName: 'short'
-        });
-        elements.keyExpiry.textContent = formattedDate;
-        state.keyExpiry = message.data.keyexpireString;
-      }
-    }
-
     if (message.type === 'list-players' && message.data?.players) {
       const players = message.data.players || [];
       state.currentPlayers = players;
       const isSinglePlayer = players.length <= 1;
+    
+      // Initialize state for tracking action button visibility if not already present
+      state.actionButtonStates = state.actionButtonStates || {};
+    
       const playerListHtml = players.length > 0
-        ? players.map(player => `
+        ? players.map(player => {
+            // Default to hidden action buttons unless state says otherwise
+            const isActionButtonsVisible = state.actionButtonStates[player] || false;
+            return `
     <div class="flex items-center space-x-4 mb-2">
       <span class="w-32">${player}</span>
       <div class="flex flex-col gap-2">
-        <button class="toggle-actions bg-gray-600 hover:bg-gray-700 px-2 py-1 rounded text-sm" data-player="${player}">Actions</button>
-        <div class="action-buttons hidden flex-wrap gap-2" data-player="${player}">
+        <button class="toggle-actions bg-gray-600 hover:bg-gray-700 px-2 py-1 rounded text-sm" data-player="${player}" ${isActionButtonsVisible ? 'hidden' : ''}>Actions</button>
+        <div class="action-buttons flex-wrap gap-2 ${isActionButtonsVisible ? '' : 'hidden'}" data-player="${player}">
           <button class="tell-player bg-blue-600 hover:bg-blue-700 px-2 py-1 rounded text-sm" data-player="${player}">Tell</button>
           <button class="give-player bg-green-600 hover:bg-green-700 px-2 py-1 rounded text-sm" data-player="${player}">Give</button>
           <button class="teleport-player bg-cyan-600 hover:bg-cyan-700 px-2 py-1 rounded text-sm ${isSinglePlayer ? 'opacity-50 cursor-not-allowed' : ''}" data-player="${player}" ${isSinglePlayer ? 'disabled' : ''}>Teleport</button>
@@ -966,13 +956,25 @@ document.addEventListener('DOMContentLoaded', () => {
         </div>
       </div>
     </div>
-    `).join('')
+    `;
+          }).join('')
         : 'None';
+    
       if (state.playerList !== playerListHtml && elements.playerList) {
         elements.playerList.innerHTML = playerListHtml;
         state.playerList = playerListHtml;
     
-        // Toggle action buttons
+        // Remove existing event listeners to prevent duplication
+        const toggleButtons = document.querySelectorAll('.toggle-actions');
+        const closeButtons = document.querySelectorAll('.close-actions');
+        toggleButtons.forEach(button => {
+          button.replaceWith(button.cloneNode(true));
+        });
+        closeButtons.forEach(button => {
+          button.replaceWith(button.cloneNode(true));
+        });
+    
+        // Add event listeners for toggle actions
         document.querySelectorAll('.toggle-actions').forEach(button => {
           button.addEventListener('click', () => {
             const player = button.getAttribute('data-player').trim();
@@ -980,65 +982,24 @@ document.addEventListener('DOMContentLoaded', () => {
             if (actionDiv) {
               actionDiv.classList.remove('hidden');
               button.classList.add('hidden');
+              state.actionButtonStates[player] = true; // Update state
             }
           });
         });
     
-        if (message.type === 'list-players' && message.data?.players) {
-          const players = message.data.players || [];
-          state.currentPlayers = players;
-          const isSinglePlayer = players.length <= 1;
-          const playerListHtml = players.length > 0
-            ? players.map(player => `
-        <div class="flex items-center space-x-4 mb-2">
-          <span class="w-32">${player}</span>
-          <div class="flex flex-col gap-2">
-            <button class="toggle-actions bg-gray-600 hover:bg-gray-700 px-2 py-1 rounded text-sm" data-player="${player}">Actions</button>
-            <div class="action-buttons hidden flex-wrap gap-2" data-player="${player}">
-              <button class="tell-player bg-blue-600 hover:bg-blue-700 px-2 py-1 rounded text-sm" data-player="${player}">Tell</button>
-              <button class="give-player bg-green-600 hover:bg-green-700 px-2 py-1 rounded text-sm" data-player="${player}">Give</button>
-              <button class="teleport-player bg-cyan-600 hover:bg-cyan-700 px-2 py-1 rounded text-sm ${isSinglePlayer ? 'opacity-50 cursor-not-allowed' : ''}" data-player="${player}" ${isSinglePlayer ? 'disabled' : ''}>Teleport</button>
-              <button class="effect-player bg-teal-600 hover:bg-teal-700 px-2 py-1 rounded text-sm" data-player="${player}">Effect</button>
-              <button class="op-player bg-purple-600 hover:bg-purple-700 px-2 py-1 rounded text-sm" data-player="${player}">Op</button>
-              <button class="deop-player bg-purple-600 hover:bg-purple-700 px-2 py-1 rounded text-sm" data-player="${player}">Deop</button>
-              <button class="kick-player bg-red-600 hover:bg-red-700 px-2 py-1 rounded text-sm" data-player="${player}">Kick</button>
-              <button class="ban-player bg-red-600 hover:bg-red-700 px-2 py-1 rounded text-sm" data-player="${player}">Ban</button>
-              <button class="close-actions bg-gray-600 hover:bg-gray-700 px-2 py-1 rounded text-sm" data-player="${player}">Close</button>
-            </div>
-          </div>
-        </div>
-        `).join('')
-            : 'None';
-          if (state.playerList !== playerListHtml && elements.playerList) {
-            elements.playerList.innerHTML = playerListHtml;
-            state.playerList = playerListHtml;
-        
-            // Toggle action buttons
-            document.querySelectorAll('.toggle-actions').forEach(button => {
-              button.addEventListener('click', () => {
-                const player = button.getAttribute('data-player').trim();
-                const actionDiv = document.querySelector(`.action-buttons[data-player="${player}"]`);
-                if (actionDiv) {
-                  actionDiv.classList.remove('hidden');
-                  button.classList.add('hidden');
-                }
-              });
-            });
-        
-            // Close action buttons
-            document.querySelectorAll('.close-actions').forEach(button => {
-              button.addEventListener('click', () => {
-                const player = button.getAttribute('data-player').trim();
-                const actionDiv = document.querySelector(`.action-buttons[data-player="${player}"]`);
-                const toggleButton = document.querySelector(`.toggle-actions[data-player="${player}"]`);
-                if (actionDiv && toggleButton) {
-                  actionDiv.classList.add('hidden');
-                  toggleButton.classList.remove('hidden');
-                }
-              });
-            });
-        }
-        }
+        // Add event listeners for close actions
+        document.querySelectorAll('.close-actions').forEach(button => {
+          button.addEventListener('click', () => {
+            const player = button.getAttribute('data-player').trim();
+            const actionDiv = document.querySelector(`.action-buttons[data-player="${player}"]`);
+            const toggleButton = document.querySelector(`.toggle-actions[data-player="${player}"]`);
+            if (actionDiv && toggleButton) {
+              actionDiv.classList.add('hidden');
+              toggleButton.classList.remove('hidden');
+              state.actionButtonStates[player] = false; // Update state
+            }
+          });
+        });
 
         document.querySelectorAll('.tell-player').forEach(button => {
           button.addEventListener('click', () => {