<!DOCTYPE html>
<head>
<script src="p5.min.js" ></script>
<script>
    console.log("hey there");
function preload(){
    img=loadImage('wheel-of-fortune')
}
function setup() {
    createCanvas(windowWidth, windowHeight);
    button = createButton("spin the wheel!");
    button.position(windowWidth/2-250, windowHeight/2);
    button.mousePressed(spin);
}

var spinning = 1;
var currentSpinning = 0;
function spin(){
    spinning = 1800 + random(0,500);
    currentSpinning = 0;
}

function card(){
    rect(0, 0, 55, 55);
    console.log("hey pop up here");
}
function draw() {
  background(220);
  imageMode(CENTER);
  angleMode(DEGREES);
  translate (windowWidth/2, windowHeight/2);
  rotate(currentSpinning);
  image (img,0,0,200,200);
  currentSpinning = currentSpinning+10;
  if (currentSpinning > spinning){
    currentSpinning = spinning;
    card();
  }
}
</script>
</head>

<body>
    <h1>Spin the Oracle Wheel!</h1>
    <p></p>

</body>