diff --git a/script.js b/script.js index 1a93b83..9047931 100644 --- a/script.js +++ b/script.js @@ -1,9 +1,13 @@ var reponse = ""; var word =""; -const good_letter_color = "#8dc689"; -const bad_letter_color = "#e57373"; -const mid_letter_color = "#e3e466"; +const good_letter_color = "#98D98B"; +const good_letter_text_color = "#284D32"; +const bad_letter_color = "#EB9181"; +const bad_letter_text_color = "#52201A"; +const mid_letter_color = "#F8EEA0"; +const mid_letter_text_color = "#665B26"; const base_letter_color = "#f3d7c7" ; +const base_letter_text_color = "#632D17" ; var free_box = [1,1]; let arrWords; readTextFile("words.txt"); @@ -12,23 +16,30 @@ aleatoire(); setMyKeyDownListener(); function change_color_good_letter(coord){ + var case_div = document.getElementById(coord); + case_div.style.color = good_letter_text_color; coord = "case".concat(coord) console.log(coord) - var case_div = document.getElementById(coord); + case_div = document.getElementById(coord); case_div.style.backgroundColor = good_letter_color; } + function change_color_bad_letter(coord){ + var case_div = document.getElementById(coord); + case_div.style.color = bad_letter_text_color; coord = "case".concat(coord) console.log(coord) - var case_div = document.getElementById(coord); + case_div = document.getElementById(coord); case_div.style.backgroundColor = bad_letter_color; } function change_color_mid_letter(coord){ + var case_div = document.getElementById(coord); + case_div.style.color = mid_letter_text_color; coord = "case".concat(coord) console.log(coord) - var case_div = document.getElementById(coord); + case_div = document.getElementById(coord); case_div.style.backgroundColor = mid_letter_color; } @@ -87,10 +98,7 @@ function Enter() { if (verifWord() && free_box[0]==6) { write_result(verifLettres(word)); if(word != reponse){ - //afficher dans p - if (false){ - recommencer(); - } + document.getElementById("info").innerHTML=("The correct word was "+ reponse +". "); } } } @@ -130,7 +138,7 @@ function write_result(verif){ } } if (good_letter == 5){ - //afficher dans p + document.getElementById("info").innerHTML=("Congratulations! The correct word was "+ reponse +". "); } } @@ -139,13 +147,15 @@ function recommencer (){ let coord; for (let i=1; i<6; i++){ for (let j=1; j<7; j++){ - coord = j.toString().concat(i.toString()); - var case_div = document.getElementById(coord); - console.log(coord); + coord = (j.toString() + i.toString()); document.getElementById(coord).innerHTML = ""; + var case_div = document.getElementById("case" +coord); case_div.style.backgroundColor = base_letter_color; + case_div = document.getElementById(coord); + case_div.style.color = base_letter_text_color; } } + document.getElementById("info").innerHTML=(""); aleatoire(); free_box = [1,1]; } diff --git a/styles.css b/styles.css index 53eb4d2..f3982b3 100644 --- a/styles.css +++ b/styles.css @@ -2,14 +2,13 @@ margin: 0; padding: 0; font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; - + color:rgb(99, 45, 23); } header{ /* Apparence de l'en-tete */ background-color: white; text-align: center; padding-top: 5px; font-size: 35px; - color:rgb(99, 45, 23); font-weight: bold; } @@ -23,6 +22,7 @@ section{ /* Alignement du tableau de jeu */ } .grille_haut { /* Alignement du tableau de jeu */ display: flex; + padding-top: 5%; align-items: center; justify-content: center; flex-direction: column; @@ -74,7 +74,7 @@ footer div { padding-bottom: 5px; } -.clavier div button { /* Apparence touches clavier */ +button { /* Apparence touches clavier */ padding-bottom: 5px; width: 45px; height: 45px; @@ -86,7 +86,7 @@ footer div { border:none; } -.clavier div button:hover{ /* Apparence touches clavier quand suvolées */ +button:hover{ /* Apparence touches clavier quand suvolées */ background-color:rgb(75, 24, 15); color : rgb(245, 230, 230); }