malicious-wheel-of-fortune/script.js

/* --------------- Spin Wheel  --------------------- */
const spinWheel = document.getElementById("spinWheel");
const spinBtn = document.getElementById("spin_btn");
const text = document.getElementById("text");

let spinValues_func = (display) => {
  let return_values = [];
  let idx = 0;
  let degrees = 360 / display.length;

  for (let val of display) {
    return_values.push({minDegree: idx*degrees, maxDegree: (idx+1) * degrees, value: val})
    idx += 1;
  }

  return return_values
}

const spinValues = spinValues_func(display);

const size = (display) => {
  let return_val = [];
  for (let i of display) {
    return_val.push(10);
  }
  return return_val;
}

/* --------------- Background Colors  --------------------- */
var spinColors = [
  "#E74C3C",
  "#7D3C98",
  "#2E86C1",
  "#138D75",
  "#F1C40F",
  "#D35400",
  "#138D75",
  "#F1C40F",
  "#b163da",
  "#E74C3C",
  "#7D3C98",
  "#138D75",
];

let spinChart = new Chart(spinWheel, {
  plugins: [ChartDataLabels],
  type: "pie",
  data: {
    labels: display,
    datasets: [
      {
        backgroundColor: spinColors,
        data: size(display),
      },
    ],
  },
  options: {
    responsive: true,
    animation: { duration: 0 },
    hover: {mode: null},
    plugins: {
      tooltip: false,
      legend: {
        display: false,
      },
      datalabels: {
        //rotation: 0,
        color: "#ffffff",
        formatter: (_, context) => display[context.dataIndex],
        font: { size: 24 },
      },
    },
  },
});

console.log(spinChart.options.rotation);


/* --------------- Spinning Code --------------------- */

spinBtn.addEventListener("click", () => {
  let spinAmount = 101;

  spinBtn.disabled = true;
  text.innerHTML = `<p>Held og lykke!</p>`;


  let pickable = spinValues.filter(item => !not_pickable.includes(item.value))
  let target = pickable[Math.floor(Math.random() * pickable.length)]
  target_degree = Math.floor(Math.random() * (target.maxDegree - target.minDegree - 10))
  console.log(target)

  let rotationInterval = window.setInterval(() => {
    spinAmount *= 0.98
    spinAmount = Math.max(1, spinAmount)

    spinChart.options.rotation += spinAmount;
    spinChart.update();

    if (spinChart.options.rotation >= 360) {
      spinChart.options.rotation -= 360;
    }

    if (spinAmount <= 1  && target.minDegree <= 360-spinChart.options.rotation && 360-spinChart.options.rotation < target.maxDegree-target_degree) {
      // spinChart.options.rotation = target_degree
      spinChart.update()
      text.innerHTML = `<p>Gruppe nummer ${target.value} skal præsentere!</p>`;
      clearInterval(rotationInterval);
      spinBtn.disabled = false;
    }
  }, 10);
});
/* --------------- End Spin Wheel  --------------------- */