From 5e20e2321a38df16f7acf8289f556fa3f988d14f Mon Sep 17 00:00:00 2001 From: Meleeman01 Date: Fri, 31 Jan 2025 16:28:03 -0600 Subject: [PATCH] refactored code to use math calculations instead of a lookup table --- index.html | 97 ++++++++++++++++++++++-------------------------------- server.js | 12 +++---- 2 files changed, 45 insertions(+), 64 deletions(-) diff --git a/index.html b/index.html index 446f50f..677e2d6 100644 --- a/index.html +++ b/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 rotation = 0 - (.283*6); //sets the zero index on top + let lowestEquivelantAngle = 23.4327090939438 % (2* Math.PI); + 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() { - if ( spinSpeed < 0.001) { + function animate(timestamp) { + + 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]) diff --git a/server.js b/server.js index 22c7d22..7d36a62 100644 --- a/server.js +++ b/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 = [ -// '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 -// ] //represents wheel in wheel of fortune game. -const wheel = ['spin again','Bankrupt','lose a turn'] +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 +] //represents wheel in wheel of fortune game. +//const wheel = ['spin again','Bankrupt','lose a turn'] function removeProp(obj, prop) { obj = JSON.parse(JSON.stringify(obj)) if(!Array.isArray(prop)){