Wheel_of_Fortune_Plugin/assets/js/wheel.js

/**
 * Wheel of Fortune - JavaScript for wheel functionality
 * Robust, smooth animation using requestAnimationFrame and easing functions.
 */
jQuery(document).ready(function($) {
    // Preveri, ali so podatki na voljo
    if (typeof wof_data === 'undefined') {
        console.error('WOF Data is missing.');
        return;
    }

    // Elementi
    var wheelContainer = $('.wheel-container');
    var wheelElement = wheelContainer.find('.wheel');
    var spinButton = wheelContainer.find('.wheel-button');
    var resultDiv = wheelContainer.find('.wheel-result');
    var spinsCounter = wheelContainer.find('.wheel-spins-counter span');

    // Stanje
    var isSpinning = false;
    var accumulatedRotation = 0;
    var wheelSpins = wof_data.spins_left;
    var l10n = wof_data.l10n;

    // Nastavitve animacije
    var spinDuration = 8000;
    var baseRotations = 5;

    // Funkcija za animacijo
    function easeOutCubic(t) {
        return 1 - Math.pow(1 - t, 3);
    }

    function animateWheel(startTime, startRotation, totalRotation) {
        var currentTime = Date.now();
        var elapsedTime = currentTime - startTime;

        if (elapsedTime >= spinDuration) {
            wheelElement.css('transform', 'rotate(' + (startRotation + totalRotation) + 'deg)');
            accumulatedRotation = (startRotation + totalRotation);
            finishSpin();
            return;
        }

        var timeProgress = elapsedTime / spinDuration;
        var rotationProgress = easeOutCubic(timeProgress);
        var currentRotation = startRotation + (totalRotation * rotationProgress);
        wheelElement.css('transform', 'rotate(' + currentRotation + 'deg)');

        requestAnimationFrame(function() {
            animateWheel(startTime, startRotation, totalRotation);
        });
    }
    
    // Obdelava po koncu vrtenja
    function finishSpin() {
        var prize = window.wof_spin_result.prize;
        showPrizePopup(prize);
        isSpinning = false;
        
        if (wheelSpins > 0) {
            spinButton.prop('disabled', false).text(l10n.spin_button);
        } else {
            spinButton.prop('disabled', true).text(l10n.no_spins_left);
        }
    }
    
    // Prikaz nagrade
    function showPrizePopup(prize) {
        var isTryAgain = window.wof_spin_result.is_try_again === 1 || prize.is_try_again === 1;
        var html = '';
        if (isTryAgain) {
            html = '<p><strong>' + prize.name + '</strong></p>';
        } else {
            html = '<h3>' + l10n.congratulations + '</h3><p>' + l10n.you_won + ' <strong>' + prize.name + '</strong></p>';
        }
        if (window.wof_spin_result.discount_code) {
            html += '<p>' + l10n.discount_code_sent + '</p>';
        }
        resultDiv.html(html).addClass('win').fadeIn(300);
    }

    // Posodobitev števca spinov
    function updateSpinsCounter() {
        if (spinsCounter.length) {
            spinsCounter.text(wheelSpins);
        }
    }

    // Klik na gumb za vrtenje
    spinButton.on('click', function() {
        if (isSpinning || wheelSpins <= 0) return;

        isSpinning = true;
        spinButton.prop('disabled', true).text(l10n.spinning);
        resultDiv.hide().removeClass('win error');

        $.ajax({
            url: wof_data.rest_url,
            method: 'POST',
            beforeSend: function(xhr) {
                xhr.setRequestHeader('X-WP-Nonce', wof_data.nonce);
            },
            data: {
                wheel_id: wof_data.wheel_id,
            },
            success: function(response) {
                if (response.success) {
                    window.wof_spin_result = response.data;
                    wheelSpins = response.data.remaining_spins;
                    updateSpinsCounter();

                    var targetAngle = response.data.degree;
                    var fullSpinsRotation = baseRotations * 360;
                    var currentAngle = accumulatedRotation % 360;
                    
                    var rotationToTarget = targetAngle - currentAngle;
                    if (rotationToTarget < 0) {
                        rotationToTarget += 360;
                    }
                    
                    var totalRotationAmount = fullSpinsRotation + rotationToTarget;

                    animateWheel(Date.now(), accumulatedRotation, totalRotationAmount);
                    
                } else {
                    handleError(response.data.message || l10n.error);
                }
            },
            error: function(xhr) {
                var errorMsg = xhr.responseJSON ? (xhr.responseJSON.message || l10n.error) : l10n.error;
                handleError(errorMsg);
            }
        });
    });
    
    function handleError(message) {
        resultDiv.html('<p>' + message + '</p>').addClass('error').fadeIn(300);
        isSpinning = false;
        if(wheelSpins > 0){
             spinButton.prop('disabled', false).text(l10n.spin_button);
        }
    }

    // Inicializacija
    function init() {
        updateSpinsCounter();
        if (wheelSpins <= 0) {
            spinButton.prop('disabled', true).text(l10n.no_spins_left);
        }
    }
    
    init();
});