page annonce tuto

static/MAIN.js

@@ -250,7 +250,8 @@ function init_data(){
     boutons["valider"] = new_image('https://raw.githubusercontent.com/PelissierCombescure/BVS-study/main/graphics/Boutons/bouton_valider.png')
     boutons["choix_pose"] = new_image('https://raw.githubusercontent.com/PelissierCombescure/BVS-study/main/graphics/Boutons/bouton_pose.png')
     boutons["retirer"] = new_image('https://raw.githubusercontent.com/PelissierCombescure/BVS-study/main/graphics/Boutons/bouton_retirer.png')
-    boutons["commencer_choix"] = new_image('https://raw.githubusercontent.com/PelissierCombescure/BVS-study/main/graphics/Boutons/bouton_commencer.png')
+    boutons["commencer"] = new_image('https://raw.githubusercontent.com/PelissierCombescure/BVS-study/main/graphics/Boutons/bouton_commencer.png')
+    boutons["commencer_choix"] = new_image('https://raw.githubusercontent.com/PelissierCombescure/BVS-study/main/graphics/Boutons/bouton_commencer_choix.png')
     boutons["commencer_tuto"] = new_image('https://raw.githubusercontent.com/PelissierCombescure/BVS-study/main/graphics/Boutons/bouton_commencer_tuto.png')
     boutons["raz"] = new_image('https://raw.githubusercontent.com/PelissierCombescure/BVS-study/main/graphics/Boutons/bouton_raz.png')
     boutons["suivant"] = new_image('https://raw.githubusercontent.com/PelissierCombescure/BVS-study/main/graphics/Boutons/bouton_suivant.png')
@@ -289,9 +290,7 @@ function animate() {
             init_clavier_contexte()
             premier_tour_page_contexte = false
         }
-        traitement_contexte()
+        traitement_contexte()               
-        
-        
     }
 ////////////////////////////////////////////////////////////////////////////////
     // page inscription
@@ -304,8 +303,7 @@ function animate() {
             init_clavier_inscription()
             afficher_champs_inscription()
             premier_tour_page_inscription=false}
-        traitement_inscription()
+        traitement_inscription()        
-        
     }
 ////////////////////////////////////////////////////////////////////////////////
     if (page_explication){

static/fonctions_clavier.js

@@ -24,8 +24,12 @@ function action_clavier_inscription(event){
         //     break;idx_i, idx_j
         // valider
         case  'Enter':
-            if (champs_remplis_correctment()){
+            if (!inscription_finie){
-            action_bouton_commencer('clavier')}            
+                if (champs_remplis_correctment()){
+                    action_bouton_suivant_inscription()} 
+            }else{
+                action_bouton_commencer_inscription()
+            }        
             break;
     }
 }

static/fonctions_contexte.js

@@ -1,3 +1,5 @@
+scale_bouton_commencer_contexte = 0.6
+
 function affichage_texte_contexte(){
     // Texte
     draw_rectangle(0,0,canvas.width, canvas.height, "rgb(3, 26, 33)", 1) // ou + clair 4, 38, 48
@@ -26,10 +28,25 @@ function traitement_contexte(){
     //shortcuts(xyMouseMove, imgs['clavier_enter'], window.innerWidth/2 -(imgs['clavier_enter'].width/2), window.innerHeight/2 -(imgs['clavier_enter'].height/2), imgs['clavier_enter'].width, imgs['clavier_enter'].height, boutons['raccourcis'], x_Bshortcut, y_Bshortcut, w_Bshortcut, h_Bshortcut)
     affichage_texte_contexte()
     //clignotement_rectangle(1000, 10,10,100,100, "rgb(255,0,0)")
-    afficher_bouton_commencer() // meme bouton que la page inscription 
+    afficher_bouton_commencer_contexte() // meme bouton que la page inscription 
     if (clicked && click_inside(xyMouseDown, x_bouton_commencer, y_bouton_commencer , w_bouton_commencer, h_bouton_commencer)){
         // on passe aux choix 
         action_bouton_commencer_contexte()     
     }         
 }
 
+
+function afficher_bouton_commencer_contexte(){
+    w_bouton_commencer = scale_bouton_commencer_contexte*boutons["commencer"].width
+    h_bouton_commencer = scale_bouton_commencer_contexte*boutons["commencer"].height
+    x_bouton_commencer = (window.innerWidth/2)-(w_bouton_commencer/2)
+    y_bouton_commencer = innerHeight*0.75
+    // Bouton commencer
+    ctx.drawImage(boutons["commencer"], x_bouton_commencer, y_bouton_commencer , w_bouton_commencer, h_bouton_commencer)
+
+    // Survol
+    if(xyMouseMove.x >= x_bouton_commencer && xyMouseMove.x <= x_bouton_commencer + w_bouton_commencer && xyMouseMove.y > y_bouton_commencer && xyMouseMove.y < y_bouton_commencer + h_bouton_commencer){
+        draw_rectangle(x_bouton_commencer, y_bouton_commencer , w_bouton_commencer, h_bouton_commencer, "rgb(200, 200, 200)", 0.6)
+    }
+}
+

static/fonctions_inscription.js

@@ -1,4 +1,5 @@
-scale_bouton_commencer = 0.6
+scale_bouton_commencer = 1
+scale_bouton_suivant = 0.6
 
 function affichage_inscription(){
     // Texte
@@ -26,13 +27,13 @@ function affichage_inscription(){
 }
 
 
-function afficher_bouton_commencer(){
+function afficher_bouton_commencer_inscription(){
-    w_bouton_commencer = scale_bouton_commencer*boutons["commencer"].width
+    w_bouton_commencer = scale_bouton_commencer*boutons["commencer_tuto"].width
-    h_bouton_commencer = scale_bouton_commencer*boutons["commencer"].height
+    h_bouton_commencer = scale_bouton_commencer*boutons["commencer_tuto"].height
     x_bouton_commencer = (window.innerWidth/2)-(w_bouton_commencer/2)
-    y_bouton_commencer = innerHeight*0.75
+    y_bouton_commencer =  (window.innerHeight/2)-(h_bouton_commencer/2)
     // Bouton commencer
-    ctx.drawImage(boutons["commencer"], x_bouton_commencer, y_bouton_commencer , w_bouton_commencer, h_bouton_commencer)
+    ctx.drawImage(boutons["commencer_tuto"], x_bouton_commencer, y_bouton_commencer , w_bouton_commencer, h_bouton_commencer)
 
     // Survol
     if(xyMouseMove.x >= x_bouton_commencer && xyMouseMove.x <= x_bouton_commencer + w_bouton_commencer && xyMouseMove.y > y_bouton_commencer && xyMouseMove.y < y_bouton_commencer + h_bouton_commencer){
@@ -40,33 +41,39 @@ function afficher_bouton_commencer(){
     }
 }
 
-function action_bouton_commencer(){
+
+function action_bouton_commencer_inscription(){
     page_inscription = false 
     //page_vues = true 
     page_explication = true
     interactions.push({"time": new Date().getTime(), "type": "Fin inscription - Début explications"})
     //gestion des données personnelle de l'utilisateur
-    gestion_donnees_personnelles()
+    //gestion_donnees_personnelles()
         
 }
 
+function afficher_bouton_suivant_inscription(){
+    w_bouton_suivant = scale_bouton_suivant*boutons["suivant_grand"].width
+    h_bouton_suivant = scale_bouton_suivant*boutons["suivant_grand"].height
+    x_bouton_suivant = (window.innerWidth/2)-(w_bouton_suivant/2)
+    y_bouton_suivant = innerHeight*0.75
+    // Bouton commencer
+    ctx.drawImage(boutons["suivant_grand"], x_bouton_suivant, y_bouton_suivant , w_bouton_suivant, h_bouton_suivant)
 
-function traitement_inscription(){
+    // Survol
-    affichage_inscription()
+    if(xyMouseMove.x >= x_bouton_suivant && xyMouseMove.x <= x_bouton_suivant + w_bouton_suivant && xyMouseMove.y > y_bouton_suivant && xyMouseMove.y < y_bouton_suivant + h_bouton_suivant){
-    if (champs_remplis_correctment()){
+        draw_rectangle(x_bouton_suivant, y_bouton_suivant , w_bouton_suivant, h_bouton_suivant, "rgb(200, 200, 200)", 0.6)
-        afficher_bouton_commencer()
-        texte = "Are you ready for the explanations?"
-        font = "40pt Courier"
-        ctx.font = font
-        largeur = ctx.measureText(texte).width
-        ctx.fillText(texte, (window.innerWidth/2)- (largeur/2), y_bouton_commencer-20)
-        if (clicked && click_inside(xyMouseDown, x_bouton_commencer, y_bouton_commencer , w_bouton_commencer, h_bouton_commencer)){
-            // on passe aux choix 
-            action_bouton_commencer()     
-        }         
     }
 }
 
+function action_bouton_suivant_inscription(){
+    inscription_finie = true 
+    gestion_donnees_personnelles()
+    ctx.clearRect(0, 0, canvas.width, canvas.height)
+}
+
+
+
 //////////////////////////////////////////////////////////////
 /// CHAMPS INSCRIPTION
 
@@ -91,6 +98,7 @@ function value_non_vide(V){
 }
 
 function afficher_champs_inscription() {
+    inscription_finie = false
     w_text_zone = 30
     h_text_zone = 42
     nb_caract_min = 1
@@ -211,7 +219,42 @@ function gestion_donnees_personnelles(){
     document.getElementById("SexeM").style.display = 'none'
     document.getElementById("SexeF").style.display = 'none'
     document.getElementById("SexeA").style.display = 'none'
-
-
                     
 }
+
+
+//////////////////////////////////////////////////////////////
+/// MAIN INSCRIPTION
+
+function traitement_inscription(){
+    if (!inscription_finie){
+        affichage_inscription()
+        if (champs_remplis_correctment()){
+            // affichage du bouton next
+            afficher_bouton_suivant_inscription()
+            // Si on clique sur le bouton Next
+            if (clicked && click_inside(xyMouseDown, x_bouton_suivant, y_bouton_suivant , w_bouton_suivant, h_bouton_suivant)){
+                action_bouton_suivant_inscription()                
+            }         
+        }
+    // les champs sont remplie et on a appuyé sur le bouton next
+    } else {
+        texte = "Are  you ready to start the tutorial to learn" 
+        texte2 = "how to use the interface of the study?"
+        font = "40pt Courier"
+        ctx.font = font
+        largeur = ctx.measureText(texte).width
+        largeur2 = ctx.measureText(texte2).width
+        ctx.fillText(texte, (window.innerWidth/2)- (largeur/2), 100)
+        ctx.fillText(texte2, (window.innerWidth/2)- (largeur2/2), 160)
+        //print_text(handle_text(texte, (window.innerWidth/2) - (window.innerWidth/2)/2,  (window.innerHeight/4), font, (window.innerWidth/2), color="#FFFFFF", interligne=50))
+        // affichager le bouton commencer
+        afficher_bouton_commencer_inscription()
+        // si on appuie 
+        if (clicked && click_inside(xyMouseDown, x_bouton_commencer, y_bouton_commencer , w_bouton_commencer, h_bouton_commencer)){
+            action_bouton_commencer_inscription()
+        }
+
+
+    }
+}