adding in server list
This commit is contained in:
150
servers/server_list.js
Normal file
150
servers/server_list.js
Normal file
@@ -0,0 +1,150 @@
|
||||
// Function to copy text to clipboard and trigger animation
|
||||
function copyToClipboard(text, button) {
|
||||
navigator.clipboard.writeText(text).then(() => {
|
||||
button.classList.add('copied');
|
||||
setTimeout(() => {
|
||||
button.classList.remove('copied');
|
||||
}, 2000);
|
||||
}).catch(err => {
|
||||
console.error('Failed to copy:', err);
|
||||
});
|
||||
}
|
||||
|
||||
// Function to create a server card
|
||||
function createServerCard(server, isNew = false) {
|
||||
const ownerName = server.ops && server.ops.length > 0 ? server.ops[0].name : 'Unknown';
|
||||
const serverCard = document.createElement('div');
|
||||
serverCard.className = `feature-card tilt-card ${isNew ? 'new-server-animation' : ''}`;
|
||||
serverCard.dataset.connect = server.connect; // Add identifier
|
||||
serverCard.innerHTML = `
|
||||
<div class="flex items-center mb-3">
|
||||
<span class="inline-block w-3 h-3 rounded-full mr-2 ${server.online ? 'bg-green-500' : 'bg-red-500'}"></span>
|
||||
<h3 class="text-xl minecraft-font text-teal-400">${ownerName}'s Server</h3>
|
||||
</div>
|
||||
<p class="text-sm opacity-90 leading-relaxed mb-2"><strong>MOTD:</strong> ${server.motd}</p>
|
||||
<p class="text-sm opacity-90 leading-relaxed mb-2"><strong>Version:</strong> ${server.gameVersion}</p>
|
||||
<p class="text-sm opacity-90 leading-relaxed mb-2"><strong>Gamemode:</strong> ${server.gamemode}</p>
|
||||
<p class="text-sm opacity-90 leading-relaxed mb-2"><strong>Hardcore:</strong> ${server.hardcore ? 'Yes' : 'No'}</p>
|
||||
<p class="text-sm opacity-90 leading-relaxed"><strong>Status:</strong> ${server.online ? 'Online' : 'Offline'}</p>
|
||||
<div class="flex items-center text-sm opacity-90 leading-relaxed mb-2">
|
||||
<strong>Connect:</strong>
|
||||
<span class="ml-2">${server.connect}</span>
|
||||
<button class="copy-btn ml-4" onclick="copyToClipboard('${server.connect}', this)" style="color: #2DD4BF;">
|
||||
<svg class="clipboard" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h12a2 2 0 002-2V7a2 2 0 00-2-2h-2m-2-2h-4a2 2 0 00-2 2h8a2 2 0 01-2 2h-4a2 2 0 01-2-2z"></path>
|
||||
</svg>
|
||||
<svg class="checkmark" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
`;
|
||||
return serverCard;
|
||||
}
|
||||
|
||||
// Function to update server list dynamically
|
||||
function updateServerList(newServers) {
|
||||
const serverList = document.getElementById('server-list');
|
||||
const currentCards = Array.from(serverList.children);
|
||||
const currentConnects = currentCards.map(card => card.dataset.connect);
|
||||
const newConnects = newServers.map(server => server.connect);
|
||||
|
||||
// Find new servers
|
||||
const serversToAdd = newServers.filter(server => !currentConnects.includes(server.connect));
|
||||
const serversToRemove = currentCards.filter(card => !newConnects.includes(card.dataset.connect));
|
||||
|
||||
// Remove old servers
|
||||
serversToRemove.forEach(card => {
|
||||
card.style.opacity = '0';
|
||||
card.style.transform = 'translateY(20px)';
|
||||
setTimeout(() => card.remove(), 300);
|
||||
});
|
||||
|
||||
// Add new servers with animation
|
||||
serversToAdd.forEach(server => {
|
||||
const newCard = createServerCard(server, true);
|
||||
serverList.insertBefore(newCard, serverList.firstChild);
|
||||
});
|
||||
|
||||
// Update existing servers
|
||||
newServers.forEach(server => {
|
||||
const existingCard = currentCards.find(card => card.dataset.connect === server.connect);
|
||||
if (existingCard) {
|
||||
const ownerName = server.ops && server.ops.length > 0 ? server.ops[0].name : 'Unknown';
|
||||
const updatedCard = createServerCard(server);
|
||||
existingCard.innerHTML = updatedCard.innerHTML;
|
||||
existingCard.className = updatedCard.className;
|
||||
}
|
||||
});
|
||||
|
||||
console.log('Server list updated:', {
|
||||
added: serversToAdd.length,
|
||||
removed: serversToRemove.length,
|
||||
total: newServers.length
|
||||
});
|
||||
}
|
||||
|
||||
// Function to fetch and display servers
|
||||
async function fetchServers() {
|
||||
const serverList = document.getElementById('server-list');
|
||||
const loadingMessage = document.getElementById('loading-message');
|
||||
const errorMessage = document.getElementById('error-message');
|
||||
const searchInput = document.getElementById('search-input');
|
||||
|
||||
try {
|
||||
const response = await fetch('https://api.my-mc.link/list_all_servers_public');
|
||||
const data = await response.json();
|
||||
|
||||
if (data.success && data.servers) {
|
||||
loadingMessage.classList.add('hidden');
|
||||
errorMessage.classList.add('hidden');
|
||||
|
||||
// Store servers globally for search filtering
|
||||
window.serverData = data.servers;
|
||||
|
||||
// Initial render or update
|
||||
if (serverList.children.length === 0) {
|
||||
window.serverData.forEach(server => {
|
||||
serverList.appendChild(createServerCard(server));
|
||||
});
|
||||
} else {
|
||||
updateServerList(window.serverData);
|
||||
}
|
||||
|
||||
// Add search event listener (only once)
|
||||
if (!searchInput.dataset.listener) {
|
||||
searchInput.dataset.listener = 'true';
|
||||
searchInput.addEventListener('input', () => {
|
||||
const searchTerm = searchInput.value.trim().toLowerCase();
|
||||
const filteredServers = window.serverData.filter(server => {
|
||||
const ownerName = server.ops && server.ops.length > 0 ? server.ops[0].name.toLowerCase() : 'unknown';
|
||||
const motd = server.motd.toLowerCase();
|
||||
const version = server.gameVersion.toLowerCase();
|
||||
const status = server.online ? 'online' : 'offline';
|
||||
|
||||
return (
|
||||
ownerName.includes(searchTerm) ||
|
||||
motd.includes(searchTerm) ||
|
||||
version.includes(searchTerm) ||
|
||||
status.includes(searchTerm)
|
||||
);
|
||||
});
|
||||
|
||||
updateServerList(filteredServers);
|
||||
});
|
||||
}
|
||||
} else {
|
||||
throw new Error('No servers found');
|
||||
}
|
||||
} catch (error) {
|
||||
loadingMessage.classList.add('hidden');
|
||||
errorMessage.classList.remove('hidden');
|
||||
console.error('Error fetching servers:', error);
|
||||
}
|
||||
}
|
||||
|
||||
// Initial fetch
|
||||
fetchServers();
|
||||
|
||||
// Fetch servers every 60 seconds
|
||||
setInterval(fetchServers, 60000);
|
||||
Reference in New Issue
Block a user