mirror of
https://github.com/LCE-Hub/lce-hub.github.io.git
synced 2026-08-09 04:02:33 +00:00
Github link & nightly toggle
This commit is contained in:
parent
48448157a3
commit
1a289df445
22
index.html
22
index.html
|
|
@ -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
BIN
public/github-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 275 B |
50
src/main.ts
50
src/main.ts
|
|
@ -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);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -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;
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue