first commit

app.js

@@ -1,72 +1,80 @@
-/* Groupe d'Alexandre ABOULIN, Michel WANG et Sacha SERNY
+/* Groupe de Michel WANG et Sacha SERNY 
-import random 
+HTML et CSS : Michel WANG
-
+Javascript : Sacha SERNY*/
-var rules = """Vous allez insérer le nombre de jeton que vous possédez
-Vous allez insérer un certain nombre de jeton entre 0 et 100 afin de pouvoir jouer
-Voici les règle du jeu :
-- 3 chiffres seront tirés aléatoirements entre 0 et 9;
-- si vous tirez deux chiffres identiques vous obtenez 3 fois votre mise;
-- si vous arrivez à tirer 3 chiffres identiques, différents du chiffre 9, alors vous recevrez 6 fois la mise que vous avez saisie au début;
-- [JACKPOT] dans le cas où vous êtes chanceux et que vous arrivez à tirer trois fois le chiffre '9', alors vous recevrez tous les jetons du bac;
-- mais dans le cas contraire, si vous avez obtenu 3 chiffres, tous différents les un des autres, alors vous ne recevrez rien et vous aurez perdu votre mise;
-Dans tous les cas sauf le jackpot, le joueur perd sa mise
-Bien évidemment, pour ne pas vous anarquer, si le bac possède moin de 500 jetons, alors le jeu s'arrêtera
-Et puis il faut également pas oublier que si vous n'avez plus de jeton, alors vous ne pourrez plus jouer"""
-*/
-
 
 function nbAlea() {
+    /* renvoie un entier entre 0 et 9 */
       return Math.floor(Math.random() * 10);
-}
+  }
-function gain(tirage) {
+  
+  function gain(tirage) {
+    /* calcule les gains et génére les messages liés */
+      let phrase = ""
       player_coins = player_coins - mise
       machine_coins = machine_coins + mise
       if (tirage == [9, 9, 9]) {
           player_coins = player_coins + machine_coins
           machine_coins = 0
-        console.log("BINGO")
+          phrase = "Bingo ! Vous avez gagné tous les jetons. \n "
       } else if (tirage[0] == tirage[1] && tirage[1] == tirage[2]) {
           player_coins = player_coins + 6 * mise
           machine_coins = machine_coins - 6 * mise
-        console.log("3*")
+          phrase = "Bingo ! Vous avez triplé votre mise. \nVous avez gagné " + mise*6 + " jetons."
       } else if (tirage[0] == tirage[1] || tirage[1] == tirage[2] || tirage[0] == tirage[2]) {
-        player_coins = player_coins + 2 * mise
+          player_coins = player_coins + 3 * mise
-        machine_coins = machine_coins - 2 * mise
+          machine_coins = machine_coins - 3 * mise
-        console.log("2*")
+          phrase = "Bingo ! Vous avez doublé votre mise. \nVous avez gagné " + mise*3 + " jetons."
       } else {
-        console.log("Perdu")
+          phrase = "Vous avez perdu vos " + mise + " jetons. \n "
       }
-}
+      // console.log(phrase);
-function update_stats() {
+      document.getElementById('gain').innerText = phrase
+  }
+  
+  function update_stats() {
+    /* affiche les données de la partie dans la page HTML */
       document.getElementById('machine_coins').innerText = machine_coins
       document.getElementById('player_coins').innerText = player_coins
-}
+  }
+  
+  function regles() {
+    /* affiche les regles dans la page HTML */
+      // console.log(toggle_rules);
+      let rules = document.getElementById('show_rules')
+      if (toggle_rules == true) {
+          rules.style.display = "none"
+      } else {
+          rules.style.display = "block"
+      }
+      toggle_rules = !toggle_rules
+  }
+  
   
-function regle() {
+  // Initialisation de la page et des variables
-    btn.appendChild(button_1);
+  document.getElementById("show_rules").addEventListener("click", regles)
-    document.body.appendChild(button);
+  var rouleaux = document.querySelectorAll(".rouleaux div")
-}
+  // console.log(rouleaux);
-// Init
+  rouleaux.forEach(rouleau => {
-var rouleaux = document.querySelectorAll(".rouleaux #board")
-rouleaux.forEach(rouleau => {
       rouleau.innerText = 0
-});
+  });
-var mise = 0
+  var mise = 1
-var machine_coins = 1000
+  var machine_coins = 1000
-var player_coins = 100
+  var player_coins = 100
-document.getElementById("valider").addEventListener("click", jeu);
+  var toggle_rules = false
-// jeu
+  update_stats()
-function jeu() {
+  
+  // Fonction principale du jeu
+  function jeu() {
+    /* appelle les fonctiosn nécessaires au fonctionnement du jeu  */
       mise = parseInt((document.getElementById('mise').value), 10)
-    console.log(mise)
+      // console.log(mise)
-    if (player_coins >= mise && machine_coins > mise * 3) {
+      if (player_coins >= mise && machine_coins >= 500 && mise > 0) {
           var tirage = [nbAlea(), nbAlea(), nbAlea()]
           for (let i = 0; i < 3; i++) {
               rouleaux[i].innerText = tirage[i];
-
           }
-        console.log(tirage)
+          // console.log(tirage)
           gain(tirage)
           update_stats()
       }
-}
+  }

index.html

@@ -1,30 +1,12 @@
 <!DOCTYPE html>
 <html lang="fr">
-
+	<head>
-<head>
+		<title>M A C H I N E</title>
-    <link href="style.css" rel="stylesheet">
+		<meta charset="utf-8">
-    <meta charset="UTF-8">
+		<link href="stylepagecss/style.css" rel="stylesheet">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+		<link rel="icon" type="image/jpg" sizes="16x16" href="icon.jpg">
-    <title>Document</title>
+	</head>
-</head>
+
-
+	<body>
-<body>
+    </body>
-    <h1 onclick="">MACHINE A SOUS NSI</h1>
-    <form action="">
-        <div class="rouleaux">
-            <h3 id="rouleau1">NaN</h3>
-            <h3 id="rouleau1">NaN</h3>
-            <h3 id="rouleau1">NaN</h3>
-        </div>
-        <input type="text" id="mise">
-        <input type="button" value="Submit" id="valider">
-    </form>
-
-    <h5>Jetons dans la machine : <h5 id="machine_coins"></h5>
-    </h5>
-    <h5>Jetons du joueur : <h5 id="player_coins"></h5>
-    </h5>
-    <script src="app.js"></script>
-</body>
-
 </html>

machine.html

@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="fr">
+    
+<!--
+id="mise" entrer une valeur (si possible input)
+id="machine_coins" affiche jetons machines
+id="player_coins" affiche jetons joueur
+id="rouleaux" div parente des trois rouleaux
+qui sont forcément 3 enfants
+id=""valider bouton pour lancer peut importe ce que c'update_stats
+etc...
+ -->
+ 
+    <head>
+        <title>Machine à sous NSI</title>
+        <meta charset="utf-8">
+        <link href="stylepagecss/menu.css" rel="stylesheet">
+        <link rel="icon" type="image/jpg" sizes="16x16" href="icon.jpg">
+
+    </head>
+
+    <body >
+        <div>
+            <a href="index.html" class="title">MACHINE A SOUS NSI</a>
+        </div>
+        <div class="cadre_rouleaux">       
+            <div class="rouleaux">
+                <div></div>
+                <div></div>
+                <div></div>
+            </div>
+        </div>    
+        <div class="button">
+            <button onclick="regles()" id="regles">Regle</button>
+            <button onclick="jeu()" id="valider">Lancer</button>
+        </div>
+        <div class="option">
+            <h2>machine coins : <h2 id="machine_coins"> </h2></h2>
+            <h2>player coins : <h2 id="player_coins"> </h2></h2>
+            <input id="mise">
+            <p id="gain"></p>
+        </div>
+		<div id="show_rules">
+		    <p>qsdsqddqdsqdsqqsdsqsqdqsdsqsqdqssqds</p>
+		</div>
+
+        <script src="app.js"></script>
+    </body>
+</html>

stylepagecss/menu.css

@@ -1,44 +1,57 @@
-body {
+* {
     margin: 0;
     padding: 0;
-    background-color: black;
-    font: 5rem;
-    width: 1;
-    height: 1.4;
-    padding: 2.5rem;
-    font-size: 100%
 }
 
-.title {
+body {
     display: flex;
+    align-items: center;
     justify-content: center;
+    flex-direction: column;
+    min-height: 100vh;
+    background: rgb(18,79,96);
+    background: -moz-linear-gradient(180deg, rgba(18,79,96,1) 0%, rgba(84,33,163,1) 100%);
+    background: -webkit-linear-gradient(180deg, rgba(18,79,96,1) 0%, rgba(84,33,163,1) 100%);
+    background: linear-gradient(180deg, rgba(18,79,96,1) 0%, rgba(84,33,163,1) 100%);
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#124f60",endColorstr="#5421a3",GradientType=1);
+    padding: 2.5rem;
+    color: white;
+    overflow: hidden;
+}
+
+/* cadre qui entoure le rouleaux*/
+.cadre_rouleaux {
+    display: flex;
     align-items: center;
+    flex-direction: column;
 }
 
-.title1 p{
+/* Affichage numéros */
+.rouleaux {
     position: relative;
-    font-family: Georgia, serif;
+    display: flex;
-    font-size: 45px;
+    justify-content: space-around;
-    white-space: nowrap;
+    width: 14rem;
-    font-weight: lighter;
+    height: 6.9rem;
     overflow: hidden;
-    list-style-type: none;
+    background-color: linear-gradient(to right, #fc5c7d, #6a82fb);
-    color: white;
+    box-shadow: inset 0 2px 20px 5px #000, 0 2px 20px 1px rgba(255, 255, 255, 0.4);
-    animation: ecriture 3s steps(19);
+    border-radius: 10px;
-}
+    text-align: center;
-
+    color: #fff;
-@keyframes ecriture {
+    text-shadow: -2px -2px 0 #aaa;
-    from {width: 0%}
+    font: 5rem/1.4 monaco, monospace;
-    to {width: 100%;}
 }
 
+/* Boutons */
 .button {
+    margin-top: 50px;
     display: flex;
     justify-content: center;
     align-items: center;
 }
 
-button.btn {
+.button button {
     display: inline-block;
     background: transparent;
     color: white;
@@ -53,142 +66,58 @@ button.btn {
     transition: all 0.7s;
 }
 
-button.btn_1:hover {
+button:hover {
     background-color: white;
     color: black;
     transition: all 0.7s;
 }
 
-button.btn_2:hover {
+/* affichage des "coin player et machine" */
-    color: black;
+.option {
-    background-color: white;
+    position: absolute;
-}
+    display: flex;
-
+    justify-content: center;
-#machine_coins {
+    align-items: center;
-    color: white;
+    flex-direction: column;
-}
-
-#player_coins {
-    color: white;
-}
-
-#jeton {
-    margin-top: 100px;
-    color: white;
-    padding: 10px;
-}
-
-.container {
-    position: fixed;
     top: 50%;
-    left: 50%;
+    right: 3%;
-    margin-top: -6rem;
+    transform: translateY(-50%);
-    margin-left: -10rem;
+	color: white;
-    padding: 2.5rem;
-    border-radius: 10px;
-    background: linear-gradient(to bottom, #666, #444);
-    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4); 
 }
 
-.container:before {
+/* titre qui renvoie à la page index.html */
-    content: "";
+.title {
     position: absolute;
-    top: 17%;
-    left: 10%;
-    height: 66%;
-    width: 80%;
-    border-radius: 10px;
-    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1), 0 -1px 0 1px rgba(255, 255, 255, 0.1);
-    background: linear-gradient(to bottom, #444, #666); 
-}
-  
-.wrapper {
-    position: relative;
     display: flex;
-    width: 15rem;
+    justify-content: space-between;
-    height: 7rem;
+    align-items: center;
-    overflow: hidden;
+    padding: 20px 20px;
-    background: #333;
+    top: 2%;
-    box-shadow: inset 0 0px 8px #000, 0 1px 0px 1px rgba(255, 255, 255, 0.4);
+    left: 2%;
-    border-radius: 10px;
-    text-align: center;
     color: #fff;
-    text-shadow: -2px -2px 0 #aaa;
+    text-decoration: none;
-    font: 5rem/1.4 monaco, monospace; 
+    text-transform: uppercase;
+    font-size: 2em;
+    letter-spacing: 1px;
+    transition: 2s;
+    z-index: 9998;
 }
 
-.board {
+/* affiche les règles*/
-    flex-grow: 1; 
+#show_rules {
-}
+  position: relative;
-  
-.checkbox {
   display: none;
-}
-
-.checkbox ~ .wrapper > .board {
-    animation-play-state: paused !important; 
-}
-
-.checkbox ~ .wrapper > .board.item1 {
-    animation: shuffle 1.3s steps(10); 
-}
-
-.checkbox ~ .wrapper > .board.item2 {
-    animation: shuffle 1.1s steps(10); 
-}
-
-.checkbox ~ .wrapper > .board.item3 {
-    animation: shuffle 0.9s steps(10); 
-}
-
-.checkbox:checked ~ .handle:before {
-    transform: rotateX(180deg); 
-}
-
-.checkbox:checked ~ .handle:after {
-    transform: translateY(140px); 
-}
-
-.checkbox:checked ~ .wrapper > .board {
-    animation-play-state: running !important; 
-}
-  
-.handle {
-    position: absolute;
-    right: 0;
-    top: 50%; 
-}
-
-.handle:before {
-    content: "";
   position: absolute;
-    bottom: 0;
+  left: 20%;
-    width: 20px;
+  right: 20%;
-    height: 60px;
+  top: 5%;
-    background: linear-gradient(to right, #bbb 0%, #eee 30%, #bbb 100%);
+  bottom: 20%;
-    border-radius: 0 0 10px 0;
+  z-index: 1;
-    transform-origin: bottom center;
+  background-color: #fff;
-    transition: transform 0.2s ease; 
+  box-shadow: 5px 5px 500px 500px #000;
 }
 
-.handle:after {
+#show_rules > p {
-    content: "";
+  padding: 10px;
-    position: absolute;
+  color: black;
-    bottom: 55px;
-    left: -5px;
-    width: 30px;
-    height: 30px;
-    border-radius: 50%;
-    background: radial-gradient(circle farthest-corner at 25% 25% LightSalmon 0%, tomato 100%);
-    transform-origin: bottom center;
-    transition: transform 0.2s ease; 
-}
-      
-@keyframes shuffle {
-    0% {
-      transform: translate3d(0, 0, 0); 
-    }
-    100% {
-      transform: translate3d(0, -70rem, 0); 
-    } 
 }

stylepagecss/style.css

@@ -0,0 +1,40 @@
+* {
+    margin: 0;
+    padding: 0;
+}
+
+/* le fond avec un gradient*/
+body {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    min-height: 100vh;
+    background: rgb(18,79,96);
+    background: -moz-linear-gradient(180deg, rgba(18,79,96,1) 0%, rgba(84,33,163,1) 100%);
+    background: -webkit-linear-gradient(180deg, rgba(18,79,96,1) 0%, rgba(84,33,163,1) 100%);
+    background: linear-gradient(180deg, rgba(18,79,96,1) 0%, rgba(84,33,163,1) 100%);
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#124f60",endColorstr="#5421a3",GradientType=1);
+}
+
+/* lien "machine à sous NSI" qui nous mène vers la page avec l'interface graphique de la machine à sous*/
+a {
+    font-family: arial;
+    position: relative;
+    text-transform: uppercase;
+    text-align: center;
+    text-decoration: none;
+    font-size: 7.5em;
+    width: 100%;
+    color:white;
+    text-shadow: 20px 10px 25px #000000;
+    letter-spacing: 19.8px;
+    transition: 3s;
+}
+
+/* petit effet sur le lien*/
+a:hover {
+    font-size: 3em;
+    transition: 3s;
+    text-shadow: 20px 10px 10px black, 0 0 25px blue, 0 0 5px darkblue;
+}