page annonce tuto

This commit is contained in:
mpelissi 2023-03-10 11:48:37 +01:00
parent a0569d4ff9
commit f9f86dfd14
4 changed files with 94 additions and 32 deletions

View File

@ -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["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["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["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["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["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') boutons["suivant"] = new_image('https://raw.githubusercontent.com/PelissierCombescure/BVS-study/main/graphics/Boutons/bouton_suivant.png')
@ -290,8 +291,6 @@ function animate() {
premier_tour_page_contexte = false premier_tour_page_contexte = false
} }
traitement_contexte() traitement_contexte()
} }
//////////////////////////////////////////////////////////////////////////////// ////////////////////////////////////////////////////////////////////////////////
// page inscription // page inscription
@ -305,7 +304,6 @@ function animate() {
afficher_champs_inscription() afficher_champs_inscription()
premier_tour_page_inscription=false} premier_tour_page_inscription=false}
traitement_inscription() traitement_inscription()
} }
//////////////////////////////////////////////////////////////////////////////// ////////////////////////////////////////////////////////////////////////////////
if (page_explication){ if (page_explication){

View File

@ -24,8 +24,12 @@ function action_clavier_inscription(event){
// break;idx_i, idx_j // break;idx_i, idx_j
// valider // valider
case 'Enter': 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; break;
} }
} }

View File

@ -1,3 +1,5 @@
scale_bouton_commencer_contexte = 0.6
function affichage_texte_contexte(){ function affichage_texte_contexte(){
// Texte // Texte
draw_rectangle(0,0,canvas.width, canvas.height, "rgb(3, 26, 33)", 1) // ou + clair 4, 38, 48 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) //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() affichage_texte_contexte()
//clignotement_rectangle(1000, 10,10,100,100, "rgb(255,0,0)") //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)){ if (clicked && click_inside(xyMouseDown, x_bouton_commencer, y_bouton_commencer , w_bouton_commencer, h_bouton_commencer)){
// on passe aux choix // on passe aux choix
action_bouton_commencer_contexte() 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)
}
}

View File

@ -1,4 +1,5 @@
scale_bouton_commencer = 0.6 scale_bouton_commencer = 1
scale_bouton_suivant = 0.6
function affichage_inscription(){ function affichage_inscription(){
// Texte // 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) 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 // 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 // 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){ 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_inscription = false
//page_vues = true //page_vues = true
page_explication = true page_explication = true
interactions.push({"time": new Date().getTime(), "type": "Fin inscription - Début explications"}) interactions.push({"time": new Date().getTime(), "type": "Fin inscription - Début explications"})
//gestion des données personnelle de l'utilisateur //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 /// CHAMPS INSCRIPTION
@ -91,6 +98,7 @@ function value_non_vide(V){
} }
function afficher_champs_inscription() { function afficher_champs_inscription() {
inscription_finie = false
w_text_zone = 30 w_text_zone = 30
h_text_zone = 42 h_text_zone = 42
nb_caract_min = 1 nb_caract_min = 1
@ -212,6 +220,41 @@ function gestion_donnees_personnelles(){
document.getElementById("SexeF").style.display = 'none' document.getElementById("SexeF").style.display = 'none'
document.getElementById("SexeA").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()
}
}
} }