refactored code to use math calculations instead of a lookup table

index.html

@@ -177,40 +177,18 @@
       300, 600, 300, 500, 800, 550, 400, 300, 900, 500, 'spin again',
       900, 'Bankrupt', 600, 400, 300
     ];
-    const wheelSpinSpeedData = {
-      '0':0.2523,//lose a turn
-      '1':.2497,//800
-      '2':.2471,//350
-      '3':.2445,//450
-      '4':.2418,//450
-      '5':.2392,//300
-      '6':.2366,//600
-      '7':.2339,//5000
-      '8':.2313,//300
-      '9':.2287,//600
-      '10':.2261,//300
-      '11':.2235,//500
 
-      '12':.2208,//800
-      '13':.2182,//550
-      '14':.2156,//400
-      '15':.213,//300
-      '16':.2104,//900
-      '17':.2078,//500
-      '18':.2052,//spin again
-      '19':.2026,//900
-      '20':.1999,//Bankrupt
-      '21':.1973,//600
-      '22':.1947,//400
-      '23':.1921//300
-    };
     const canvas = document.getElementById('wheelCanvas');
     const ctx = canvas.getContext('2d');
     const radius = canvas.width / 2;
-
+    let lowestEquivelantAngle = 23.4327090939438 % (2* Math.PI);
-    let rotation = 0 - (.283*6); //sets the zero index on top
+    let fps = 60;
+    const frameDuration = 1000 / fps; // Duration of each frame in milliseconds
+    console.log('lowestEquivelantAngle:',lowestEquivelantAngle);
+    let rotation = lowestEquivelantAngle; //sets the zero index on top
     let spinning = false;
-    let spinSpeed = 0;
+
+
     let img = new Image();
     img.src = "arrow-down-bold.png";
     img.onload = function() {
@@ -219,16 +197,13 @@
     // 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;
-
+      console.log('',anglePerSegment)
       wheel.forEach((value, i) => {
         const startAngle = i * anglePerSegment;
         const endAngle = startAngle + anglePerSegment;
@@ -263,53 +238,59 @@
 
     // Start spinning
     function startSpin(targetIndex) {
-      console.log('targetIndex: ',targetIndex);
-      let resultingSpeed = wheelSpinSpeedData[targetIndex[0]];
-      console.log('resultingSpeed: ', resultingSpeed);
       if (spinning) return;
+      const totalTime = 8;
+      let c = 1.62;
+      const totalSpins = 2
+      const anglePerSegment = (2 * Math.PI) / wheel.length;
+      
       rotation = 0 - (.283*6)
+      let finalDisplacement = (targetIndex[0] * anglePerSegment) - ((2 * Math.PI)*totalSpins);
+      if (targetIndex[0] != 0) {
+        finalDisplacement = ((targetIndex[0] * anglePerSegment)*-1 ) - ((2 * Math.PI)*totalSpins)
+      }
+
+      console.log('finalDisplacement',finalDisplacement);
+      const timeStep = 1 / fps; // seconds per frame
+      const totalFrames = totalTime * fps;
+      const k = finalDisplacement / Math.log(totalTime + c ); // Calculate `k` for deceleration
+      let currentFrame = 0;
+      let currentAngle = 0;
       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);
 
       let currentRotation = rotation; // Start from the current rotation
-      spinSpeed = wheelSpinSpeedData[targetIndex[0]]; // Initial speed
 
-      function animate() {
+      function animate(timestamp) {
-        if ( spinSpeed < 0.001) {
+       
+        if (currentFrame > totalFrames) {
           spinning = false;
           spinSpeed = 0;
           console.log(`Landed on: ${wheel[targetIndex[0]]}`);
+          console.log(`final frameCount: ${currentFrame} and totalFrames ${totalFrames}`);
+          console.log(`final rotation: ${rotation}`);
           return;
         }
-        // console.log('currentRotation: ',currentRotation);
-        // console.log('spinSpeed: ', spinSpeed);
-        currentRotation += spinSpeed;
-        spinSpeed *= 0.99; // Gradual slowdown
 
+        const t = currentFrame * timeStep;
 
-        rotation = currentRotation ;
+        // Logarithmic deceleration velocity: v(t) = k * (1 - ln(t + 1) / ln(T + 1))
+        const velocity = k * (1 - Math.log(t + c) / Math.log(totalTime + c));
+        // Update the angle using the velocity
+        rotation += velocity * timeStep;
+
+        // Increment frame
+        currentFrame++;
         drawWheel();
+        // frameCount++;
         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);
-
 //==================================end of Wheel=====================================//
     function drawPlayers(message) {
       console.log(message);
@@ -536,7 +517,7 @@
           //if there is multiple entries where the spin exists pick a random index.
           if(filterResultsArr.length > 1) {
             console.log('if fra.length > 1',filterResultsArr[0])
-            startSpin(filterResultsArr[0][0]);
+            startSpin(filterResultsArr[0]);
           }
           else{
             console.log('else',filterResultsArr[0])

server.js

@@ -6,12 +6,12 @@ const crypto = require('crypto')
 
 const wss = new WebSocket.Server({ port: 8080 })
 const rooms = {} // Stores rooms and their clients
-// const wheel = [
+const wheel = [
-//   'lose a turn',800,350,450,700,300,600,5000,
+  'lose a turn',800,350,450,700,300,600,5000,
-//   300,600,300,500,800,550,400,300,900,500,'spin again',
+  300,600,300,500,800,550,400,300,900,500,'spin again',
-//   900,'Bankrupt',600,400,300
+  900,'Bankrupt',600,400,300
-// ] //represents wheel in wheel of fortune game.
+] //represents wheel in wheel of fortune game.
-const wheel = ['spin again','Bankrupt','lose a turn']
+//const wheel = ['spin again','Bankrupt','lose a turn']
 function removeProp(obj, prop) {
   obj = JSON.parse(JSON.stringify(obj))
   if(!Array.isArray(prop)){