kevinveenbirkenbach/roulette-wheel
1
0
Fork 0
mirror of https://github.com/kevinveenbirkenbach/roulette-wheel.git synced 2024-11-24 03:01:04 +01:00
Code Issues Packages Projects Releases Wiki Activity

rotation time fix

Browse Source
This commit is contained in:
p-wojt 2022-01-10 22:40:07 +01:00
parent bab8abb1c2
commit 1ab05d1292
2 changed files with 10 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
app.css
View File

@ -128,6 +128,10 @@ ul {
margin: auto; margin: auto;
} }
.menu{
width: 23.5rem;
}
.roulette-wheel { .roulette-wheel {
position: relative; position: relative;
top: 0; top: 0;

12
src/app.ts
View File

@ -268,21 +268,21 @@ function startRoulette() {
360 * ROTATIONS + 360 * ROTATIONS +
(items.length - 1 - guessItemIndex) * segmentAngle + (items.length - 1 - guessItemIndex) * segmentAngle +
Math.random() * segmentAngle; Math.random() * segmentAngle;
console.log(maxAngle);
endTime = (maxAngle / rotate_by) * (1000 / ANIMATION_FPS); endTime = (maxAngle / rotate_by) * (1000 / ANIMATION_FPS);
console.log(endTime);
beginAnimateRoulette(); beginAnimateRoulette();
} }
} }
} }
let totalTime = 0; let totalTime = 0;
function beginAnimateRoulette() { function beginAnimateRoulette() {
//TODO: animations doesn't work as expected (endTime too low or totalTime incrementing faster than expected) const angle = easeOut(totalTime, 0, maxAngle, endTime);
if (totalTime < endTime) { if (totalTime < endTime || maxAngle - angle > 0.1) {
drawRouletteWheel(easeOut(totalTime, 0, maxAngle, endTime));
setTimeout(() => { setTimeout(() => {
animationId = window.requestAnimationFrame(beginAnimateRoulette); drawRouletteWheel(angle);
totalTime += 1000 / ANIMATION_FPS; totalTime += 1000 / ANIMATION_FPS;
animationId = window.requestAnimationFrame(beginAnimateRoulette);
}, 1000 / ANIMATION_FPS); }, 1000 / ANIMATION_FPS);
} else { } else {
window.cancelAnimationFrame(animationId!); window.cancelAnimationFrame(animationId!);