hypermc/panel
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

cleaning up actions UI in player list

Browse Source
This commit is contained in:
MCHost
2025-07-07 17:27:54 -04:00
parent cc250dac26
commit 89c41fa8a7
1 changed files with 59 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

75
public/js/app.js
View File

@@ -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', () => {