Création du bouton "partager" et gestion de la popup de partage.

Author: dpierru

index.html

@@ -11,6 +11,7 @@
     <!-- Inclusion des 3 scripts nécessaires pour faire fonctionner le jeu -->
     <!-- Attention, l'ordre des fichiers js est important.  -->
     <script src="scripts/config.js" defer></script>
+    <script src="scripts/popup.js" defer></script>
     <script src="scripts/script.js" defer></script>
     <script src="scripts/main.js" defer></script>
 </head>
@@ -46,12 +47,30 @@ <h3>AzerType est une application en ligne pour apprendre à taper plus vite au c
         <div class="zoneScore">
             Votre score : <span>0</span>
         </div>
+
+        <div class="zonePartage">
+            <button>Partager</button>
+        </div>
 
     </main>
 
     <!-- FOOTER -->
     <footer>
         @Copyright : Openclassrooms. 
     </footer>
+
+    <!-- Popup de partage -->
+    <div class="popupBackground">
+        <div class="popup">
+            <div>Partagez votre score</div>
+            <form>
+                <label for="nom">Votre nom</label>
+                <input type="text" name="nom" placeholder="Votre nom">
+                <label for="email">Avec qui voulez-vous partager votre score ?</label>
+                <input type="email" name="email" placeholder="nom@domaine.com">
+                <button id="btnEnvoyerMail">Envoyer</button>
+            </form>
+        </div>
+    </div>
 </body>
 </html>

scripts/popup.js

@@ -0,0 +1,47 @@
+/*********************************************************************************
+ * 
+ * Ce fichier contient toutes les fonctions nécessaires à l'affichage et à la 
+ * fermeture de la popup de partage. 
+ * 
+ *********************************************************************************/
+
+
+/**
+ * Cette fonction affiche la popup pour partager son score. 
+ */
+function afficherPopup() {
+    let popupBackground = document.querySelector(".popupBackground")
+    popupBackground.classList.add("active")
+}
+
+/**
+ * Cette fonction cache la popup pour partager son score. 
+ */
+function cacherPopup() {
+    let popupBackground = document.querySelector(".popupBackground")
+    popupBackground.classList.remove("active")
+}
+
+/**
+ * Cette fonction initialise les écouteurs d'événements qui concernent 
+ * l'affichage de la popup. 
+ */
+function initAddEventListenerPopup() {
+    // On écoute le click sur le bouton "partager"
+    btnPartage = document.querySelector(".zonePartage button")
+    let popupBackground = document.querySelector(".popupBackground")
+    btnPartage.addEventListener("click", () => {
+        // Quand on a cliqué sur le bouton partagé, on affiche la popup
+        afficherPopup()
+    })
+
+    // On écoute le click sur la div "popupBackground"
+    popupBackground.addEventListener("click", (event) => {
+        // Si on a cliqué précisément sur la popupBackground 
+        // (et pas un autre élément qui se trouve dedant)
+        if (event.target === popupBackground) {
+            // Alors on cache la popup
+            cacherPopup()
+        }
+    })
+}

scripts/script.js

@@ -18,17 +18,34 @@ function afficherResultat(score, nbMotsProposes) {
     spanScore.innerText = affichageScore
 }
 
+/**
+ * Cette fonction affiche une proposition, que le joueur devra recopier, 
+ * dans la zone "zoneProposition"
+ * @param {string} proposition : la proposition à afficher
+ */
 function afficherProposition(proposition) {
     let zoneProposition = document.querySelector(".zoneProposition")
     zoneProposition.innerText = proposition
 }
 
+/**
+ * Cette fonction construit et affiche l'email. 
+ * @param {string} nom : le nom du joueur
+ * @param {string} email : l'email de la personne avec qui il veut partager son score
+ * @param {string} score : le score. 
+ */
+function afficherEmail(nom, email, score) {
+    let mailto = `mailto:${email}+?subject=Partage du score Azertype&body=Salut, je suis ${nom} et je vais de réaliser le score ${score} sur le site d'Azertype !`
+    location.href = mailto
+}
+
 /**
  * Cette fonction lance le jeu. 
  * Elle demande à l'utilisateur de choisir entre "mots" et "phrases" et lance la boucle de jeu correspondante
  */
 function lancerJeu() {
     // Initialisations
+    initAddEventListenerPopup()
     let score = 0
     let i = 0
     let listeProposition = listeMots
@@ -52,7 +69,6 @@ function lancerJeu() {
         } else {
             afficherProposition(listeProposition[i])
         }
-        
     })
 
     // Gestion de l'événement change sur les boutons radios. 

style/style.css

@@ -185,6 +185,67 @@ footer {
     font-size: 20px;
 }
 
+.zonePartage {
+    padding-top: 20px;
+}
+
+/**
+  * Gestion des popups
+  */
+
+.popupBackground {
+    display: none;
+    position: fixed;
+    height: 100vh;
+    width: 100vw;
+    background-color: rgba(255, 255, 255, 0.5);
+}
+
+.popup {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    flex-wrap: wrap;
+    justify-content: center;
+    align-items: center;
+    width: 300px;
+    padding: 20px;
+    text-align: center;
+    color: white;
+    font-size: 17px;
+    font-weight: 500;
+    background-color: #f76c5e;
+    border-radius: 30px;
+    z-index: 1;
+}
+
+
+
+.active {
+    display: flex !important;
+}
+
+.popup p {
+    width: 100%;
+    margin-bottom: 20px;
+}
+
+.popup div {
+    font-size: 25px;
+    padding : 5px;
+    padding-bottom: 15px;
+}
+
+/* Eléments de formulaire */
+.popup input {
+    margin-bottom: 10px;
+}
+
+.popup button {
+    margin: 5px;
+}
+
 /** 
  * Responsive
  */