// csvファイルを読み取るためにfilreaderオブジェクトを作成する
var reader = new fileReader（）;

//ファイルがロードされたときに実行される関数を定義します
reader.onload = function（event）{
  //ファイルのコンテンツをテキストとして取得します
  var text = event.target.result;

  // Papeatingのようなライブラリを使用して、テキストをオブジェクトの配列に変換します
  var data =ジャガイモ（テキスト、{header：true}）。データ;

  //参加者の名前または折り返されたものを含む配列を作成します
  var names = data.map（function（item）{
    return item.name;
  }）;

  //ルーレットを描くためにキャンバスを作成します
  var canvas = document.getementbyid（ "canvas"）;
  var ctx = canvas.getContext（ "2d"）;

  //ルーレットのラジオと中央を定義します
  var radius = math.min（canvas.width、canvas.height） / 2;
  var center = {x：canvas.width / 2、y：canvas.height / 2};

  //各ルーレットセグメントの初期角度と増加を定義します
  var startangle = -math.pi / names.length;
  var angleincrement = math.pi * 2 / names.length;

  //ランダムな色と対応する名前で各ルーレットセグメントを描く
  for（var i = 0; i <names.length; i ++）{
    //セグメントの最終角度を計算します
    var endangle = startangle + angleincrement;

    //セグメントのランダムな色を選択します
    var color = "hsl（" + math.floor（math.random（） * 360） + "、100％、50％）";

    //選択した色でセグメントを描画します
    ctx.beginpath（）;
    ctx.moveto（center.x、center.y）;
    ctx.arc（center.x、center.y、radius、startangle、endangle）;
    ctx.fillstyle = color;
    ctx.fill（）;
    
    //黒色でセグメントの端を描く
    ctx.linewidth = "1";
    ctx.strokestyle = "black";
    ctx.stroke（）;

    //名前を配置するためにセグメント角の中間点を計算します
    v midangle =（startangle + endangle） / 2;

    //三角測定を使用して中間点の座標を計算します
    var x = center.x + math.cos（midangle） * radius * .8;
    var y = center.y -math.sin（midangle） * radius * .8;

     //白い色とarialの噴水で名前を描く
     ctx.font = "20px arial";
     ctx.fillstyle = "white";
     ctx.textalign = "center";
     ctx.textbaseline = "middle";
     ctx.filltext（names [i]、x、y）;

     //次のセグメントの初期角度を更新します
     startangle += angleincrement;
   }
};

//ユーザーが選択したCSVファイルを読み取ります
var fileinput = document.getementById（ "fileinput"）;
fileInput.onChange = function（）{
   reader.readastext（fileinput.files [0]）;
};
// Crear un objeto FileReader para leer el archivo csv
var reader = new FileReader();

// Definir una función que se ejecuta cuando el archivo se carga
reader.onload = function(event) {
  // Obtener el contenido del archivo como texto
  var text = event.target.result;

  // Usar una librería como PapaParse para convertir el texto en un array de objetos
  var data = Papa.parse(text, {header: true}).data;

  // Crear un array con los nombres de los participantes o lo que se rifa
  var names = data.map(function(item) {
    return item.name;
  });

  // Crear un canvas para dibujar la ruleta
  var canvas = document.getElementById("canvas");
  var ctx = canvas.getContext("2d");

  // Definir el radio y el centro de la ruleta
  var radius = Math.min(canvas.width, canvas.height) / 2;
  var center = {x: canvas.width / 2, y: canvas.height / 2};

  // Definir el ángulo inicial y el incremento por cada segmento de la ruleta
  var startAngle = -Math.PI / names.length;
  var angleIncrement = Math.PI * 2 / names.length;

  // Dibujar cada segmento de la ruleta con un color aleatorio y el nombre correspondiente
  for (var i = 0; i < names.length; i++) {
    // Calcular el ángulo final del segmento
    var endAngle = startAngle + angleIncrement;

    // Elegir un color aleatorio para el segmento
    var color = "hsl(" + Math.floor(Math.random() * 360) + ",100%,50%)";

    // Dibujar el segmento con el color elegido
    ctx.beginPath();
    ctx.moveTo(center.x, center.y);
    ctx.arc(center.x, center.y, radius, startAngle, endAngle);
    ctx.fillStyle = color;
    ctx.fill();
    
    // Dibujar el borde del segmento con color negro
    ctx.lineWidth = "1";
    ctx.strokeStyle="black";
    ctx.stroke();

    // Calcular el punto medio del ángulo del segmento para colocar el nombre
    var midAngle = (startAngle + endAngle) / 2;

    // Calcular las coordenadas del punto medio usando trigonometría
    var x = center.x + Math.cos(midAngle) * radius * .8;
    var y = center.y - Math.sin(midAngle) * radius * .8;

     // Dibujar el nombre con color blanco y fuente Arial 
     ctx.font="20px Arial";
     ctx.fillStyle="white";
     ctx.textAlign="center";
     ctx.textBaseline="middle";
     ctx.fillText(names[i], x ,y);

     // Actualizar el ángulo inicial para el siguiente segmento 
     startAngle += angleIncrement;
   }
};

// Leer el archivo csv seleccionado por el usuario como texto 
var fileInput= document.getElementById("fileInput");
fileInput.onchange=function(){
   reader.readAsText(fileInput.files[0]);
};