/** * 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 dailySpinAvailable = wof_data.daily_spin_available; 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; updateButtonState(); } // Prikaz nagrade function showPrizePopup(prize) { var html = '

' + l10n.congratulations + '

' + l10n.you_won + ' ' + prize.name + '

'; if (window.wof_spin_result.discount_code) { html += '

' + l10n.discount_code_sent + '

'; } resultDiv.html(html).addClass('win').fadeIn(300); } // Posodobitev števca spinov function updateSpinsCounter() { if (spinsCounter.length) { spinsCounter.text(wheelSpins); } } // Posodobitev stanja gumba function updateButtonState() { if (isSpinning) return; if (dailySpinAvailable) { spinButton.prop('disabled', false).text(l10n.free_daily_spin || 'FREE DAILY SPIN'); } else if (wheelSpins > 0) { spinButton.prop('disabled', false).text(l10n.spin_button); } else { spinButton.prop('disabled', true).text(l10n.no_spins_left); } } // Klik na gumb za vrtenje spinButton.on('click', function() { if (isSpinning) return; var spinType = 'paid'; // Privzeto je plačan // Preveri, ali najprej porabimo dnevnega if (dailySpinAvailable) { spinType = 'daily'; } else if (wheelSpins <= 0) { return; // Ničesar za porabiti } 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, spin_type: spinType }, success: function(response) { if (response.success) { window.wof_spin_result = response.data; // Posodobimo stanje if (spinType === 'daily') { dailySpinAvailable = false; } 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('

' + message + '

').addClass('error').fadeIn(300); isSpinning = false; updateButtonState(); } // Inicializacija function init() { updateSpinsCounter(); updateButtonState(); } init(); });