script.js

// Default coin images
const DEFAULT_FRONT_IMAGE = 'front-key.png';
const DEFAULT_BACK_IMAGE = 'back-key.png';

// Current coin images (may be custom or default)
let currentFrontImage = DEFAULT_FRONT_IMAGE;
let currentBackImage = DEFAULT_BACK_IMAGE;

// Load custom images from localStorage on page load
window.addEventListener('DOMContentLoaded', () => {
    loadCustomImages();
});

function loadCustomImages() {
    const savedFrontImage = localStorage.getItem('customFrontImage');
    const savedBackImage = localStorage.getItem('customBackImage');

    if (savedFrontImage) {
        currentFrontImage = savedFrontImage;
        updatePreview('frontPreview', savedFrontImage);
    }

    if (savedBackImage) {
        currentBackImage = savedBackImage;
        updatePreview('backPreview', savedBackImage);
    }

    // Update the coin image to show the current front image
    const coinImage = document.getElementById('coinImage');
    if (coinImage) {
        coinImage.src = currentFrontImage;
    }
}

function handleFrontImageUpload(event) {
    const file = event.target.files[0];
    if (file && file.type.startsWith('image/')) {
        const reader = new FileReader();
        reader.onload = function(e) {
            const imageData = e.target.result;
            currentFrontImage = imageData;
            localStorage.setItem('customFrontImage', imageData);

            // Update preview
            updatePreview('frontPreview', imageData);

            // Update coin image
            const coinImage = document.getElementById('coinImage');
            if (coinImage) {
                coinImage.src = currentFrontImage;
            }
        };
        reader.readAsDataURL(file);
    }
}

function handleBackImageUpload(event) {
    const file = event.target.files[0];
    if (file && file.type.startsWith('image/')) {
        const reader = new FileReader();
        reader.onload = function(e) {
            const imageData = e.target.result;
            currentBackImage = imageData;
            localStorage.setItem('customBackImage', imageData);

            // Update preview
            updatePreview('backPreview', imageData);
        };
        reader.readAsDataURL(file);
    }
}

function updatePreview(previewId, imageSrc) {
    const preview = document.getElementById(previewId);
    if (preview) {
        preview.src = imageSrc;
        preview.style.display = 'block';
    }
}

function resetToDefault() {
    // Clear localStorage
    localStorage.removeItem('customFrontImage');
    localStorage.removeItem('customBackImage');

    // Reset current images to default
    currentFrontImage = DEFAULT_FRONT_IMAGE;
    currentBackImage = DEFAULT_BACK_IMAGE;

    // Clear file inputs
    const frontInput = document.getElementById('frontImageInput');
    const backInput = document.getElementById('backImageInput');
    if (frontInput) frontInput.value = '';
    if (backInput) backInput.value = '';

    // Clear previews
    const frontPreview = document.getElementById('frontPreview');
    const backPreview = document.getElementById('backPreview');
    if (frontPreview) {
        frontPreview.src = '';
        frontPreview.style.display = 'none';
    }
    if (backPreview) {
        backPreview.src = '';
        backPreview.style.display = 'none';
    }

    // Update coin image
    const coinImage = document.getElementById('coinImage');
    if (coinImage) {
        coinImage.src = currentFrontImage;
    }
}

function flipCoin() {
    const coin = document.getElementById('coin');
    const coinImage = coin.querySelector('.coin-image');

    // Remove any existing animation
    coin.classList.remove('flipping');

    // Random flip duration between 0.5 and 1 second
    const flipDuration = Math.random() * 0.5 + 0.5;

    // Set the animation duration
    coin.style.animationDuration = flipDuration + 's';

    // Start flipping animation
    setTimeout(() => {
        coin.classList.add('flipping');
    }, 10);

    // Switch images during flip
    let isShowingFront = true;
    const flipInterval = setInterval(() => {
        if (isShowingFront) {
            coinImage.src = currentBackImage;
        } else {
            coinImage.src = currentFrontImage;
        }
        isShowingFront = !isShowingFront;
    }, 150); // Switch every 150ms for visual effect

    // Stop switching and determine final result after animation
    setTimeout(() => {
        clearInterval(flipInterval);

        // Random final result (50/50 chance)
        const finalResult = Math.random() < 0.5;

        if (finalResult) {
            coinImage.src = currentFrontImage;
            console.log('Result: Front');
        } else {
            coinImage.src = currentBackImage;
            console.log('Result: Back');
        }

        // Remove animation class
        coin.classList.remove('flipping');
    }, flipDuration * 1000);
}