3.141592653589793238462643

index.php

@@ -20,7 +20,7 @@ var_dump($res);
 		<g stroke="black" stroke-width=2></g>
 	</svg>
 	<script type="text/javascript">
-		draw_roulette(3, 200, 200, 200);
+		draw_roulette(3, 200, 200, 200, ["arthur", "jimmy", "Jamel"]);
 	</script>
 </body>
 </html>

script.js

@@ -1,16 +1,24 @@
 
-function draw_roulette(nb_person, x, y, r){
+function draw_roulette(nb_person, x, y, r, names){
 	let chart = document.getElementById("roulette").querySelector('g');
 	let starting_coo = new Array(x, y + r);
+	let text_coo = starting_coo;
 	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");
+		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("transform", "rotate("+(-360)/nb_person+", "+center[0]+", "+center[1]+")");
+
 		chart.appendChild(new_path);
+		chart.appendChild(text);
 		chart.innerHTML += ' ';
+
 		console.log(new_path.getAttribute('d'));
 
 		starting_coo = coo_arr