fix: better math

frontend/script.js

 let statsParagraph = document.getElementById('stats');
 let clickParagraph = document.getElementById('clickangle');
 
-let rotation = 0;
-let targetAngle = 0;
-let isSpinning = false;
-let wheelCanvas;
-
-function setup() {
-  wheelCanvas = createCanvas(800, 800);
-  wheelCanvas.parent('container');
-  wheelCanvas.mousePressed(spinWheel);
-
-  angleMode(RADIANS);
-}
-
-function draw() {
-  background(255);
-  translate(width / 2, height / 2);
-
-  //translate targetangle to rotation value
-  //check if rotation = targetrotation
-  //if: stop spin
-  //else: continue spin
-
-  rotate(rotation);
-
-
-
-
-  if(round(rotation % TWO_PI, 2) == round(targetAngle,2)){
-    stopSpinning();
-  }else{
-    rotation += isSpinning ? 0.01 : 0;
-    stats.innerHTML = "rotation:" + int(rotation) + " rotation%:" + (rotation % TWO_PI);
-  }
-
-  drawWheel();
-}
-
-function drawWheel() {
 const colors = [
   "#FFF56D", // Curious
   "#FFEE00", // Adventurous
@@ -81,6 +43,45 @@ function drawWheel() {
   "Silly"
 ];
 
+
+let rotation = 0;
+let targetAngle = 0;
+let isSpinning = false;
+let wheelCanvas;
+
+function setup() {
+  wheelCanvas = createCanvas(800, 800);
+  wheelCanvas.parent('container');
+  wheelCanvas.mousePressed(spinWheel);
+
+  angleMode(RADIANS);
+}
+
+function draw() {
+  background(255);
+  translate(width / 2, height / 2);
+
+  //translate targetangle to rotation value
+  //check if rotation = targetrotation
+  //if: stop spin
+  //else: continue spin
+
+  rotate(rotation);
+
+
+
+
+  if(round(rotation % TWO_PI, 2) == round(targetAngle,2)){
+    stopSpinning();
+  }else{
+    rotation += isSpinning ? 0.01 : 0;
+    stats.innerHTML = "rotation:" + int(rotation) + " rotation%:" + (rotation % TWO_PI);
+  }
+
+  drawWheel();
+}
+
+function drawWheel() {
   const numSegments = colors.length;
   const angleIncrement = TWO_PI / numSegments;
 
@@ -120,7 +121,17 @@ function spinWheel(event) {
       targetAngle = PI + (PI - clickAngle)
     }
 
-    targetAngle = targetAngle + (rotation % TWO_PI); //apply offset for previous rotations
+    //targetAngle = (targetAngle % TWO_PI) + (rotation % TWO_PI); //apply offset for previous rotations
+
+    let sectorIncrement = TWO_PI / colors.length;
+    for (let i = 0;i < colors.length; i++){
+      if(targetAngle >= sectorIncrement * i && targetAngle < sectorIncrement * (i+1)){ //angle is within sector
+        console.log("target: " + targetAngle + " lower value: " + sectorIncrement * i + " higher value: " + sectorIncrement * (i+1));
+        targetAngle = (sectorIncrement * i) + sectorIncrement/2; 
+      }
+    }
+
+
     clickParagraph.innerHTML = "targetangle: " + targetAngle;