the files
This commit is contained in:
parent
a793eb2161
commit
3afff7f11d
32
index.html
Normal file
32
index.html
Normal file
|
|
@ -0,0 +1,32 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Source Code Of Spin Wheel</title>
|
||||||
|
<!--------------- CSS --------------------->
|
||||||
|
<link rel="stylesheet" href="style.css">
|
||||||
|
<!--------------- Font Aewsome --------------------->
|
||||||
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css"
|
||||||
|
integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w=="
|
||||||
|
crossorigin="anonymous" referrerpolicy="no-referrer" />
|
||||||
|
<!--------------- Chart JS --------------------->
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js"></script>
|
||||||
|
<!--------------- Chart JS Plugin --------------------->
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-datalabels/2.1.0/chartjs-plugin-datalabels.min.js"></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<h1>HVEM ER DEN HELDIGE GRUPPE?</h1>
|
||||||
|
<div class="container">
|
||||||
|
<div class="wheel_box">
|
||||||
|
<canvas id="spinWheel"></canvas>
|
||||||
|
<button id="spin_btn">Spin</button>
|
||||||
|
<i class="fa-solid fa-location-arrow"></i>
|
||||||
|
</div>
|
||||||
|
<div id="text"><p> </p></div>
|
||||||
|
</div>
|
||||||
|
<!--------------- SCRIPT --------------------->
|
||||||
|
<script src="script.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
117
script.js
Normal file
117
script.js
Normal file
|
|
@ -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 = `<p>Held og lykke!</p>`;
|
||||||
|
|
||||||
|
|
||||||
|
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 = `<p>Gruppe nummer ${target.value} skal præsentere!</p>`;
|
||||||
|
clearInterval(rotationInterval);
|
||||||
|
spinBtn.disabled = false;
|
||||||
|
}
|
||||||
|
}, 10);
|
||||||
|
});
|
||||||
|
/* --------------- End Spin Wheel --------------------- */
|
||||||
86
style.css
Normal file
86
style.css
Normal file
|
|
@ -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;
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue
Block a user