diff --git a/app.js b/app.js index 0c0ffa0..f736b5e 100644 --- a/app.js +++ b/app.js @@ -42,8 +42,8 @@ function nbAlea(){ return multiples[Math.floor(Math.random()*9)]; } function gain(tirage){ - if(tirage[0] == 9 && - tirage[1] == 9 && + if(tirage[0] == 9 && + tirage[1] == 9 && tirage[2] == 9){ return bac } @@ -63,12 +63,27 @@ function regles(){ } function rotate(rouleau, angle){ - let i = 1; - let interval = setInterval(() => { - if(i >= angle) {clearInterval(interval); rouleau.style.transform = "rotate3d(1, 0, 0, "+angle+"deg)"} - rouleau.style.transform = "rotate3d(1, 0, 0, "+i+"deg)" - i += 5 - }, 1) + let id = null; + let i = 0; + clearInterval(id); + id = setInterval(frame, 10); + function frame() { + if (i >= angle) { + clearInterval(id); + } + else { + i += 9; + rouleau.style.transform = 'rotate3d(1,0,0,'+i+'deg)'; + } + } + // let i = 1; + // let interval = setInterval(() => { + // if(i >= angle) { + // clearInterval(interval); rouleau.style.transform = "rotate3d(1, 0, 0, "+angle+"deg)" + // } + // rouleau.style.transform = "rotate3d(1, 0, 0, "+i+"deg)" + // i += 5 + // }, 1) } function tirage(){ @@ -76,4 +91,4 @@ function tirage(){ rotate(document.getElementsByClassName("cube")[1], 4*360+nbAlea()) rotate(document.getElementsByClassName("cube")[2], 4*360+nbAlea()) } -tirage() \ No newline at end of file +tirage() diff --git a/master.css b/master.css index 1d8439a..db8edee 100644 --- a/master.css +++ b/master.css @@ -1,8 +1,7 @@ .rouleau { width: 60px; height: 60px; - border: 1px solid #CCC; - margin: 80px; + margin: 80px 0; perspective: 400px; } @@ -13,8 +12,8 @@ } .cube { - width: 60px; - height: 60px; + width: 50px; + height: 50px; position: relative; transform-style: preserve-3d; /* transform: translateZ(-100px); */ @@ -23,48 +22,25 @@ .cube__face { position: absolute; - width: 60px; - height: 60px; + width: 50px; + height: 50px; border: 2px solid black; - line-height: 60px; - font-size: 40px; + line-height: 50px; + font-size: 20px; + background-color: #e52800; box-sizing: border-box; font-weight: bold; color: white; text-align: center; } -.cube { - animation: tourner 1s ease-in-out; -} - -@keyframes tourner { - 0%{ - transform: rotate3d(1, 0, 0, 0); - } - 100%{ - transform: rotate3d(1, 0, 0, 360deg); - } -} - -.cube__face--0 { background: hsla( 0, 100%, 50%, 1); } -.cube__face--1 { background: hsla( 36, 100%, 50%, 1); } -.cube__face--2 { background: hsla( 72, 100%, 50%, 1); } -.cube__face--3 { background: hsla(108, 100%, 50%, 1); } -.cube__face--4 { background: hsla(144, 100%, 50%, 1); } -.cube__face--5 { background: hsla(180, 100%, 50%, 1); } -.cube__face--6 { background: hsla(216, 100%, 50%, 1); } -.cube__face--7 { background: hsla(252, 100%, 50%, 1); } -.cube__face--8 { background: hsla(288, 100%, 50%, 1); } -.cube__face--9 { background: hsla(324, 100%, 50%, 1); } - -.cube__face--0 { transform: rotateX( 0deg) translateZ(91px); } -.cube__face--1 { transform: rotateX( 36deg) translateZ(91px); } -.cube__face--2 { transform: rotateX( 72deg) translateZ(91px); } -.cube__face--3 { transform: rotateX(108deg) translateZ(91px); } -.cube__face--4 { transform: rotateX(144deg) translateZ(91px); } -.cube__face--5 { transform: rotateX(180deg) translateZ(91px); } -.cube__face--6 { transform: rotateX(216deg) translateZ(91px); } -.cube__face--7 { transform: rotateX(252deg) translateZ(91px); } -.cube__face--8 { transform: rotateX(288deg) translateZ(91px); } -.cube__face--9 { transform: rotateX(324deg) translateZ(91px); } +.cube__face--0 { transform: rotateX( 0deg) translateZ(76px); } +.cube__face--1 { transform: rotateX( 36deg) translateZ(76px); } +.cube__face--2 { transform: rotateX( 72deg) translateZ(76px); } +.cube__face--3 { transform: rotateX(108deg) translateZ(76px); } +.cube__face--4 { transform: rotateX(144deg) translateZ(76px); } +.cube__face--5 { transform: rotateX(180deg) translateZ(76px); } +.cube__face--6 { transform: rotateX(216deg) translateZ(76px); } +.cube__face--7 { transform: rotateX(252deg) translateZ(76px); } +.cube__face--8 { transform: rotateX(288deg) translateZ(76px); } +.cube__face--9 { transform: rotateX(324deg) translateZ(76px); }