Commit message

3 years ago · f56b1623f0
5 changed files with 38 additions and 8 deletions
--- a/app.js
+++ b/app.js
@ -71,6 +71,7 @@ function regles(){
    //afficher règles
 }

+// Anime les rouleaux
 function rotate(rouleau, angle){
    let i = 0;
    let id = setInterval(() => {
@ -82,6 +83,25 @@ function rotate(rouleau, angle){
    }, 5);
 }

+
+// Anime la tirette
+function tirette(){
+    let i = 0;
+    let id = setInterval(() => {
+        if (i > 360) clearInterval(id);
+        else {
+            if (i > 180){
+                document.getElementById('tirette').style.transform = 'rotate3d(1,0,0,'+(360-i)+'deg)';
+            }
+            else {
+                document.getElementById('tirette').style.transform = 'rotate3d(1,0,0,'+i+'deg)';
+            }
+            i += 9;
+
+        }
+    }, 20);
+}
+
 function tirage(){
    rotate(document.getElementsByClassName("cube")[0], Math.floor(Math.random() * 15)*360+nbAlea())
    rotate(document.getElementsByClassName("cube")[1], Math.floor(Math.random() * 15)*360+nbAlea())
--- a/index.html
+++ b/index.html
@ -3,10 +3,12 @@
 <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="master.css">
+    <script type="text/javascript" src="app.js" defer></script>
    <title>Document</title>
 </head>
 <body>
-    <img src="https://thumbs.dreamstime.com/b/rouge-chance-gagne-jackpot-machine-%C3%A0-sous-sur-t%C3%A9l%C3%A9phone-mobile-chanceux-le-vecteur-de-illustration-221760505.jpg" id="tirage">
+    <img src="tirette.png" alt="tirette" id="tirette" onclick="tirette()">
+    <img src="machine.png" id="tirage">

        <div id="rouleau_1" class="rouleau">
            <div class="cube">
--- a/machine.png
+++ b/machine.png
--- a/master.css
+++ b/master.css
@ -1,12 +1,13 @@
 body{
-    background-color: #001a35;
+    background-color: #001f37;
+    margin: 0;
 }

 .rouleau {
    width: 4.1vw;
    height: 3.4vw;
    position: absolute;
-    top: 16.8vw;
+    top: 16.6vw;
 }

 .cube {
@ -20,10 +21,10 @@ body{
    position: absolute;
    width: 4.1vw;
    height: 3.4vw;
-    border: 2px solid black;
+    border: 2px solid #362730;
    line-height: 3.4vw;
    font-size: 1.5vw;
-    background-color: #e52800;
+    background-color: #c21121;
    box-sizing: border-box;
    font-weight: bold;
    color: white;
@ -31,18 +32,25 @@ body{
 }

 #rouleau_1{
-    left: 42.8%;
+    left: 42.65%;
 }

 #rouleau_2{
-    left: 47.1%;
+    left: 47.05%;
 }

 #rouleau_3{
    left: 51.5%;
 }

-#tirage {
+#tirette{
+    position: absolute;
+    z-index: 10;
+    margin-left: 30.6%;
+    transform-origin: 70% 58%;
+}
+
+img {
    display: flex;
    justify-content: space-around;
    margin: auto;
--- a/tirette.png
+++ b/tirette.png