GUI changes and grammar check

js/iHanoiFunctions.js

@@ -178,12 +178,15 @@ function moveFromTo(origin, destiny) {
     isMoving = false;
     if (towerC.length == diskQntity) {
         if (nMoves.text == minimumMoves) {
-            gameWonMsg.text = "Você terminou de mover a torre com o menor \n número de movimentos possivel " + nMoves.text + "!!";
+        	outputMsgBox.alpha = 0.8;        
+        	gameWonMsg.text = "Parabéns!\n\nVocê moveu a torre em " + nMoves.text + " movimentos!\nMÍNIMO DE MOVIMENTOS POSSÍVEIS!";
         } else {
-            gameWonMsg.text = "Você terminou de mover a torre em " + nMoves.text + " movimentos!!\n O minimo eram " + minimumMoves + " movimentos";
+        	outputMsgBox.alpha = 0.8;
+		    gameWonMsg.text = "Parabéns!\n\nVocê moveu a torre em " + nMoves.text + " movimentos!\n(Mínimo de movimentos possíveis: " + minimumMoves + ")";
         }
     } else {
-        gameWonMsg.text = '';
+        outputMsgBox.alpha = 0;
+        gameWonMsg.text = ' ';
     }
 }
 
@@ -222,6 +225,10 @@ function restart(n = 0) {
         towerA[diskQntity - 1 - i] = scene.add.sprite(diskX, diskY, 'disk' + i).setScale(0.13); //.setDisplaySize(diskWidth, diskHeight);
         diskY -= 28;
     }
+
+    outputMsgBox.alpha = 0;
+    gameWonMsg.text = ' ';
+
 }
 
 function restartVariables() {

js/phaserConfig.js

@@ -4,11 +4,13 @@ var towerA = [],
 var diskQntity = 3,
     nMoves, nCurrentMoves = 0,
     minimumMoves = Math.pow(2, diskQntity) - 1;
-var textsFont = { fontFamily: 'Arial', fontSize: 50, color: '#000000' };
+var textsFont = { fontFamily: 'Arial', fontSize: 50, color: '#5cff5c' };
 var gameWonMsg, nMoves;
 var redoButton, undoButton, restartButton, diskSelectorButton;
 var scene, tween;
-var wrongMoveSprite;
+var wrongMoveSprite; 
+var outputMsgBox;
+
 class sceneGame extends Phaser.Scene {
     constructor() {
         super({ key: 'sceneGame' });
@@ -25,6 +27,7 @@ class sceneGame extends Phaser.Scene {
         this.load.image('redo', 'assets/redo2.png');
         this.load.image('redoDisabled', 'assets/redoDisabled2.png');
 
+        this.load.image('msgBox', 'assets/msgBox.png')
 
         this.load.image('undo', 'assets/undo2.png');
         this.load.image('undoDisabled', 'assets/undoDisabled2.png');
@@ -58,11 +61,10 @@ class sceneGame extends Phaser.Scene {
         this.add.sprite(120, 90, 'acoesBox').setDisplaySize(80, 70);
         nMoves = this.add.text(90, 70, 0, textsFont);
 
-        this.add.text(120, 520, 'Torre A', textsFont);
-        this.add.text(555, 520, 'Torre B', textsFont);
-        this.add.text(990, 520, 'Torre C', textsFont);
-        gameWonMsg = this.add.text(300, 150, '', { fontFamily: 'Arial', fontSize: 36, color: '#00ef00', align: 'center' });
-
+        this.add.text(135, 530, 'Torre A', {fontFamily: 'Arial', fontSize: 50, color: '#4c0fbd'} );
+        this.add.text(570, 530, 'Torre B', {fontFamily: 'Arial', fontSize: 50, color: '#4c0fbd'} );
+        this.add.text(1005, 530, 'Torre C', {fontFamily: 'Arial', fontSize: 50, color: '#4c0fbd'} );
+        
         //buttons
         redoButton = this.add.sprite(720, 90, 'redoDisabled').setDisplaySize(80, 70); //.setInteractive({useHandCursor: false});
         redoButton.on('pointerdown', function(pointer) {
@@ -85,9 +87,9 @@ class sceneGame extends Phaser.Scene {
 
 
         //Towers
-        this.add.image(220, 320, 'torre').setScale(0.13);
-        this.add.image(655, 320, 'torre').setScale(0.13);
-        this.add.image(1090, 320, 'torre').setScale(0.13);
+        this.add.image(219, 320, 'torre').setScale(0.13);
+        this.add.image(654, 320, 'torre').setScale(0.13);
+        this.add.image(1089, 320, 'torre').setScale(0.13);
 
         //Disks
         var diskX = 220,
@@ -103,21 +105,32 @@ class sceneGame extends Phaser.Scene {
             selectA();
 
         });
+        towerASelectionArea.alpha = 0.1;
 
         //towerB selectionArea
         var towerBSelectionArea = this.add.sprite(655, 375, 'selectionArea').setDisplaySize(400, 320).setInteractive({ useHandCursor: true });
         towerBSelectionArea.on('pointerdown', function(pointer) {
             selectB();
         });
+        towerBSelectionArea.alpha = 0.1;
+
 
         var towerCSelectionArea = this.add.sprite(1090, 375, 'selectionArea').setDisplaySize(400, 320).setInteractive({ useHandCursor: true });
         towerCSelectionArea.on('pointerdown', function(pointer) {
             selectC();
         });
+        towerCSelectionArea.alpha = 0.1;
+
+        wrongMoveSprite = this.add.sprite(220, 300, 'wrongMove').setDisplaySize(100, 100).setAlpha(0);
 
 
 
-        wrongMoveSprite = this.add.sprite(220, 300, 'wrongMove').setDisplaySize(100, 100).setAlpha(0);
+        outputMsgBox = this.add.sprite(655, 310, 'msgBox').setDisplaySize(550,180);
+        outputMsgBox.alpha = 0;
+
+        gameWonMsg = this.add.text(450, 255, ' ', { fontFamily: 'Arial', fontSize: 22, color: '#00a600', align: 'center' });
+        
+
     }
 
     update() {}