134 lines
3.5 KiB
JavaScript
134 lines
3.5 KiB
JavaScript
/* --------------- 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 rotationInterval = window.setInterval(() => {
|
|
spinAmount *= 0.99
|
|
if (slowing_down) {
|
|
spinAmount = Math.max(0.1, spinAmount)
|
|
} else {
|
|
spinAmount = Math.max(2.5, spinAmount)
|
|
}
|
|
|
|
spinChart.options.rotation += spinAmount;
|
|
spinChart.update();
|
|
|
|
if (spinChart.options.rotation >= 360) {
|
|
spinChart.options.rotation -= 360;
|
|
}
|
|
if (spinAmount <= 4 && target.minDegree - 20 <= 360-spinChart.options.rotation && 360-spinChart.options.rotation < target.maxDegree-target_degree) {
|
|
console.log(spinAmount + " Decreasing more")
|
|
slowing_down = true;
|
|
spinAmount *= 0.8
|
|
|
|
|
|
if (spinAmount <= 0.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 --------------------- */
|