Wheel of PdM

by Alex Cowan

HTML

<script src="//code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<div id="wheel">
  <div id="spin_wrapper">
    <svg xmlns="http://www.w3.org/2000/svg" id="spin" width="100%" height="100%" viewBox="0 0 100 100"></svg>
      <button class="spinners" id="start">Win!</button>
  </div>
</div>

SCSS

*,:before,:after{box-sizing:border-box;margin:0;padding:0;}

#spin_wrapper {
	position: fixed;
	top: 50%;
	left: 50%;
	width: 300px;
	height: 300px;
	margin-top: -150px;
	margin-left: -150px;
	border-radius: 50%;
	background: #ffffff;
	border: 2px solid #ffffff;
	/* box-shadow: 0px 2px 5px 1px rgba(0,0,0, 0.3); */
	
	&:after {
		content: '';
		position: absolute;
		left: 50%;
		bottom: 100%;
		width: 14px;
		height: 30px;
		margin-left: -7px;
		margin-bottom: -5px;
		border-style: solid;
		border-color: transparent;
		border-width: 7px;
		border-bottom: 0px;
		border-top: 30px solid #FFA514;
	}
}
#spin {
	transform-origin: 50% 50%;
}

/*
.spinners {
    display: inline-block;
    letter-spacing: 0;
    text-align: center;
    color: #fff;
    padding: 7px 7px 3px;
    border-radius: 30px;
    font-weight: bold;
    font-size: 15px;
    line-height: 18px;
    background: #65acb0;
    min-width: 19px;
    margin-top: 10px;
    margin-left: 10px;
}
*/

#start {
  margin-left: 250px;
  padding: 5px;
}

JavaScript

window.requestAnimFrame = (function() {
  return window.requestAnimationFrame ||
    window.webkitRequestAnimationFrame ||
    window.mozRequestAnimationFrame ||
    function(callback) {
      window.setTimeout(callback, 1000 / 60);
    };
})();


function polarToCartesian(centerX, centerY, radius, angleInDegrees) {
  var angleInRadians = (angleInDegrees - 90) * Math.PI / 180.0;
  return {
    x: centerX + (radius * Math.cos(angleInRadians)),
    y: centerY + (radius * Math.sin(angleInRadians))
  };
}

function arcPath(x, y, radius, endradius, startAngle, endAngle) {
  var start = polarToCartesian(x, y, radius, endAngle);
  var end = polarToCartesian(x, y, radius, startAngle);
  var start2 = polarToCartesian(x, y, endradius, endAngle);
  var end2 = polarToCartesian(x, y, endradius, startAngle);
  var largeArcFlag = endAngle - startAngle <= 180 ? "0" : "1";
  var d = [
    "M", start.x, start.y,
    "A", radius, radius, 0, largeArcFlag, 0, end.x, end.y,
    "L", end2.x, end2.y,
    "A", endradius, endradius, 0, largeArcFlag, 1, start2.x, start2.y,
    "Z"
  ].join(" ");
  return d;
}

var spin = {
  slots: [{
      value: 'ProServe',
      color: '#1D3F6F'
    },
    {
      value: 'Content',
      color: '#613A53'
    },
    {
      value: 'Journalist',
      color: '#DA5138'
    },
    {
      value: 'UX Test',
      color: '#F99B1C'
    },
    {
      value: 'Proto',
      color: '#63ADB1'
    },
    {
      value: 'Testers',
      color: '#002D45'
    },
    {
      value: 'Interview',
      color: '#D1D3D4'
    },
    {
      value: 'Support',
      color: '#808285'
    },
    {
      value: 'CFO',
      color: '#58595B'
    },
    {
      value: 'Sales',
      color: '#DA5138'
    },
  ],
  speed: 0,
  spinSpeed: 10,
  degree: 0,
  obj: null,
  stop: false,
  min_duration: 3000,
  max_duration: 8000,
  rand_speed: 0,
};

var spin_anim = function() {
  if (spin.stop) {
    return true;
  }
  spin.degree = filter_degree(spin.degree + spin.speed);
 ...