je pense que c fini

3 years ago · ab64b3e8c9
5 changed files with 146 additions and 73 deletions
--- a/app.js
+++ b/app.js
@ -69,7 +69,7 @@ async function jeu(){
    game.inGame = true

    //game.mise = parseInt(document.getElementById("mise_input").value)
-    if(game.mise > 100 || game.mise < 0 || game.mise > game.joueur){
+    if(game.mise > 100 || game.mise <= 0 || game.mise > game.joueur){
        console.log("erreur: pas possible jouer")
        game.inGame = false
        return
@ -99,6 +99,7 @@ function gain(tirage){
    if(tirage[0] == 9 &&
       tirage[1] == 9 &&
       tirage[2] == 9){
+        let periode = setInterval(clignotement, 800);
        return game.bac
    }
    else if(tirage[0] == tirage[1] &&
@ -113,7 +114,7 @@ function gain(tirage){
    return 0
 }
 function regles(){
-    let overlay = document.getElementById("overlay-rules")
+    let overlay = document.getElementsByClassName("overlay")[0];
    if(overlay.style.display == "none") overlay.style.display = "flex"
    else overlay.style.display = "none"
 }
@ -135,3 +136,23 @@ for (let i = 0; i < 10; i++) {
    }

 }
+
+let jackpot_loop = 0;
+
+function clignotement(){
+    if (jackpot_loop<10){
+        if (document.getElementById('jackpot').style.visibility=='visible'){
+           document.getElementById('jackpot').style.visibility='hidden';
+        }
+        else{
+        document.getElementById('jackpot').style.visibility='visible';
+        }
+    }
+    else {
+        clearInterval(periode);
+        jackpot_loop = 0;
+    }
+    jackpot_loop++;
+};
+// mise en place de l appel de la fonction toutes les 0.8 secondes
+// Pour arrêter le clignotement : clearInterval(periode);
--- a/index.html
+++ b/index.html
@ -3,9 +3,17 @@
 <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="master.css">
-    <title>Document</title>
+    <title>Bellagio</title>
 </head>
 <body>
+    <h1 style="text-align: center;">CASINO BELLAGIO</h1>
+    <div class="container">
+        <img id="jackpot" src="jackpot.png"></img>
+    </div>
+
+    <div class="game">
+        <span class="info">Banque : <span id="banque_score">1000</span></span>
+        <div class="machine">
            <img src="tirette.png" alt="tirette" id="tirette" onclick="jeu()">
            <img src="machine.png" id="tirage">
                <div id="rouleau_1" class="rouleau">
@ -35,7 +43,6 @@
                        <div class="cube__face cube__face--7">7</div>
                        <div class="cube__face cube__face--8">8</div>
                        <div class="cube__face cube__face--9">9</div>
-
                    </div>
                </div>
                <div id="rouleau_3" class="rouleau">
@ -50,20 +57,32 @@
                        <div class="cube__face cube__face--7">7</div>
                        <div class="cube__face cube__face--8">8</div>
                        <div class="cube__face cube__face--9">9</div>
-
                    </div>
                </div>
                <input type="text" id="mise_input">
            </img>
+        </div>
+        <span class="info">Vous : <span id="joueur_score"></span></span>
+    </div>

-    <p>Banque : <span id="banque_score">1000</span></p>
-    <p>Vous : <span id="joueur_score"></span></p>
    <button class="button" onclick="regles()">Règles</button>

-    <div id="overlay-rules" style="display: none;">
-        <div class="overlay-container">
+    <div class="overlay" style="display: none;">
+        <div class="overlay-rules">
            <h1>Règles</h1>
-            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Est magni quam harum error, neque quo sapiente, perferendis totam consectetur earum, itaque ducimus eum eaque quis expedita omnis dignissimos amet molestias?</p>
+            <p>
+                <h4 style="text-align: center;">Bienvenue au Bellagio !</h4>
+                Vous disposez pour commencer de 100 jetons (quelle générosité!)<br>
+                Pour jouer indiquez une somme dans l'encart blanc sur la machine(inférieur à 100)<br>
+                Puis appuyez sur la tirette rouge et or et laissez la magie opérer.<br>
+                Si les trois chiffres sont identiques, alors :
+                <ul>
+                    <li>s’ils sont (9, 9, 9) Bravo vous remportez le jackpot. Tout les jetons tombent </li>
+                    <li>s'ils sont juste identiques: vous remportez 6 fois votre mise (c'est déjà pas mal!)</li>
+                    <li>s'il y en a seulement 2 identiques: vous empochez 3 fois votre mise! (petit veinard)</li>
+                    <li>sinon tant mieux pour nous vous perdez votre mise</li>
+                </ul>
+                Le jeu s'arrête lorque vous serez ruinez.</p>
            <button class="button is-red" onclick="regles()">Fermer</button>
        </div>
    </div>
--- a/jackpot.png
+++ b/jackpot.png
--- a/machine.png
+++ b/machine.png
--- a/master.css
+++ b/master.css
@ -1,16 +1,17 @@
@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@300;400;500;600;700&display=swap');

 body{
-    background-color: #03183a;
+    background-color: #001f37;
    font-family: "Fredorka", sans-serif;
    margin: 0;
+    color: white;
 }

 .rouleau {
    width: 5vw;
    height: 3.8vw;
    position: absolute;
-    top: 20vw;
+    top: 40%;
 }

 .cube {
@ -34,63 +35,95 @@ body{
    text-align: center;
 }

+.machine{
+    position: relative;
+    height: 50vw;
+    width: 50vw;
+}
+
+.game{
+    display: flex;
+}
+
+.info{
+    height: 50vw;
+    width: 25vw;
+    text-align: center;
+    line-height: 10vw;
+    font-size: 2vw;
+}
+
+#jackpot{
+    visibility: hidden;
+    position: absolute;
+    height: 100vh;
+    display: block;
+    margin: 0 auto;
+    z-index: 205;
+}
+
 #rouleau_1{
-    left: 41.3vw;
+    left: 34.5%;
 }

 #rouleau_2{
-    left: 46.5vw;
+    left: 45%;
 }

 #rouleau_3{
-    left: 51.7vw;
+    left: 55.5%;
 }

 #tirette{
    position: absolute;
    z-index: 10;
-    left: 61vw;
-    top: 12vw;
-    width: 3.7vw;
+    left: 74%;
+    top: 23%;
+    width: 7.5%;
    transform-origin: 50% 97%;
 }

 #tirage{
-    display: flex;
-    justify-content: space-around;
-    left: 25vw;
    position: relative;
-    width: 50vw;
+    width: 100%;
 }

 #mise_input{
    position: absolute;
-    top: 33vw;
-    left: 42vw;
-    width: 13vw;
-    height: 2vw;
+    top: 65%;
+    left: 37%;
+    width: 26%;
+    height: 4%;
    border-radius: 20px;
    border: none;
    box-shadow: 0px 0px 37px black;
    outline: none;
+    text-align: center;
+}
+
+.container{
+    display: flex;
+    justify-content: center;
 }

-#overlay-rules{
+.overlay{
    background-color: rgb(0, 0, 0, 0.5);
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
+    z-index: 42;
    display: flex;
    align-items: center;
    justify-content: center;
 }
-#overlay-rules > .overlay-container{
+.overlay > .overlay-rules{
    height: min-content;
    padding: 2em;
    border-radius: 20px;
    opacity: 1;
+    color: black;
    background-color: white;
    width: 40vw;
 }