bro/script.js at main · sod-members/bro · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
const wheel = document.getElementById("wheel");
const spinBtn = document.getElementById("spin-btn");
const finalValue = document.getElementById("final-value");

// Object that stores values of minimum and maximum angle for a value
const rotationValues = [
    { minDegree: 0, maxDegree: 30, value: 'truth' },
    { minDegree: 31, maxDegree: 90, value: 'dare' },
    { minDegree: 91, maxDegree: 150, value: 'truth' },
    { minDegree: 151, maxDegree: 210, value: 'truth' },
    { minDegree: 211, maxDegree: 270, value: 'dare' },
    { minDegree: 271, maxDegree: 330, value: 'truth' },
    { minDegree: 331, maxDegree: 360, value: 'dare' },
];

// Size of each piece
const data = [16, 16, 16, 16, 16, 16];

// Background color for each piece
var pieColors = [
    "#FF0000",
    "#0000FF",
    "#008000",
    "#A020F0",
    "#FFA500",
    "#FFFF00",
];

// Create chart
let myChart = new Chart(wheel, {
    plugins: [ChartDataLabels],
    type: "pie",
    data: {
        labels: ['truth', 'dare', 'truth', 'dare', 'truth', 'dare'],
        datasets: [
            {
                backgroundColor: pieColors,
                data: data,
            },
        ],
    },
    options: {
        responsive: true,
        animation: { duration: 0 },
        plugins: {
            tooltip: false,
            legend: { display: false },
            datalabels: {
                color: "#ffffff",
                formatter: (_, context) => context.chart.data.labels[context.dataIndex],
                font: { size: 24 },
            },
        },
    },
});

// Display value based on the randomAngle
const valueGenerator = (angleValue) => {
    for (let i of rotationValues) {
        if (angleValue >= i.minDegree && angleValue <= i.maxDegree) {
            finalValue.innerHTML = `<p> </p>`;
            spinBtn.disabled = false;
            break;
        }
    }
};

// Spinner count
let count = 0;
let resultValue = 101;

// Load the spin sound
let spinSound = new Audio('spin-sound.mp3'); // Use the path to your sound file

// Get the spin button
const spinButton = document.getElementById('spin-btn');

// Add event listener to play sound on spin
spinButton.addEventListener('click', () => {
    // Play the sound when the button is clicked
    spinSound.play();

    // Your existing spinning logic for the wheel goes here
    // (e.g., start spinning the wheel animation)
});


// Start spinning
spinBtn.addEventListener("click", () => {
    spinBtn.disabled = true;
    finalValue.innerHTML = `<p>Good Luck!</p>`;
    let randomDegree = Math.floor(Math.random() * (355 - 0 + 1) + 0);

    let rotationInterval = window.setInterval(() => {
        myChart.options.rotation = myChart.options.rotation + resultValue;
        myChart.update();

        if (myChart.options.rotation >= 360) {
            count += 1;
            resultValue -= 5;
            myChart.options.rotation = 0;
        } else if (count > 15 && myChart.options.rotation == randomDegree) {
            valueGenerator(randomDegree);
            clearInterval(rotationInterval);
            count = 0;
            resultValue = 101;
        }
    }, 10);
});