mirror of
https://github.com/kevinveenbirkenbach/roulette-wheel.git
synced 2024-11-01 00:53:11 +01:00
rotation & try display text names
This commit is contained in:
parent
a8ce06c3b8
commit
559865834a
91
src/app.ts
91
src/app.ts
@ -30,6 +30,12 @@ const canvasWrapper = document.getElementsByClassName(
|
||||
)[0]! as HTMLDivElement;
|
||||
|
||||
const MAXIMUM_SIZE = 16;
|
||||
canvasEl.width = canvasWrapper.offsetWidth;
|
||||
canvasEl.height = canvasWrapper.offsetHeight;
|
||||
const x = canvasEl.width / 2;
|
||||
const y = canvasEl.height / 2;
|
||||
const radius = canvasEl.height / 2;
|
||||
const animationFPSRate = 30;
|
||||
|
||||
counterEl.textContent = `0/${MAXIMUM_SIZE}`;
|
||||
|
||||
@ -152,22 +158,23 @@ function lightDarkMode() {
|
||||
});
|
||||
}
|
||||
|
||||
const arrowImage = document.createElement('img');
|
||||
arrowImage.src = 'static/arrow-down.png';
|
||||
arrowImage.alt = 'arrow';
|
||||
|
||||
function drawRouletteWheel(angle: number) {
|
||||
canvasEl.width = canvasWrapper.offsetWidth;
|
||||
canvasEl.height = canvasWrapper.offsetHeight;
|
||||
const x = canvasEl.width / 2;
|
||||
const y = canvasEl.height / 2;
|
||||
const radius = canvasEl.height / 2;
|
||||
ctx.clearRect(0, 0, canvasEl.width, canvasEl.height);
|
||||
const segmentWidth = 360 / items.length;
|
||||
let startAngle = angle;
|
||||
let endAngle = segmentWidth + startAngle;
|
||||
ctx.clearRect(0, 0, canvasEl.width, canvasEl.height);
|
||||
ctx.beginPath();
|
||||
ctx.arc(x, y, radius, 0, Math.PI * 2, true);
|
||||
ctx.stroke();
|
||||
const segmentWidth = 360 / items.length;
|
||||
let endAngle = segmentWidth + startAngle;
|
||||
// let xtemp = x + Math.cos(totalAngle/2) * radius/2;
|
||||
// let ytemp = y + Math.sin(totalAngle/2) * radius/2;
|
||||
for (let i = 0; i < items.length; i++) {
|
||||
ctx.beginPath();
|
||||
ctx.lineTo(x, y)
|
||||
ctx.font = 'bold 24px verdana, sans-serif';
|
||||
ctx.arc(
|
||||
x,
|
||||
y,
|
||||
@ -176,52 +183,56 @@ function drawRouletteWheel(angle: number) {
|
||||
(endAngle * Math.PI) / 180,
|
||||
false
|
||||
);
|
||||
ctx.fillText(itemsList.items[i].name, x + Math.cos(segmentWidth * i ) * radius / 2, y + Math.sin(segmentWidth * i + angle) * radius / 2 );
|
||||
ctx.lineTo(x, y)
|
||||
ctx.fillStyle = itemsList.items[i].color;
|
||||
ctx.fill();
|
||||
if (items.length !== 1) ctx.stroke();
|
||||
if (items.length !== 1) {
|
||||
ctx.stroke();
|
||||
}
|
||||
ctx.drawImage(arrowImage, x - 32, -32, 64, 64);
|
||||
startAngle += segmentWidth;
|
||||
endAngle += segmentWidth;
|
||||
// xtemp += Math.cos(totalAngle/2) * radius/2;
|
||||
// ytemp += Math.sin(totalAngle/2) * radius/2;
|
||||
// console.log(ytemp);
|
||||
}
|
||||
}
|
||||
|
||||
let angleSpeed = 1;
|
||||
|
||||
|
||||
|
||||
let guessItemIndex = Math.floor(Math.random() * items.length);
|
||||
let segmentAngle = 360 / items.length;
|
||||
const rotations = 10;
|
||||
const rotations = 3;
|
||||
let maxAngle = 360 * rotations + segmentAngle * guessItemIndex;
|
||||
let delta = 0.2;
|
||||
let angleSpeed = 0;
|
||||
let totalAngle = 0;
|
||||
let animationId: number | null;
|
||||
let animationId: number | null;
|
||||
let startAngle = 1;
|
||||
// const maxAngleSpeed = segmentAngle;
|
||||
|
||||
function startRoulette(){
|
||||
if(animationId){
|
||||
resetRouletteAnimation();
|
||||
//resetRouletteAnimation();
|
||||
}else{
|
||||
drawRouletteWheel(0);
|
||||
guessItemIndex = Math.floor(Math.random() * items.length);
|
||||
segmentAngle = 360 / items.length;
|
||||
console.log(itemsList.items[guessItemIndex].color);
|
||||
maxAngle = 360 * rotations + segmentAngle * (guessItemIndex - 1) + segmentAngle * Math.random();
|
||||
console.log(guessItemIndex);
|
||||
delta = 0.2
|
||||
segmentAngle = 360 / items.length;
|
||||
maxAngle = 360 * rotations + ((items.length - 1) - guessItemIndex) * segmentAngle + Math.random() * segmentAngle;
|
||||
beginAnimateRoulette();
|
||||
}
|
||||
}
|
||||
|
||||
function beginAnimateRoulette(){;
|
||||
drawRouletteWheel(angleSpeed);
|
||||
function beginAnimateRoulette(){
|
||||
if(totalAngle < maxAngle){
|
||||
console.log(angleSpeed);
|
||||
if(angleSpeed > maxAngle / 2){
|
||||
delta = -delta;
|
||||
}
|
||||
angleSpeed += angleSpeed * delta;
|
||||
totalAngle += angleSpeed;
|
||||
console.log('TOTAL: ' + totalAngle);
|
||||
animationId = window.requestAnimationFrame(beginAnimateRoulette);
|
||||
drawRouletteWheel(angleSpeed);
|
||||
angleSpeed += startAngle;
|
||||
totalAngle += startAngle;
|
||||
setTimeout(() => {
|
||||
animationId = window.requestAnimationFrame(beginAnimateRoulette);
|
||||
}, 1000 / animationFPSRate);
|
||||
|
||||
}else{
|
||||
window.cancelAnimationFrame(animationId!)
|
||||
animationId = null;
|
||||
@ -230,15 +241,15 @@ function beginAnimateRoulette(){;
|
||||
}
|
||||
}
|
||||
|
||||
function resetRouletteAnimation(){
|
||||
if(animationId){
|
||||
window.cancelAnimationFrame(animationId!)
|
||||
}
|
||||
drawRouletteWheel(0);
|
||||
animationId = null;
|
||||
angleSpeed = 1;
|
||||
totalAngle = 0;
|
||||
delta = 0.2;
|
||||
}
|
||||
// function resetRouletteAnimation(){
|
||||
// if(animationId){
|
||||
// window.cancelAnimationFrame(animationId!)
|
||||
// }
|
||||
// drawRouletteWheel(0);
|
||||
// animationId = null;
|
||||
// angleSpeed = 1;
|
||||
// totalAngle = 0;
|
||||
// delta = 0.2;
|
||||
// }
|
||||
|
||||
canvasEl.addEventListener('click', startRoulette);
|
BIN
static/arrow-down.png
Normal file
BIN
static/arrow-down.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 12 KiB |
Loading…
Reference in New Issue
Block a user