Browse Source

grgrgrgrgrgr

master
BARRAUX Arthur 3 years ago
parent
commit
ce8a16a661
  1. 22
      app.js
  2. 35
      master.css

22
app.js

@ -19,18 +19,6 @@ function nbAlea(){
// Anime les rouleaux
function rotate(rouleau, angle){
<<<<<<< HEAD
let i = 0;
let interval = setInterval(() => {
if (i >= angle){
clearInterval(interval);
}
else {
i += 9;
rouleau.style.transform = 'rotate3d(1,0,0,'+i+'deg)';
}
}, 5);
=======
return new Promise((resolve, reject) => {
let i = 0;
let interval = setInterval(() => {
@ -45,7 +33,6 @@ function rotate(rouleau, angle){
}
}, 5);
})
>>>>>>> ed8a1808293ee88f1efde28836b84c43b34781eb
}
@ -69,18 +56,11 @@ function tirette(){
async function tirage(){
let numbers = [nbAlea(), nbAlea(), nbAlea()]
<<<<<<< HEAD
console.log(numbers);
rotate(document.getElementsByClassName("cube")[0], Math.floor(Math.random()*(15-1)+1)*360 - numbers[0]*36);
rotate(document.getElementsByClassName("cube")[1], Math.floor(Math.random()*(15-1)+1)*360 - numbers[1]*36);
rotate(document.getElementsByClassName("cube")[2], Math.floor(Math.random()*(15-1)+1)*360 - numbers[2]*36);
=======
await Promise.all([
rotate(document.getElementsByClassName("cube")[0], (Math.floor(Math.random()*15)*360) - (numbers[0]*36)),
rotate(document.getElementsByClassName("cube")[1], (Math.floor(Math.random()*15)*360) - (numbers[1]*36)),
rotate(document.getElementsByClassName("cube")[2], (Math.floor(Math.random()*15)*360) - (numbers[2]*36))
])
>>>>>>> ed8a1808293ee88f1efde28836b84c43b34781eb
return numbers
}
@ -149,7 +129,7 @@ for (let i = 0; i < 10; i++) {
//console.log(i);
for (var j = 0; j < 3; j++) {
//console.log(j);
document.getElementsByClassName('cube__face--'+i)[j].style.transform = 'rotateX('+(i*36)+'deg) translateZ(calc(1.6vw /'+Math.tan(18* Math.PI / 180)+')';
document.getElementsByClassName('cube__face--'+i)[j].style.transform = 'rotateX('+(i*36)+'deg) translateZ(calc(1.9vw /'+Math.tan(18* Math.PI / 180)+')';
}
}

35
master.css

@ -4,25 +4,25 @@ body{
}
.rouleau {
width: 4.1vw;
height: 3.4vw;
width: 5vw;
height: 3.8vw;
position: absolute;
top: 16.6vw;
top: 20vw;
}
.cube {
width: 4.1vw;
height: 3.4vw;
width: 5vw;
height: 3.8vw;
position: relative;
transform-style: preserve-3d;
}
.cube__face {
position: absolute;
width: 4.1vw;
height: 3.4vw;
width: 5vw;
height: 3.8vw;
border: 2px solid #362730;
line-height: 3.4vw;
line-height: 3.8vw;
font-size: 1.5vw;
background-color: #c21121;
box-sizing: border-box;
@ -32,36 +32,37 @@ body{
}
#rouleau_1{
left: 42.65vw;
left: 41.3vw;
}
#rouleau_2{
left: 47.05vw;
left: 46.5vw;
}
#rouleau_3{
left: 51.5vw;
left: 51.7vw;
}
#tirette{
position: absolute;
z-index: 10;
margin-left: 58vw;
top: 3vw;
transform-origin: 70% 58%;
left: 61vw;
top: 12vw;
width: 3.7vw;
transform-origin: 50% 97%;
}
#tirage{
display: flex;
justify-content: space-around;
margin: auto;
left: 25vw;
position: relative;
width: 42.4vw;
width: 50vw;
}
#mise_input{
position: absolute;
top: 27vw;
top: 33vw;
left: 42vw;
width: 13vw;
height: 2vw;

Loading…
Cancel
Save