Bonjour à tous , je cherche à créer une roue de la chance .
J'aimerais le méme comportement qu'ici :

https://wheelofnames.com/

Mon problème actuel est pour créer un segment.

Je m'explique, je souhaite que lorsque je rentre un prénom le texte s'affiche au fur et à mesure qu'il est tapé dans un segment et que lorque la touche entrée est relâchée celà valide le segment, puis on ajoute un autre segment de la même manière et ainsi de suite.

J'utilise la bibliothèque winwheel.js.

Voici mon code html :

<canvas id="canvas" width="880" height="300"></canvas>

<div
  id="names"
  spellcheck="false"
  contenteditable="true"
  class="textarea"
  style="overflow: auto; width: 300px; height: 200px; border: solid black"
  onKeyUp="maj(event);"
></div>

<script src="Winwheel.min.js"></script>
<script src="app.js"></script>

et mon javascript:

let theWheel = new Winwheel();
const elt = document.getElementById("names");

function getRandomColor() {
  var letters = "0123456789ABCDEF";
  var color = "#";
  for (var i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  return color;
}

function addSegment(texte) {
  // Use a date object to set the text of each added segment to the current minutes:seconds
  // (just to give each new segment a different label).
  let date = new Date();
  let color = getRandomColor();

  // The Second parameter in the call to addSegment specifies the position,
  // in this case 1 meaning the new segment goes at the start of the wheel.
  theWheel.addSegment(
    {
      text: texte,
      fillStyle: color,
    },
    1
  );
  // The draw method of the wheel object must be called in order for the changes
  // to be rendered.
  theWheel.draw();
}

function maj(event) {
  var x = event.keyCode;
  let texte = "";
  console.log(texte);
  if (x == 13) {
    texte = elt.textContent;
    addSegment(texte);
  }
}

Quelle serait pour vous la meilleure méthode pour résoudre ce problème?

Aucune réponse