SekiDesu01/hytale-f2p-mirror
1
0
Fork 0
mirror of https://git.sanhost.net/sanasol/hytale-f2p.git synced 2026-02-26 06:41:47 -03:00
Code Issues Packages Projects Releases Wiki Activity

Improve featured servers layout with Discord integration

Browse Source 
- Add Discord button to server cards when discord link is present in API data
- Remove HF2P Servers section to use full width for featured servers
- Increase server card size (300x180px banner, larger fonts and spacing)
- Simplify layout from 2-column grid to single full-width container
- Discord button opens external browser with server invite link
This commit is contained in:
AMIAY
2026-02-01 18:01:58 +01:00
parent b1d01a2f34
commit d5da9ecb6d
3 changed files with 92 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
GUI/js/featured.js
View File

@@ -15,7 +15,6 @@ function escapeHtml(text) {
*/
async function loadFeaturedServers() {
const featuredContainer = document.getElementById('featuredServersList');
const myServersContainer = document.getElementById('myServersList');
try {
console.log('[FeaturedServers] Fetching from', FEATURED_SERVERS_API);
@@ -54,6 +53,15 @@ async function loadFeaturedServers() {
const escapedName = escapeHtml(server.Name || 'Unknown Server');
const escapedAddress = escapeHtml(server.Address || '');
const bannerUrl = server.img_Banner || 'https://via.placeholder.com/400x240/1e293b/ffffff?text=Server+Banner';
const discordUrl = server.discord || '';
// Build Discord button HTML if discord link exists
const discordButton = discordUrl ? `
<button class="server-discord-btn" onclick="openServerDiscord('${discordUrl}')">
<i class="fab fa-discord"></i>
<span>Discord</span>
</button>
` : '';
return `
<div class="featured-server-card">
@@ -67,10 +75,13 @@ async function loadFeaturedServers() {
<h3 class="featured-server-name">${escapedName}</h3>
<div class="featured-server-address">
<span class="server-address-text">${escapedAddress}</span>
<button class="copy-address-btn" onclick="copyServerAddress('${escapedAddress}', this)">
<i class="fas fa-copy"></i>
<span>Copy</span>
</button>
<div class="server-action-buttons">
<button class="copy-address-btn" onclick="copyServerAddress('${escapedAddress}', this)">
<i class="fas fa-copy"></i>
<span>Copy</span>
</button>
${discordButton}
</div>
</div>
</div>
</div>
@@ -80,13 +91,6 @@ async function loadFeaturedServers() {
featuredContainer.innerHTML = featuredHTML;
}
// Show "Coming Soon" for my servers
myServersContainer.innerHTML = `
<div style="display: flex; align-items: center; justify-content: center; height: 100%; color: #94a3b8; font-size: 1.2rem;">
<p>Coming Soon</p>
</div>
`;
} catch (error) {
console.error('[FeaturedServers] Error loading servers:', error);
featuredContainer.innerHTML = `
@@ -96,11 +100,6 @@ async function loadFeaturedServers() {
<p style="font-size: 0.9rem; color: #64748b;">${error.message}</p>
</div>
`;
myServersContainer.innerHTML = `
<div style="display: flex; align-items: center; justify-content: center; height: 100%; color: #94a3b8; font-size: 1.2rem;">
<p>Coming Soon</p>
</div>
`;
}
}
@@ -151,6 +150,22 @@ async function copyServerAddress(address, button) {
}
}
/**
* Open server Discord in external browser
*/
function openServerDiscord(discordUrl) {
try {
console.log('[FeaturedServers] Opening Discord:', discordUrl);
if (window.electronAPI && window.electronAPI.openExternal) {
window.electronAPI.openExternal(discordUrl);
} else {
window.open(discordUrl, '_blank');
}
} catch (error) {
console.error('[FeaturedServers] Failed to open Discord link:', error);
}
}
// Load featured servers when the featured page becomes visible
document.addEventListener('DOMContentLoaded', () => {
const observer = new MutationObserver((mutations) => {