coherent-gameface-interaction-manager
Version:
Library for the most common UI interactions
124 lines (112 loc) • 3.85 kB
HTML
<!--Copyright (c) Coherent Labs AD. All rights reserved. Licensed under the MIT License. See License.txt in the project root for license information. -->
<html lang="en">
<head>
<title>Rotate Demo</title>
<style>
body {
background-color: black;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
margin: 0;
padding: 0;
width: 100vw;
height: 100vh;
color: white;
}
.circle {
width: 100px;
height: 100px;
border-radius: 50%;
}
.knob {
position: relative;
top: 5%;
left: 50%;
width: 5px;
height: 20px;
background-color: black;
margin-left: -2.5px;
}
.circle1 {
background-color: tomato;
}
.circle2 {
background-color: limegreen;
}
.circle3 {
background-color: cadetblue;
}
.knob-container {
display: flex;
align-items: center;
justify-content: space-around;
width: 100%;
}
</style>
</head>
<body>
<h2>Move the knobs to change the background color</h2>
<div class="knob-container">
<div class="container">
<h3 class="red">R: 0</h3>
<div class="circle circle1">
<div class="knob"></div>
</div>
</div>
<div class="container">
<h3 class="green">G: 0</h3>
<div class="circle circle2">
<div class="knob"></div>
</div>
</div>
<div class="container">
<h3 class="blue">B: 0</h3>
<div class="circle circle3">
<div class="knob"></div>
</div>
</div>
</div>
<script src="../../dist/rotate.js"></script>
<script>
let r = 0,
g = 0,
b = 0;
const red = document.querySelector('.red'),
green = document.querySelector('.green'),
blue = document.querySelector('.blue');
const circle1 = new rotate({
element: '.circle1',
onRotation: (angle) => {
r = convertToRGB(angle);
red.textContent = `R: ${Math.round(r)}`;
setBodyBackground();
},
});
const circle2 = new rotate({
element: '.circle2',
onRotation: (angle) => {
g = convertToRGB(angle);
green.textContent = `G: ${Math.round(g)}`;
setBodyBackground();
},
});
const circle3 = new rotate({
element: '.circle3',
onRotation: (angle) => {
b = convertToRGB(angle);
blue.textContent = `B: ${Math.round(b)}`;
setBodyBackground();
},
});
function convertToRGB(angle) {
return (angle / 360) * 255;
}
function setBodyBackground() {
document.body.style.backgroundColor = `rgb(${r}, ${g}, ${b})`;
}
</script>
</body>
</html>