Помощь с рулеткой на Roulette.js

145

26 декабря 2019, 16:20

Мне нужно что бы при клике, рандомно выбиралось изображение, при этом, управлять этим должен я. Например я буду отправлять ajax запрос, получать ответ ввиде числа, допустим эо будет число 4. соответственно, должно выбраться картинка номер 4. И так при каждом клике запрос -> Ответ -> Вращение до картинки номер которой был получен.

Библеотека которую использую

/// тут нужна помощь 
$(document).ready(function () { 
function randomInteger(min, max) { 
  var rand = min + Math.random() * (max - min) 
  rand = Math.round(rand); 
  return rand; 
} 
 
let rull = $('div.roulette'); 
  var option = { 
    speed: 4, 
    duration: 5, 
    stopImageNumber: 1, 
    startCallback: function() { 
      console.log('start'); 
    }, 
    slowDownCallback: function() { 
      console.log('slowDown'); 
    }, 
    stopCallback: function($stopElm) { 
      console.log($stopElm); 
      $('#win').html('<img src="' + $stopElm[0].currentSrc + '" width="130" style="display: block;">'); 
    } 
  } 
 
  rull.roulette('option', option); 
   
$('#button_buy').on('click', function() { 
  rull.roulette('start'); 
}); 
});

div.roulette { 
  margin-top: 35px; 
} 
 
div.roulette-inner { 
  left: 33px; 
} 
 
div.roulette {} 
 
div.roulette_container { 
  background-color: rgb(253, 252, 253); 
  width: 200px; 
  height: 200px; 
  border: 1px solid rgba(253, 252, 253, 0.31); 
  box-shadow: 0px 0px 3px lightpink; 
  margin: auto; 
}

<!DOCTYPE html> 
<html lang="en"> 
 
<head> 
  <meta charset="UTF-8"> 
  <title>Document</title> 
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> 
</head> 
 
<body> 
  <div class="container"> 
    <div class="row justify-content-center"> 
      <div class="col-md-12"> 
        <div class="card"> 
          <div class="card-body"> 
            <div class="row"> 
              <div class="col-md-12"> 
                <div class="roulette_container"> 
                  <div class="roulette"> 
                    <img src="https://freshcoal.com/images/main/42db67b6-9dd1-4bfe-b478-8829c1.png" width="130"> 
                    <img src="https://freshcoal.com/images/main/e25bd6ef-8c67-497b-be71-48923b.png" width="130"> 
                    <img src="https://freshcoal.com/images/main/d0f793ff-b041-427c-bc24-440834.png" width="130"> 
                    <img src="https://freshcoal.com/images/main/2ab25358-deaa-46b7-b351-d9732a.png" width="130"> 
                    <img src="https://freshcoal.com/images/main/23378bd2-28e5-4d7e-8d39-621b73.png" width="130"> 
                    <img src="https://freshcoal.com/images/main/7ceb88b2-7f5f-4399-abb9-706825.png" width="130"> 
                    <img src="https://freshcoal.com/images/main/664dd492-3fcd-443b-9e61-4c7ebd.png" width="130"> 
                    <img src="https://freshcoal.com/images/main/87324464-1700-468f-8333-e7779e.png" width="130"> 
                  </div> 
                </div> 
                <div class="col-md-12 text-center mt-4"> 
                  <button class="btn btn-success" id="button_buy"> 
                                    Крутить 
                                </button> 
                </div> 
                <div class="col-md-12 text-center mt-4"> 
                  <p id="win" class="text-center mx-auto"></p> 
                </div> 
              </div> 
            </div> 
          </div> 
        </div> 
      </div> 
    </div> 
  </div> 
</body> 
<script src="https://code.jquery.com/jquery-3.3.1.min.js"> </script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> 
<script> 
(function($) { 
	var Roulette = function(options) { 
		var defaultSettings = { 
			maxPlayCount : null, // x >= 0 or null 
			speed : 10, // x > 0 
			stopImageNumber : null, // x >= 0 or null or -1 
			rollCount : 3, // x >= 0 
			duration : 3, //(x second) 
			stopCallback : function() { 
			}, 
			startCallback : function() { 
			}, 
			slowDownCallback : function() { 
			} 
		} 
		var defaultProperty = { 
			playCount : 0, 
			$rouletteTarget : null, 
			imageCount : null, 
			$images : null, 
			originalStopImageNumber : null, 
			totalHeight : null, 
			topPosition : 0, 
 
			maxDistance : null, 
			slowDownStartDistance : null, 
 
			isRunUp : true, 
			isSlowdown : false, 
			isStop : false, 
 
			distance : 0, 
			runUpDistance : null, 
			slowdownTimer : null, 
			isIE : navigator.userAgent.toLowerCase().indexOf('msie') > -1 // TODO IE 
		}; 
		var p = $.extend({}, defaultSettings, options, defaultProperty); 
 
		var reset = function() { 
			p.maxDistance = defaultProperty.maxDistance; 
			p.slowDownStartDistance = defaultProperty.slowDownStartDistance; 
			p.distance = defaultProperty.distance; 
			p.isRunUp = defaultProperty.isRunUp; 
			p.isSlowdown = defaultProperty.isSlowdown; 
			p.isStop = defaultProperty.isStop; 
			p.topPosition = defaultProperty.topPosition; 
 
			clearTimeout(p.slowDownTimer); 
		} 
 
		var slowDownSetup = function() { 
			if(p.isSlowdown){ 
				return; 
			} 
			p.slowDownCallback(); 
			p.isSlowdown = true; 
			p.slowDownStartDistance = p.distance; 
			p.maxDistance = p.distance + (2*p.totalHeight); 
			p.maxDistance += p.imageHeight - p.topPosition % p.imageHeight; 
			if (p.stopImageNumber != null) { 
				p.maxDistance += (p.totalHeight - (p.maxDistance % p.totalHeight) + (p.stopImageNumber * p.imageHeight)) 
						% p.totalHeight; 
			} 
		} 
 
		var roll = function() { 
			var speed_ = p.speed; 
 
			if (p.isRunUp) { 
				if (p.distance <= p.runUpDistance) { 
					var rate_ = ~~((p.distance / p.runUpDistance) * p.speed); 
					speed_ = rate_ + 1; 
				} else { 
					p.isRunUp = false; 
				} 
 
			} else if (p.isSlowdown) { 
				var rate_ = ~~(((p.maxDistance - p.distance) / (p.maxDistance - p.slowDownStartDistance)) * (p.speed)); 
				speed_ = rate_ + 1; 
			} 
 
			if (p.maxDistance && p.distance >= p.maxDistance) { 
				p.isStop = true; 
				reset(); 
				p.stopCallback(p.$rouletteTarget.find('img').eq(p.stopImageNumber)); 
				return; 
			} 
			p.distance += speed_; 
			p.topPosition += speed_; 
			if (p.topPosition >= p.totalHeight) { 
				p.topPosition = p.topPosition - p.totalHeight; 
			} 
			// TODO IE 
			if (p.isIE) { 
				p.$rouletteTarget.css('top', '-' + p.topPosition + 'px'); 
			} else { 
				// TODO more smooth roll 
				p.$rouletteTarget.css('transform', 'translate(0px, -' + p.topPosition + 'px)'); 
			} 
			setTimeout(roll, 1); 
		} 
 
		var init = function($roulette) { 
			$roulette.css({ 'overflow' : 'hidden' }); 
			defaultProperty.originalStopImageNumber = p.stopImageNumber; 
			if (!p.$images) { 
				p.$images = $roulette.find('img').remove(); 
				p.imageCount = p.$images.length; 
				p.$images.eq(0).bind('load',function(){ 
					p.imageHeight = $(this).height(); 
					$roulette.css({ 'height' : (p.imageHeight + 'px') }); 
					p.totalHeight = p.imageCount * p.imageHeight; 
					p.runUpDistance = 2 * p.imageHeight; 
				}).each(function(){ 
					if (this.complete || this.complete === undefined){ 
						var src = this.src; 
						// set BLANK image 
						this.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw=="; 
						this.src = src; 
					} 
				}); 
			} 
			$roulette.find('div').remove(); 
			p.$images.css({ 
				'display' : 'block' 
			}); 
			p.$rouletteTarget = $('<div>').css({ 
				'position' : 'relative', 
				'top' : '0' 
			}).attr('class',"roulette-inner"); 
			$roulette.append(p.$rouletteTarget); 
			p.$rouletteTarget.append(p.$images); 
			p.$rouletteTarget.append(p.$images.eq(0).clone()); 
			$roulette.show(); 
		} 
 
		var start = function() { 
			p.playCount++; 
			if (p.maxPlayCount && p.playCount > p.maxPlayCount) { 
				return; 
			} 
			p.stopImageNumber = $.isNumeric(defaultProperty.originalStopImageNumber) && Number(defaultProperty.originalStopImageNumber) >= 0 ? 
									Number(defaultProperty.originalStopImageNumber) : Math.floor(Math.random() * p.imageCount); 
			p.startCallback(); 
			roll(); 
			p.slowDownTimer = setTimeout(function(){ 
				slowDownSetup(); 
			}, p.duration * 1000); 
		} 
 
		var stop = function(option) { 
			if (!p.isSlowdown) { 
				if (option) { 
					var stopImageNumber = Number(option.stopImageNumber); 
					if (0 <= stopImageNumber && stopImageNumber <= (p.imageCount - 1)) { 
						p.stopImageNumber = option.stopImageNumber; 
					} 
				} 
				slowDownSetup(); 
			} 
		} 
		var option = function(options) { 
			p = $.extend(p, options); 
			p.speed = Number(p.speed); 
			p.duration = Number(p.duration); 
			p.duration = p.duration > 1 ? p.duration - 1 : 1; 
			defaultProperty.originalStopImageNumber = options.stopImageNumber; 
		} 
 
		var ret = { 
			start : start, 
			stop : stop, 
			init : init, 
			option : option 
		} 
		return ret; 
	} 
 
	var pluginName = 'roulette'; 
	$.fn[pluginName] = function(method, options) { 
		return this.each(function() { 
			var self = $(this); 
			var roulette = self.data('plugin_' + pluginName); 
 
			if (roulette) { 
				if (roulette[method]) { 
					roulette[method](options); 
				} else { 
					console && console.error('Method ' + method + ' does not exist on jQuery.roulette'); 
				} 
			} else { 
				roulette = new Roulette(method); 
				roulette.init(self, method); 
				$(this).data('plugin_' + pluginName, roulette); 
			} 
		}); 
	} 
})(jQuery); 
</script> 
</html>