roulette/script.js

function draw_roulette(x, y, r, names){
	let nb_person = names.length;
	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('alignment-baseline', '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 += ' ';

		starting_coo = coo_arr
	}
};


function rotate(){
	nb_person = names.length;
	let winner = Math.random() * nb_person;
	let angle = Math.floor(Math.random()*15)*360 - winner * 360/nb_person;
    	let result = new Promise((resolve, reject) => {
        	let i = 0;
		let add = 0;
        	let interval = setInterval(() => {
        		if (i >= angle){
            	document.getElementById('roulette').style.transform = 'rotate('+angle+'deg)';
            	clearInterval(interval);
            	resolve(names[Math.floor(winner)]);
        		}
        		else {
					if (i > angle/2){
			  		add -= 1;
					}
					else{
						add += 1;
					}
					add = Math.abs(add);
            		i += add;
           			document.getElementById('roulette').style.transform = 'rotate('+i+'deg)';
            	}
        	}, 5);
    	});
	result.then((val) => show_winner(val));
};

function show_winner(winner){
	let h1 = document.getElementById('winner');
	h1.innerText = winner;
};

function validateForm() {
	let x = document.forms["myForm"]["fname"].value;
  	if (x == "") {
    	alert("Name must be filled out");
    	return false;
	}
	names.push(x);
	draw_roulette(200,200,200, names);
}