roulette/script.js

function draw_roulette(nb_person, x, y, r, names){
	console.log(names);
	let chart = document.getElementById("roulette").querySelector('g');
	let starting_coo = new Array(x, y + r);
	let text_coo = new Array(starting_coo[0] + (r/2), starting_coo[1]);
	let center = new Array(x + r, y + r);
	let angle = 0;
	for (let i=0; i < nb_person; i++){
		let coo_arr = new Array(center[0] - r * Math.cos(2 * Math.PI / nb_person * (i+1)), center[1] - r * Math.sin(2 * Math.PI / nb_person * (i+1)));
		let new_path = document.createElement("path");
		new_path.setAttribute('fill', 'green');
		new_path.setAttribute('d', "M " + starting_coo[0] + " " + starting_coo[1] + " A " + r + " " + r + " 0 0 1 " + coo_arr[0] + " " + coo_arr[1] + " L " + center[0] + " " + center[1] + " Z");
		
		let text = document.createElement("text");
		text.innerText = names[i];
		text.setAttribute("x", text_coo[0]);
		text.setAttribute("y", text_coo[1]);
		text.setAttribute("textLength", r/2);
		text.setAttribute('text-anchor', 'middle');
		text.setAttribute("font-size", r/5)
		text.setAttribute("stroke-width", "1");
		text.setAttribute("transform", "rotate("+(360)/nb_person*(i+0.5)+", "+center[0]+", "+center[1]+")");

		chart.appendChild(new_path);
		chart.appendChild(text);
		chart.innerHTML += ' ';

		console.log(new_path.getAttribute('d'));

		starting_coo = coo_arr
	}
};


function rotate(angle){
    return new Promise((resolve, reject) => {
        let i = 0;
        let interval = setInterval(() => {
            if (i >= angle){
                document.getElementById('roulette').style.transform = 'rotate('+angle+')';
                clearInterval(interval);
                resolve()
            }
            else {
                i += 9;
                document.getElementById('roulette').style.transform = 'rotate('+i+')';
            }
        }, 5);
    })
};