diff --git a/index.html b/index.html new file mode 100644 index 0000000..bf714b1 --- /dev/null +++ b/index.html @@ -0,0 +1,32 @@ + + + + + + + Source Code Of Spin Wheel + + + + + + + + + + +

HVEM ER DEN HELDIGE GRUPPE?

+
+
+ + + +
+

+
+ + + + \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..814c259 --- /dev/null +++ b/script.js @@ -0,0 +1,117 @@ +/* --------------- Spin Wheel --------------------- */ +const spinWheel = document.getElementById("spinWheel"); +const spinBtn = document.getElementById("spin_btn"); +const text = document.getElementById("text"); + +const display = [1,2,3,4] +const not_pickable = [ + 2,3,4 +] + +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 }, + 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 = `

Held og lykke!

`; + + + 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 = `

Gruppe nummer ${target.value} skal præsentere!

`; + clearInterval(rotationInterval); + spinBtn.disabled = false; + } + }, 10); +}); +/* --------------- End Spin Wheel --------------------- */ diff --git a/style.css b/style.css new file mode 100644 index 0000000..de3100f --- /dev/null +++ b/style.css @@ -0,0 +1,86 @@ +/*----------------- GOOGLE FONTS -----------------*/ +@import url('https://fonts.googleapis.com/css2?family=PT+Serif&display=swap'); + +/*----------------- VARIABLES -----------------*/ +:root { + /* Colors */ + --white_color : rgb(255, 255, 255); + --gold_color: rgb(255, 215, 0); + --green_color: rgb(45, 252, 26); + --body_background: linear-gradient(to right, #141e30, #243b54); + --spin_background: linear-gradient(to right, #fc4a1a, #f7b733); +} +/*----------------- Base -----------------*/ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + font-family: 'PT Serif', serif; +} +body { + height: 100vh; + background: var(--body_background); +} +/*----------------- Styling Start -----------------*/ +h1 { + position: absolute; + font-size: 3.5rem; + top: 10%; + left: 50%; + transform: translate(-50%, -50%); + color: var(--gold_color); +} +.container { + width: 90%; + max-width: 34.37rem; + margin-top: 3rem; + max-height: 90vh; + position: absolute; + transform: translate(-50%, -50%); + top: 50%; + left: 50%; + padding: 3rem; + border-radius: 1rem; +} +.wheel_box { + position: relative; + width: 100%; + height: 100%; +} +#spinWheel { + max-height: inherit; + width: inherit; + /*transform: rotate(270deg);*/ +} +#spin_btn { + position: absolute; + transform: translate(-50%, -50%); + top: 50%; + left: 50%; + height: 26%; + width: 26%; + border-radius: 50%; + cursor: pointer; + border: 0; + background: var(--spin_background); + color: var(--white_color); + text-transform: uppercase; + font-size: 1.8rem; + letter-spacing: 0.1rem; + font-weight: 600; +} +.fa-solid { + position: absolute; + top: -8%; + left: 43.7%; + font-size: 4rem; + color: var(--green_color); + transform: rotate(-225deg); +} +#text { + font-size: 1.5rem; + text-align: center; + margin-top: 1.5rem; + color: var(--gold_color); + font-weight: 500; +}