www/src/components/download/DownloadScript.astro
2025-06-21 13:04:35 -06:00

115 lines
3.8 KiB
Text

<script>
import JSConfetti from 'js-confetti'
import { UAParser } from 'ua-parser-js'
// Handle platform selection
const platformSections = document.querySelectorAll('.platform-section')
// Function to detect OS and select appropriate platform
function detectOS() {
const userAgent = window.navigator.userAgent
const { cpu, os } = UAParser(userAgent)
let detectedOS = 'mac' // Default to macOS
if (os.name === 'Windows') {
detectedOS = 'windows'
} else if (os.name === 'Linux' || os.name === 'Ubuntu') {
detectedOS = 'linux'
}
let arch = cpu.architecture || 'x86_64' // Default to x86_64
if (arch === 'amd64' || arch === 'x86_64') {
arch = 'x86_64'
} else if (arch === 'arm64' || arch === 'aarch64') {
arch = 'aarch64'
} else if (arch === 'arm') {
arch = 'arm64' // Treat arm as arm64 for simplicity
}
return { os: detectedOS, cpu: arch }
}
function getRandomNumber(min: number, max: number) {
return Math.floor(Math.random() * (max - min + 1)) + min
}
// Initialize platform based on user's OS
async function initializePlatform() {
const detectedOS = detectOS()
selectPlatform(detectedOS.os, detectedOS.cpu)
for (const button of document.querySelectorAll('.download-button')) {
button.addEventListener('click', () => {
const jsConfetti = new JSConfetti()
jsConfetti.addConfetti({
confettiNumber: 100,
// If we get a 1 to 10k chance, show only burger confetti
...(getRandomNumber(1, 10000) === 1 ? { emojis: ['🍔'] } : {}),
})
})
}
}
// Function to select a platform
async function selectPlatform(platform: string, cpu = 'x86_64') {
// Show/hide platform sections
for (const section of platformSections) {
if (
section.getAttribute('data-platform') === platform &&
section.getAttribute('data-cpu') === cpu
) {
section.setAttribute('data-active', 'true')
} else {
section.setAttribute('data-active', 'false')
}
}
}
// Check for twilight mode
async function checkTwilightMode() {
const urlParams = new URLSearchParams(window.location.search)
const isTwilight = urlParams.has('twilight')
if (isTwilight) {
const twilightInfoElem = document.getElementById('twilight-info')
twilightInfoElem?.setAttribute('data-twilight', 'true')
// Update UI to show twilight mode with animation
const titleElem = document.getElementById('download-title')
if (titleElem) {
const zenText = titleElem.innerHTML
titleElem.innerHTML = zenText.replace('Zen', 'Twilight')
}
const tags = document.querySelectorAll('.release-type-tag')
for (const tag of tags) {
tag.innerHTML = tag.innerHTML.replace('Beta', 'Twilight')
}
// Apply twilight mode to all relevant elements
const coralElements = document.querySelectorAll(
'.download-browser-logo, .release-type-tag, .decorative-gradient, .download-link, .download-arrow-icon, .download-card__icon, .checksum-icon-btn, .copy-btn, .flathub-download'
)
for (const element of coralElements) {
element.setAttribute('data-twilight', 'true')
}
// Replace all download links with twilight versions
const downloadLinks = document.querySelectorAll('a.download-button')
for (const link of downloadLinks) {
if (!link.id.includes('beta')) {
const href = link.getAttribute('href')
if (href && href.includes('/latest/download/')) {
const twilightHref = href.replace('/latest/download/', '/download/twilight/')
link.setAttribute('href', twilightHref)
}
}
}
}
}
// Initialize the page
initializePlatform()
checkTwilightMode()
</script>