From 89c41fa8a71eda3366e8a38511317e428cbd3bf5 Mon Sep 17 00:00:00 2001
From: MCHost <hypermc@ssh.surf>
Date: Mon, 7 Jul 2025 17:27:54 -0400
Subject: [PATCH] cleaning up actions UI in player list

---
 public/js/app.js | 75 +++++++++++++++++++++++++++++++++++++-----------
 1 file changed, 59 insertions(+), 16 deletions(-)

diff --git a/public/js/app.js b/public/js/app.js
index 3299e12..f5fa212 100644
--- a/public/js/app.js
+++ b/public/js/app.js
@@ -971,31 +971,74 @@ document.addEventListener('DOMContentLoaded', () => {
       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.toggle('hidden');
-              button.textContent = actionDiv.classList.contains('hidden') ? 'Actions' : 'Hide';
-            }
-          });
-        });
-
-        // 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.textContent = 'Actions';
+              actionDiv.classList.remove('hidden');
+              button.classList.add('hidden');
             }
           });
         });
+    
+        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');
+                }
+              });
+            });
+        }
+        }
 
         document.querySelectorAll('.tell-player').forEach(button => {
           button.addEventListener('click', () => {