/** * 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 = '

' + prize.name + '

'; } else { 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); } } // 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('

' + message + '

').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(); });