Pownie/malicious-wheel-of-fortune
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

the files

Browse Source
This commit is contained in:
Alexander Munch-Hansen 2023-03-03 12:11:03 +01:00
parent a793eb2161
commit 3afff7f11d
3 changed files with 235 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
index.html Normal file
View 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
View 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
View 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;
}