<div class="flex-gui">


    <div id="random-svg-container">
    <!--shape will apear here-->
    </div>
    <!--wordpress separator as im trying to use the block editor-->
    <hr class="wp-block-separator has-alpha-channel-opacity invisible small-step">

    <div class="gui">
        <div class="slider-box">

            <div class="slider-container">
                <label for="num-points-slider">Nombre de points :</label>
                <input type="range" id="num-points-slider" class="my-slider" min="3" max="50" value="6">
                <span id="num-points-value">6</span>
            </div>

            <div class="slider-container">
                <label for="radius-slider">Radius :</label>
                <input type="range" id="radius-slider" class="my-slider" min="100" max="250" value="100">
                <span id="radius-value">400</span>
            </div>

         <!-- <div class="slider-container">
                <label for="max-y-slider">Valeur maximale de l'axe Y :</label>
                <input type="range" id="max-y-slider" class="my-slider" min="300" max="800" value="400">
                <span id="max-y-value">400</span>
            </div>-->
    
        </div>


        <hr class="wp-block-separator has-alpha-channel-opacity invisible small-step">
        <button id="regenerate-btn">Regénérer</button>

        <button id="download-btn">Télécharger le SVG</button>
    </div>
</div>

<script>
var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
svg.setAttribute("viewBox", "0 0 540 540");
document.getElementById("random-svg-container").appendChild(svg);

var path = document.createElementNS("http://www.w3.org/2000/svg", "path");
path.setAttribute("fill", "#F9A11B");
svg.appendChild(path);

var numPointsSlider = document.getElementById("num-points-slider");
var numPointsValue = document.getElementById("num-points-value");
var radiusSlider = document.getElementById("radius-slider");
var radiusValue = document.getElementById("radius-value");

numPointsSlider.addEventListener("input", function() {
  numPointsValue.textContent = numPointsSlider.value;
  path.setAttribute("d", generateCirclePath());
});

radiusSlider.addEventListener("input", function() {
  radiusValue.textContent = radiusSlider.value;
  path.setAttribute("d", generateCirclePath());
});

var regenerateBtn = document.getElementById("regenerate-btn");
regenerateBtn.addEventListener("click", function() {
  path.setAttribute("d", generateCirclePath());
});

function generateCirclePath() {
  var path = "M";
  var numPoints = numPointsSlider.value;
  var radius = radiusSlider.value;
  var centerX = 270;
  var centerY = 270;
  var points = [];

  for (var i = 0; i < numPoints; i++) {
    var angle = (360 / numPoints) * i;
    var x = centerX + radius * Math.cos((angle * Math.PI) / 180) + (Math.random() - 0.5) * radius / 2;
    var y = centerY + radius * Math.sin((angle * Math.PI) / 180) + (Math.random() - 0.5) * radius / 2;
    points.push({ x: x, y: y });
  }

  path += points[0].x + "," + points[0].y;
  for (var i = 1; i < numPoints; i++) {
    var nextIndex = (i + 1) % numPoints;
    var x = (points[i].x + points[nextIndex].x) / 2;
    var y = (points[i].y + points[nextIndex].y) / 2;
    path += "Q" + points[i].x + "," + points[i].y + " " + x + "," + y;
  }

  path += "Z";
  return path;
}

// Initial generation of the circle path
path.setAttribute("d", generateCirclePath());

var downloadBtn = document.getElementById("download-btn");
downloadBtn.addEventListener("click", function() {
  var svgData = new XMLSerializer().serializeToString(svg);
  var svgBlob = new Blob([svgData], {type: "image/svg+xml;charset=utf-8"});
  var svgUrl = URL.createObjectURL(svgBlob);
  var downloadLink = document.createElement("a");
  downloadLink.href = svgUrl;
  downloadLink.download = "blob.svg";
  downloadLink.click();
});


</script>