Github link & nightly toggle

This commit is contained in:
Santiago Fisela 2026-03-22 12:39:15 -03:00
parent 48448157a3
commit 1a289df445
4 changed files with 133 additions and 21 deletions

View file

@ -95,9 +95,18 @@
<div class="action-buttons"> <div class="action-buttons">
<a href="https://github.com/Emerald-Legacy-Launcher/Emerald-Legacy-Launcher/releases/latest" <a href="https://github.com/Emerald-Legacy-Launcher/Emerald-Legacy-Launcher/releases/latest"
class="main-btn get-launcher" id="main-download-btn"> class="main-btn get-launcher" id="main-download-btn">
<span>Get Launcher</span> <div class="btn-content">
<span>Get Launcher</span>
</div>
<img src="logo.png" class="btn-icon"> <img src="logo.png" class="btn-icon">
</a> </a>
<a href="https://github.com/Emerald-Legacy-Launcher/Emerald-Legacy-Launcher"
class="main-btn github-repo" target="_blank">
<div class="btn-content">
<span class="btn-title">GitHub Repo</span>
</div>
<img src="github-icon.png" class="btn-icon-github">
</a>
<a href="https://discord.gg/RHGRUwpmVc" class="main-btn join-discord" target="_blank"> <a href="https://discord.gg/RHGRUwpmVc" class="main-btn join-discord" target="_blank">
<div class="btn-content"> <div class="btn-content">
<span class="btn-title">Join Discord</span> <span class="btn-title">Join Discord</span>
@ -311,7 +320,16 @@
<div id="download-modal" class="modal-overlay"> <div id="download-modal" class="modal-overlay">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">
<h2 id="modal-title">Select Downloader</h2> <div class="header-left">
<h2 id="modal-title">Select Downloader</h2>
<div class="nightly-toggle-wrapper">
<label class="switch">
<input type="checkbox" id="nightly-toggle">
<span class="slider"></span>
</label>
<span class="toggle-label">Nightly</span>
</div>
</div>
<button id="close-modal" class="close-btn">X</button> <button id="close-modal" class="close-btn">X</button>
</div> </div>
<div id="modal-options" class="modal-options-grid"> <div id="modal-options" class="modal-options-grid">

BIN
public/github-icon.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 275 B

View file

@ -141,6 +141,8 @@ document.addEventListener('DOMContentLoaded', () => {
const closeModal = document.getElementById('close-modal'); const closeModal = document.getElementById('close-modal');
let latestAssets: any[] = []; let latestAssets: any[] = [];
let nightlyAssets: any[] = [];
let currentOSType = 'Windows';
const detectOS = () => { const detectOS = () => {
const ua = window.navigator.userAgent.toLowerCase(); const ua = window.navigator.userAgent.toLowerCase();
@ -185,27 +187,31 @@ document.addEventListener('DOMContentLoaded', () => {
const openDownloadModal = (osType: string) => { const openDownloadModal = (osType: string) => {
if (!modal || !modalOptions || !modalTitle) return; if (!modal || !modalOptions || !modalTitle) return;
currentOSType = osType;
const nightlyToggle = document.getElementById('nightly-toggle') as HTMLInputElement;
const isNightly = nightlyToggle?.checked || false;
const assets = isNightly ? nightlyAssets : latestAssets;
audio.playSFX('click.wav');
const { arch } = detectOS();
let filteredAssets = []; let filteredAssets = [];
let title = 'Select Downloader'; let title = 'Select Downloader';
if (osType === 'Windows') { if (osType === 'Windows') {
filteredAssets = latestAssets.filter(a => a.name.endsWith('.exe') || a.name.endsWith('.msi')); filteredAssets = assets.filter(a => a.name.endsWith('.exe') || a.name.endsWith('.msi'));
title = 'Emerald Legacy for Windows'; title = `Emerald Legacy for Windows ${isNightly ? '(Nightly)' : ''}`;
} else if (osType === 'macOS') { } else if (osType === 'macOS') {
filteredAssets = latestAssets.filter(a => a.name.endsWith('.dmg')); filteredAssets = assets.filter(a => a.name.endsWith('.dmg'));
title = 'Emerald Legacy for macOS'; title = `Emerald Legacy for macOS ${isNightly ? '(Nightly)' : ''}`;
} else if (osType === 'Linux') { } else if (osType === 'Linux') {
filteredAssets = latestAssets.filter(a => a.name.endsWith('.AppImage') || a.name.endsWith('.deb') || a.name.endsWith('.rpm')); filteredAssets = assets.filter(a => a.name.endsWith('.AppImage') || a.name.endsWith('.deb') || a.name.endsWith('.rpm'));
title = 'Emerald Legacy for Linux'; title = `Emerald Legacy for Linux ${isNightly ? '(Nightly)' : ''}`;
} }
const { arch } = detectOS();
const recommended = getRecommendedAsset(osType, arch, filteredAssets); const recommended = getRecommendedAsset(osType, arch, filteredAssets);
modalTitle.innerText = title; modalTitle.innerText = title;
modalOptions.innerHTML = filteredAssets.map(asset => { modalOptions.innerHTML = filteredAssets.length > 0 ? filteredAssets.map(asset => {
const isRecommended = asset.name === recommended?.name; const isRecommended = asset.name === recommended?.name;
return ` return `
<div class="modal-btn-container"> <div class="modal-btn-container">
@ -215,18 +221,34 @@ document.addEventListener('DOMContentLoaded', () => {
${isRecommended ? '<span class="splash-text">Recommended!</span>' : ''} ${isRecommended ? '<span class="splash-text">Recommended!</span>' : ''}
</div> </div>
`; `;
}).join(''); }).join('') : `<div style="color: grey; font-size: 1.2rem; padding: 20px;">No builds found for this platform.</div>`;
modal.classList.add('active'); modal.classList.add('active');
}; };
const nightlyToggle = document.getElementById('nightly-toggle');
nightlyToggle?.addEventListener('change', () => {
audio.playSFX('click.wav');
openDownloadModal(currentOSType);
});
(window as any).playAudioSFX = (file: string) => audio.playSFX(file); (window as any).playAudioSFX = (file: string) => audio.playSFX(file);
const updateDownloadButtons = async () => { const updateDownloadButtons = async () => {
try { try {
const response = await fetch(`https://api.github.com/repos/${repo}/releases/latest`); const [latestRes, nightlyRes] = await Promise.all([
const data = await response.json(); fetch(`https://api.github.com/repos/${repo}/releases/latest`),
latestAssets = data.assets; fetch(`https://api.github.com/repos/${repo}/releases/tags/nightly`)
]);
const [latestData, nightlyData] = await Promise.all([
latestRes.json(),
nightlyRes.json()
]);
latestAssets = latestData.assets || [];
nightlyAssets = nightlyData.assets || [];
const { os } = detectOS(); const { os } = detectOS();
const mainBtn = document.getElementById('main-download-btn'); const mainBtn = document.getElementById('main-download-btn');
@ -248,7 +270,7 @@ document.addEventListener('DOMContentLoaded', () => {
macBtn?.addEventListener('click', (e) => { e.preventDefault(); openDownloadModal('macOS'); }); macBtn?.addEventListener('click', (e) => { e.preventDefault(); openDownloadModal('macOS'); });
} catch (error) { } catch (error) {
console.error('Error fetching latest release:', error); console.error('Error fetching releases:', error);
} }
}; };

View file

@ -385,15 +385,19 @@ body {
z-index: 2; z-index: 2;
} }
.get-launcher { .get-launcher,
.github-repo,
.join-discord {
justify-content: space-between; justify-content: space-between;
padding: 0 20px; padding: 0 20px;
height: 64px;
} }
.join-discord { .join-discord {
flex-direction: row; font-size: 1.8rem;
justify-content: center; }
height: 56px;
.github-repo {
font-size: 1.8rem; font-size: 1.8rem;
} }
@ -410,7 +414,8 @@ body {
} }
.btn-icon, .btn-icon,
.btn-icon-discord { .btn-icon-discord,
.btn-icon-github {
height: 40px; height: 40px;
} }
@ -613,6 +618,73 @@ body {
margin-bottom: 8px; margin-bottom: 8px;
} }
.header-left {
display: flex;
align-items: center;
gap: 20px;
}
.nightly-toggle-wrapper {
display: flex;
align-items: center;
gap: 10px;
background: #1a1a1a;
padding: 4px 12px;
border: 2px solid #7c7c7c;
}
.toggle-label {
font-family: var(--font-pixel);
font-size: 1.1rem;
color: #fff;
text-transform: uppercase;
}
.switch {
position: relative;
display: inline-block;
width: 44px;
height: 22px;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #3c3c3c;
transition: .1s;
border: 2px solid #7c7c7c;
}
.slider:before {
position: absolute;
content: "";
height: 14px;
width: 14px;
left: 2px;
bottom: 2px;
background-color: #fff;
transition: .1s;
}
input:checked+.slider {
background-color: var(--color-emerald);
border-color: #fff;
}
input:checked+.slider:before {
transform: translateX(22px);
}
.modal-header h2 { .modal-header h2 {
font-size: 2rem; font-size: 2rem;
color: #fff; color: #fff;