in the process of fixing bugs, refactoring and commenting the code | setting fraction labels ON/OFF was put back in the game - now on the difficulty screen | in the process of defining default text styles to be used | fixed some GUI differences in similar contexts | now holds language name instead of object in php connection

assets/languages/fr_FR.json

@@ -13,7 +13,7 @@
     "menu_help" : "VIEW SOLUTION",
     "circle_name": "Circles",
     "square_name" :"Quadrangles",
-    "label_name": "Étiquettes",
+    "label_name": "étiquettes",
     "mode_name": "MODE",
     "with_name": "AVEC",
     "without_name": "SANS",

assets/languages/pt_BR.json

@@ -13,7 +13,7 @@
     "menu_help" : "VER SOLUÇÃO",
     "circle_name": "Círculos",
     "square_name" :"Quadriláteros",
-    "label_name": "legenda",
+    "label_name": "legendas",
     "model_name": "MODO",
     "with_name": "COM",
     "without_name": "SEM",

js/boot.js

@@ -6,282 +6,283 @@
 	};
 */
 
-// OUTRAS VARIAVEIS GLOBAIS
-
-				let passedLevels;
-
-				//premenu
-let errorEmptyName;
-
-				//map
-				let kid, tractor;
-
-				//square 1 + circle 1
-				let startX;
-				let clicked, hideLabels, checkCollide, result, hasFigure;
-				let detail;
-				let endPosition;
-				let fractionClicked, fractionIndex;
-				let blocks, maxBlocks, numBlocks, curBlock, blockDirection, blockDistance, blockLabel, blockSeparator; //blocks control
-
-				//square 1
-				let blockWidth, blockIndex;
-				let floorBlocks, floorIndex, floorCount, floorClicked, curFloor;
-				let move, moveCounter, moveEnd;
-				let arrow;
-				let arrowPlace;
-
-				//circle 1
-				let blockSize, blockAngle, blockTraceColor;
-				let fly, flyCounter, flyend; //flyvariables
-				let trace; //circle trace
-				let numPlus, endIndex;
-				let kid_walk, balloon, basket;
-				let balloonPlace;
-
-				//square 2
-				let sizeA, sizeB, valueA, valueB;
-				let clickA, clickB, animateA, animateB, animate, cDelay, eDelay;
-				let blocksA, blocksB, auxblqA, auxblqB;
-				let labelA, fractionA, separatorA, labelB, fractionB, separatorB;
-				let kidDirection, equals, counter, endCounter;
-				let xA, yA, xB, yB, blockW, blockH;
-
-	// INFO
-let username; //player name
-let lang; //game language
-
-	// IMAGES
-	let beepSound, okSound, errorSound; //sounds
-	let okImg, errorImg;
-    let timer, totalTime;
-
-    // variaveis globais
-    let audioStatus = false; // turns game audio on/off
-    let firstTime = true; //if player has just oppened the game
-    let debugMode = true; //turns console messages for developers on/off (changeable only by code)
-
-	// game dimentions
-	const defaultWidth = 900;
-	const defaultHeight = 600;
-
-	// Initialize the game
-	let game = new Phaser.Game(
-		defaultWidth, 
-		defaultHeight, 
-		Phaser.CANVAS,
-		'fractions-game'
-	);
+	// Global variables that still need checking 
 	
-	const hip = "143.107.45.11"; //Host ip
+	//map
+	let kid;
+
+	//square 1 + circle 1
+	let startX;
+	let clicked, hideLabels, checkCollide, result, hasFigure;
+	let detail;
+	let endPosition;
+	let fractionClicked, fractionIndex;
+	let blocks, maxBlocks, numBlocks, curBlock, blockDirection, blockDistance, blockLabel, blockSeparator; //blocks control
+
+	//square 1
+	let blockWidth, blockIndex;
+	let floorBlocks, floorIndex, floorCount, floorClicked, curFloor;
+	let move, moveCounter, moveEnd;
+	let arrow;
+	let arrowPlace;
+
+	//circle 1
+	let blockSize, blockAngle, blockTraceColor;
+	let fly, flyCounter, flyend; //flyvariables
+	let trace; //circle trace
+	let numPlus, endIndex;
+	let kid_walk, balloon, basket;
+	let balloonPlace;
+
+	//square 2
+	let sizeA, sizeB, valueA, valueB;
+	let clickA, clickB, animateA, animateB, animate, cDelay, eDelay;
+	let blocksA, blocksB, auxblqA, auxblqB;
+	let labelA, fractionA, separatorA, labelB, fractionB, separatorB;
+	let kidDirection, equals, counter, endCounter;
+	let xA, yA, xB, yB, blockW, blockH;
+
+// Game dimentions
+const defaultWidth = 900;
+const defaultHeight = 600;
+// Initialize phaser
+let game = new Phaser.Game(
+	defaultWidth, 
+	defaultHeight, 
+	Phaser.CANVAS,
+	'fractions-game'
+);
+
+// META
+
+let username; 				// Player name
+let lang, langString; 		// Language object and language name
+let audioStatus = false; 	// Turns game audio ON/OFF
+let debugMode = true; 		// Turns console messages for developers ON/OFF (to be changed only by code)
+
+// GAME LEVELS
+
+let currentGameState; 			// Name of the current 'game' state
+
+let levelShape;		 	// Can be 'circle' or 'square'
+/* LEVEL TYPE
+ * in squareOne/circleOne can be: 'A' (click on the floor) or 'B' (click on the amount to go)
+ * in squareTwo           can be: 'C' (comparing fractions) */
+let levelType;
+
+let levelLabel = true; 		// Turns fraction labels ON/OFF
+/* SUBLEVEL TYPE
+ * in squareOne/circleOne levels can be: 'Plus', 'Minus' or 'Mixed'
+ * in squareTwo           level  can be: 'A', 'B' or 'C' */
+let sublevelType;	
+let levelDifficulty; 		// Level difficulty: a value from 1 to 5 (depends on the level)
+
+let levelPosition;			// Position of the character in the map
+let levelMove;				// When true allows character to move to next position in the map
+let passedLevels;			// Number of finished levels in the map
+
+// SOUNDS
+let beepSound, okSound, errorSound;
 	
-let gameStateString;
+// IMAGES
+let okImg, errorImg;
 
-    // Game One : kid and truck
+// TIMER
+let timer, totalTime;
 
-    let levelPosition = 0; //Map position
-    let levelMove = false; //Move to next position
-    let levelDifficulty = 0; //From one to five 
+// CONNECTION TO DATABASE
+const hip = "143.107.45.11"; // Host ip
+	
+let loadAssets = {
+
+	preload: function(){
+
+		// Auxiliar string that holds the base directory
+		const imgsrc = 'assets/img/';
+
+		// Progress bar
+		game.load.image('progressBar', imgsrc+'pgbar.png');
+	
+		// Flags
+		game.load.image('flag_BR', 	imgsrc+'flag/BRAZ.jpg');
+		game.load.image('flag_PE', 	imgsrc+'flag/PERU.jpg');
+		game.load.image('flag_US', 	imgsrc+'flag/UNST.jpg');
+		game.load.image('flag_FR', 	imgsrc+'flag/FRAN.jpg');
+		game.load.image('flag_IT', 	imgsrc+'flag/ITAL.png');
+		
+		// Scenario
+		game.load.image('bgimage', 	imgsrc+'bg.jpg');
+		game.load.image('bgmap', 	imgsrc+'bg_map.png');
+		game.load.image('cloud', 	imgsrc+'cloud.png');
+		game.load.image('floor',	imgsrc+'floor.png');
+		game.load.image('road', 	imgsrc+'road.png');
+		game.load.image('birch', 	imgsrc+'birch.png');
+		game.load.image('house', 	imgsrc+'house.png');
+		game.load.image('place_a', 	imgsrc+'place_a.png');
+		game.load.image('place_b', 	imgsrc+'place_b.png');
+		game.load.image('garage', 	imgsrc+'garage.png');
+		game.load.image('farm', 	imgsrc+'farm.png');
+		game.load.image('rock', 	imgsrc+'rock.png');
+		game.load.image('school', 	imgsrc+'school.png');
+		game.load.image('sign',		imgsrc+'sign.png');
+		game.load.image('tree1', 	imgsrc+'tree.png');
+		game.load.image('tree2', 	imgsrc+'tree2.png');
+		game.load.image('tree3', 	imgsrc+'tree3.png');
+		game.load.image('tree4', 	imgsrc+'tree4.png');
+
+		// Menu icons on the top of the page
+		game.load.image('back', 	imgsrc+'menu/back.png');
+		game.load.image('home', 	imgsrc+'menu/home.png');
+		game.load.image('info', 	imgsrc+'menu/info.png');
+		game.load.image('world', 	imgsrc+'menu/language.png');
+		game.load.image('list', 	imgsrc+'menu/menu.png');
+		game.load.image('help', 	imgsrc+'menu/help.png');
+		game.load.image('pgbar', 	imgsrc+'menu/progressBar.png');
+		game.load.image('block', 	imgsrc+'menu/block.png');
+		game.load.spritesheet('audio',	imgsrc+'menu/audio_48x48.png',48,48,2);
+
+		// Mathematical operators
+		game.load.image('add',		imgsrc+'operator/add.png');
+		game.load.image('subtract', imgsrc+'operator/subtract.png');
+		game.load.image('separator',imgsrc+'operator/separator.png');
+		game.load.image('equal', 	imgsrc+'operator/equal.png');
+		
+		// Feedback icons
+		game.load.image('h_arrow', 		imgsrc+'help/arrow.png');
+		game.load.image('h_double', 	imgsrc+'help/double.png');
+		game.load.image('h_error', 		imgsrc+'help/error.png');
+		game.load.image('h_ok', 		imgsrc+'help/ok.png');
+		game.load.image('down', 		imgsrc+'help/down.png');        
+		game.load.image('pointer', 		imgsrc+'help/pointer.png');
+		game.load.spritesheet('select',	imgsrc+'help/selection_box.png', 310, 310, 2); 
+		
+		// Game sprites        
+		game.load.spritesheet('kid_run',	imgsrc+'kid/run.png', 82, 178, 12);
+		game.load.spritesheet('kid_walk', 	imgsrc+'kid/walk.png', 78, 175, 26);
+		game.load.spritesheet('kid_lost', 	imgsrc+'kid/lost.png', 72, 170, 6);
+		game.load.spritesheet('tractor', 	imgsrc+'tractor/frame.png', 201, 144, 10);
+		game.load.image('tractor_green',	imgsrc+'tractor/frame-0.png');
+		game.load.image('tractor_red', 		imgsrc+'tractor/frame-5.png');
+		game.load.image('balloon', 			imgsrc+'airballoon_upper.png');
+		game.load.image('balloon_basket', 	imgsrc+'airballoon_base.png');
+		
+		// Sound effects
+		game.load.audio('sound_ok', ['assets/fx/ok.ogg', 'assets/fx/ok.mp3']);
+		game.load.audio('sound_error', ['assets/fx/error.ogg', 'assets/fx/error.mp3']);
+		game.load.audio('sound_beep', ['assets/fx/beep.ogg', 'assets/fx/beep.mp3']);
+
+		const levelSpriteSource = [
+			'squareOne_1.png', 	//square I
+			'squareOne_2.png', 	//square II
+			'circleOne_1.png',	//circle I
+			'circleOne_2.png',	//circle II
+			'squareTwo_3.png'	//square III
+		];
+		if(debugMode){
+			levelSpriteSource.push(
+				'squareTwo_3.png',
+				'squareTwo_3.png',
+				'squareTwo_3.png',
+				'squareTwo_3.png',
+
+				'squareTwo_3.png',
+				'squareTwo_3.png',
+				'squareTwo_3.png',
+				'squareTwo_3.png'
+			);
+		}
+					
+		//game phases buttons list
+		for(let i=0; i<levelSpriteSource.length; i++){
+			game.load.image('game'+i,	imgsrc+'game/'+levelSpriteSource[i]);
+		}
+		
+		this.levelShapeList = [
+			'Square', 
+			'Square', 
+			'Circle', 
+			'Circle', 
+			'Square',
+		];	
+		if(debugMode){
+			this.levelShapeList.push(
+				'Square', 
+				'Square', 
+				'Square', 
+				'Square',
+
+				'Square', 
+				'Square', 
+				'Square', 
+				'Square'
+			);
+		}
+		
+		this.levelTypeList  = [
+			'A', 
+			'B', 
+			'A', 
+			'B', 
+			'C'
+		];	       	
+		if(debugMode){
+			this.levelTypeList.push(
+				'C', 
+				'C', 
+				'C', 
+				'C',
+
+				'C', 
+				'C', 
+				'C', 
+				'C'
+			);
+		}
+		
+	},
 
-    let levelOperator = ""; //Plus; Minus; Mixed 
+	create: function(){
 
-    let levelLabel= false; //Show block label
-    let levelShape = ""; //Circle; square
-    let levelType = ""; // A - Place distance; B - Select blocks
-    let levelMenu = true;
+		// Centers phaser canvas in its containing div
+		game.scaleMode = Phaser.ScaleManager.SHOW_ALL;
+		game.scale.pageAlignHorizontally = true;
+		game.scale.pageAlignVertically = true;
+		
+		// Enable phaser Arcade Physics system
+		game.physics.startSystem(Phaser.Physics.ARCADE);
 
-    //adding game states (scenes)
-    
-    game.state.add('language', langState); // preMenu.js
-    game.state.add('load', loadState); // preMenu.js
-    game.state.add('name', nameState); // preMenu.js
+		//loading game sounds
+		beepSound = game.add.audio('sound_beep');   // game sound
+		okSound = game.add.audio('sound_ok');       // correct answer sound
+		errorSound = game.add.audio('sound_error'); // wrong answer sound
 
-    game.state.add('menu', menuState); // menu.js
+		// Calls first screen seen by the player
+		game.state.start('language');
+	
+	}
+	
+};
 
-    game.state.add('map', mapState); // map.js
+// Adding game states
 
-	game.state.add('difficulty', difficultyState); // difficulty.js
+game.state.add('language', langState); // preMenu.js
+game.state.add('load', loadState); // preMenu.js
+game.state.add('name', nameState); // preMenu.js
 
-    game.state.add('gameCircleOne', gameCircleOne); // circleOne.js
-    game.state.add('gameSquareOne', gameSquareOne); // squareOne.js
-    game.state.add('gameSquareTwo', gameSquareTwo); // squareTwo.js
+game.state.add('menu', menuState); // menu.js
 
-	game.state.add('end', endState); // end.js
+game.state.add('map', mapState); // map.js
 
-    let loadAssets = {
+game.state.add('difficulty', difficultyState); // difficulty.js
 
-    	preload: function(){
+game.state.add('gameCircleOne', gameCircleOne); // circleOne.js
+game.state.add('gameSquareOne', gameSquareOne); // squareOne.js
+game.state.add('gameSquareTwo', gameSquareTwo); // squareTwo.js
 
-    		// Auxiliar string that holds the base directory
-	        const imgsrc = 'assets/img/';
+game.state.add('end', endState); // end.js
 
-	        // Progress bar
-			game.load.image('progressBar', imgsrc+'pgbar.png');
-		
-	        // Flags
-	        game.load.image('flag_BR', 	imgsrc+'flag/BRAZ.jpg');
-	        game.load.image('flag_PE', 	imgsrc+'flag/PERU.jpg');
-	        game.load.image('flag_US', 	imgsrc+'flag/UNST.jpg');
-	        game.load.image('flag_FR', 	imgsrc+'flag/FRAN.jpg');
-			game.load.image('flag_IT', 	imgsrc+'flag/ITAL.png');
-			
-	        // Scenario
-	        game.load.image('bgimage', 	imgsrc+'bg.jpg');
-	        game.load.image('bgmap', 	imgsrc+'bg_map.png');
-	        game.load.image('cloud', 	imgsrc+'cloud.png');
-	        game.load.image('floor',	imgsrc+'floor.png');
-			game.load.image('road', 	imgsrc+'road.png');
-			game.load.image('birch', 	imgsrc+'birch.png');
-	        game.load.image('flag', 	imgsrc+'flag.png');
-	        game.load.image('house', 	imgsrc+'house.png');
-	        game.load.image('place_a', 	imgsrc+'place_a.png');
-	        game.load.image('place_b', 	imgsrc+'place_b.png');
-	        game.load.image('garage', 	imgsrc+'garage.png');
-	        game.load.image('farm', 	imgsrc+'farm.png');
-	        game.load.image('rock', 	imgsrc+'rock.png');
-	        game.load.image('school', 	imgsrc+'school.png');
-	        game.load.image('sign',		imgsrc+'sign.png');
-	        game.load.image('tree1', 	imgsrc+'tree.png');
-	        game.load.image('tree2', 	imgsrc+'tree2.png');
-	        game.load.image('tree3', 	imgsrc+'tree3.png');
-	        game.load.image('tree4', 	imgsrc+'tree4.png');
-
-			// Menu icons on the top of the page
-	        game.load.image('back', 	imgsrc+'menu/back.png');
-	        game.load.image('home', 	imgsrc+'menu/home.png');
-	        game.load.image('info', 	imgsrc+'menu/info.png');
-	        game.load.image('world', 	imgsrc+'menu/language.png');
-	        game.load.image('list', 	imgsrc+'menu/menu.png');
-	        game.load.image('help', 	imgsrc+'menu/help.png');
-	        game.load.image('pgbar', 	imgsrc+'menu/progressBar.png');
-	        game.load.image('block', 	imgsrc+'menu/block.png');
-			game.load.spritesheet('audio',	imgsrc+'menu/audio_48x48.png',48,48,2);
-
-	        // Mathematical operators
-	        game.load.image('add',		imgsrc+'operator/add.png');
-	        game.load.image('subtract', imgsrc+'operator/subtract.png');
-	        game.load.image('separator',imgsrc+'operator/separator.png');
-	        game.load.image('equal', 	imgsrc+'operator/equal.png');
-	        
-	        // Feedback icons
-	        game.load.image('h_arrow', 	imgsrc+'help/arrow.png');
-	        game.load.image('h_double', imgsrc+'help/double.png');
-	        game.load.image('h_error', 	imgsrc+'help/error.png');
-	        game.load.image('h_ok', 	imgsrc+'help/ok.png');
-	        game.load.image('down', 	imgsrc+'help/down.png');        
-	        game.load.image('pointer', 	imgsrc+'help/pointer.png');
-	        
-	        // Game sprites        
-	        game.load.spritesheet('kid_run',	imgsrc+'kid/run.png', 82, 178, 12);
-	        game.load.spritesheet('kid_walk', 	imgsrc+'kid/walk.png', 78, 175, 26);
-	        game.load.spritesheet('kid_lost', 	imgsrc+'kid/lost.png', 72, 170, 6);
-	        game.load.spritesheet('tractor', 	imgsrc+'tractor/frame.png', 201, 144, 10);
-	        game.load.image('tractor_green',	imgsrc+'tractor/frame-0.png');
-	        game.load.image('tractor_red', 		imgsrc+'tractor/frame-5.png');
-	        game.load.image('balloon', 			imgsrc+'airballoon_upper.png');
-	        game.load.image('balloon_basket', 	imgsrc+'airballoon_base.png');
-	        
-	        // Sound effects
-	        game.load.audio('sound_ok', ['assets/fx/ok.ogg', 'assets/fx/ok.mp3']);
-	        game.load.audio('sound_error', ['assets/fx/error.ogg', 'assets/fx/error.mp3']);
-	        game.load.audio('sound_beep', ['assets/fx/beep.ogg', 'assets/fx/beep.mp3']);
-
-	        const levelSpriteSource = [
-	        	'1-left-subs.png', 	//square I
-	        	'2-left-subs.png', 	//square II
-	        	'3-left-subs.png',	//circle I
-	        	'4-left-subs.png',	//circle II
-	        	'5.png'				//square III
-	        ];
-	        if(debugMode){
-	        	levelSpriteSource.push(
-		        	'5.png',
-		        	'5.png',
-		        	'5.png',
-		        	'5.png',
-
-		        	'5.png',
-		        	'5.png',
-		        	'5.png',
-		        	'5.png'
-				);
-	    	}
-						
-			//game phases buttons list
-			this.levelSpriteList = [];
-
-	        for(let i=0; i<levelSpriteSource.length; i++){
-	        	this.levelSpriteList[i] = 'game'+i;
-	        	game.load.image(this.levelSpriteList[i], 	imgsrc+'game/'+levelSpriteSource[i]);
-	        }
-			
-			this.levelShapeList = [
-				'Square', 
-				'Square', 
-				'Circle', 
-				'Circle', 
-				'Square',
-			];	
-			if(debugMode){
-				this.levelShapeList.push(
-					'Square', 
-					'Square', 
-					'Square', 
-					'Square',
-
-					'Square', 
-					'Square', 
-					'Square', 
-					'Square'
-				);
-			}
-			
-        	this.levelTypeList  = [
-        		1, 
-        		2, 
-        		1, 
-        		2, 
-        		3
-        	];	       	
-	       	if(debugMode){
-	       		this.levelTypeList.push(
-	        		3, 
-	        		3, 
-	        		3, 
-	        		3,
-
-	        		3, 
-	        		3, 
-	        		3, 
-	        		3
-				);
-	        }
-	        
-    	},
-
-    	create: function(){
-
-			// Centers phaser canvas in its containing div
-			game.scaleMode = Phaser.ScaleManager.SHOW_ALL;
-			game.scale.pageAlignHorizontally = true;
-			game.scale.pageAlignVertically = true;
-			
-			// Enable phaser Arcade Physics system
-			game.physics.startSystem(Phaser.Physics.ARCADE);
-
-			//loading game sounds
-			beepSound = game.add.audio('sound_beep');   // game sound
-	        okSound = game.add.audio('sound_ok');       // correct answer sound
-	        errorSound = game.add.audio('sound_error'); // wrong answer sound
-
-			// Calls first screen seen by the player
-		    game.state.start('language');
-    	
-    	}
-    	
-    };
-
-    game.state.add('loadAssets', loadAssets); // boot.js
-
-	// Calls the first game state in charge of loading all the assets needed for the game
-	game.state.start('loadAssets');
+game.state.add('loadAssets', loadAssets); // boot.js
+
+// Calls the first game state in charge of loading all the assets needed for the game
+
+game.state.start('loadAssets');

js/circleOne.js

@@ -34,7 +34,7 @@ let gameCircleOne = {
         game.add.image(0, 0, 'bgimage');
 
         // Calls function that loads navigation icons
-        iconSettings["func_addButtons"](true,true,
+        iconSettings.func_addIcons(true,true,
                                     true,true,true,
                                     true,false,
                                     'difficulty', this.func_viewHelp);
@@ -44,14 +44,9 @@ let gameCircleOne = {
         game.add.image(660, 80, 'cloud');
         game.add.image(110, 85, 'cloud').scale.setTo(0.8);
         
-        // Styles for labels
-        let stylePlace = { font: '26px Arial', fill: '#400080', align: 'center'};
-        let styleLabel = { font: '26px Arial', fill: '#000080', align: 'center'};
-        let styleMenu = { font: '30px Arial', fill: '#000000', align: 'center'};
-        
         //Floor and road
         startX = 66; //Initial kid and place position
-        if(levelOperator=='Minus') startX = 66+5*156;
+        if(sublevelType=='Minus') startX = 66+5*156;
         
         placeDistance = 156; //Distance between places
         blockSize = 60;
@@ -69,7 +64,7 @@ let gameCircleOne = {
             let place = game.add.image(66+p*placeDistance, 526, 'place_a');
             place.anchor.setTo(0.5);
             place.scale.setTo(0.3);
-            game.add.text(66+p*placeDistance, 560, p , stylePlace).anchor.setTo(0.5); 
+            game.add.text(66+p*placeDistance, 560, p , textStyles.valueLabelBlue).anchor.setTo(0.5); 
         }
         
         //Control variables
@@ -90,7 +85,7 @@ let gameCircleOne = {
         //generator
         //Circles and fractions
         let maxBlocks = levelPosition+1; //Maximum blocks according to difficulty
-        if(levelType=='B' || levelOperator=='Mixed') maxBlocks = 6;
+        if(levelType=='B' || sublevelType=='Mixed') maxBlocks = 6;
         blocks = game.add.group(); //Fraction arrays
         numBlocks = game.rnd.integerInRange(levelPosition, maxBlocks); //Number of blocks
         curBlock = 0; //Actual index block
@@ -119,7 +114,7 @@ let gameCircleOne = {
             
             let direction = '';
             let lineColor = '';
-            if(levelOperator=='Mixed'){
+            if(sublevelType=='Mixed'){
                 if(p<=numPlus){
                     direction = 'Right';
                     lineColor = 0x31314e;
@@ -132,10 +127,10 @@ let gameCircleOne = {
                 direction = directions[rndIndex];
                 if(rndIndex==0) lineColor = 0x31314e;
                 else lineColor = 0xb30000;*/
-            }else if(levelOperator=='Plus'){
+            }else if(sublevelType=='Plus'){
                 direction = 'Right';    
                 lineColor = 0x31314e;
-            }else if(levelOperator=='Minus'){
+            }else if(sublevelType=='Minus'){
                 direction = 'Left';
                 lineColor = 0xb30000;
             }
@@ -159,9 +154,9 @@ let gameCircleOne = {
 
                 if(levelLabel){
                     let labelX = startX;
-                    if(levelOperator=='Minus') labelX -= 65;
+                    if(sublevelType=='Minus') labelX -= 65;
                     else labelX += 65;
-                    let label = game.add.text(labelX, 490-p*blockSize, portion , styleLabel);
+                    let label = game.add.text(labelX, 490-p*blockSize, portion , textStyles.valueLabelBlue);
                     label.anchor.setTo(0.5, 0.5);
                     blockLabel.add(label);
                 }
@@ -174,12 +169,12 @@ let gameCircleOne = {
 
                 if(levelLabel){
                     let labelX = startX;
-                    if(levelOperator=='Minus') labelX -= 65;
+                    if(sublevelType=='Minus') labelX -= 65;
                     else labelX += 65;
                     let separator = game.add.sprite(labelX, 485-p*blockSize, 'separator');
                     separator.anchor.setTo(0.5, 0.5);
                     blockSeparator.add(separator);
-                    let label = game.add.text(labelX, 488-p*blockSize, '1\n'+portion , styleLabel);
+                    let label = game.add.text(labelX, 488-p*blockSize, '1\n'+portion , textStyles.valueLabelBlue);
                     label.anchor.setTo(0.5, 0.5);
                     blockLabel.add(label);
                 }
@@ -240,7 +235,7 @@ let gameCircleOne = {
         kid_walk.scale.setTo(0.8);
         kid_walk.animations.add('right',[0,1,2,3,4,5,6,7,8,9,10,11]);
         kid_walk.animations.add('left',[23,22,21,20,19,18,17,16,15,14,13,12]);
-        if(levelOperator=='Minus'){
+        if(sublevelType=='Minus'){
             kid_walk.animations.play('left', 6, true);
             kid_walk.animations.stop();
         }
@@ -271,9 +266,7 @@ let gameCircleOne = {
                     balloon.alpha = 1;
                     clicked = true;
                     animate = true;
-                    if(audioStatus){
-                        beepSound.play();
-                    }
+                    if(audioStatus) beepSound.play();
                     if(blockDirection[curBlock]=='Right'){
                         kid_walk.animations.play('right', 6, true);
                     }else{
@@ -389,16 +382,12 @@ let gameCircleOne = {
             
             if(flyCounter==0){
                 if(result){
-                    if(audioStatus){
-                        okSound.play();
-                    }
+                    if(audioStatus) okSound.play();
                     passedLevels++;        
                     if(debugMode) console.log("passedLevels = "+passedLevels);
                     okImg.alpha = 1;
                 }else{
-                    if(audioStatus){
-                        errorSound.play();
-                    }
+                    if(audioStatus) errorSound.play();
                     errorImg.alpha = 1;
                 }
             }
@@ -471,9 +460,7 @@ let gameCircleOne = {
             balloon.alpha = 1;
             clicked = true;
             animate = true;
-            if(audioStatus){
-                beepSound.play();
-            }
+            if(audioStatus) beepSound.play();
             if(blockDirection[curBlock]=='Right'){
                 kid_walk.animations.play('right', 6, true);
             }else{
@@ -498,9 +485,7 @@ let gameCircleOne = {
             balloon.alpha = 1;
             clicked = true;
             animate = true;
-            if(audioStatus){
-                beepSound.play();
-            }
+            if(audioStatus) beepSound.play();
             if(blockDirection[curBlock]=='Right'){
                 kid_walk.animations.play('right', 6, true);
             }else{
@@ -522,11 +507,11 @@ let gameCircleOne = {
         let lang_str = "pt_BR"; //TODO NAO esta pegando a lingua definida pelo usuario!
 
         let hr = new XMLHttpRequest();
+        
         // Create some variables we need to send to our PHP file
         let url = "php/save.php";
-        let vars = "s_ip=" + hip + "&s_name=" + username + "&s_lang=" + lang + "&s_game=" + levelShape + "&s_mode=" + levelType;
-
-        vars += "&s_oper=" + levelOperator + "&s_leve=" + levelDifficulty + "&s_posi=" + levelPosition + "&s_resu=" + result + "&s_time=" + totalTime + "&s_deta=" + abst;
+        let vars = "s_ip=" + hip + "&s_name=" + username + "&s_lang=" + langString + "&s_game=" + levelShape + "&s_mode=" + levelType;
+        vars += "&s_oper=" + sublevelType + "&s_leve=" + levelDifficulty + "&s_posi=" + levelPosition + "&s_resu=" + result + "&s_time=" + totalTime + "&s_deta=" + abst;
         
         hr.open("POST", url, true);
         hr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

js/difficulty.js

@@ -11,54 +11,68 @@ let difficultyState = {
     create: function() {
 
         // Calls function that loads navigation icons
-        iconSettings["func_addButtons"](true,true,
+        iconSettings.func_addIcons(true,true,
                                     false,true,false,
                                     true,false,
                                     false,false);
     
-        // Title
-        const style = { font: '28px Arial', fill: '#00804d'};
-        const title = game.add.text(game.world.centerX, 40, lang.game_menu_title, style);
+        // TITLE
+
+        const title = game.add.text(game.world.centerX, 40, lang.game_menu_title, textStyles.title2);
         title.anchor.setTo(0.5, 0.5);
 
-        //SETTING DIFFICULTY LEVELS
+        // LABEL SETTINGS
+
+        // Text : 'with/without' labeling the fractions
+        let labelText = game.add.text(game.world.centerX - 110, 80, "", textStyles.subtitle2);
+        levelLabel ? labelText.text = lang.with_name + " " + lang.label_name : labelText.text = lang.without_name + " " + lang.label_name;
+        labelText.anchor.setTo(0,0.5);
+        // Selection box
+        let selectionBox = game.add.sprite(game.world.centerX - 110 - 30, 75, 'select');
+        levelLabel ? selectionBox.frame=1 : selectionBox.frame=0;
+        selectionBox.anchor.setTo(0.5, 0.5);
+        selectionBox.scale.setTo(0.12);
+        selectionBox.inputEnabled = true;
+        selectionBox.input.useHandCursor = true;
+        selectionBox.events.onInputDown.add(function(){ 
+            if(levelLabel){
+                levelLabel = false; 
+                this.selectionBox.frame = 0; 
+                this.labelText.text = lang.without_name + " " + lang.label_name;
+                if(audioStatus) beepSound.play();
+            }else{ 
+                levelLabel = true; 
+                this.selectionBox.frame = 1; 
+                this.labelText.text = lang.with_name + " " + lang.label_name;
+                if(audioStatus) beepSound.play();
+            }
+        },{selectionBox: selectionBox, labelText: labelText});
+
+        // SETTING DIFFICULTY LEVELS
 
-        const maxHeight = 120; //Max height of a stair        
         let stairHeight; //height growth of a stair
         let stairWidth; //Width of a stair
         let startStair;
         let startSymbol;
-        let startGeometricFigure; // @@ transformar em so uma variavel
+        let startGeometricFigure;
+        const maxHeight = 120;      // Maximum height of a stair        
         
-        switch(gameStateString){
-            case "gameSquareOne":
-                stairHeight = 40;
-                stairWidth = 100;
-                startStair = 320;
-                startSymbol = 180;
-                startGeometricFigure = (startSymbol/2)+startStair+stairWidth*3;
-            break;
-            case "gameSquareTwo":
-                stairHeight = 29;
-                startStair = 240; 
-                startSymbol = 150;
-
-                stairWidth = 80;
-                startGeometricFigure = (startSymbol/2)+startStair+stairWidth*5;
-            break;
-            case "gameCircleOne":
-                stairHeight = 29;
-                startStair = 240; 
-                startSymbol = 150;
-
-                stairWidth = 85;
-                startGeometricFigure = (startSymbol/2)+startStair+stairWidth*5;
-            break;
-            default:
-                console.log("Error! game state name not found!");
+        if(currentGameState == "gameSquareOne"){
+            stairHeight = 40;
+            stairWidth  = 100;
+            startStair  = 320;
+            startSymbol = 180;
+            startGeometricFigure = (startSymbol/2)+startStair+stairWidth*3;
+        }else if(currentGameState == "gameSquareTwo" || currentGameState == "gameCircleOne"){                
+            stairHeight = 29;
+            startStair  = 240; 
+            startSymbol = 150;
+            stairWidth  = 85;
+            startGeometricFigure = (startSymbol/2)+startStair+stairWidth*5;
+        }else{
+            console.log("Error! Name of the game state is not valid!");
         }
 
-        //@@ usar phaser groups ou objetos??
         let geometricFigure = [];
         let levelThemeIcons = [];
         let arrowIcons = [];
@@ -69,22 +83,16 @@ let difficultyState = {
             maxSublevel: null,
             maxDifficulty: null,
             color: ['0x99b3ff', '0xff6666', '0xb366ff'], // blue, red, purple
-
-            operator_1: ['Plus', 'Minus', 'Mixed'],
-            operator_2: ['A', 'B', 'C'],
-            base_y1_1: [135, 285, 435],
-            base_y1_2: [100, 270, 440],
-            get operator() {
-                if (gameStateString == 'gameSquareTwo') return this.operator_2;
-                else return this.operator_1;
+            base_y1: [135, 285, 435],
+            sublevel_1: ['Plus', 'Minus', 'Mixed'],
+            sublevel_2: ['A', 'B', 'C'],
+            get sublevel() {
+                if (currentGameState == 'gameSquareTwo') return this.sublevel_2;
+                else return this.sublevel_1;
             },
-            get base_y1() {
-                if (gameStateString == 'gameSquareTwo') return this.base_y1_2;
-                else return this.base_y1_1;
-            }  
         }
 
-        switch(gameStateString){
+        switch(currentGameState){
             
             case "gameSquareOne":
 
@@ -126,8 +134,8 @@ let difficultyState = {
                 arrowIcons[1] = game.add.sprite(startSymbol, 370, 'h_arrow');
                 arrowIcons[1].scale.setTo(0.3);
                 arrowIcons[1].alpha = 0.9;
-                arrowIcons[1].scale.x *= -1;
                 arrowIcons[1].anchor.setTo(0.5,0.5);
+                arrowIcons[1].scale.x *= -1;
 
             break;
 
@@ -137,27 +145,27 @@ let difficultyState = {
                 aux.maxDifficulty = 5;
 
                 // Blue Circle
-                geometricFigure[0] = game.add.graphics(startGeometricFigure, 195);
+                geometricFigure[0] = game.add.graphics(startGeometricFigure, 175);
                 geometricFigure[0].anchor.setTo(0.5,0.5);
                 geometricFigure[0].lineStyle(2, 0x31314e);
                 geometricFigure[0].beginFill(0xefeff5);
                 geometricFigure[0].drawCircle(0, 0, 60);
                 geometricFigure[0].endFill();
                 // Red Circle
-                geometricFigure[1] = game.add.graphics(startGeometricFigure, 350);
+                geometricFigure[1] = game.add.graphics(startGeometricFigure, 330);
                 geometricFigure[1].anchor.setTo(0.5,0.5);
                 geometricFigure[1].lineStyle(2, 0xb30000);
                 geometricFigure[1].beginFill(0xefeff5);
                 geometricFigure[1].drawCircle(0, 0, 60);
                 geometricFigure[1].endFill();
                 // Both blue and red circles
-                geometricFigure[2] = game.add.graphics(startGeometricFigure-30, 500);
+                geometricFigure[2] = game.add.graphics(startGeometricFigure-30, 485);
                 geometricFigure[2].anchor.setTo(0.5,0.5);
                 geometricFigure[2].lineStyle(2, 0x31314e);
                 geometricFigure[2].beginFill(0xefeff5);
                 geometricFigure[2].drawCircle(0, 0, 60);
                 geometricFigure[2].endFill();
-                geometricFigure[3] = game.add.graphics(startGeometricFigure+40, 500);
+                geometricFigure[3] = game.add.graphics(startGeometricFigure+40, 485);
                 geometricFigure[3].anchor.setTo(0.5,0.5);
                 geometricFigure[3].lineStyle(2, 0xb30000);
                 geometricFigure[3].beginFill(0xefeff5);
@@ -186,10 +194,10 @@ let difficultyState = {
                 arrowIcons[1].alpha = 0.8;
                 arrowIcons[1].anchor.setTo(0.5,0.5);
                 // Both plus and minus arrows
-                arrowIcons[2] = game.add.sprite(startSymbol, 500, 'h_double'); 
+                arrowIcons[2] = game.add.sprite(startSymbol+20, 500, 'h_double'); 
                 arrowIcons[2].scale.setTo(0.5);
-                arrowIcons[2].anchor.setTo(0.5,0.5);
                 arrowIcons[2].alpha = 0.8;
+                arrowIcons[2].anchor.setTo(0.5,0.5);
 
             break;
 
@@ -198,15 +206,14 @@ let difficultyState = {
                 aux.maxSublevel = 3;
                 aux.maxDifficulty = 5;
 
-                levelThemeIcons[0] = game.add.sprite(startSymbol, 300, 'equal');
-                //levelThemeIcons[0].frame = 0;
+                levelThemeIcons[0] = game.add.sprite(startSymbol, 370, 'equal');
                 levelThemeIcons[0].scale.setTo(0.7);
                 levelThemeIcons[0].anchor.setTo(0.5,0.5);
 
             break;
 
             default:
-                console.log("Error: couldn't finish loading difficulty screen");
+                console.log("Error: couldn't finish loading difficulty screen assets");
         }
 
         // Pacing difficulty 'stairs'
@@ -226,13 +233,13 @@ let difficultyState = {
                 // Events
                 stairs[difficulty].inputEnabled = true;
                 stairs[difficulty].input.useHandCursor = true;
-                stairs[difficulty].events.onInputDown.add(this.func_loadMap, {beep: beepSound, difficulty: difficulty, operator: aux.operator[sublevel]});
+                stairs[difficulty].events.onInputDown.add(this.func_loadMap, {beep: beepSound, difficulty: difficulty, sublevelType: aux.sublevel[sublevel]});
                 stairs[difficulty].events.onInputOver.add(function (item) { item.alpha=0.5; }, this);
                 stairs[difficulty].events.onInputOut.add(function (item) { item.alpha=1; }, this);
                 // Labels
                 let xl = x1+stairWidth/2; //x label
                 let yl = y1+(stairHeight*difficulty)/2; //y label
-                let label = game.add.text(xl, yl, difficulty, { font: '25px Arial', fill: '#ffffff', align: 'center' });
+                let label = game.add.text(xl, yl, difficulty, textStyles.difficultyLabel);
                     label.anchor.setTo(0.5, 0.4);
             }
         }
@@ -242,15 +249,13 @@ let difficultyState = {
     // Calls map state
     func_loadMap: function(){
 
-        if(audioStatus){
-            this.beep.play();
-        }
+        if(audioStatus) this.beep.play();
 
-        levelPosition = 0; //Map position
-        levelMove = true; //Move no next point
-        levelDifficulty  = this.difficulty; //Number of difficulty (1 to 5)
-        levelOperator = this.operator; //Type of game
-        passedLevels = 0; //reset the game progress when entering a new level
+        levelPosition   = 0;    //Map position
+        levelMove       = true; //Move no next point
+        levelDifficulty = this.difficulty;  //Number of difficulty (1 to 5)
+        sublevelType    = this.sublevelType;    //Type of game
+        passedLevels    = 0;    //reset the game progress when entering a new level
 
         game.state.start('map');
 

js/end.js

@@ -19,10 +19,7 @@ endState = {
         game.add.image(300, 100, 'cloud');
         game.add.image(660, 80, 'cloud');
         game.add.image(110, 85, 'cloud').scale.setTo(0.8);
-        
-        // Styles for labels
-        let style = { font: '30px Arial', fill: '#000000', align: 'center'};
-        
+                
         //Floor
         for(let i=0;i<9;i++){
             game.add.image(i*100, 501, 'floor');
@@ -33,8 +30,8 @@ endState = {
             let block = game.add.image(660+(p-1)*30, 10, 'block');
             block.scale.setTo(2, 1); //Scaling to double width
         }
-        game.add.text(820, 10, '100%', style);
-        game.add.text(650, 10, lang.difficulty + ' ' + levelDifficulty, style).anchor.setTo(1,0);
+        game.add.text(820, 10, '100%', textStyles.subtitle3);
+        game.add.text(650, 10, lang.difficulty + ' ' + levelDifficulty, textStyles.subtitle3).anchor.setTo(1,0);
         game.add.image(660, 10, 'pgbar');
         
         //School and trees
@@ -42,7 +39,7 @@ endState = {
         game.add.sprite(30, 280 , 'tree4');
         game.add.sprite(360, 250 , 'tree2');
         
-        if(gameStateString == 'gameCircleOne'){
+        if(currentGameState == 'gameCircleOne'){
             //kid
             this.kid = game.add.sprite(0, -152 , 'kid_run');
 
@@ -69,19 +66,15 @@ endState = {
 
     update: function(){
 
-        if(gameStateString == 'gameCircleOne'){
+        if(currentGameState == 'gameCircleOne'){
             
             if(this.kid.y>=460){
                 this.kid.animations.play('walk', 6, true);
                 if(this.kid.x<=700){
                     this.kid.x += 2;
                 }else{
-                    if(levelMenu){
-                        passedLevels = 0;
-                        game.state.start('menu');
-                    }else{
-                        this.kid.animations.stop();
-                    }
+                    passedLevels = 0;
+                    game.state.start('menu');
                 }
             }else{
                 this.balloon.y += 2;
@@ -97,12 +90,8 @@ endState = {
             if(this.kid.x <= 700){
                 this.kid.x += 2;
             }else{
-                if(levelMenu){
-                    passedLevels = 0;
-                    game.state.start('menu');
-                }else{
-                    this.kid.animations.stop();
-                }
+                passedLevels = 0;
+                game.state.start('menu');
             }
         }
 

js/map.js

@@ -15,15 +15,11 @@ let mapState = {
         game.add.image(0, 40, 'bgmap');
         
         // Calls function that loads navigation icons
-        iconSettings["func_addButtons"](true,false,
+        iconSettings.func_addIcons(true,false,
                                     true,true,false,
                                     false,false,
                                     'difficulty',false);
-        
-        // Styles for labels
-        const stylePlace = { font: '26px Arial', fill: '#ffffff', align: 'center'};
-        const styleMenu = { font: '30px Arial', fill: '#000000', align: 'center'};
-        
+                
         // Progress bar
         let percentText = passedLevels*25;
         let percentBlocks = passedLevels;
@@ -33,8 +29,8 @@ let mapState = {
                 block.scale.setTo(2.6, 1);
         }
 
-        game.add.text(820, 10, percentText+'%', styleMenu);
-        game.add.text(650, 10, lang.difficulty + ' ' + levelDifficulty, styleMenu).anchor.setTo(1,0);
+        game.add.text(820, 10, percentText+'%', textStyles.subtitle3);
+        game.add.text(650, 10, lang.difficulty + ' ' + levelDifficulty, textStyles.subtitle3).anchor.setTo(1,0);
         game.add.image(660, 10, 'pgbar');
         
          //Road
@@ -43,7 +39,7 @@ let mapState = {
             'y': [ 486, 422, 358, 294, 230, 166 ]
         };
         
-        if(gameStateString=="gameSquareOne"){
+        if(currentGameState=="gameSquareOne"){
         	//Garage
 	        let garage = game.add.image(this.points.x[0], this.points.y[0], 'garage');
 	        garage.scale.setTo(0.4);
@@ -113,15 +109,14 @@ let mapState = {
             sign.anchor.setTo(0.5, 1);
             sign.scale.setTo(0.4);
             if(p>0 && p<this.points.x.length-1){
-                let text = game.add.text(this.points.x[p]-23, this.points.y[p]-84, p, stylePlace);
+                let text = game.add.text(this.points.x[p]-23, this.points.y[p]-84, p, textStyles.difficultyLabel);
                 text.anchor.setTo(0.35, 0.5);
             }
         }
 
-        if(gameStateString=="gameSquareOne"){
+        if(currentGameState=="gameSquareOne"){
 	    	this.character = game.add.sprite(this.points.x[levelPosition], this.points.y[levelPosition], 'tractor');
 
-	        let walk = this.character.animations.add('walk',[0,1,2,3,4]);
 	        this.character.animations.play('walk', 5, true);
 	        this.character.angle -= 25;
         }else{
@@ -145,22 +140,6 @@ let mapState = {
         // Wait 2 seconds before moving or staring a game
         this.count ++;
         if(this.count<=this.wait) return;
-        
-        // If movement is stopped or position is 6 (final), load game
-    	if(gameStateString=="gameSquareOne"){
-		    if(levelPosition==8){
-	            levelMove = false;
-	        }
-		}else if(gameStateString=="gameCircleOne"){
-			if(levelPosition==6){
-	            levelMove = false;
-	        }
-		}else if(gameStateString=="gameSquareTwo"){
-			if(levelPosition==5){
-	            levelMove = false;
-	        }
-		}
-
 
         if(!levelMove){
             this.func_loadGame();
@@ -186,12 +165,10 @@ let mapState = {
     //MapLoading function
     func_loadGame: function(){
     	
-        if(audioStatus){
-            beepSound.play();
-        }
+        if(audioStatus) beepSound.play();
 
-        if(levelPosition<5){
-        	game.state.start(gameStateString);
+        if(levelPosition<=4){
+        	game.state.start(currentGameState);
         }else{
         	game.state.start('end');
     	}

js/menu.js

@@ -8,145 +8,144 @@
     }
 */
 
+// MENU SCREEN: main menu of the game where the user can select the level he wants to play
 let menuState = {
 
-    inputStartPosition: null,
-    inputEndPosition: null,
-    
-    isCameraMoving: false,
-
-    extraWidth: null,
-
-    title: null,
-    lbl_game: null,
-    player_info: null,
-
-    // creating game menu screen assets
     create: function() {
         
-        if(loadAssets.levelSpriteList.length > 8){
-            let aux = loadAssets.levelSpriteList.length-8;
+        // SCREEN SETTINGS
+
+        // The menu screen can hold up to 8 levels without needing a side scroller
+        // If there are more than 8 levels, sets 'extraWidth'
+        if(loadAssets.levelTypeList.length > 8){
+            const aux = loadAssets.levelTypeList.length - 8;
+            // Each extra column holds 2 levels 
             this.extraWidth = (aux%2==0) ? (aux/2)*235 : ((aux+1)/2)*235;
         }else{
             this.extraWidth = 0;
         }
 
-        // CAMERA
+        // Refreshes stage size to have the 'extraWidth' if necessary (visible part of the screen remains the default)
         this.game.world.setBounds(0, 0, this.game.world.width + this.extraWidth, this.game.world.height);
 
-        // Floor
-        for(let i=0;i<this.game.world.width/100;i++){
-            game.add.image(i*100, 501, 'floor');
-        }
         // LABELS
 
-        // Player name
-        this.player_info = game.add.text(this.game.world.centerX - this.extraWidth/2, 40, lang.welcome + ", " + username + "!", { font: "20px Arial", fill: "#330000", align: "center" });        
+        // Adds Overtitle: Welcome, <player name>!
+        this.player_info = game.add.text(this.game.world.centerX - this.extraWidth/2, 40, lang.welcome + ", " + username + "!", textStyles.overtitle);        
         this.player_info.anchor.setTo(0.5,0.5);
 
-        // Title : Select a game
-        const style = { font: "32px Arial", fill: "#00804d", align: "center" };
-        this.title = game.add.text(this.game.world.centerX - this.extraWidth/2, 80, lang.menu_title, style);
+        // Adds Title : Select a game
+        this.title = game.add.text(this.game.world.centerX - this.extraWidth/2, 80, lang.menu_title, textStyles.title);
         this.title.anchor.setTo(0.5,0.5);
 
-        // Subtitle : Game mode 
-        const style_game = { font: "27px Arial", fill: "#003cb3", align: "center" };
-        this.lbl_game = game.add.text(this.game.world.centerX - this.extraWidth/2, 110, "", style_game);
+        // Adds Subtitle : <game mode> 
+        this.lbl_game = game.add.text(this.game.world.centerX - this.extraWidth/2, 110, "", textStyles.subtitle);
         this.lbl_game.anchor.setTo(0.5,0.5);
 
-        // BUTTONS
+        // ICONS
 
         // Calls function that loads navigation icons
-		iconSettings["func_addButtons"](false,true,
-    	                             false,false,false,
-                                     true,true,
-                                     false,false);
-        
-        // Game buttons
-		let x = -350;
-		let y = -70;
-        let menuObjList = [];
-		for(let i=0; i<loadAssets.levelSpriteList.length; i++){
+		iconSettings.func_addIcons(false,true,
+                                    false,false,false,
+                                    true,true,
+                                    false,false);
+
+        // BACKGROUND
+
+        // Adds floor
+        for(let i=0;i<this.game.world.width/100;i++){
+            game.add.image(i*100, 501, 'floor');
+        }
+
+        // GAME LEVELS BUTTONS
+ 
+        // Base coordinates for level buttons
+		let x = -350; // First column
+		let y = -70; // Top line
+        const menuObjList = [];
+
+		for(let i=0; i<loadAssets.levelTypeList.length; i++){
+            // Adds level buttons
 			menuObjList[i] = game.add.sprite(defaultWidth/2 + x, this.game.world.centerY + y, 'game'+i);
-			menuObjList[i].anchor.setTo(0.5, 0.5);
+            menuObjList[i].anchor.setTo(0.5, 0.5);
+            // Events
 	        menuObjList[i].inputEnabled = true;
 	        menuObjList[i].input.useHandCursor = true;
-            menuObjList[i].events.onInputDown.add(this.func_loadGame,{levelType: loadAssets.levelTypeList[i], beep: beepSound, shape: loadAssets.levelShapeList[i], label : true, game: this.game, extraWidth: this.extraWidth});
-	        menuObjList[i].events.onInputOver.add(this.func_showTitle,{levelType: loadAssets.levelTypeList[i], beep: beepSound, shape : loadAssets.levelShapeList[i], label : true, menu: menuObjList[i], lbl_game: this.lbl_game});
-	        menuObjList[i].events.onInputOut.add(this.func_clearTitle, {menu: menuObjList[i], lbl_game: this.lbl_game});
-			if((i+1)%2==1){
-				y=90;
+            menuObjList[i].events.onInputDown.add(this.func_loadGame,{levelType: loadAssets.levelTypeList[i], beep: beepSound, shape: loadAssets.levelShapeList[i], game: this.game, extraWidth: this.extraWidth});
+	        menuObjList[i].events.onInputOver.add(this.func_showTitle,{levelType: loadAssets.levelTypeList[i], beep: beepSound, shape : loadAssets.levelShapeList[i], menu: menuObjList[i], lbl_game: this.lbl_game});
+            menuObjList[i].events.onInputOut.add(this.func_clearTitle, {menu: menuObjList[i], lbl_game: this.lbl_game});
+            // Refreshes coordinates for next button
+			if(i%2==0){
+				y = 90; // The next will be at the bottom line
 			}else{
-				y=-70; 
-				x+=235;
+				y = -70; // The next will be at the top line
+				x += 235; // The next will be at the next column
 			}
         }
 
-        // TURNING MOUSE INPUT CAPTURE ON TO MANAGE PAGE SCROLL
+        // TURNING 'MOUSE INPUT CAPTURE' ON TO MANAGE PAGE SCROLL
         this.input.mouse.capture = true;
 
     },
 
+    // MANAGES SIDE SCROLLING
     update: function(){
         
-
+        // On mouse release calls function
         if(this.input.activePointer.leftButton.isUp){
             this.inputUp();
         }
 
+        // On mouse click calls function
         if(this.input.activePointer.leftButton.isDown){
             this.inputDown();
         }
 
+        // If true side scrolls
         if(this.isCameraMoving){
-            this.camera.x += (this.inputStartPosition.x - this.input.activePointer.x)/50;
-            this.title.x = (this.game.world.centerX - this.extraWidth/2) + this.camera.x;
-            this.lbl_game.x = (this.game.world.centerX - this.extraWidth/2) + this.camera.x;
-            this.player_info.x = (this.game.world.centerX - this.extraWidth/2) + this.camera.x;
-
-            iconSettings["changeRightButtonX"]((defaultWidth) + this.camera.x);
+            // 'this.camera' is a shorthand for 'World.camera' defined by Phaser
+            this.camera.x      += (this.inputStartPosition.x - this.input.activePointer.x)/50;
+
+            // Elements that appear fixed in the screen
+            this.title.x        = (this.game.world.centerX - this.extraWidth/2) + this.camera.x;
+            this.lbl_game.x     = (this.game.world.centerX - this.extraWidth/2) + this.camera.x;
+            this.player_info.x  = (this.game.world.centerX - this.extraWidth/2) + this.camera.x;
+            iconSettings.func_refreshRightIcons_x( (defaultWidth) + this.camera.x );
         }
 
     },
     
+    // ON RELEASE
+    inputUp: function(){
+        this.isCameraMoving = false;
+    },
+    
+    // ON CLICK
     inputDown: function(){
         if(!this.isCameraMoving){
             this.inputStartPosition = new Phaser.Point(this.input.activePointer.x, this.input.activePointer.y);
         } 
-
+        // Allows side scrolling to be checked as true
         this.isCameraMoving = true;
-
-    },
-
-    inputUp: function(){
-        this.isCameraMoving = false;
     },
 
     //calls the selected game menu screen
     func_loadGame: function(){
 
-        if(debugMode) console.log("antes: "+this.game.world.width);
+        // Sets stage width back to default
+        if(debugMode) console.log("stage width (before): " + this.game.world.width);
         this.game.world.setBounds(0, 0, defaultWidth, this.game.world.height);
-        if(debugMode) console.log("depois: "+this.game.world.width);
+        if(debugMode) console.log("stage width (after): " + this.game.world.width);
 
-        if(audioStatus){
-            this.beep.play();
-        }
+        if(audioStatus) this.beep.play();
 
         levelShape = this.shape;
-        levelLabel = this.label;
+        levelType = this.levelType;
 
-        if     (this.levelType==1) levelType = "A";
-        else if(this.levelType==2) levelType = "B";
-        else if(this.levelType==3) levelType = "C";
-
-        if(levelType=="C"){
-            gameStateString = "game"+levelShape+"Two";
-            if(debugMode) console.log(levelShape+" Two, "+levelType);
-        }else{
-            gameStateString = "game"+levelShape+"One";
-            if(debugMode) console.log(levelShape+" One, "+levelType);
-        }
+        if(levelType=="C") currentGameState = "game"+levelShape+"Two";
+        else currentGameState = "game"+levelShape+"One";
+         
+        if(debugMode) console.log(currentGameState+", "+levelType);
 
         // Calls level difficulty screen
         game.state.start('difficulty');
@@ -154,40 +153,29 @@ let menuState = {
 
     func_showTitle: function(){
         
-        let title = "";
-        let type = "";
+        let title = "", type = "";
         
-        if(this.levelType==1){
-            type = "I";
-        }
-        if(this.levelType==2){
-            type = "II";
-        }
-        if(this.levelType==3){
-            type = "III";
-        }
+        if(this.levelType=='A') type = "I";
+        else if(this.levelType=='B') type = "II";
+        else if(this.levelType=='C') type = "III";
         
-        if(this.shape=="Circle"){
-            title += lang.circle_name;
-        }else if(this.shape=="Square"){
-            title += lang.square_name;
-        }
+        if(this.shape=="Circle")      title += lang.circle_name;
+        else if(this.shape=="Square") title += lang.square_name;
         
-        if(type!=""){
-          //circ/quad       I/II/III
-            title  += " " + type;
-        }
+        if(type!="") title += " " + type;
 
+        // Shows level title on the label
         this.lbl_game.text = title;
-
+        // Increases size of button when mouse is on top of it
         this.menu.scale.setTo(1.05);
 
     },
 
     func_clearTitle: function(){
         
+        // Removes text from label
         this.lbl_game.text = "";
-        
+        // changes button size back to default
         this.menu.scale.setTo(1);
 
     }

js/preMenu.js

@@ -19,21 +19,19 @@
     };
 
     let iconSettings = {
-        func_addButtons: function(_,_,_,_,_,_,_,_,_){},
-        loadState: function(){}
+        func_addIcons: function(_,_,_,_,_,_,_,_,_){},
+        func_callState: function(){}
     };
 */
 
-// Language screen: the player can choose a preferred language for the game text to be displayed
+// LANGUAGE SCREEN: the player can choose a preferred language for the game text to be displayed
 let langState = {
 
     create: function() {
 
-        //
+        // Sets stage width back to default if we are back from 'menu' state where it can be extended 
         if(this.game.world.width != defaultWidth) this.game.world.setBounds(0, 0, defaultWidth, this.game.world.height);
 
-        const style = { font: '28px Arial', fill: '#00804d', align: 'center' };
-
         game.stage.backgroundColor = '#cce5ff';
         
         // Preparing and setting language screen elements
@@ -50,7 +48,7 @@ let langState = {
 
         for(let i=0; i<langs.lang.length; i++){
             // Add text for language names
-            const titleList = game.add.text(this.game.world.centerX + langs.x_text[i], this.game.world.centerY + langs.y[i], langs.text[i], style);
+            const titleList = game.add.text(this.game.world.centerX + langs.x_text[i], this.game.world.centerY + langs.y[i], langs.text[i], textStyles.title2);
             titleList.anchor.setTo(1, 0.5);
             // Add images for flags
             langs.list[i] = game.add.sprite(this.game.world.centerX + langs.x_flag[i], this.game.world.centerY + langs.y[i], langs.flag[i]);       
@@ -65,10 +63,10 @@ let langState = {
 
     },
     
-    // Calls loading screen 
+    // Calls loading screen while loads language
     func_setLang: function(){
-        // Temporarily sets value of global 'lang' to chosen language
-        lang = this.langs_lang;
+        // Sets value of global 'langString' to chosen language name e.g 'pt_BR'
+        langString = this.langs_lang;
         // Calls loading screen
         game.state.start('load');
     
@@ -76,7 +74,7 @@ let langState = {
 
 };
 
-// Loading screen: shows loading bar while loads json dictionary
+// LOADING SCREEN: shows loading bar while loads and sets json dictionary
 let loadState = {
     
     preload: function() {
@@ -86,7 +84,7 @@ let loadState = {
         game.load.setPreloadSprite(progressBar);
 
         // Loads jason dictionary, setting the game language chosen by the player
-        game.load.json('dictionary', 'assets/languages/'+lang+'.json');
+        game.load.json('dictionary', 'assets/languages/'+langString+'.json');
         
     },
 
@@ -94,33 +92,29 @@ let loadState = {
 
         // Set value of global 'lang' to json's dictionary 
         lang = game.cache.getJSON('dictionary');
+        if(debugMode) console.log("language: " + langString); 
         
-        // Set screens flow
-        if(firstTime==true){ // first time opening ifractions goes from 'language' to 'name' screen then 'menu'
-          firstTime = false;
-          game.state.start('name'); 
-        }else{               // changing language during the game skips 'name' screen
-          game.state.start('menu');
-        }
+        if(this.firstTime == undefined){ // first time opening ifractions goes from 'language' to 'name' then 'menu' screens 
+            this.firstTime = false;
+            game.state.start('name');
+        }else game.state.start('menu'); // if changing language during the game skips 'name' screen          
     
     }
 
 };
 
-// Name screen: Asks for player's name 
+// NAME SCREEN: asks for player's name 
 let nameState = {
 
     create: function() {
-                    
-        const style = { font: '30px Arial', fill: '#00804d', align: 'center' };
-        
+          
         // Set title and error text
 
-        const title = game.add.text(this.game.world.centerX, this.game.world.centerY - 100, lang.insert_name, style);
+        const title = game.add.text(this.game.world.centerX, this.game.world.centerY - 100, lang.insert_name, textStyles.title);
         title.anchor.setTo(0.5);
         
-        errorEmptyName = game.add.text(this.game.world.centerX, this.game.world.centerY - 70, "", {font: '18px Arial', fill: '#330000', align: 'center'});
-        errorEmptyName.anchor.setTo(0.5);
+        this.errorEmptyName = game.add.text(this.game.world.centerX, this.game.world.centerY - 70, "", textStyles.overtitle);
+        this.errorEmptyName.anchor.setTo(0.5);
 
         // Set button that gets player's information
         
@@ -138,40 +132,36 @@ let nameState = {
         btn.events.onInputOut.add(function(){ btn.alpha=0.5 });
 
         // Set button Text
-        const ready = game.add.text(this.game.world.centerX + 1, this.game.world.centerY + 102, lang.ready, { font: '34px Arial', fill: '#f0f5f5', align: 'center' });
+        const ready = game.add.text(this.game.world.centerX + 1, this.game.world.centerY + 102, lang.ready, textStyles.buttonLabel);
         ready.anchor.setTo(0.5);      
 
         // Makes text field visible
         document.getElementById("text-field-div").style.visibility = "visible";
         
-        // Accepts "enter" as button click
+        // Does the same as the button click when the player presses "enter"
         document.getElementById("name_id").addEventListener('keypress', function(e){
             let keycode = e.keycode ? e.keycode : e.which; 
-            if(keycode == 13){
-                nameState["func_checkEmptyName"]();
-            }     
+            if(keycode == 13) nameState.func_checkEmptyName();
         });
 
     },
          
     func_checkEmptyName: function() {
 
-        // If text field is NOT empty will call function that saves the player's name
-        if(document.getElementById("name_id").value!=""){
-            errorEmptyName.setText("");
-            nameState["func_saveName"]();
-        }else{
-            errorEmptyName.setText(lang.empty_name); // Displays error message
+        // If text field is empty displays error message
+        if(document.getElementById("name_id").value==""){ 
+            nameState.errorEmptyName.setText(lang.empty_name);
+        }else{ // If text field is NOT empty calls function that saves the player's name
+            nameState.func_saveName();
         }
 
     },
 
-    // Calls menu screen
     func_saveName: function() {
         
         // Saves player's input in global variable 'username'
         username = document.getElementById("name_id").value;
-        if(debugMode) console.log("user is " + username);        
+        if(debugMode) console.log("username: " + username);        
 
         // Hides and clears text field
         document.getElementById("text-field-div").style.visibility = "hidden";
@@ -179,17 +169,18 @@ let nameState = {
 
         if(audioStatus) beepSound.play();
 
-        // Calls menu state
+        // Calls 'menu' state
         game.state.start('menu');
         
     }
 
 };
 
+// Control navigation icons on the top of the screens
 let iconSettings = {
 
-    // Add navigation icons on the top of the page based the entered parameters
-    func_addButtons: function(left_side, right_side, left_btn0, left_btn1, left_btn2, right_btn0, right_btn1, level, helpBtn){
+    // Add navigation icons on the top of the screen based the entered parameters
+    func_addIcons: function(left_side, right_side, left_btn0, left_btn1, left_btn2, right_btn0, right_btn1, level, helpBtn){
         
         this.left_x = 10;
         this.right_x = defaultWidth - 50 - 10;
@@ -197,93 +188,114 @@ let iconSettings = {
         // Labels for the navigation icons
 
         if(left_side){
-            this.left_text = game.add.text(this.left_x, 53, "", 
-                { font: "20px Arial", fill: "#330000", align: "center" });
+            this.left_text = game.add.text(this.left_x, 53, "", textStyles.overtitle);
         }
 
         if(right_side){
-            this.right_text = game.add.text(this.right_x+50, 53, "", 
-                { font: "20px Arial", fill: "#330000", align: "right" });
+            this.right_text = game.add.text(this.right_x+50, 53, "", textStyles.overtitle);
             this.right_text.anchor.setTo(1,0.02);
         }
 
-        // Buttons on the left side of the page
+        // Buttons on the LEFT side of the page
 
         if(left_btn0){ // Return to select difficulty screen
-            this.icon_back = game.add.sprite(this.left_x, 10, 'back'); 
+            this.icon_back = game.add.sprite(this.left_x, 10, 'back');
+            // Events
             this.icon_back.inputEnabled = true;
             this.icon_back.input.useHandCursor = true;
-            this.icon_back.events.onInputDown.add(this.loadState, {state: level, beep: beepSound});
+            this.icon_back.events.onInputDown.add(this.func_callState, {state: level, beep: beepSound});
             this.icon_back.events.onInputOver.add(function(){ this.left_text.text = lang.menu_back},{left_text: this.left_text});
             this.icon_back.events.onInputOut.add(function(){ this.left_text.text = ""},{left_text: this.left_text});
-            
-            this.left_x+=50;
+            // Offsets value of x for next icon
+            this.left_x += 50;
         }
 
         if(left_btn1){ // Return to main menu screen
-            this.icon_list = game.add.sprite(this.left_x, 10, 'list'); 
+            this.icon_list = game.add.sprite(this.left_x, 10, 'list');
+            // Events
             this.icon_list.inputEnabled = true;
             this.icon_list.input.useHandCursor = true;
-            this.icon_list.events.onInputDown.add(this.loadState, {state: "menu", beep: beepSound});
+            this.icon_list.events.onInputDown.add(this.func_callState, {state: "menu", beep: beepSound});
             this.icon_list.events.onInputOver.add(function(){ this.left_text.text = lang.menu_list},{left_text: this.left_text});
             this.icon_list.events.onInputOut.add(function(){ this.left_text.text = ""},{left_text: this.left_text});
-            
-            this.left_x+=50;
+            // Offsets value of x for next icon
+            this.left_x += 50;
         }
 
         if(left_btn2){ // In some levels, shows solution to the game
             this.icon_help = game.add.sprite(this.left_x, 10, 'help');
+            // Events
             this.icon_help.inputEnabled = true;
             this.icon_help.input.useHandCursor = true;
             this.icon_help.events.onInputDown.add(helpBtn, {beep: beepSound});
             this.icon_help.events.onInputOver.add(function(){ this.left_text.text = lang.menu_help},{left_text: this.left_text});
             this.icon_help.events.onInputOut.add(function(){ this.left_text.text = ""},{left_text: this.left_text});
-            
-            this.left_x+=50;
+            // Offsets value of x for next icon
+            this.left_x += 50;
         }
 
-        // Buttons on the right side of the page
+        // Buttons on the RIGHT side of the page
 
         if(right_btn0){ // Turns game audio on/off
             this.icon_audio = game.add.sprite(this.right_x, 10, 'audio');
             audioStatus ? this.icon_audio.frame = 0 : this.icon_audio.frame = 1;
+            // Events
             this.icon_audio.inputEnabled = true;
             this.icon_audio.input.useHandCursor = true;
             this.icon_audio.events.onInputDown.add(function(){ if(audioStatus){ audioStatus=false; this.icon_audio.frame = 1; }else{ audioStatus=true; this.icon_audio.frame = 0; }},{icon_audio: this.icon_audio});
             this.icon_audio.events.onInputOver.add(function(){ this.right_text.text = lang.audio },{right_text: this.right_text});
             this.icon_audio.events.onInputOut.add(function(){ this.right_text.text = "" },{right_text: this.right_text});
-
-            this.right_x-=50;
+            // Offsets value of x for next icon
+            this.right_x -= 50;
         }
 
         if(right_btn1){ // Return to select language screen
             this.icon_world = game.add.sprite(this.right_x, 10, 'world'); 
             this.icon_world.inputEnabled = true;
             this.icon_world.input.useHandCursor = true;
-            this.icon_world.events.onInputDown.add(this.loadState, {state: "language", beep: beepSound});
+            this.icon_world.events.onInputDown.add(this.func_callState, {state: "language", beep: beepSound});
             this.icon_world.events.onInputOver.add(function(){ this.right_text.text = lang.menu_world },{right_text : this.right_text});
             this.icon_world.events.onInputOut.add(function(){ this.right_text.text = "" },{right_text: this.right_text});
-                  
-            this.right_x-=50;
+            // Offsets value of x for next icon
+            this.right_x -= 50;
         }
 
     },
 
-    changeRightButtonX: function(newWidth){
+    // refresh values of x for icons when menu screen move sideways
+    func_refreshRightIcons_x: function(newWidth){
         this.right_text.x = newWidth - 10;
         this.icon_audio.x = newWidth - 50 - 10;
-        if(debugMode) console.log(this.icon_audio.x+" "+newWidth);
         this.icon_world.x = newWidth - 50 - 50 - 10;
     },
 
+    func_callState: function(){
 
-    loadState: function(){
-
-        if(audioStatus){
-            this.beep.play();
-        }
+        if(audioStatus) this.beep.play();
+        
         game.state.start(this.state);
     
     }
 
-};
+};
+
+let textStyles = {
+
+    title:     { font: "32px Arial", fill: "#00804d", align: "center" }, // large green
+    title2:    { font: "27px Arial", fill: "#00804d", align: "center" }, // medium green
+
+    subtitle:  { font: "27px Arial", fill: "#003cb3", align: "center" }, // medium blue
+    subtitle2: { font: "27px Arial", fill: "#000000", align: "center" }, // medium black
+    subtitle3: { font: "30px Arial", fill: "#000000", align: "center" }, // black
+    
+    overtitle: { font: "20px Arial", fill: "#330000", align: "center" }, // small red-ish brown
+
+    buttonLabel:     { font: '34px Arial', fill: '#f0f5f5', align: 'center' }, // almost white
+    difficultyLabel: { font: '25px Arial', fill: '#ffffff', align: 'center' }, // white
+
+    valueLabelBlue:     { font: '26px Arial', fill: '#000080', align: 'center' }, // blue
+    valueLabelBlue3:    { font: '20px Arial', fill: '#000080', align: 'center' }, // blue
+    valueLabelBlue2:    { font: '15px Arial', fill: '#000080', align: 'center' }, // blue
+
+}
+

js/squareOne.js

@@ -34,24 +34,19 @@ let gameSquareOne = {
         game.add.image(0, 0, 'bgimage');
         
         // Calls function that loads navigation icons
-        iconSettings["func_addButtons"](true,true,
+        iconSettings.func_addIcons(true,true,
                                     true,true,true,
                                     true,false,
                                     'difficulty', this.func_viewHelp);
 
         // Clouds
         game.add.image(300, 100, 'cloud');
-        game.add.image(660, 80, 'cloud');
-        game.add.image(110, 85, 'cloud').scale.setTo(0.8);
-                
-        // Font styles for labels
-        const stylePlace = { font: '26px Arial', fill: '#400080', align: 'center'};
-        const styleLabel = { font: '26px Arial', fill: '#000080', align: 'center'};
-        const styleFraction = { font: '15px Arial', fill: '#000080', align: 'center'};
-        
+        game.add.image(660, 80,  'cloud');
+        game.add.image(110, 85,  'cloud').scale.setTo(0.8);
+                        
         //Initial tractor and place position
         let startX = 170;
-        if(levelOperator=='Minus') startX = 730;
+        if(sublevelType=='Minus') startX = 730;
         startX = startX;    //Workaround for initial position inside update
         
         // Width and height of blocks and 'floor gaps'
@@ -74,15 +69,15 @@ let gameSquareOne = {
                 
         //tractor
         let tractorAlign = -80;
-        if(levelOperator=='Minus'){
+        if(sublevelType=='Minus'){
             tractorAlign *= -1;
         } 
-        tractor = game.add.sprite(startX+tractorAlign, 445, 'tractor');
-        tractor.anchor.setTo(0.5, 0.5);
-        tractor.scale.setTo(0.8);
-        tractor.animations.add('right',[0,1,2,3,4]);
-        if(levelOperator=='Minus'){
-            tractor.scale.x *= -1;
+        this.tractor = game.add.sprite(startX+tractorAlign, 445, 'tractor');
+        this.tractor.anchor.setTo(0.5, 0.5);
+        this.tractor.scale.setTo(0.8);
+        this.tractor.animations.add('right',[0,1,2,3,4]);
+        if(sublevelType=='Minus'){
+            this.tractor.scale.x *= -1;
         }
 
         //generator
@@ -91,7 +86,7 @@ let gameSquareOne = {
         if(debugMode) console.log("pos " +levelPosition); // position in the game map
         
         maxBlocks = levelPosition+4; //Maximum blocks
-        if(levelType=='B' || levelOperator=='Mixed') maxBlocks = 10;
+        if(levelType=='B' || sublevelType=='Mixed') maxBlocks = 10;
         blocks = game.add.group(); //Fraction arrays (apilled)
         numBlocks = game.rnd.integerInRange(levelPosition+2, maxBlocks); //Number of blocks
         
@@ -105,7 +100,7 @@ let gameSquareOne = {
         //blockAngle = []; //Angles of blocks
         //blockTraceColor = []; //Trace colors
         endPosition = startX; //Ending position, accumulative
-        if(levelOperator=='Minus') endPosition -= blockWidth;
+        if(sublevelType=='Minus') endPosition -= blockWidth;
         else endPosition += blockWidth;
         
         //Game A exclusive variables 
@@ -117,7 +112,7 @@ let gameSquareOne = {
         
         //Game B exclusive variables
         arrowPlace = startX; //Fixed place for help arrow
-        if(levelOperator=='Minus') arrowPlace  -= blockWidth;
+        if(sublevelType=='Minus') arrowPlace  -= blockWidth;
         else arrowPlace += blockWidth;
         fractionClicked = false; //If clicked a fraction (game B)
         fractionIndex = -1; //Index of clicked fraction (game B)
@@ -134,10 +129,10 @@ let gameSquareOne = {
             let direction = '';
             let lineColor = '';
             
-            if(levelOperator=='Plus'){
+            if(sublevelType=='Plus'){
                 direction = 'Right';    
                 lineColor = 0x31314e; //plus block: "black'
-            }else if(levelOperator=='Minus'){
+            }else if(sublevelType=='Minus'){
                 direction = 'Left';
                 lineColor = 0xb30000;//minus block : "red"
             }
@@ -158,9 +153,9 @@ let gameSquareOne = {
 
                 if(levelLabel){
                     let labelX = startX;
-                    if(levelOperator=='Minus') labelX -= (15+blockWidth);
+                    if(sublevelType=='Minus') labelX -= (15+blockWidth);
                     else labelX += blockWidth+15;
-                    let label = game.add.text(labelX, 480-p*blockHeight, portion , styleLabel);
+                    let label = game.add.text(labelX, 480-p*blockHeight, portion , textStyles.valueLabelBlue);
                     label.anchor.setTo(0.5, 0.5);
                     blockLabel.add(label);
                 }
@@ -175,13 +170,13 @@ let gameSquareOne = {
 
                 if(levelLabel){
                     let labelX = startX;
-                    if(levelOperator=='Minus') labelX -= (15+distance);
+                    if(sublevelType=='Minus') labelX -= (15+distance);
                     else labelX += 15+distance;
                     let separator = game.add.sprite(labelX, 480-p*blockHeight, 'separator');
                     separator.scale.setTo(0.6);
                     separator.anchor.setTo(0.5, 0.5);
                     blockSeparator.add(separator);
-                    let label = game.add.text(labelX, 483-p*blockHeight, '1\n'+portion , styleFraction);
+                    let label = game.add.text(labelX, 483-p*blockHeight, '1\n'+portion , textStyles.valueLabelBlue2);
                     label.anchor.setTo(0.5, 0.5);
                     blockLabel.add(label);
                 }
@@ -201,7 +196,7 @@ let gameSquareOne = {
                 block.alpha = 0.5;
                 block.inputEnabled = true;
                 block.input.useHandCursor = true;
-                block.events.onInputDown.add(this.func_clickSquare, {indice: p});
+                block.events.onInputDown.add(this.func_clickSquare, {indice: p, tractor: this.tractor});
                 block.events.onInputOver.add(this.func_overSquare, {indice: p});
                 block.events.onInputOut.add(this.func_outSquare, {indice: p});
             }
@@ -219,9 +214,9 @@ let gameSquareOne = {
         //If end position is out of bounds, restart
         if(!hasFigure) game.state.start('gameSquareOne');
         
-        if (levelOperator=='Plus' && (endPosition<(startX+blockWidth) || endPosition>(startX+8*blockWidth))){
+        if (sublevelType=='Plus' && (endPosition<(startX+blockWidth) || endPosition>(startX+8*blockWidth))){
             game.state.start('gameSquareOne');
-        }else if (levelOperator=='Minus' && (endPosition>(startX) || endPosition<(startX-(8*blockWidth)))){
+        }else if (sublevelType=='Minus' && (endPosition>(startX) || endPosition<(startX-(8*blockWidth)))){
             game.state.start('gameSquareOne');
         }
         
@@ -249,11 +244,11 @@ let gameSquareOne = {
         for(let i = 0; i < floorCount; i++){
             let posX = startX;
             
-            if(levelOperator=='Minus') posX -= (blockWidth + i*widFloor);
+            if(sublevelType=='Minus') posX -= (blockWidth + i*widFloor);
             else posX += (blockWidth + i*widFloor);
             
             if(levelType=='B'){
-                if(levelOperator=='Minus'){
+                if(sublevelType=='Minus'){
                     if(posX<=arrowPlace){
                         floorCount = i+1;
                         floorIndex = i-1;
@@ -275,13 +270,13 @@ let gameSquareOne = {
                 block.beginFill(0xa8c0e6);
                 block.drawRect(0, 0, widFloor, blockHeight);
                 block.endFill();
-            if(levelOperator=='Minus') block.scale.x *= -1;
+            if(sublevelType=='Minus') block.scale.x *= -1;
             
             if(levelType=="A"){
                 block.alpha = 0.5;
                 block.inputEnabled = true;
                 block.input.useHandCursor = true;
-                block.events.onInputDown.add(this.func_clickSquare, {indice: i});
+                block.events.onInputDown.add(this.func_clickSquare, {indice: i, tractor: this.tractor});
                 block.events.onInputOver.add(this.func_overSquare, {indice: i});
                 block.events.onInputOut.add(this.func_outSquare, {indice: i});
             }
@@ -291,10 +286,10 @@ let gameSquareOne = {
         
         for(let i=0;i<=8;i++){
             let posX = startX;
-            if(levelOperator=='Minus')posX -= ((9-i)*blockWidth);
+            if(sublevelType=='Minus')posX -= ((9-i)*blockWidth);
             else posX+=((i+1)*blockWidth);
             
-            game.add.text(posX, 560, i , stylePlace).anchor.setTo(0.5, 0.5); 
+            game.add.text(posX, 560, i, textStyles.valueLabelBlue).anchor.setTo(0.5, 0.5); 
         }
         
         //ok and error images
@@ -338,9 +333,9 @@ let gameSquareOne = {
         if(animate){
 
             if(blockDirection[curBlock]=='Right'){
-                tractor.x+=2;
+                this.tractor.x+=2;
             }else if(blockDirection[curBlock]=='Left'){
-                tractor.x-=2;
+                this.tractor.x-=2;
             }
                         
             for(let i=0;i<numBlocks;i++){ //Moving every block
@@ -389,7 +384,7 @@ let gameSquareOne = {
         
         //Check if tractor has blocks left or floor holes
         if(checkCollide){
-            tractor.animations.stop();
+            this.tractor.animations.stop();
             timer.stop();
             //Check left blocks
             let resultBlock = true;
@@ -418,17 +413,13 @@ let gameSquareOne = {
             
             if(moveCounter==0){
                 if(result){
-                    tractor.animations.play('right', 6, true);
-                    if(audioStatus){
-                        okSound.play();
-                    }
+                    this.tractor.animations.play('right', 6, true);
+                    if(audioStatus) okSound.play();
                     passedLevels++;        
                     if(debugMode) console.log("passedLevels = "+passedLevels); 
                     okImg.alpha = 1;
                 }else{
-                    if(audioStatus){
-                        errorSound.play();
-                    }
+                    if(audioStatus) errorSound.play();
                     errorImg.alpha = 1;
                 }
             }
@@ -436,10 +427,10 @@ let gameSquareOne = {
             moveCounter += 1;
             
             if(result){
-                if(levelOperator=='Minus'){
-                    tractor.x -=2;
+                if(sublevelType=='Minus'){
+                    this.tractor.x -=2;
                 }else{
-                    tractor.x +=2;
+                    this.tractor.x +=2;
                 }
             }
             
@@ -517,10 +508,8 @@ let gameSquareOne = {
                 arrow.alpha = 1;
                 clicked = true;
                 animate = true;
-                if(audioStatus){
-                    beepSound.play();
-                }            
-                tractor.animations.play('right', 5, true);
+                if(audioStatus) beepSound.play();            
+                this.tractor.animations.play('right', 5, true);
                 
                 if(levelLabel){ //Hiding labels
                     blockLabel.visible = false;
@@ -528,7 +517,7 @@ let gameSquareOne = {
                 }
                 
                 //cleaning path
-                if(levelOperator=='Minus'){
+                if(sublevelType=='Minus'){
                     for(let i=0; i< floorCount; i++){
                         if(i>floorIndex){
                             floorBlocks.children[i].alpha = 0;
@@ -561,10 +550,8 @@ let gameSquareOne = {
                 arrow.alpha = 0;
                 clicked = true;
                 animate = true;
-                if(audioStatus){
-                    beepSound.play();
-                }
-                tractor.animations.play('right', 5, true);
+                if(audioStatus) beepSound.play();
+                this.tractor.animations.play('right', 5, true);
 
                 if(levelLabel){ //Hiding labels
                     blockLabel.visible = false;
@@ -580,28 +567,6 @@ let gameSquareOne = {
         // Get correct information about username and default language
     	// Variables 'username' and 'lang' is define on: js/menu.js
     	// Variable 'lang' has all the JSON content of 'assets/languages/pt_BR.json', 'lang.lang' defined in 'js/preMenu.js' (func_setLang())
-    	// TODO: nao descobri esquema para pegar 'lang' (como 'pt_BR' ou 'en_US'), 'lang' esta' com o dicinario de lingua (definido em 'assets/languages/pt_BR.json').
-        
-        //if (name=='') name = username; //leo the correct is 'username'
-        
-        // assets/languages/pt_BR.json
-
-        //DEBUG Testar 'lang'
-        /*
-        
-        let contact = "";
-        if (typeof lang === 'object') {
-          //contact = JSON.parse(lang);
-          for (let i in lang) // will enumerate values of 'assets/languages/pt_BR.json'
-             contact += lang[i];
-          // Finaliza com os valores de 'assets/languages/pt_BR.json': 'CARREGANDOFraçõesSELECIONE UM JOGODificuldadeNívelSELECINAR OPERAÇÃO E DIFICULDADEBom trabalho!Tente novamente!SELECIONAR IDIOMAMENU PRINCIPALVOLTARVER
-          // SOLUÇÃOCírculosQuadriláteroslegendaMODOCOMSEMDIGITE SEU NOMEPRONTOOláVocê deve selecionar uma porção menor que o seu tamanho totalVocê esqueceu de digitar seu nomeÁUDIO'
-          lang_str = contact; aux = 1;
-            }
-            else
-            // if (lang === 'undefined') lang_str = "pt_BR";
-    
-        */
 
         let abst = "numBlocks:" + numBlocks + ", valBlocks: " + detail + " blockIndex: " + blockIndex + ", floorIndex: " + floorIndex;
 
@@ -609,13 +574,8 @@ let gameSquareOne = {
 
         // Create some variables we need to send to our PHP file
         let url = "php/save.php";
-        let vars = "s_ip=" + hip + "&s_name=" + username + "&s_lang=" + lang + "&s_game=" + levelShape + "&s_mode=" + levelType;
-
-        vars += "&s_oper=" + levelOperator + "&s_leve=" + levelDifficulty + "&s_posi=" + levelPosition + "&s_resu=" + result + "&s_time=" + totalTime + "&s_deta=" + abst;
-
-        //D alert('/js/squareOne.js: url=' + url + '; aux=' + aux + ', lang_str=' + lang_str + ', lang=' + lang); //  + ', this.lang=" + this.lang
-        //D /js/squareOne.js: url=php/save.php; aux=1, lang_str=CARREGANDOFraçõesSELECIONE UM JOGODificuldadeNívelSELECINAR OPERAÇÃO E DIFICULDADEBom trabalho!Tente novamente!SELECIONAR IDIOMAMENU PRINCIPALVOLTARVER
-        //D SOLUÇÃOCírculosQuadriláteroslegendaMODOCOMSEMDIGITE SEU NOMEPRONTOOláVocê deve selecionar uma porção menor que o seu tamanho totalVocê esqueceu de digitar seu nomeÁUDIO, lang=[object Object]
+        let vars = "s_ip=" + hip + "&s_name=" + username + "&s_lang=" + langString + "&s_game=" + levelShape + "&s_mode=" + levelType;
+        vars += "&s_oper=" + sublevelType + "&s_leve=" + levelDifficulty + "&s_posi=" + levelPosition + "&s_resu=" + result + "&s_time=" + totalTime + "&s_deta=" + abst;
 
         // Sobre nome do usuario:
     	// * js/squareOne.js: name
@@ -648,7 +608,6 @@ let gameSquareOne = {
             if(levelType=='A'){
                 pointer = game.add.image(endPosition, 490, 'pointer');
             }else{
-                console.log("hey! ---> " + blocks.children[endIndex-1]);
                 pointer = game.add.image(blocks.children[endIndex-1].x, blocks.children[endIndex-1].y-blockSize/2, 'pointer');
             }
             pointer.anchor.setTo(0.5, 0);

js/squareTwo.js

@@ -36,7 +36,7 @@ let gameSquareTwo = {
         game.add.image(0, 0, 'bgimage');
         
         // Calls function that loads navigation icons
-        iconSettings["func_addButtons"](true,true,
+        iconSettings.func_addIcons(true,true,
                                     true,true,false,
                                     true,false,
                                     'difficulty', false);
@@ -45,13 +45,7 @@ let gameSquareTwo = {
         game.add.image(300, 100, 'cloud');
         game.add.image(660, 80, 'cloud');
         game.add.image(110, 85, 'cloud').scale.setTo(0.8);
-        
-        // Styles for labels
-        let stylePlace = { font: '26px Arial', fill: '#400080', align: 'center'};
-        let styleLabel = { font: '26px Arial', fill: '#000080', align: 'center'};
-        let styleFraction = { font: '20px Arial', fill: '#000080', align: 'center'};
-        let styleMenu = { font: '30px Arial', fill: '#000000', align: 'center'};
-        
+
         //Floor
         for(let i=0;i<9;i++){
             game.add.image(i*100, 501, 'floor');
@@ -106,7 +100,7 @@ let gameSquareTwo = {
          //Creating blocks
         blockW = 400;
         blockH = 50;
-        if(levelOperator!="C"){
+        if(sublevelType!="C"){
             xA=230, yA=90;
             xB=xA, yB=yA+3*blockH+30;
         }else{
@@ -141,14 +135,14 @@ let gameSquareTwo = {
             
             //aux blocks
             let xAux = xA+i*widthA, yAux = yA+blockH+10;
-            if(levelOperator == 'C') yAux = yA;
+            if(sublevelType == 'C') yAux = yA;
                 block = game.add.graphics(xAux, yAux );
                 block.anchor.setTo(0.5, 0.5);
                 block.lineStyle(1, lineColor);
                 block.beginFill(fillColorS);
                 block.drawRect(0, 0, widthA, blockH);
                 
-                if(levelOperator!='A') block.alpha = 0;
+                if(sublevelType!='A') block.alpha = 0;
                 else block.alpha = 0.2;
                     
             auxblqA.add(block);
@@ -158,13 +152,13 @@ let gameSquareTwo = {
         //label block A
         let labelX = xA+blockW+30;
         let labelY = yA+blockH/2;
-        labelA = game.add.text(labelX, labelY, sizeA , styleFraction);
+        labelA = game.add.text(labelX, labelY, sizeA , textStyles.valueLabelBlue3);
         labelA.anchor.setTo(0.5, 0.41);
         
         //label fraction
         labelX = xA+(blockA*widthA)+40;
         labelY = yA+blockH+34;
-        fractionA = game.add.text(labelX, labelY, "0\n"+sizeA , styleFraction);
+        fractionA = game.add.text(labelX, labelY, "0\n"+sizeA , textStyles.valueLabelBlue3);
         fractionA.anchor.setTo(0.5, 0.41);
         separatorA = game.add.sprite(labelX, labelY, 'separator');
         separatorA.anchor.setTo(0.5, 0.5);
@@ -196,14 +190,14 @@ let gameSquareTwo = {
             blocksB.add(block);
             //aux blocks
             let xAux = xB+i*widthB, yAux = yB+blockH+10;
-            if(levelOperator == 'C') yAux = yB;
+            if(sublevelType == 'C') yAux = yB;
                 block = game.add.graphics(xAux, yAux);
                 block.anchor.setTo(0.5, 0.5);
                 block.lineStyle(1, lineColor);
                 block.beginFill(fillColorS);
                 block.drawRect(0, 0, widthB, blockH);
                 
-                if(levelOperator!='A') block.alpha = 0;
+                if(sublevelType!='A') block.alpha = 0;
                 else block.alpha = 0.2;
             auxblqB.add(block);
             
@@ -212,13 +206,13 @@ let gameSquareTwo = {
         //label block B
         labelX = xA+blockW+30;
         labelY = yB+blockH/2;
-        labelB = game.add.text(labelX, labelY, sizeB , styleFraction);
+        labelB = game.add.text(labelX, labelY, sizeB , textStyles.valueLabelBlue3);
         labelB.anchor.setTo(0.5, 0.41);    
                 
         //label fraction
         labelX = xA+(blockB*widthB)+40;
         labelY = yB+blockH+34;
-        fractionB = game.add.text(labelX, labelY, "0\n"+sizeB , styleFraction);
+        fractionB = game.add.text(labelX, labelY, "0\n"+sizeB , textStyles.valueLabelBlue3);
         fractionB.anchor.setTo(0.5, 0.41);
         separatorB = game.add.sprite(labelX, labelY, 'separator');
         separatorB.anchor.setTo(0.5, 0.5);
@@ -307,9 +301,7 @@ let gameSquareTwo = {
                 if((valueA/sizeA) == (valueB/sizeB)){
                     result = true;
                     levelMove = true;
-                    if(audioStatus){
-                        okSound.play();
-                    }
+                    if(audioStatus) okSound.play();
                     kid.animations.stop();
 
                     passedLevels++;        
@@ -319,9 +311,7 @@ let gameSquareTwo = {
                 }else{
                     result = false;
                     levelMove = false;
-                    if(audioStatus){
-                        errorSound.play();
-                    }
+                    if(audioStatus) errorSound.play();
                     kid.animations.stop();
                     errorImg.alpha = 1;
                 }
@@ -434,9 +424,7 @@ let gameSquareTwo = {
                 }
             }
             labelA.alpha = 0;
-            if(audioStatus){
-                beepSound.play();
-            }
+            if(audioStatus) beepSound.play();
             clickA = true;
             valueA = this.indice+1;
             fractionA.x = xA+(valueA*(blockW/sizeA))+40;
@@ -455,9 +443,7 @@ let gameSquareTwo = {
                 }
             }
             labelB.alpha = 0;
-            if(audioStatus){
-                beepSound.play();
-            }
+            if(audioStatus) beepSound.play();
             clickB = true;
             valueB = this.indice+1;
             fractionB.x = xB+(valueB*(blockW/sizeB))+40;
@@ -474,8 +460,7 @@ let gameSquareTwo = {
         let hr = new XMLHttpRequest();
         // Create some variables we need to send to our PHP file
         let url = "php/save.php";
-        let vars = "s_ip="+hip+"&s_name=" + username + "&s_lang=" + lang + "&s_game=" + levelShape + "&s_mode=" + levelType;
-
+        let vars = "s_ip="+hip+"&s_name=" + username + "&s_lang=" + langString + "&s_game=" + levelShape + "&s_mode=" + levelType;
         vars += "&s_oper=Equal&s_leve=" + levelDifficulty + "&s_posi=" + levelPosition + "&s_resu=" + result + "&s_time=" + totalTime + "&s_deta=" + abst;
         
         hr.open("POST", url, true);