Update 'ihanoi/js/ihanoi.js'

Nao apareciam os botoes, entao alterei algumas linhas, indicadas com //L
Vide nova versao 'desenhaTudo()' (veja vantagem de deixar reservado o /* */ para essas situacoes)
Mas ainda tem erro: TypeError: matHastes[ind_haste] is undefined - na linha 341

ihanoi/js/ihanoi.js

@@ -42,7 +42,7 @@ var canvas;
 var context;
 
 var width = 1100;
-var height = 460;
+var height = 530; //L 460;
 var posY0  = 290; // posicionamento do disco maior (depende de 'height')
 
 // Posicionamento dos discos nas hastes
@@ -71,6 +71,7 @@ var topoHasteA = nDiscos-1, topoHasteB = topoHasteC = -1; // indice do disco no
 
 var iHanoi = "iHanói";
 var LInE = "LInE-IME-USP";
+var urlLInE = "www.matematica.br"; //L
 
 var isExercise = false;  // se for exercicios, entao NAO permite alterar numero de discos
 var isAuthoring = false; // se for edicao, entao permita alterar numero de discos (sobrepoe opcao 'isExercise=true')
@@ -104,8 +105,10 @@ var mensagem = mensagem0; // mensagem inicial
 
 // Posicionamento para mensagens
 var txtTx = 10, txtTy = 20; // iHanoi
-var txtMX = 10, txtMY = height-10; // barra de mensagens: posicao
+var txtMX = 10, txtMY = height-55; //L height-10; // barra de mensagens: posicao
+var txtRtX      = 165,       txtRtY      = 45; // barra de mensagens: posicao //L
 var txtLInEx = width-180, txtLInEy = 20; // LInE-IME-USP
+var txtUrlLInEx = width-180, txtUrlLInEy = 40; // www.matematica.br
 
 var tamNMX = 300, tamNMY = 20; // mensagem sobre num. movimentos: tamanho
 //1 var txtNMX = 2*325+50, txtNMY = height-10; // mensagem sobre num. movimentos: posicao
@@ -159,6 +162,28 @@ function setExercise (valor) { // invocada em 'integration-functions.js: decodif
   console.log("setExercise: " + msg);
   }
 
+//L inicio
+// Desenha botoes: Reiniciar  Resolver  Automatico  1 disco  2 disco  3 disco  4 disco  5 disco  6 disco
+function desenhaBotoes () {
+  var strBotoes;
+  var botoes = document.getElementById("botoes");
+  strLinha0 = '<div class="tableBotoes-celula tableBotoes-tar">';
+  strLinha1 = '   <button id="reiniciar"  class="classeBotao classeBotaoR" title="Reiniciar as configurações" onclick="reiniciar();">Reiniciar</button> &nbsp;';
+  strLinha2 = '   <button id="rever"      class="classeBotao classeBotaoR" title="Rever os movimentos"        onclick="rever();    ">Resolver </button> &nbsp;';
+  strLinha3 = '   <button id="automatico" class="classeBotao classeBotaoR" title="Resolver automaticamente"   onclick="preparaAutomatico();">Automatico</button>&nbsp;&nbsp;&nbsp;&nbsp;';
+  strLinha4 = '   <button id="disco1" class="classeBotao classeBotao1" title="Apenas 1 disco"  onclick="reiniciar(1);">1 disco</button> &nbsp;';
+  strLinha5 = '   <button id="disco2" class="classeBotao classeBotao2" title="Apenas 2 discos" onclick="reiniciar(2);">2 discos</button> &nbsp;';
+  strLinha6 = '   <button id="disco3" class="classeBotao classeBotao3" title="Apenas 3 discos" onclick="reiniciar(3);">3 discos</button> &nbsp; ';
+  strLinha7 = '   <button id="disco4" class="classeBotao classeBotao4" title="Apenas 4 discos" onclick="reiniciar(4);">4 discos</button> &nbsp;';
+  strLinha8 = '   <button id="disco5" class="classeBotao classeBotao5" title="Apenas 5 discos" onclick="reiniciar(5);">5 discos</button> &nbsp;';
+  strLinha9 = '   <button id="disco6" class="classeBotao classeBotao6" title="Apenas 6 discos" onclick="reiniciar(6);">6 discos</button> &nbsp;</div></div>';
+  strBotoes  = strLinha0 + "\n" + strLinha1 + "\n" + strLinha2 + "\n" + strLinha3 + "\n" + strLinha4 + "\n";
+  strBotoes += strLinha5 + "\n" + strLinha6 + "\n" + strLinha7 + "\n" + strLinha8 + "\n" + strLinha9;
+  botoes.style.left =  "80px"; // posicionamento dos botoes "Reiniciar | Resolver | Automatico | 1 disco | ... | 6 discos"
+  botoes.style.top  = "490px";
+  botoes.innerHTML = strBotoes;
+  }
+//L final
 
 // Redefine numero de discos a serem carregados e os posiciona (todos) na haste A
 // Evento: quando "clicar" nos botoes com numero de discos (elemento id="disco"+i (i=0, 1, 2,...5)
@@ -174,8 +199,9 @@ function redefineDiscos (n) {
     posx[i] = -1;
     posy[i] = -1;
     }
+  desenhaBotoes(); //L
   //D
-  console.log("redefineDiscos("+n+"): final");
+  console.log("redefineDiscos("+n+"): final");    
   }
 
 
@@ -362,13 +388,13 @@ function movimentoFinal (haste, num) {
   var topo = pegaTopoHaste(haste);
   if (topo == nDiscos-1) { // moveu tudo!
     if (haste == 2) { // moveu para haste C
-      if (contador == (2**nDiscos)-1) { // moveu para haste C com minimo
+      if (contador == (potencia2(nDiscos))-1) { // moveu para haste C com minimo
         return 4;
         }
       return 3; // moveu para haste C mas nao e' minimo
       }
     if (haste == 1) { // moveu para haste B
-      if (contador == (2**nDiscos)-1) { // moveu para haste B com minimo
+      if (contador == (potencia2(nDiscos))-1) { // moveu para haste B com minimo
         return 2; // msgTeste2
         }
       return 1; // moveu para haste C mas nao e' minimo
@@ -544,6 +570,7 @@ function desenhaMensagem () {
 
 // Redesenha tudo
 function desenhaTudo () {
+/*
   //console.log("desenhaTudo(): inicio");
   context.font = 'bold 20px serif';
   context.drawImage(imgFundo,   0,  0, width, height );
@@ -566,6 +593,40 @@ function desenhaTudo () {
   context.fillText(" " + mensagemNM + contador, txtNMX, txtNMY); // numero de movimentos
   desenhaDiscos();
   console.log("desenhaTudo(): final");
+*/
+  //L inicio
+  context.font = 'bold 20px serif';
+  context.drawImage(imgFundo,   0,  0, width, height );
+  context.fillStyle = "white";
+  context.fillText(iHanoi, txtTx, txtTy); // iHanoi
+  // Cor fundo ceu: 5398db
+  context.fillStyle = "#5398db";
+  context.fillRect(txtLInEx, 0, txtRtX,  txtRtY);     // Fundo para: LInE-IME-USP
+  context.fillStyle = "white";
+  context.fillText(LInE, txtLInEx,       txtLInEy);    // LInE-IME-USP
+  // context.fillStyle = "black";
+  context.font = 'bold 14px serif';
+  context.fillText(urlLInE, txtUrlLInEx, txtUrlLInEy); // www.matematica.br
+  
+  context.drawImage(imgHastes[0], posx_HA, posy_HA); // posicao haste A
+  context.drawImage(imgHastes[1], posx_HB, posy_HB); //
+  context.drawImage(imgHastes[2], posx_HC, posy_HC); //
+  context.font = 'bold 14px serif';
+  context.fillStyle = "white"; // "#26508c"; // para fundo de mensagem
+  //context.clearRect(txtMX, txtMY-15, tamX, tamY);  // Mensagens
+  context.fillRect(txtMX, txtMY-15, tamX, tamY);  // Mensagens
+  roundRect(context, txtMX, txtMY-15, tamX, tamY); // Mensagens
+  //context.clearRect(txtNMX, txtNMY-15, tamNMX, tamNMY);  // Numero de movimentos
+  context.fillRect(txtNMX, txtNMY-15, tamNMX, tamNMY);  // Numero de movimentos
+  roundRect(context, txtNMX, txtNMY-15, tamNMX, tamNMY); // Numero de movimentos
+  context.fillStyle = "black"; //"white";
+  context.fillText(" " + mensagem, txtMX, txtMY); // mensagens
+  context.fillText(" " + mensagemNM + contador, txtNMX, txtNMY); // numero de movimentos
+  desenhaDiscos();
+  //  context1.drawImage(canvas, 0, 0); //DB
+  //console.log("desenhaTudo(): final");
+  return true;
+  //L final
   } // desenhaTudo()
 
 
@@ -618,5 +679,4 @@ function fazMovimento ()
 }
 // -------------------- FIM DA ATUALIZACAO --------------------
 
-console.log("iHanoi: final do JavaScript principal"); //D
-
+console.log("iHanoi: final do JavaScript principal"); //D