Prvi commit: Začetna verzija vtičnika Wheel of Fortune

assets/js/wheel.js

@@ -0,0 +1,148 @@
+/**
+ * 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 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();
+});