adds cool spinny wheel that doesn't stop for some reason lol

index.html

@@ -15,8 +15,134 @@
   <button id="spin-wheel" style="display: none;">Spin Wheel</button>
   <input id="guess-letter" placeholder="Guess a letter" style="display: none;">
   <button id="guess-button" style="display: none;">Guess</button>
+  <div style="display:relative;">
+    <span style="position: absolute; top: 0; left:50%">
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>arrow-down-bold</title><path d="M9,4H15V12H19.84L12,19.84L4.16,12H9V4Z" /></svg>
+    </span>
+    <canvas id="wheelCanvas" width="500" height="500"></canvas>
+  </div>
   
   <script>
+
+    //wheel==========================================================================
+    const wheel = [
+      'lose a turn', 800, 350, 450, 700, 300, 600, 5000,
+      300, 600, 300, 500, 800, 550, 400, 300, 900, 500, 'spin again',
+      900, 'Bankrupt', 600, 400, 300
+    ];
+    const wheelRadiansData = [
+      {'0':{'lose a turn':4.6}},
+      {'1':{'800':9.2}}
+    ];
+    const canvas = document.getElementById('wheelCanvas');
+    const ctx = canvas.getContext('2d');
+    const radius = canvas.width / 2;
+
+    let rotation = 0;
+    let spinning = false;
+    let spinSpeed = 0;
+    let img = new Image();
+    img.src = "arrow-down-bold.png";
+    img.onload = function() {
+      ctx.drawImage(img, 200, -50, 100,100);
+    }
+    // Draw the wheel
+    function drawWheel(drawResult = false) {
+      ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+      
+      ctx.save();
+      
+
+      ctx.translate(radius, radius);
+      ctx.rotate(rotation);
+      
+      const anglePerSegment = (2 * Math.PI) / wheel.length;
+
+      wheel.forEach((value, i) => {
+        const startAngle = i * anglePerSegment;
+        const endAngle = startAngle + anglePerSegment;
+
+        ctx.beginPath();
+        ctx.moveTo(0, 0);
+        ctx.arc(0, 0, radius, startAngle, endAngle);
+        ctx.closePath();
+
+        ctx.fillStyle = i % 2 === 0 ? '#ffdd99' : '#ffeecc';
+        ctx.fill();
+        ctx.stroke();
+
+        // Add text
+        ctx.save();
+        ctx.translate(
+          Math.cos(startAngle + anglePerSegment / 2) * radius * 0.7,
+          Math.sin(startAngle + anglePerSegment / 2) * radius * 0.7
+        );
+        ctx.rotate(startAngle + anglePerSegment / 2 + Math.PI / 2 - 1.5);
+        ctx.textAlign = 'center';
+        ctx.fillStyle = '#000';
+        ctx.font = '12px Arial';
+        ctx.fillText(String(i+","+value), 0, 0);
+
+        ctx.restore();
+      });
+
+      ctx.restore();
+      ctx.drawImage(img, 200, -50, 100,100);
+    }
+
+    // Start spinning
+    function startSpin(targetIndex) {
+      console.log('targetIndex: ',targetIndex);
+      if (spinning) return;
+      spinning = true;
+
+      const totalSpins = Math.floor(Math.random() * 3) + 3; // 3-6 full spins
+      const anglePerSegment = (2 * Math.PI) / wheel.length;
+      const targetAngle = targetIndex * anglePerSegment;
+      console.log(anglePerSegment);
+      // Align the target segment to 12 o'clock
+      const topAlignmentOffset = Math.PI / 2; // Adjust to position the result at the top
+      const finalTargetAngle = totalSpins * 2 * Math.PI + targetAngle - topAlignmentOffset;
+
+      let currentRotation = rotation; // Start from the current rotation
+      spinSpeed = 0.25; // Initial speed
+
+      function animate() {
+        if (Math.abs(currentRotation - finalTargetAngle) < 0.01 && spinSpeed < 0.001) {
+          spinning = false;
+          rotation = finalTargetAngle % (2 * Math.PI); // Final alignment
+          drawWheel();
+          console.log(`Landed on: ${wheel[targetIndex]}`);
+          return;
+        }
+
+        currentRotation += spinSpeed;
+        spinSpeed *= 0.99; // Gradual slowdown
+        //console.log(spinSpeed);
+       // console.log(finalTargetAngle,rotation);
+        if (spinSpeed < .01){
+          spinSpeed = .01;
+        }
+        rotation = currentRotation ;
+        drawWheel();
+        requestAnimationFrame(animate);
+      }
+
+      animate();
+    }
+    // Simulate WebSocket server response
+    // function simulateServerResponse() {
+    //   const targetIndex = Math.floor(Math.random() * wheel.length); // Random result
+    //   startSpin(targetIndex);
+    // }
+
+    // Initial draw
+    drawWheel();
+
+    // Trigger spin after 2 seconds
+    //setTimeout(simulateServerResponse, 2000);
+
     const socket = new WebSocket("ws://localhost:8080");
 
     document.getElementById("create-room").onclick = () => {
@@ -73,7 +199,25 @@
       }
 
       if (message.type === "spin_result") {
+        console.log('spin result recieved');
         document.getElementById("status").innerText = `Spin result: ${message.spinResult} points (${message.player})`;
+          //find target index
+          let targetIndexArr = wheel.entries();
+          let filterResultsArr = [];
+          for(let x of targetIndexArr){
+            if (x[1] == message.spinResult) {
+              filterResultsArr.push(x);
+            }
+          }
+          console.log(filterResultsArr[0][0]);
+          //if there is multiple entries where the spin exists pick a random index.
+          if(filterResultsArr.length > 1) {
+            startSpin(filterResultsArr[Math.floor(Math.random() * filterResultsArr.length)][0]);
+          }
+          else{
+            startSpin(filterResultsArr[0]);
+          }
+          
       }
 
       if (message.type === "guess_result") {
@@ -90,5 +234,7 @@
       }
     };
   </script>
+  
+
 </body>
 </html>