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 --------------------- */
let counter = 0;

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

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

  let slowing_down = false;
  let keep_speed = 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))
  console.log(spinValues[target_index]);

  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 && !keep_speed) {
      spinAmount = Math.max(0.1, spinAmount)
    } else if (keep_speed) {
      spinAmount = Math.max(4, spinAmount)
    } else {
      spinAmount = Math.max(4, spinAmount)
    }
    spinChart.options.rotation += spinAmount;
    spinChart.update();

    if (spinChart.options.rotation >= 360) {
      spinChart.options.rotation -= 360;
    }
    // it takes like 40-ish ticks to slow it down, so we need to compute when we need to start slowing down for this to always work
    // Add a check, if it is too high when it passes halfway through or something like then continue at that speed for the next round

    //if (spinAmount <= 8  && target.minDegree <= 360-spinChart.options.rotation && 360-spinChart.options.rotation < target.maxDegree + (degrees/display.length) - target_degree + 3 ) {
    if (spinAmount <= 8  && target.minDegree <= 360-spinChart.options.rotation && 360-spinChart.options.rotation < (target.maxDegree - target_degree) + 50 ) {
      console.log((360 - spinChart.options.rotation) + " ---- " + (target.maxDegree - target_degree));
      console.log(spinAmount + " Decreasing more")
      slowing_down = true;
      spinAmount *= 0.9
      counter = counter + 1;
      if (spinAmount <= 0.1 && target.minDegree-5 <= 360-spinChart.options.rotation && 360-spinChart.options.rotation < target.maxDegree) {
        spinChart.update()
        text.innerHTML = `<p>Gruppe nummer ${target.value} skal præsentere!</p>`;
        clearInterval(rotationInterval);
        spinBtn.disabled = false;
        console.log("counter " + counter);
      } else if ( spinAmount <= 1 && target.minDegree + 3 > 360-spinChart.options.rotation) {
        console.log("halting " + spinAmount );
        spinChart.update()
        text.innerHTML = `<p>Gruppe nummer ${target.value} skal præsentere!</p>`;
        clearInterval(rotationInterval);
        spinBtn.disabled = false;
        console.log("counter " + counter);

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

      }

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