Untitled

<!Doctype html>
  <html>
    <head>
      <meta charset="utf-8">
      <link rel ="stylesheet" href ="stylesheet/stylesheet.css">
    </head>

    <body>
      <h1>
        Welcome to the Wheel of Misfortune.
      </h1>
      <div id="head" class="head">
      </div>
      <div id="wheel" class="wheel">
      </div>
      <div id="question" class="question">
      </div>

      <!-- <script src="Javascript/event_listener.js"></script> -->
      <script>

        alert("Load 1")

          var head = document.getElementById('head')
          var question = document.getElementById('question')


        ///Number of frames per second to draw.
        var framesPerSecond = 144

        //// How quickly the wheel should lose speed.
        var deceleration = 0.05

        //// The number of frames to use when attempting to
        /// calculate the average angular velocity of the wheel
        // while it is being dragged.
        var velocityAverageSpan = 10

        //
        //Wheel State
        //

        // Current angle the wheel is rotated by in degrees.
          var currentWheelAngle = 0

        //set wheel variable to wheel div in index.html
          var wheel = document.getElementById('wheel')
          var wheelHeight = 0
          var wheelWidth = 0

        //Inject wheel.svg into wheel div html
          wheel.innerHTML = '<img id="wheel_image" src="images/wheel_of_fortune.png"></img>';
        //
        //set wheelImage variable to wheel.svg
          var wheelImage = document.getElementById('wheel_image')
        //
        //SET SURROUNDING DIV DIMENSIONS TO WHEEL SIZER
        wheelImage.onload = function(){
            wheelImage.setAttribute("style",`width${800}px; height:${800}px`)
            var wheelHeight = wheelImage.height
            var wheelWidth = wheelImage.width

            wheel.setAttribute("style",`width:${wheelWidth}px; height:${wheelHeight}px`)

              var rect = wheel.getBoundingClientRect()

              console.log(wheelWidth)
              console.log(wheelHeight)
              wheelCenterX = rect.left + (wheelWidth / 2)
              wheelCenterY = rect.top + (wheelHeight / 2)

          }
          //set rect variable to wheel image location


        // The Center of the wheel


        // A queue of the recent values of the wheel angle.
          var angleHistoryQueue  = []

        //Angular Velocity of the wheel (degrees per frame)
          var angularVelocity =  0


        /////
        //// MOUSE STATE
        ///


        /// prevents image being dragged during application usage.
          wheelImage.ondragstart = function() { return false; }


        // True if the mouse is currently dragging.
        var isDragging = false;

        var lastFrameMouseAngle = 0

        var mouseX = 0
        var mouseY = 0

        //////////

        wheelImage.addEventListener("mousemove",function(){
          handleMouseLocation(event)
        })

        wheelImage.addEventListener("mousedown",function(){
          handleMouseDown(event)
        })

        wheelImage.addEventListener("mouseup",function(){
          handleMouseUp(event)
        })


        var handleMouseDown = function(event){
          isDragging = true
          lastFrameMouseAngle = getMouseAngle()
        }

        var handleMouseUp = function(event){
          updateAngularVelocity()
          isDragging = false
        }

        var handleMouseLocation = function(event){
          mouseX = event.pageX
          mouseY = event.pageY
        }

        var getMouseAngle = function(){
          console.log(Math.atan2(mouseX - wheelCenterX, mouseY - wheelCenterY) * 180 / Math.PI)
          console.log(wheelCenterX,wheelCenterY)
          console.log(mouseX,mouseY)
          return Math.atan2(mouseX - wheelCenterX, mouseY - wheelCenterY) * 180 / Math.PI
        }

        var getAngleDelta = function(angle1,angle2){
          return(angle1 - angle2 + 180) % 360 - 180
        }

        var updateAngularVelocity = function(){
          if (angleHistoryQueue.length - 1 === 0 ){
            angularVelocity = 0
            return;
          }
          var firstAngle = angleHistoryQueue[0]
          var lastAngle = angleHistoryQueue[angleHistoryQueue.length - 1]
          angularVelocity = (lastAngle - firstAngle) / angleHistoryQueue.length

        }

        var drawFrame = function(){
          if(isDragging){

            var mouseAngle = getMouseAngle()

            var delta = getAngleDelta(lastFrameMouseAngle, mouseAngle);

            currentWheelAngle += delta;
            lastFrameMouseAngle = mouseAngle

            angleHistoryQueue.push(currentWheelAngle)
            if (angleHistoryQueue.length > velocityAverageSpan){
              angleHistoryQueue.shift()
            }
          }
          else{
            currentWheelAngle += angularVelocity
            if( angularVelocity != 0){
              var direction = angularVelocity / Math.abs(angularVelocity);
              angularVelocity = direction * Math.max(Math.abs(angularVelocity) - deceleration, 0)
            }
          }
          head.innerHTML = `<h1>${currentWheelAngle}</h1>`
          wheelImage.style.transform = `rotate(${currentWheelAngle}deg)`
        }

        setInterval(drawFrame, 1000 / framesPerSecond)


        alert("load 2")

      </script>

    </body>
  </html>