223 lines
9.8 KiB
PHP
223 lines
9.8 KiB
PHP
<?php
|
|
/**
|
|
* Template for displaying the wheel of fortune
|
|
*
|
|
* @var array $atts Shortcode attributes
|
|
*/
|
|
|
|
// Prevent direct access
|
|
if (!defined('ABSPATH')) {
|
|
exit;
|
|
}
|
|
|
|
// Get number of available spins for this specific wheel
|
|
$user_id = get_current_user_id();
|
|
$wheel_id = isset($template_vars['wheel_id']) ? $template_vars['wheel_id'] : 1;
|
|
global $wpdb;
|
|
$spins_table = $wpdb->prefix . 'wheel_spins';
|
|
$spins = $wpdb->get_var($wpdb->prepare("SELECT spins_available FROM $spins_table WHERE user_id = %d AND wheel_id = %d", $user_id, $wheel_id));
|
|
$spins = $spins === null ? 0 : (int) $spins;
|
|
|
|
// Get prizes for the specific wheel
|
|
$wheel = wheel_of_fortune();
|
|
$prizes = $wheel->get_wheel_prizes($wheel_id);
|
|
|
|
// Set classes for size, theme and scale
|
|
$container_classes = array(
|
|
'wheel-container',
|
|
'wheel-of-fortune-container',
|
|
'size-' . $atts['size'],
|
|
'theme-' . $atts['theme']
|
|
);
|
|
|
|
// Add scale class if provided
|
|
if (!empty($atts['scale'])) {
|
|
$container_classes[] = $atts['scale'];
|
|
}
|
|
|
|
// Generate unique ID for this wheel
|
|
$wheel_id_html = 'wheel-of-fortune-' . uniqid();
|
|
|
|
?>
|
|
<div id="<?php echo esc_attr($wheel_id_html); ?>" class="<?php echo esc_attr(implode(' ', $container_classes)); ?>">
|
|
<!-- SVG Filters and Gradients for 3D effects -->
|
|
<svg width="0" height="0" style="position: absolute;">
|
|
<!-- Gradients for wheel segments -->
|
|
<linearGradient id="gradientYellow" x1="0%" y1="0%" x2="0%" y2="100%">
|
|
<stop offset="0%" stop-color="#ffdd00" />
|
|
<stop offset="100%" stop-color="#ffaa00" />
|
|
</linearGradient>
|
|
<linearGradient id="gradientGreen" x1="0%" y1="0%" x2="0%" y2="100%">
|
|
<stop offset="0%" stop-color="#88ff00" />
|
|
<stop offset="100%" stop-color="#44cc00" />
|
|
</linearGradient>
|
|
<linearGradient id="gradientRed" x1="0%" y1="0%" x2="0%" y2="100%">
|
|
<stop offset="0%" stop-color="#ff5500" />
|
|
<stop offset="100%" stop-color="#cc3300" />
|
|
</linearGradient>
|
|
<linearGradient id="gradientPink" x1="0%" y1="0%" x2="0%" y2="100%">
|
|
<stop offset="0%" stop-color="#ff44aa" />
|
|
<stop offset="100%" stop-color="#cc2288" />
|
|
</linearGradient>
|
|
<linearGradient id="gradientBlue" x1="0%" y1="0%" x2="0%" y2="100%">
|
|
<stop offset="0%" stop-color="#00ccff" />
|
|
<stop offset="100%" stop-color="#0088cc" />
|
|
</linearGradient>
|
|
|
|
<!-- Hub gradients -->
|
|
<radialGradient id="hubGradient" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
|
|
<stop offset="0%" stop-color="#dddddd" />
|
|
<stop offset="70%" stop-color="#999999" />
|
|
<stop offset="100%" stop-color="#666666" />
|
|
</radialGradient>
|
|
|
|
<radialGradient id="buttonGradient" cx="50%" cy="30%" r="70%" fx="50%" fy="30%">
|
|
<stop offset="0%" stop-color="#330066" />
|
|
<stop offset="100%" stop-color="#220044" />
|
|
</radialGradient>
|
|
|
|
<!-- Chrome effect for pegs -->
|
|
<linearGradient id="chromeGradient" x1="0%" y1="0%" x2="100%" y2="100%">
|
|
<stop offset="0%" stop-color="#ffffff" />
|
|
<stop offset="25%" stop-color="#f0f0f0" />
|
|
<stop offset="50%" stop-color="#d0d0d0" />
|
|
<stop offset="75%" stop-color="#a0a0a0" />
|
|
<stop offset="100%" stop-color="#808080" />
|
|
</linearGradient>
|
|
|
|
<!-- Pointer gradients -->
|
|
<linearGradient id="pointerGradient" x1="0%" y1="0%" x2="100%" y2="100%">
|
|
<stop offset="0%" stop-color="#e0e0e0" />
|
|
<stop offset="50%" stop-color="#b0b0b0" />
|
|
<stop offset="100%" stop-color="#707070" />
|
|
</linearGradient>
|
|
|
|
<linearGradient id="pointerShineGradient" x1="0%" y1="0%" x2="100%" y2="100%">
|
|
<stop offset="0%" stop-color="#ffffff" />
|
|
<stop offset="100%" stop-color="rgba(255,255,255,0)" />
|
|
</linearGradient>
|
|
|
|
<!-- Filters for 3D effects -->
|
|
<filter id="bevel" x="-10%" y="-10%" width="120%" height="120%">
|
|
<feGaussianBlur in="SourceAlpha" stdDeviation="2" result="blur"/>
|
|
<feOffset in="blur" dx="2" dy="2" result="offsetBlur"/>
|
|
<feSpecularLighting in="blur" surfaceScale="5" specularConstant="1" specularExponent="20" lighting-color="#ffffff" result="specOut">
|
|
<fePointLight x="-5000" y="-10000" z="20000"/>
|
|
</feSpecularLighting>
|
|
<feComposite in="specOut" in2="SourceAlpha" operator="in" result="specOut2"/>
|
|
<feComposite in="SourceGraphic" in2="specOut2" operator="arithmetic" k1="0" k2="1" k3="1" k4="0" result="litPaint"/>
|
|
<feMerge>
|
|
<feMergeNode in="offsetBlur"/>
|
|
<feMergeNode in="litPaint"/>
|
|
</feMerge>
|
|
</filter>
|
|
|
|
<filter id="innerShadow" x="-20%" y="-20%" width="140%" height="140%">
|
|
<feGaussianBlur in="SourceAlpha" stdDeviation="3" result="blur"/>
|
|
<feOffset in="blur" dx="3" dy="3" result="offsetBlur"/>
|
|
<feComposite in="offsetBlur" in2="SourceAlpha" operator="in" result="innerShadow"/>
|
|
<feComposite in="SourceGraphic" in2="innerShadow" operator="over"/>
|
|
</filter>
|
|
|
|
<filter id="glow" x="-20%" y="-20%" width="140%" height="140%">
|
|
<feGaussianBlur in="SourceGraphic" stdDeviation="5" result="blur"/>
|
|
<feComposite in="blur" in2="SourceGraphic" operator="over"/>
|
|
</filter>
|
|
|
|
<filter id="neonGlow" x="-20%" y="-20%" width="140%" height="140%">
|
|
<feGaussianBlur in="SourceGraphic" stdDeviation="5" result="blur"/>
|
|
<feComposite in="blur" in2="SourceGraphic" operator="over"/>
|
|
</filter>
|
|
|
|
<filter id="neonGlowBright" x="-20%" y="-20%" width="140%" height="140%">
|
|
<feGaussianBlur in="SourceGraphic" stdDeviation="8" result="blur"/>
|
|
<feComposite in="blur" in2="SourceGraphic" operator="over"/>
|
|
</filter>
|
|
|
|
<filter id="pegGlow" x="-50%" y="-50%" width="200%" height="200%">
|
|
<feGaussianBlur in="SourceGraphic" stdDeviation="2" result="blur"/>
|
|
<feComposite in="blur" in2="SourceGraphic" operator="over"/>
|
|
</filter>
|
|
|
|
<filter id="textShadow" x="-10%" y="-10%" width="120%" height="120%">
|
|
<feDropShadow dx="1" dy="1" stdDeviation="1" flood-color="#000000" flood-opacity="0.7"/>
|
|
</filter>
|
|
|
|
<filter id="innerGlow" x="-20%" y="-20%" width="140%" height="140%">
|
|
<feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur"/>
|
|
<feComposite in="blur" in2="SourceGraphic" operator="atop"/>
|
|
</filter>
|
|
|
|
<filter id="buttonGlow" x="-30%" y="-30%" width="160%" height="160%">
|
|
<feGaussianBlur in="SourceGraphic" stdDeviation="5" result="blur"/>
|
|
<feComposite in="blur" in2="SourceGraphic" operator="over"/>
|
|
</filter>
|
|
|
|
<filter id="chromeEffect" x="-30%" y="-30%" width="160%" height="160%">
|
|
<feGaussianBlur in="SourceAlpha" stdDeviation="2" result="blur"/>
|
|
<feSpecularLighting in="blur" surfaceScale="5" specularConstant="1" specularExponent="20" lighting-color="#ffffff" result="specOut">
|
|
<fePointLight x="-5000" y="-10000" z="20000"/>
|
|
</feSpecularLighting>
|
|
<feComposite in="specOut" in2="SourceAlpha" operator="in" result="specOut2"/>
|
|
<feComposite in="SourceGraphic" in2="specOut2" operator="arithmetic" k1="0" k2="1" k3="1" k4="0"/>
|
|
</filter>
|
|
|
|
<filter id="pointerShadow" x="-30%" y="-30%" width="160%" height="160%">
|
|
<feDropShadow dx="2" dy="4" stdDeviation="3" flood-color="#000000" flood-opacity="0.5"/>
|
|
</filter>
|
|
</svg>
|
|
|
|
<!-- Wheel Pointer (Arrow) -->
|
|
<div class="wheel-pointer">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 100">
|
|
<!-- Base/Mount -->
|
|
<rect x="15" y="0" width="50" height="15" rx="5" ry="5" fill="url(#pointerGradient)" filter="url(#bevel)" />
|
|
|
|
<!-- Arrow body -->
|
|
<path d="M25,10 L25,50 L15,50 L40,85 L65,50 L55,50 L55,10 Z"
|
|
fill="url(#pointerGradient)"
|
|
stroke="#505050"
|
|
stroke-width="2"
|
|
filter="url(#pointerShadow)" />
|
|
|
|
<!-- Highlight on arrow (3D effect) -->
|
|
<path d="M30,15 L30,45 L20,45 L40,75 L60,45 L50,45 L50,15 Z"
|
|
fill="url(#pointerShineGradient)"
|
|
opacity="0.3" />
|
|
|
|
<!-- Center bolt -->
|
|
<circle cx="40" cy="25" r="5" fill="url(#chromeGradient)" filter="url(#chromeEffect)" />
|
|
</svg>
|
|
</div>
|
|
|
|
<div class="wheel-wrapper">
|
|
<?php
|
|
if (!empty($prizes)) {
|
|
echo $wheel->generate_wheel_svg($prizes);
|
|
} else {
|
|
echo '<div class="wheel-error">' . esc_html__('Error loading the wheel. No prizes available.', 'wheel-of-fortune') . '</div>';
|
|
}
|
|
?>
|
|
</div>
|
|
|
|
<div class="wheel-spins-counter">
|
|
<?php echo esc_html__('Remaining spins:', 'wheel-of-fortune'); ?> <span><?php echo esc_html($spins); ?></span>
|
|
</div>
|
|
|
|
<button class="wheel-button" <?php echo ($spins <= 0) ? 'disabled' : ''; ?>>
|
|
<?php echo esc_html__('SPIN', 'wheel-of-fortune'); ?>
|
|
</button>
|
|
|
|
<div class="wheel-result"></div>
|
|
</div>
|
|
|
|
<script type="text/javascript">
|
|
// Additional initialization for this specific wheel
|
|
jQuery(document).ready(function($) {
|
|
if (typeof wheel_params !== 'undefined') {
|
|
console.log('Wheel of Fortune initialized: <?php echo esc_js($wheel_id_html); ?>');
|
|
} else {
|
|
console.error('Wheel of Fortune: wheel_params is not defined. Check if the plugin is properly loaded.');
|
|
}
|
|
});
|
|
</script>
|