Kodulehe loomine, 28. kord

04.05.2022
 |  Kommentaare pole

Keelevaliku lisamine

Keelevaliku lisamiseks on meil vaja teostada järgmised sammud:

  1. lisada keelevaliku võimalus, selleks loome uue faili – mangu_esileht.html
  2. lisada kood, mis aitaks keelevalikut säilitada, kasutame selleks JavaScripti ja küpsiseid (cookies) – mangu_esilehekood.js
  3. täiendada:
    • mängulehte (mang.html), et kõiki vajalikke elemente oleks võimalik vastavalt keelevalikule muuta
    • mängukoodi (mangukood.js), et vastavalt keelele tehtaks muudatused
    • mängu kujundust (mangukujundus.css):
      • keelevaliku lehe (mangu_esileht.html) kujundamiseks (kasutame võimalust lisada kujundus esialgsesse kujundusfaili mangukujundus.css)
      • mängulehe (mang.html) kujunduse täiendamiseks

1. Keelevaliku lehe lisamine

Keelevaliku jaoks lisame uue html-lehe, mangu_esileht.html:

<!DOCTYPE html>
 <html>
 <head>
  <title>Meie mängu avaleht</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" type="text/css" href="mangukujundus.css">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css"/>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="mangu_esilehekood.js"></script>
 </head>
 <body>
  <div class="row">
   <div class="col-lg-4 col-md-4 col-sm-4 col-xs-2">
   </div>
   <div id="valikukast" class="col-lg-4 col-md-4 col-sm-4 col-xs-8">
    Palun vali keel<br>
    Please choose a language:<br><br>
    <form>
     <input type="radio" id="est" name="keel" value="eesti" checked>
     <label for="est">eesti</label><br>
     <input type="radio" id="eng" name="keel" value="english">
     <label for="eng">english</label><br><br>
     <button id="kinnitamine" type="button" onclick="kypsis();" class="elemendid btn btn-primary">
      <i class="bi-check2-circle"></i>
      &nbsp;Kinnita/Confirm
     </button>
    </form>
   </div> 
   <div class="col-lg-4 col-md-4 col-sm-4 col-xs-2">
   </div>
  </body>
</html>

Eelneva koodi tulemusena tekib leht, milles kasutatakse:

  1. kujunduse jaoks faili mangukujundus.css
  2. ikoonide jaoks Bootstrapi ikoone ==> <link rel=”stylesheet” href=”https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css”/>
  3. koodi jaoks faili mangu_esilehekood.js
  4. vormi, milles:
    1. keelevaliku tegemiseks kasutatakse:
      • radio nuppe,
      • mille nimi on name=”keel” (NB! mõlemal radio nupul on sama nimi, et neid omavahel siduda),
      • mille identifikaatorid on vastavalt id=”est” ja id=”eng”,
      • millest eesti keele valik, identifikaatoriga id=”est”, on vaikimise valitud checked
    2. keelevaliku kinnitamiseks kasutatakse:
      • nuppu button,
      • mille identifikaator on id=”kinnitamine”,
      • millele vajutades käivitub funktsioon kypsis() ==> onClick=”kypsis();”
      • millele on lisatud Bootstrapi ikoon ==> <i class=”bi-check2-circle”></i>

2. Keelevalikuteabe säilitamise küpsuses

Keelevalikuteabe jaoks kasutame küpsist ja selle tarvis lisame JavaScripti faili mangu_esilehekood.js, mis sisaldab funktsiooni kypsis:

function kypsis()
{
 if (document.getElementById("est").checked)
 { 
  document.cookie="keel=eesti";
  }
 else
 {
  document.cookie="keel=english"; 
 }
 window.location.href = "mang.html";
}

Funktsioon kypsis(), mis aktiveerub nupule kinnitamine vajutades, sisaldab järgmisi samme:

  1. kontrollitakse, kas radio valik est on aktiveeritud:
    • kui jah, siis omistatakse küpsisele keel väärtus eesti ==> document.cookie=”keel=eesti”;
    • vastasel juhul omistatakse küpsisele keel väärtus english ==> document.cookie=”keel=english”;
  2. liigutakse edasi lehel mang.html, mis on meie mänguleht ==> window.location.href = “mang.html”;

3. Olemasolevate koodide täiendamine

3.1 Lehe mang.html täiendamine

Mängu lehel täiendame tähe lisamise osa, et oleks võimalik seda tõlkida vastavalt valitud keelele:

Senise:

<div class="row">
 <div id="andmed_sisse">
  Täht:
  <input id="taht" class="elemendid" type="text" maxlength="1">
  <button type="button" id="nupp" class="btn btn-primary elemendid" onclick="taheproov();">
   Proovi
  </button>
 </div> 
</div>

asemel:

<div class="row" id="nupukast">
 <div id="tahetekst" class="elemendid col-lg-6 col-md-6 col-sm-6 col-xs-12">
  Täht:
 </div>
 <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
  <div id="andmed_sisse">
   <input id="taht" class="elemendid" type="text" maxlength="1">
   <button type="button" id="nupp" class="btn btn-primary elemendid" onclick="taheproov();">
    Proovi
   </button>
  </div>
 </div> 
</div>

Selle tulemusena on faili mang.html sisu järgmine:

<!DOCTYPE html>
 <html>
  <head>
   <title>Meie mäng</title>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="stylesheet" type="text/css" href="mangukujundus.css">
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
   <script src="mangukood.js"></script>
  </head>
  <body onload="algseis();">
   <div class="container-fluid">
    <div class="row">
     <div id="sona" class="elemendid">Siia tuleb otsitav sõna</div>
    </div>
    <div class="row">
     <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
      <div id="pilt">Siia tuleb pilt</div>
    </div>
    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
     <div id="tahed" class="elemendid">Siia tulevad tähed, mida sõnas ei ole!</div>
     </div>
    </div>
    <div class="row">
     <div id="info" class="elemendid">Siia tuleb info selle kohta, kas täht sobis või mitte</div>
    </div>
   <div class="row" id="nupukast">
    <div id="tahetekst" class="elemendid col-lg-6 col-md-6 col-sm-6 col-xs-12">
     Täht:
    </div>
    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
     <div id="andmed_sisse">
      <input id="taht" class="elemendid" type="text" maxlength="1">
      <button type="button" id="nupp" class="btn btn-primary elemendid" onclick="taheproov();">
       Proovi
      </button>
     </div>
    </div> 
   </div>
  </body>
</html>

3.2 Mängukoodi mangukood.js täiendamine

Mängukoodi täiendame esmalt funktsiooni küpsise eraldamiseks, nimega getCookie, mille sisendparameetriks on name:

function getCookie(name) {
 name = name + "=";
 var cookies = document.cookie.split(';');
 for(var i = 0; i <cookies.length; i++) 
 {
  var cookie = cookies[i];
  while (cookie.charAt(0)==' ') 
  {
    cookie = cookie.substring(1);
   }
   if (cookie.indexOf(name) == 0) 
   {
    return cookie.substring(name.length,cookie.length);
   }
  }
  return "";
}

kus:

  1. lisatakse küpsise nimele võrdusmärk ==> name = name + “=”;
  2. luuakse küpsiste massiiv cookies eraldades kõik lehel olevad küpsised semikoolonite abil ==> var cookies = document.cookie.split(‘;’);
  3. analüüsitakse for-tsüklit kasutades kõik massiivis cookies leiduvad küpsused läbi ==> for (var i = 0; i <cookies.length; i++)
    • omistatakse muutujale cookie massiivis cookies kohal i paiknev väärtus ==> var cookie = cookies[i];
    • teostatakse seda, kui muutuja cookie esimene märk on tühik, kasutades meetodit charAt() ==> var cookie = cookies[i];
      while (cookie.charAt(0)==’ ‘) 

      • sel juhul liigutatakse muutuja cookie algus, kasutades meetodit substring(), kohale 2 ==> cookie = cookie.substring(1);
    • kontrollitakse, kas leitud kohast alates on parameetri name asukohaks 0, kasutades meetodit indexOf() ==> if (cookie.indexOf(name) == 0) 
      • kui jah, siis tagastab funktsioon cookie väärtuse, kasutades meetodit substring(), kus cookie väärtus algab küpsise nime ja võrdusmärgi järelt ==> return cookie.substring(name.length,cookie.length);

Seejärel leiame eelneva funktsiooni getCookie() abil muutuja keel väärtuse (NB! tegu on globaalse muutujaga, mida kasutame faili mangukood.js piires):

var keel=getCookie("keel");

Edasi aga tuleb kogu olemasolevat koodi kohandada selliselt, et sõltuvalt muutuja keel väärtuses muutuksid ka vastavate sõnade ja tekstide keeled, nt esmalt globaalsete muutujate määraltemine:

var leitud_tahed=[];
if (keel=="eesti")
{
 var otsitav_sona="lumelaualaager";
 var otsitava_sona_tahed=otsitav_sona.split(""); 
 leitud_tahed.push("l");
 leitud_tahed.push("r");
}
else
{
 var otsitav_sona="snowboardcamp";
 var otsitava_sona_tahed=otsitav_sona.split("");
 leitud_tahed.push("s");
 leitud_tahed.push("p");
}

Ja mängu alglaadimine:

function algseis()
{
 if (keel=="eesti")
 {
  document.getElementById("sona").innerHTML="L _ _ _ L _ _ _ L _ _ _ _ R";
  document.getElementById("info").innerHTML="Hakka aga mänguga pihta!";
  document.getElementById("tahetekst").innerHTML="Täht:";
  document.getElementById("nupp").innerHTML="Proovi";
 }
 else
 {
  document.getElementById("sona").innerHTML="S _ _ _ _ _ _ _ _ _ _ _ P";
  document.getElementById("info").innerHTML="Start the game!";
  document.getElementById("tahetekst").innerHTML="Letter:";
  document.getElementById("nupp").innerHTML="Try";
 }
 document.getElementById("tahed").innerHTML="";
 var input = document.getElementById("taht");
 input.addEventListener("keydown", function (e) {
 if (e.key === "Enter") { 
  taheproov();
  }
 });
 document.getElementById("pilt").innerHTML='<img src="pilt1.jpg" id="pildisisu">';
 document.getElementById("taht").focus();
 document.getElementById("taht").select();
}

Ja funktsiooni taheproov sisu:

function taheproov()
{
 var taht=document.getElementById("taht").value.toLowerCase();
 labi=0;

 // kui ei ole ühtegi tähte sisestatud
 if (taht.length==0)
 {
  if (keel=="eesti")
  {
   document.getElementById("info").innerHTML="Palun sisesta täht!";
  }
  else
  {
   document.getElementById("info").innerHTML="Please insert a letter!";
  }
 }
 //kui täht on sisestatud
 else
 {
  // kontrollime, kas on juba leitud
  if (leitud_tahed.includes(taht))
  {
   if (keel=="eesti")
   {
    document.getElementById("info").innerHTML="See täht on juba sisestatud!";
   }
   else
   {
    document.getElementById("info").innerHTML="This letter has already been inserted!";
   }
  }
  //kontrollime, kas täht sisaldub sõnas
  else if (otsitava_sona_tahed.includes(taht))
  {
   leitud_tahed.push(taht);
   kuvatav_tekst=otsitava_sona_tahed[0].toUpperCase();
   sona_seis=otsitava_sona_tahed[0];
   if (keel=="eesti")
   {
    document.getElementById("info").innerHTML="Leidsid õige tähe!";
   }
   else
   {
    document.getElementById("info").innerHTML="You found a letter that fits!";
    }
   for (i=1; i<otsitava_sona_tahed.length; i++)
   {
    if (leitud_tahed.includes(otsitava_sona_tahed[i]))
    {
     kuvatav_tekst=kuvatav_tekst+" "+otsitava_sona_tahed[i].toUpperCase(); 
     sona_seis=sona_seis+otsitava_sona_tahed[i];
    }
    else
    {
     kuvatav_tekst=kuvatav_tekst+" _";
     sona_seis=sona_seis+"_";
     }
    document.getElementById("sona").innerHTML=kuvatav_tekst;
    }
    if (otsitav_sona==sona_seis)
    {
     labi=mang_labi("voit");
    }
   }
   //kontrollime, kas täht on sobimatute tähtede nimekirjas
   else if (sobimatud_tahed.includes(taht))
   {
    if (keel=="eesti")
    {
     document.getElementById("info").innerHTML="See täht on juba sisestatud!";
    }
    else
    {
     document.getElementById("info").innerHTML="This letter has already been inserted!";
    }
   }
   //kontrollime, kas sobimatute tähtede nimekirjas on veel ruumi
   else if (sobimatud_tahed.length<8)
   {
    sobimatud_tahed.push(taht);
    document.getElementById("tahed").innerHTML=document.getElementById("tahed").innerHTML+" "+taht.toUpperCase();
    if (keel=="eesti")
    {
     document.getElementById("info").innerHTML="Seda tähte ei ole sõnas!";
     }
    else
    {
     document.getElementById("info").innerHTML="This word doesn't contain this letter!"; 
    }
    jrknr=sobimatud_tahed.length+1;
    document.getElementById("pilt").innerHTML="<img src='pilt"+jrknr+".jpg' id='pildisisu'>"; 
  }
  //kui ükski eelnevatest tingimustest pole tõene, siis on mäng läbi
  else
  {
   labi=mang_labi("kaotus");
  }
 } 
 if (labi==0)
 { 
  document.getElementById("taht").value="";
  document.getElementById("taht").focus();
  document.getElementById("taht").select();
 }
}

Ja funktsiooni mang_labi sisu:

function mang_labi(seis)
{
 if (seis=="voit")
 {
  if (keel=="eesti")
  {
   document.getElementById("info").innerHTML="Sa arvasid sõna ära!";
  }
  else
  {
   document.getElementById("info").innerHTML="You guessed the word!";
  }
 }
 else
 {
  if (keel=="eesti")
  {
   document.getElementById("info").innerHTML="Sa kaotasid!";
  }
  else
  {
   document.getElementById("info").innerHTML="You lost!";
  }
  document.getElementById("pilt").innerHTML="<img src='pilt10.jpg' id='pildisisu'>";
  var audio = new Audio('labi.mp3');
  audio.play();
 }
 if (keel=="eesti")
 {
  document.getElementById("nupukast").innerHTML='<a href="" class="btn btn-primary elemendid">Alusta otsast peale!</a>';
  }
 else
 {
  document.getElementById("nupukast").innerHTML='<a href="" class="btn btn-primary elemendid">Start all over again!</a>'; 
  }
 return 1; 
}

3.3 Kujunduse mangukujundus.css täiendamine

Kujundusfaili mangukujundus.css teeme järgmised muudatused:

#sona, #info, #taht
{
 text-align: center !important;
}
#andmed_sisse
{
 text-align: left !important;
}
#tahetekst 
{
 text-align: right !important;
 padding-top: 10px !important;
}
#taht
{
 width: 90px !important;
 padding: 0px 25px 10px 25px !important;
 margin-right: 10px !important;
}
#nupp
{
 margin-top: 7px !important;
}
#valikukast
{
 font-size: 30px !important;
}
input[type='radio'] 
{ 
 transform: scale(2); 
}

mille tulemusena kujundusfaili sisu on järgmine:

.elemendid, #andmed_sisse
{
 font-size: 35px !important;
 margin-bottom: 10px !important;
}
#sona, #info, #taht
{
 text-align: center !important;
}
#andmed_sisse
{
 text-align: left !important;
}
#tahetekst 
{
 text-align: right !important;
 padding-top: 10px !important;
}
#pildisisu
{
 width: 200px !important;
 height: 200px !important;
 float: right !important;
}
#tahed
{
 color: red;
 text-decoration: line-through;
}
#taht
{
 width: 90px !important;
 padding: 0px 25px 10px 25px !important;
 margin-right: 10px !important;
}
#nupp
{
 margin-top: 7px !important;
}
#valikukast
{
 font-size: 30px !important;
}
input[type='radio'] 
{ 
 transform: scale(2); 
}

Siinkohal kasutame radio nuppude suurendamiseks meetodit transform, omaduse scale väärtusega 2 ==> input[type=’radio’] { transform: scale(2); }