scale_bouton_commencer = 1 scale_bouton_suivant = 0.6 h_bouton_inscription = 0.1*window.innerHeight taille_titre_insription = (0.018*window.innerWidth) taille_texte_inscription = (0.015*window.innerWidth) function affichage_inscription(){ // Texte draw_rectangle(0,0,canvas.width, canvas.height, "rgb(3, 26, 33)", 1) // ou + clair 4, 38, 48 // ctx.strokeStyle = "rgb(255, 255, 255)" // Pour que le contour soit rouge // ctx.fillStyle = "rgb(255, 255, 255)" // Pour que l'intérieur soit bleu // texte = "Give me your personal information" // font = "58pt Courier" // ctx.font = font // largeur = ctx.measureText(texte).width // ctx.fillText(texte, (window.innerWidth/2)- (largeur/2), 100) titre = "Personal Information" affichage_titre(titre, taille_titre_insription+"pt Courier", "#EF476F") // Pour les zones de textes ctx.strokeStyle = "rgb(255, 255, 255)" ctx.fillStyle = "rgb(255, 255, 255)" ctx.font = taille_texte_inscription+"pt Courier" //ctx.fillText("Firstname:", x_texte_zone, parseInt(document.getElementById("Firstname").style.top) -12) ctx.fillText("Pseudo:", x_texte_zone, parseInt(document.getElementById("Pseudo").style.top) - 12) ctx.fillText("Age:", x_texte_zone, parseInt(document.getElementById("Age").style.top) - 12) ctx.fillText("Gender:", parseInt(document.getElementById("SexeM").style.left), parseInt(document.getElementById("SexeM").style.top) - 22) ctx.fillText("Male", parseInt(document.getElementById("SexeM").style.left)+40, parseInt(document.getElementById("SexeM").style.top)+24) ctx.fillText("Female", parseInt(document.getElementById("SexeF").style.left)+40, parseInt(document.getElementById("SexeM").style.top)+24) ctx.fillText("None of these above", parseInt(document.getElementById("SexeA").style.left)+40, parseInt(document.getElementById("SexeA").style.top)+24) } ////////////////////////////////////////////////////////////// /// BOUTON COMMENCER INSCRIPTION (POUUR ALLER VERS LE TUTO) function afficher_bouton_commencer_inscription(){ w_bouton_commencer = 2*ratio_inscription*boutons["commencer_tuto"].width h_bouton_commencer = 2*h_bouton_inscription //scale_bouton_commencer*boutons["commencer_tuto"].height x_bouton_commencer = (window.innerWidth/2)-(w_bouton_commencer/2) y_bouton_commencer = (window.innerHeight/2)-(h_bouton_commencer/2) // 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){ draw_rectangle(x_bouton_commencer, y_bouton_commencer , w_bouton_commencer, h_bouton_commencer, "rgb(200, 200, 200)", 0.6) } } function action_bouton_commencer_inscription(){ page_inscription = false //page_vues = true page_explication = true interactions.push({"time": new Date().getTime(), "type": get_message("debut_tutorial", [])}) //gestion des données personnelle de l'utilisateur //gestion_donnees_personnelles() } ////////////////////////////////////////////////////////////// /// BOUTON COMMENCER SKIP (POUUR ALLER VERS LE TUTO) function afficher_bouton_skip_inscription(){ w_bouton_skip = w_bouton_commencer h_bouton_skip = h_bouton_commencer x_bouton_skip = (window.innerWidth/2)-(w_bouton_skip/2) y_bouton_skip = (window.innerHeight/2) + (h_bouton_skip/2) + 20 // Bouton commencer ctx.drawImage(boutons["skip"], x_bouton_skip, y_bouton_skip , w_bouton_skip, h_bouton_skip) // Survol if(xyMouseMove.x >= x_bouton_skip && xyMouseMove.x <= x_bouton_skip + w_bouton_skip && xyMouseMove.y > y_bouton_skip && xyMouseMove.y < y_bouton_skip + h_bouton_skip){ draw_rectangle(x_bouton_skip, y_bouton_skip , w_bouton_skip, h_bouton_skip, "rgb(200, 200, 200)", 0.6) } } function action_bouton_skip_inscription(){ page_inscription = false //page_explication_bis = true page_warning = true //page_vues = true skiped = true interactions.push({"time": new Date().getTime(), "type": get_message("skip", []) }) document.removeEventListener("keydown", action_clavier_inscription) num_action = 0 nb_action = 1 init_clavier_explication() //gestion des données personnelle de l'utilisateur //gestion_donnees_personnelles() } ////////////////////////////////////////////////////////////// /// BOUTON SUIVANT INSCRIPTION function afficher_bouton_suivant_inscription(){ ratio_inscription = h_bouton_inscription/boutons["suivant_grand"].height w_bouton_suivant = ratio_inscription*boutons["suivant_grand"].width h_bouton_suivant = h_bouton_inscription 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) // Survol 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){ draw_rectangle(x_bouton_suivant, y_bouton_suivant , w_bouton_suivant, h_bouton_suivant, "rgb(200, 200, 200)", 0.6) } } function action_bouton_suivant_inscription(){ inscription_finie = true gestion_donnees_personnelles() ctx.clearRect(0, 0, canvas.width, canvas.height) interactions.push({"time": new Date().getTime(), "type":get_message("fin_inscription", []) }) } ////////////////////////////////////////////////////////////// /// CHAMPS INSCRIPTION function champs_remplis_correctment(){ //firstname_ok = false name_ok = false age_ok = false sexe_ok = false //if ((document.getElementById("Firstname").value.length >0) && (value_non_vide(document.getElementById("Firstname").value))){firstname_ok = true} if (document.getElementById("Pseudo").value.length >0 && (value_non_vide(document.getElementById("Pseudo").value))){name_ok = true} if ((document.getElementById("Age").value >0) && (document.getElementById("Age").value.length >0) && (value_non_vide(document.getElementById("Age").value))){age_ok = true} if (document.getElementById("SexeM").checked || document.getElementById("SexeF").checked || document.getElementById("SexeA").checked){ sexe_ok= true} //return firstname_ok && name_ok && age_ok && sexe_ok return name_ok && age_ok && sexe_ok } function value_non_vide(V){ non_vide = false for(let p=0;p