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 = 61;

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

  let slowing_down = false;
  let pickable = spinValues.filter(item => !not_pickable.includes(item.value))
  let target = pickable[Math.floor(Math.random() * pickable.length)]
  let target_index = spinValues.findIndex(item => item.value === target.value);
  target_degree = Math.floor(Math.random() * (target.maxDegree - target.minDegree - 5))
  //slowing_down_degree = Math.floor(0.5 * (spinValues[target_index + 1].maxDegree - spinValues[target_index + 1].minDegree))
  console.log(spinValues[target_index]);
  //console.log(spinValues[target_index + 1]);

  let slowing_down_target = spinValues[target_index + 1];

  console.log(target)

  let degrees = 360 / display.length;

  let rotationInterval = window.setInterval(() => {
    spinAmount *= 0.99
    if (slowing_down) {
      spinAmount = Math.max(0.1, spinAmount)
    } else {
      spinAmount = Math.max(4, spinAmount)
    }

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

    if (spinChart.options.rotation >= 360) {
      spinChart.options.rotation -= 360;
    }
    if (spinAmount <= 5  && target.minDegree <= 360-spinChart.options.rotation && 360-spinChart.options.rotation < target.maxDegree - target_degree + (degrees/2) ) {
      //console.log(target_degree);
      console.log(spinAmount + " Decreasing more")
      slowing_down = true;
      spinAmount *= 0.9

      if (spinAmount <= 0.1  && target.minDegree <= 360-spinChart.options.rotation && 360-spinChart.options.rotation < target.maxDegree-target_degree) {
        spinChart.update()
        text.innerHTML = `<p>Gruppe nummer ${target.value} skal præsentere!</p>`;
        clearInterval(rotationInterval);
        spinBtn.disabled = false;
      } else if (target.minDegree + 1 > 360-spinChart.options.rotation) {
        spinAmount = 0;
        console.log("halting");
      }

    }


  }, 10);
});
/* --------------- End Spin Wheel  --------------------- */