import jquery from "https://cdn.skypack.dev/jquery@~3.5.1";
function updateCurvedText($curvedText, radius) {
  $curvedText.css("min-width", "initial");
  $curvedText.css("min-height", "initial");
  var w = $curvedText.width(),
    h = $curvedText.height();
  $curvedText.css("min-width", w + "px");
  $curvedText.css("min-height", h + "px");
  var text = $curvedText.text();
  var html = "";

  Array.from(text).forEach(function (letter) {
    html += `<span>${letter}</span>`;
  });
  $curvedText.html(html);

  var $letters = $curvedText.find("span");
  $letters.css({
    position: "absolute",
    height:`${radius}px`,
    // backgroundColor:"orange",
    transformOrigin:"bottom center"
  });
  
  var circleLength = 2 * Math.PI * radius;
  var angleRad = w/(2*radius);
  var angle = 2 * angleRad * 180/Math.PI/text.length;
  
  $letters.each(function(idx,el){
    $(el).css({
        transform:`translate(${w/2}px,0px) rotate(${idx * angle - text.length*angle/2}deg)`
    })
  });
}

var $curvedText = $(".curved-text");
updateCurvedText($curvedText,500);

function settingsChanged(){
  $curvedText.text($(".text").val());
  updateCurvedText($curvedText,$(".radius").val());
}

$(".radius").on("input change",settingsChanged);
$(".text").on("input change",settingsChanged);