aide_ami finalisé et couloir_ami créé (équivalent couloir mais avec un ami)

CSS/aide_ami.css

@@ -57,6 +57,12 @@ body {
                 max-width: 25vw;
             }
 
+            #firstText {
+                opacity:0;
+                animation: fade 2s forwards;
+                animation-delay: 1s;
+            }
+
             .textWillAppear {
                 opacity: 0;
             }
@@ -106,16 +112,21 @@ body {
                     margin: 0.1vh 0 0.1vh 0;
                 }
             
-            #pseudoInput{
+            #inputBox {
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+            }
+
+                #friendInput{
                     font-family:'Special Elite',cursive;
                     font-size:1.5vw;
                     border-radius:1vw;
                     width: 15vw;
                     padding:0.5vw 0.7vw 0.3vw 0.7vw;
-                
                 }
 
-            #pseudoInput:focus{
+            #friendInput:focus{
                 outline:none;
                 font-family:'Special Elite',cursive;
                 font-size:1.5vw;
@@ -123,12 +134,40 @@ body {
                 padding:0.5vw 0.7vw 0.3vw 0.7vw;
             }
 
+            #arrowBlock{
+                display:flex;
+                justify-content: flex-end;
+                height: 2vh;
+                width: 45vw;
+            }
+
+                #space{
+                    font-size: 1vw;
+                    font-family: 'Special Elite', cursive;
+                    padding-right: 1vw;
+                }
+
+                #arrow{
+                    animation: bounce 1s forwards;
+                    animation-iteration-count:infinite;
+                }
+
+                @keyframes bounce {
+                    50% {transform: translate(0, -1em);}
+                }
+
+                @keyframes fade-reverse {
+                    0% {opacity :1}
+                    100% {opacity:0}
+                }
+
             #buttons {
                 display: flex;
                 justify-content: space-around;
             }
 
             .button {
+                opacity: 0;
                 outline: none;
                 border:0.2vw solid #b9b9b9;
                 border-radius: 4vw;
@@ -136,6 +175,8 @@ body {
                 width: 20vw;
                 padding: 1vw 1.2vw 1vw 1.2vw;
                 color: black;
+                text-decoration: none;
+                text-align: center;
                 font-family: 'Special Elite', cursive;
                 font-size: 0.8vw;
                 background-image: linear-gradient(to top, black -50%, #BF0909 80%);
@@ -151,25 +192,6 @@ body {
                 background-image: linear-gradient(to top, #BF0909 20%, black 150%);
             }
 
-            /* Test d'animation */
-            @keyframes oscille {
-                from {
-                    transform: rotate(0);
-                }
-
-                25% {
-                    transform: rotate(8deg);
-                }
-
-                75% {
-                    transform: rotate(-8deg);
-                }
-
-                to {
-                    transform: rotate(0);
-                }
-            }
-
     footer{
         flex:0.5;
         display:flex;

CSS/couloir.css

@@ -78,25 +78,6 @@ body {
                 background-image: linear-gradient(to top, #BF0909 20%, black 150%);
             }
 
-            /* Test d'animation */
-            @keyframes oscille {
-                from {
-                    transform: rotate(0);
-                }
-
-                25% {
-                    transform: rotate(8deg);
-                }
-
-                75% {
-                    transform: rotate(-8deg);
-                }
-
-                to {
-                    transform: rotate(0);
-                }
-            }
-
     footer{
         flex:0.5;
         display:flex;

CSS/couloir_ami.css

@@ -0,0 +1,130 @@
+body {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+    color:white;
+    font-family: 'Special Elite', cursive;
+    background-color: black;
+    height: 95vh;
+}
+
+    header {
+        color: #BF0909;
+        font-family: 'Special Elite', cursive;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        align-items: center;
+        flex: 1;
+    }
+        h1 {
+            font-size: 4vw;
+        }
+
+        header a {
+            text-decoration: none;
+            color: #494949;
+        }
+
+        header a:hover {
+            color: white;
+        }
+
+    #main {
+        display: flex;
+        flex: 4;
+    }
+
+        #content {
+            display: flex;
+            flex-direction: column;
+            justify-content: space-around;
+            width: 50vw;
+        }
+
+            #text {
+                font-family: 'Special Elite', cursive;
+                font-size: 1.8vw;
+                text-align: center;
+                color: white;
+            }
+
+                .textWillAppear {
+                    opacity: 0;
+                }
+
+                @keyframes fade {
+                    100% {opacity: 1;}
+                }
+
+            #arrowBlock{
+                display: flex;
+                justify-content: flex-end;
+                height: 2vh;
+                width: 45vw;
+            }
+
+                #space{
+                    font-size: 1vw;
+                    font-family: 'Special Elite', cursive;
+                    padding-right: 1vw;
+                }
+
+                #arrow{
+                    height: 2vh;
+                    animation: bounce 1s forwards;
+                    animation-iteration-count:infinite;
+                }
+
+                @keyframes bounce {
+                    50% {transform: translate(0, -1em);}
+                }
+
+                @keyframes fade-reverse {
+                    0% {opacity :1}
+                    100% {opacity:0}
+                }
+
+            #buttons {
+                opacity: 0;
+                display: flex;
+                justify-content: space-around;
+            }
+
+            .button {
+                outline: none;
+                border:0.2vw solid #b9b9b9;
+                border-radius: 4vw;
+                min-width: 15vw;
+                width: 20vw;
+                padding: 1vw 1.2vw 1vw 1.2vw;
+                color: black;
+                font-family: 'Special Elite', cursive;
+                font-size: 0.8vw;
+                background-image: linear-gradient(to top, black -50%, #BF0909 80%);
+                cursor : pointer;
+            }
+
+            .button:hover {
+                border: 0.2vw solid white;
+                box-shadow: 0 0 3vw  #B0C4DE;
+            }
+
+            .button:active {
+                background-image: linear-gradient(to top, #BF0909 20%, black 150%);
+            }
+
+    footer{
+        flex:0.5;
+        display:flex;
+        flex-direction: column;
+        justify-content:flex-end;
+        align-items: center;
+        font-size:1vw;
+        margin-top:2vw;
+    }
+    
+        #names{
+            margin : 0;
+        }

HTML/aide_ami.html

@@ -21,10 +21,14 @@
                 <div class="questionWillAppear"><p id="question2">C'était quand même bizarre d'être capuché dans le sous-sol</p></div>
             </aside>
             <article id="text">
-                <p class="textWillAppear">La photo est.. correcte. Au moins vous n'avez pas oublié de retirer le flash !</p>
+                <p id="firstText">La photo est.. correcte. Au moins vous n'avez pas oublié de retirer le flash !</p>
                 <p class="textWillAppear">Vous avez passé une nuit mouvementée par des questionnements incessants</p>
                 <p class="textWillAppear">En même temps, c'est compréhensible vu ce que vous venez de vivre. <span>On dirait que l'aventure n'est pas finie pour autant...</span></p>
-                <p class="textWillAppear">Le lendemain, vous vous hâtez vers votre plus fidèle ami <input id="pseudoInput" type="text"/> pour tout lui expliquer.</p>
+                <p class="textWillAppear">Le lendemain, vous vous hâtez vers votre plus fidèle ami <span id="inputBox"><input id="friendInput" type="text"/><span></span></span> pour tout lui expliquer.</p>
+                <div id="arrowBlock">
+                    <p id="space">Press enter</p>
+                    <img id="arrow" src="../Images/Lecture.png" alt="Texte suivant"/>
+                </div>
             </article>
             <aside id="rightQuestions">
                 <div class="questionWillAppear"><p id="question3">Peut-être devrais-je laisser tomber et oublier cette histoire</p></div>
@@ -32,7 +36,7 @@
             </aside>
         </section>
         <section id="buttons">
-                <button id="button1" class="button" onclick="window.location.href = './aide_ami.html';">Suivant</button>
+                <a id="button1" class="button">Suivant</a>
         </section>
     </main>
     <footer>

HTML/couloir.html

@@ -7,7 +7,6 @@
     <link rel="stylesheet" href="../CSS/couloir.css">
     <link rel="preconnect" href="https://fonts.gstatic.com">
     <link href="https://fonts.googleapis.com/css2?family=Special+Elite&display=swap" rel="stylesheet">
-    <script defer type="text/javascript" src="../JAVASCRIPT/couloir.js"></script>
 </head>
 <body>
     <header>
@@ -25,12 +24,13 @@
             </article>
             <div id="buttons">
                 <button id="safeButton" class="button" onclick="window.location.href = './aide_ami.html';">Prendre une photo, vous en parlerez à quelqu'un plus tard</button>
-                <button id="riskyButton" class="button">Attendre qu'ils rentrent, prendre son courage à deux mains, et s'aventurer jusqu'à cette salle</button>
+                <button id="riskyButton" class="button" onclick="window.location.href = './crypto_seul.html';">Attendre qu'ils rentrent, prendre son courage à deux mains, et s'aventurer jusqu'à cette salle</button>
             </div>
         </section>
     </main>
     <footer>
-
+        <p id="names">Copyright © 2020 Florian EHR - Pierre FAVARY - Baptiste MARTY</p>
+        <p id="rights">Tous droits réservés </p>
     </footer>
 </body>
 </html>

HTML/couloir_ami.html

@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>INSAïde</title>
+    <link rel="stylesheet" href="../CSS/couloir_ami.css">
+    <link rel="preconnect" href="https://fonts.gstatic.com">
+    <link href="https://fonts.googleapis.com/css2?family=Special+Elite&display=swap" rel="stylesheet">
+    <script defer type="text/javascript" src="../JAVASCRIPT/couloir_ami.js"></script>
+</head>
+<body>
+    <header>
+        <h1>Un couloir, trois étudiants</h1>
+        <nav><a href='./menu.html'>Retourner au menu</a></nav>
+    </header>
+    <main id="main">
+        <section id="content">
+            <article id="text">
+                <p class="firstText">Texte 1</p>
+                <P class="textWillAppear">texte 2</p>
+                <p class="textWillAppear">texte 3</p>
+                <p class="textWillAppear">texte 4</p>
+                <div id="arrowBlock">
+                    <p id="space">Press enter</p>
+                    <img id="arrow" src="../Images/Lecture.png" alt="Texte suivant"/>
+                </div>
+            </article>
+            <div id="buttons">
+                <button id="button1" class="button" onclick="window.location.href = './aide_ami.html';" disabled=true>Non franchement <span id="nomAmi"></span>, je te jure je ne peux pas aller plus loin</button>
+                <button id="button2" class="button" onclick="window.location.href = './crypto_seul.html';" disabled=true>Attendre qu'ils rentrent, prendre votre courage à quatre mains, et s'aventurer jusqu'à cette salle</button>
+            </div>
+        </section>
+    </main>
+    <footer>
+        <p id="names">Copyright © 2020 Florian EHR - Pierre FAVARY - Baptiste MARTY</p>
+        <p id="rights">Tous droits réservés </p>
+    </footer>
+</body>
+</html>

JAVASCRIPT/aide_ami.js

@@ -1,23 +1,66 @@
-let texte = document.getElementById("text");
+//------------------ Variables ------------------//
 let p_counter = 0;
 let texts = document.getElementsByClassName("textWillAppear");
 let questions = document.getElementsByClassName('questionWillAppear');
-console.log(questions);
+let button = document.getElementById("button1");
+let friendInput = document.getElementById("friendInput");
+let friendPseudo = '';
+let inputBox = document.getElementById("inputBox");
+let errorMsg = inputBox.childNodes[1];
+let buttonBox = document.getElementById("buttons");
+let arrow = document.getElementById("arrow");
+let space = document.getElementById("space");
 
+let NB_TEXTS = texts.length;
+let NB_QUESTIONS = questions.length;
+let NB_BUTTONS = 1;
+let NB_ELEMENTS_TO_APPEAR = NB_TEXTS + NB_QUESTIONS + NB_BUTTONS;
+
+//------------------ Fonctions ------------------//
+
+//gère les apparitions et disparitions des textes
 function makeNextTextAppear(event) {
+    if (p_counter < NB_ELEMENTS_TO_APPEAR) {
         if (event.keyCode == 13 || event.keyCode == 32) {
-        if(p_counter < 2) {
+            if(p_counter < 1) {
                 texts[p_counter].style.cssText = "animation: fade 2s forwards;";
             }
-        if (p_counter >= 2 && p_counter < 6) {
+            if (p_counter >= 1 && p_counter < 5) {
-            questions[p_counter-2].style.cssText = "animation: fade 2s forwards;";
+                questions[p_counter-1].style.cssText = "animation: fade 2s forwards;";
-            console.log(questions[p_counter-2].style.cssText);
             }
-        if(p_counter >= 6 && p_counter < 8) {
+            if(p_counter >= 5 && p_counter < 7) {
-            texts[p_counter-4].style.cssText = "animation: fade 2s forwards;";
+                texts[p_counter-NB_QUESTIONS].style.cssText = "animation: fade 2s forwards;";
+            }
+            if(p_counter == 7) {
+                button.style.cssText = "animation: fade 2s forwards;";
+                arrow.style.cssText = "animation: fade-reverse 2s forwards;"
+                space.style.cssText = "animation: fade-reverse 2s forwards;"
             }
             p_counter += 1;
         }
     }
+}
 
+function handleInputChange (event) {
+    friendPseudo = event.target.value;
+    console.log(friendPseudo);
+}
+
+//fonction pour gérer le bouton (qui est en fait un lien customisé)
+function handleButtonClicked(event) {
+    if (friendPseudo) {
+        errorMsg.innerHTML = '';
+        localStorage.setItem("friendPseudo", friendPseudo);
+        button.setAttribute('href', './couloir_ami.html');
+        button.click();
+    } else {
+        button.removeAttribute('href');
+        errorMsg.innerHTML = "Entrez un pseudo !";
+        errorMsg.style.cssText = "color: #BF0909; font-size: 2vh";
+    }
+}
+
+//------------------ Gestion events ------------------//
 document.addEventListener("keypress", makeNextTextAppear);
+friendInput.addEventListener("input", handleInputChange);
+button.addEventListener("click", handleButtonClicked);

JAVASCRIPT/couloir_ami.js

@@ -0,0 +1,38 @@
+//------------------ Variables ------------------//
+let p_counter = 0;
+let texts = document.getElementsByClassName("textWillAppear");
+let buttonBox = document.getElementById("buttons");
+let arrow = document.getElementById("arrow");
+let space = document.getElementById("space");
+let nomAmi = document.getElementById("nomAmi");
+
+console.log(texts)
+
+let NB_TEXTS = texts.length;
+let NB_BUTTONS = 1;
+let NB_ELEMENTS_TO_APPEAR = NB_TEXTS + NB_BUTTONS;
+
+//------------------ Fonctions ------------------//
+
+nomAmi.innerHTML = localStorage.getItem('friendPseudo');
+
+//gère les apparitions et disparitions des textes
+function makeNextTextAppear(event) {
+    if (p_counter < NB_ELEMENTS_TO_APPEAR) {
+        if (event.keyCode == 13 || event.keyCode == 32) {
+            if(p_counter < NB_TEXTS) {
+                texts[p_counter].style.cssText = "animation: fade 2s forwards;";
+            }
+            else {
+                buttonBox.style.cssText = "animation: fade 2s forwards;";
+                arrow.style.cssText = "animation: fade-reverse 2s forwards;";
+                space.style.cssText = "animation: fade-reverse 2s forwards;";
+            }
+            p_counter += 1;
+        }
+    }
+}
+
+
+//------------------ Gestion events ------------------//
+document.addEventListener("keypress", makeNextTextAppear);