Meleeman/WheelOfFortune
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactored code to use math calculations instead of a lookup table

Browse Source
This commit is contained in:
Meleeman01 2025-01-31 16:28:03 -06:00
parent 7c3eb6ed57
commit 5e20e2321a
2 changed files with 45 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

97
index.html
View File

@ -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])

12
server.js
View File

@ -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)){