Bugs:

- Fixed ending animation (kid animation in tractor level)
- Fixed help button not working on some levels
- Fixed progress bar not working
- Fixed block animation in some squareTwo levels

GUI:
- added blue signaling in level icons
- added a page icon
- changed kid animation in gameSquareTwo
- minor color changes
- help icon resizing in gameSquareOne
- now subtraction level has red tractor in level (not just menu)
- removed turn label ON/OFF from gamesquaretwo as it was not used

Other:
- map and end states both in map.js
- global.js centralize global resources
- changed some folder/assets names to make them more intuitive
- added all assets not used in game to a NOT-USED folder temporarily
- assets are loaded when needed (not all loaded when ifractions open)
- added html metadata: description,keywords (need revision)
- BIG CODE REFACTORING AND DOCUMENTING

assets/lang/en_US.json

@@ -0,0 +1,26 @@
+{
+    "loading": "LOADING",
+    "title": "Fractions",
+    "menu_title": "SELECT GAME",
+    "difficulty": "Difficulty",
+    "level": "Level",
+    "game_menu_title": "SELECT OPERATION AND DIFFICULTY",
+    "good_job": "Good Job",
+    "retry": "Try again",
+    "menu_world": "LANGUAGE SELECTION",
+    "menu_list": "MAIN MENU",
+    "menu_back": "GO BACK",
+    "menu_help": "SEE SOLUTION",
+    "circle_name": "Circles",
+    "square_name": "Quadrangles",
+    "label_name": "labels",
+    "mode_name": "MODE",
+    "with_name": "WITH",
+    "without_name": "WITHOUT",
+    "insert_name": "ENTER YOUR NAME",
+    "ready": "READY",
+    "welcome": "Welcome",
+    "error_msg": "You should select a smaller portion than it's full size",
+    "empty_name": "You forgot to type your name",
+    "audio": "AUDIO"
+}

assets/lang/es_PE.json

@@ -0,0 +1,26 @@
+{
+    "loading": "CARGANDO",
+    "title": "Fracciones",
+    "menu_title": "SELECCIONE UN JUEGO",
+    "difficulty": "Dificultad",
+    "level": "Nivel",
+    "game_menu_title": "SELECCIONA LA OPERACION Y DIFICULTAD",
+    "good_job": "Bien hecho",
+    "retry": "Inténtalo de nuevo",
+    "menu_world": "SELECCION DE IDIOMA",
+    "menu_list": "MENU PRINCIPAL",
+    "menu_back": "REGRESAR",
+    "menu_help": "VER SOLUCION",
+    "circle_name": "Circulos",
+    "square_name": "Cuadrilateros",
+    "label_name": "etiquetas",
+    "mode_name": "MODO",
+    "with_name": "CON",
+    "without_name": "SIN",
+    "insert_name": "INGRESA TU NOMBRE",
+    "ready": "LISTO",
+    "welcome": "Hola que tal",
+    "error_msg": "Debes seleccionar una porción más pequeña que su tamaño completo",
+    "empty_name": "Usted ha olvidado de escribir su nombre",
+    "audio": "AUDIO"
+}

assets/lang/fr_FR.json

@@ -0,0 +1,26 @@
+{
+    "loading": "CHARGEMENT",
+    "title": "Fractions",
+    "menu_title": "SÉLECTIONNER UN JEU",
+    "difficulty": "Difficulté",
+    "level": "Niveau",
+    "game_menu_title": "OPERATION SELECT ET DIFFICULTÉ",
+    "good_job": "Bon travail",
+    "retry": "Réessayer",
+    "menu_world": "SÉLECTION DE LA LANGUE",
+    "menu_list": "MENU PRINCIPAL",
+    "menu_back": "RETOUR",
+    "menu_help": "VIEW SOLUTION",
+    "circle_name": "Circles",
+    "square_name": "Quadrangles",
+    "label_name": "étiquettes",
+    "mode_name": "MODE",
+    "with_name": "AVEC",
+    "without_name": "SANS",
+    "insert_name": "ENTREZ VOTRE NOM",
+    "ready": "PRET",
+    "welcome": "Salut",
+    "error_msg": "Vous devriez choisir une portion plus petite que sa taille totale",
+    "empty_name": "Vous avez oublié de taper votre nom",
+    "audio": "AUDIO"
+}

assets/lang/it_IT.json

@@ -0,0 +1,26 @@
+{
+    "loading": "CARICANDO",
+    "title": "Frazioni",
+    "menu_title": "SELEZIONA UN GRIOCO",
+    "difficulty": "Difficoltá",
+    "level": "Livello",
+    "game_menu_title": "SELEZIONARE UNA OPERAZIONE E UNA DIFFICOLTÁ",
+    "good_job": "Buon lavoro",
+    "retry": "Tenta di nuovo",
+    "menu_world": "SELEZIONARE IDIOMA",
+    "menu_list": "MENÚ PRINCIPALE",
+    "menu_back": "INDIETRO",
+    "menu_help": "GUARDA SOLUZIONE",
+    "circle_name": "Cerchi",
+    "square_name": "Quadrilateri",
+    "label_name": "legenda",
+    "model_name": "MODO",
+    "with_name": "CON",
+    "without_name": "SENZA",
+    "insert_name": "SCRIVI IL TUO NOME",
+    "ready": "OK",
+    "welcome": "Ciao",
+    "error_msg": "Devi scegliere una porzione minore della grandezza totale",
+    "empty_name": "Ti sei dimenticato di digitare il tuo nome",
+    "audio": "AUDIO"
+}

assets/lang/pt_BR.json

@@ -0,0 +1,26 @@
+{
+    "loading": "CARREGANDO",
+    "title": "Frações",
+    "menu_title": "SELECIONE UM JOGO",
+    "difficulty": "Dificuldade",
+    "level": "Nível",
+    "game_menu_title": "SELECIONAR OPERAÇÃO E DIFICULDADE",
+    "good_job": "Bom trabalho",
+    "retry": "Tente novamente",
+    "menu_world": "SELECIONAR IDIOMA",
+    "menu_list": "MENU PRINCIPAL",
+    "menu_back": "VOLTAR",
+    "menu_help": "VER SOLUÇÃO",
+    "circle_name": "Círculos",
+    "square_name": "Quadriláteros",
+    "label_name": "legendas",
+    "model_name": "MODO",
+    "with_name": "COM",
+    "without_name": "SEM",
+    "insert_name": "DIGITE SEU NOME",
+    "ready": "PRONTO",
+    "welcome": "Olá",
+    "error_msg": "Você deve selecionar uma porção menor que o seu tamanho total",
+    "empty_name": "Você esqueceu de digitar seu nome",
+    "audio": "ÁUDIO"
+}

assets/languages/en_US.json

@@ -1,26 +0,0 @@
-{
-    "loading":"LOADING",
-    "title":"Fractions",
-    "menu_title":"SELECT GAME",
-    "difficulty": "Difficulty",
-    "level": "Level",
-    "game_menu_title": "SELECT OPERATION AND DIFFICULTY",
-    "good_job": "Good Job",
-    "retry": "Try again",
-    "menu_world" : "LANGUAGE SELECTION",
-    "menu_list" : "MAIN MENU",
-    "menu_back" : "GO BACK",
-    "menu_help" : "SEE SOLUTION",
-    "circle_name": "Circles",
-    "square_name" :"Quadrangles",
-    "label_name": "labels",
-    "mode_name": "MODE",
-    "with_name": "WITH",
-    "without_name": "WITHOUT",
-    "insert_name" : "ENTER YOUR NAME",
-    "ready" : "READY",
-    "welcome" : "Welcome",
-    "error_msg" :  "You should select a smaller portion than it's full size",
-    "empty_name" : "You forgot to type your name",
-    "audio" : "AUDIO"
-}

assets/languages/es_PE.json

@@ -1,26 +0,0 @@
-{
-    "loading":"CARGANDO",
-    "title":"Fracciones",
-    "menu_title":"SELECCIONE UN JUEGO",
-    "difficulty": "Dificultad",
-    "level": "Nivel",
-    "game_menu_title": "SELECCIONA LA OPERACION Y DIFICULTAD",
-    "good_job": "Bien hecho",
-    "retry": "Inténtalo de nuevo",
-    "menu_world" : "SELECCION DE IDIOMA",
-    "menu_list" : "MENU PRINCIPAL",
-    "menu_back" : "REGRESAR",
-    "menu_help" : "VER SOLUCION",
-    "circle_name": "Circulos",
-    "square_name" :"Cuadrilateros",
-    "label_name": "etiquetas",
-    "mode_name": "MODO",
-    "with_name": "CON",
-    "without_name": "SIN",
-    "insert_name" : "INGRESA TU NOMBRE",
-    "ready" : "LISTO",
-    "welcome" : "Hola que tal",
-    "error_msg" : "Debes seleccionar una porción más pequeña que su tamaño completo",
-    "empty_name" : "Usted ha olvidado de escribir su nombre",
-    "audio" : "AUDIO"
-}

assets/languages/fr_FR.json

@@ -1,26 +0,0 @@
-{
-    "loading":"CHARGEMENT",
-    "title":"Fractions",
-    "menu_title":"SÉLECTIONNER UN JEU",
-    "difficulty": "Difficulté",
-    "level": "Niveau",
-    "game_menu_title": "OPERATION SELECT ET DIFFICULTÉ",
-    "good_job": "Bon travail",
-    "retry": "Réessayer",
-    "menu_world" : "SÉLECTION DE LA LANGUE",
-    "menu_list" : "MENU PRINCIPAL",
-    "menu_back" : "RETOUR",
-    "menu_help" : "VIEW SOLUTION",
-    "circle_name": "Circles",
-    "square_name" :"Quadrangles",
-    "label_name": "étiquettes",
-    "mode_name": "MODE",
-    "with_name": "AVEC",
-    "without_name": "SANS",
-    "insert_name" : "ENTREZ VOTRE NOM",
-    "ready" : "PRET",
-    "welcome" : "Salut",
-    "error_msg" : "Vous devriez choisir une portion plus petite que sa taille totale",
-    "empty_name" : "Vous avez oublié de taper votre nom",
-    "audio" : "AUDIO"
-}

assets/languages/it_IT.json

@@ -1,26 +0,0 @@
-{
-    "loading":"CARICANDO",
-    "title":"Frazioni",
-    "menu_title":"SELEZIONA UN GRIOCO",
-    "difficulty": "Difficoltá",
-    "level": "Livello",
-    "game_menu_title": "SELEZIONARE UNA OPERAZIONE E UNA DIFFICOLTÁ",
-    "good_job": "Buon lavoro!",
-    "retry": "Tenta di nuovo!",
-    "menu_world" : "SELEZIONARE IDIOMA",
-    "menu_list" : "MENÚ PRINCIPALE",
-    "menu_back" : "INDIETRO",
-    "menu_help" : "GUARDA SOLUZIONE",
-    "circle_name": "Cerchi",
-    "square_name" :"Quadrilateri",
-    "label_name": "legenda",
-    "model_name": "MODO",
-    "with_name": "CON",
-    "without_name": "SENZA",
-    "insert_name" : "SCRIVI IL TUO NOME",
-    "ready" : "OK",
-    "welcome" : "Ciao",
-    "error_msg" : "Devi scegliere una porzione minore della grandezza totale",
-    "empty_name" : "Ti sei dimenticato di digitare il tuo nome",
-    "audio" : "AUDIO" 
-}

assets/languages/pt_BR.json

@@ -1,26 +0,0 @@
-{
-    "loading":"CARREGANDO",
-    "title":"Frações",
-    "menu_title":"SELECIONE UM JOGO",
-    "difficulty": "Dificuldade",
-    "level": "Nível",
-    "game_menu_title": "SELECIONAR OPERAÇÃO E DIFICULDADE",
-    "good_job": "Bom trabalho!",
-    "retry": "Tente novamente!",
-    "menu_world" : "SELECIONAR IDIOMA",
-    "menu_list" : "MENU PRINCIPAL",
-    "menu_back" : "VOLTAR",
-    "menu_help" : "VER SOLUÇÃO",
-    "circle_name": "Círculos",
-    "square_name" :"Quadriláteros",
-    "label_name": "legendas",
-    "model_name": "MODO",
-    "with_name": "COM",
-    "without_name": "SEM",
-    "insert_name" : "DIGITE SEU NOME",
-    "ready" : "PRONTO",
-    "welcome" : "Olá",
-    "error_msg" : "Você deve selecionar uma porção menor que o seu tamanho total",
-    "empty_name" : "Você esqueceu de digitar seu nome",
-    "audio" : "ÁUDIO" 
-}

index.html

@@ -4,7 +4,10 @@
 
 <head>
 
-	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
+	<meta name="description" content="Educational game for teaching fractions"/>
+	<meta name="keywords" content="ifractions, fraction, game"/>
+	<link rel="shortcut icon" href="assets/img/scenario/flag.png">
 	<title> iFractions </title>
 	<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
 
@@ -17,12 +20,12 @@
 	<script type="text/javascript" src="js/circleOne.js"></script>
 	<script type="text/javascript" src="js/squareOne.js"></script>
 	<script type="text/javascript" src="js/squareTwo.js"></script>
-	<script type="text/javascript" src="js/end.js"></script>
-
+	<script type="text/javascript" src="js/globals.js"></script>
+	
 	<script type="text/javascript" src="js/boot.js"></script>
 
 	<style>
-		#text-field-div {
+		#text-field {
 			position: absolute;
 			top: 300px;
 			margin-left: 340px;
@@ -39,6 +42,11 @@
 			color: rgb(0, 0, 0);
 			text-align: center;
 		}
+	
+		input:focus{
+			outline: 3px solid #85accc;
+		}
+	
 	</style>
 
 </head>
@@ -90,9 +98,9 @@
 			</div>
 		</div>
 
-		<div id="text-field-div">
+		<div id="text-field">
 			<form onsubmit="return false">
-				<input type="text" id="name_id" value="" size="13" maxlength="40">
+				<input type="text" id="name_id" value="" size="13" maxlength="36">
 			</form>
 		</div>
 

js/boot.js

@@ -1,242 +1,49 @@
-/*
-    let loadAssets = {
-		preload: function(){},
-		create: function()
-        ---------------------------- end of phaser functions
-	};
-*/
-
-	// Global variables that still need checking 
-	
-	//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(
+// Start phaser
+const 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
+// Game state : preload progress bar icon to use while preloading game assets
 
-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;
-	
-// IMAGES
-let okImg, errorImg;
+let loadProgressBar = {
+	preload: function(){ 
+		game.load.image('progressBar', imgsrc+'scenario/pgbar.png');
+	},
+	create: function(){
+		game.state.start('loadAssets');
+	}
+};
 
-// TIMER
-let timer, totalTime;
+// Game state : Load assets (and calls first game screen)
 
-// CONNECTION TO DATABASE
-const hip = "143.107.45.11"; // Host ip
-	
 let loadAssets = {
 
-	preload: function(){
+	preload: function() {
 
-		// Auxiliar string that holds the base directory
-		const imgsrc = 'assets/img/';
+		// Create progress bar
+		const progressBar = game.add.sprite(game.world.centerX, game.world.centerY, 'progressBar');
+		progressBar.anchor.setTo(0.5, 0.5);
+		// Executes progress bar untill the end of preload function
+		game.load.setPreloadSprite(progressBar);
 
-		// 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');
+		// Sets default background color (persistent through screen changes)
+		game.stage.backgroundColor = colors.blueBckg;
 
-		// 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);
+		// Loading assets
 
-		// 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'
-			);
+		for (let i = 0, image = media.boot('image'); i < image.length; i++){
+			game.load.image(image[i][0], image[i][1]);
 		}
-					
-		//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',
+		for (let i = 0, sprite = media.boot('spritesheet'); i < sprite.length; i++){
+			game.load.spritesheet(sprite[i][0], sprite[i][1], sprite[i][2], sprite[i][3], sprite[i][4]);
+		}	
 
-				'C', 
-				'C', 
-				'C', 
-				'C'
-			);
+		for (let i = 0, audio = media.boot('audio'); i < audio.length; i++){
+			game.load.audio(audio[i][0], audio[i][1][0], audio[i][1][1]);
 		}
 		
 	},
@@ -252,7 +59,7 @@ let loadAssets = {
 		game.physics.startSystem(Phaser.Physics.ARCADE);
 
 		//loading game sounds
-		beepSound = game.add.audio('sound_beep');   // game sound
+		beepSound = game.add.audio('sound_beep');   // default feedback sound
 		okSound = game.add.audio('sound_ok');       // correct answer sound
 		errorSound = game.add.audio('sound_error'); // wrong answer sound
 
@@ -268,21 +75,17 @@ let loadAssets = {
 game.state.add('language', langState); // preMenu.js
 game.state.add('load', loadState); // preMenu.js
 game.state.add('name', nameState); // preMenu.js
-
 game.state.add('menu', menuState); // menu.js
-
 game.state.add('map', mapState); // map.js
-
+game.state.add('end', endState); // map.js
 game.state.add('difficulty', difficultyState); // difficulty.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('end', endState); // end.js
-
+game.state.add('loadProgressBar', loadProgressBar); // boot.js
 game.state.add('loadAssets', loadAssets); // boot.js
 
-// Calls the first game state in charge of loading all the assets needed for the game
+// Calls first game state
+
+game.state.start('loadProgressBar');
 
-game.state.start('loadAssets');

js/difficulty.js

@@ -1,263 +1,297 @@
 /*
     let difficultyState = {
+        preload: function(){},
 		create: function(){},
-		func_loadMap: function()
         ---------------------------- end of phaser functions
+        func_loadMap: function()
+        func_setLabel: function()
 	};
 */
 
+// DIFFICULTY SCREEN: player can select (I) sublevel type, (II) game difficulty and (III) turn on/off fractions labels
 let difficultyState = {
 
-    create: function() {
+    preload: function() {
+        
+        let curMedia;
+
+        switch(currentGameState){
+            case 'gameSquareOne': curMedia = media.gameSquareOne; break;
+            case 'gameSquareTwo': curMedia = media.gameSquareTwo; break;
+            case 'gameCircleOne': curMedia = media.gameCircleOne; break;
+        }
+
+        for (let i = 0, image = curMedia('image'); i < image.length; i++){
+            game.load.image(image[i][0], image[i][1]);
+		}
+		for (let i = 0, sprite = curMedia('spritesheet'); i < sprite.length; i++){
+            game.load.spritesheet(sprite[i][0], sprite[i][1], sprite[i][2], sprite[i][3], sprite[i][4]);
+		}	
+		for (let i = 0, audio = curMedia('audio'); i < audio.length; i++){
+            game.load.audio(audio[i][0], audio[i][1][0], audio[i][1][1]);
+        }
+        
+    },
+
+    create: function () {
 
         // Calls function that loads navigation icons
-        iconSettings.func_addIcons(true,true,
-                                    false,true,false,
-                                    true,false,
-                                    false,false);
-    
+        iconSettings.func_addIcons(true, true,
+            false, true, false,
+            true, false,
+            false, false);
+
         // TITLE
 
         const title = game.add.text(game.world.centerX, 40, lang.game_menu_title, textStyles.title2);
         title.anchor.setTo(0.5, 0.5);
 
-        // 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});
+        // TURN LABEL ON/OFF ICON
+
+        if ( currentGameState != 'gameSquareTwo') {
+            // Text : 'with/without' labeling the fractions
+            let labelText = game.add.text(game.world.centerX - 110, 80, "", textStyles.subtitle2);
+            labelText.text = levelLabel ? lang.with_name + " " + lang.label_name : 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');
+            selectionBox.frame = levelLabel ? 1 : 0;
+            selectionBox.anchor.setTo(0.5, 0.5);
+            selectionBox.scale.setTo(0.12);
+            selectionBox.inputEnabled = true;
+            selectionBox.input.useHandCursor = true;
+            selectionBox.events.onInputDown.add(this.func_setLabel, { selectionBox: selectionBox, labelText: labelText });
+        }
 
-        // SETTING DIFFICULTY LEVELS
+        // SETTING DIFFICULTY LEVELS (STAIR)
 
-        let stairHeight; //height growth of a stair
-        let stairWidth; //Width of a stair
-        let startStair;
-        let startSymbol;
-        let startGeometricFigure;
-        const maxHeight = 120;      // Maximum height of a stair        
-        
-        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!");
+        const maxStairHeight = 120;  // Maximum height of the stairs        
+        let stairHeight;    // Height growth of a stair
+        let stairWidth;     // Width of the stairs
+        let startStair;     // Start 'x' position of the stairs
+        let startTheme;     // Start 'x' position of the illustrations on the left (character/arrow/equal sign)
+        let startShape;     // STart 'x' position of the illustrations on the right (shapes)
+        let maxSublevel;
+        let maxDifficulty;
+
+        switch(currentGameState) {
+            case "gameSquareOne":
+                stairHeight = 40;
+                stairWidth = 100;
+                startStair = 320;
+                startTheme = 180;
+                startShape = (startTheme / 2) + startStair + stairWidth * 3;
+                maxSublevel = 2;
+                maxDifficulty = 3;
+            break;
+            case "gameSquareTwo":
+            case "gameCircleOne":
+                stairHeight = 29;
+                stairWidth = 85;
+                startStair = 240;
+                startTheme = 150;
+                startShape = (startTheme / 2) + startStair + stairWidth * 5;
+                maxSublevel = 3;
+                maxDifficulty = 5;
+            break;
+            default: if (debugMode) console.log("Error! Name of the game state is not valid!");
         }
 
-        let geometricFigure = [];
-        let levelThemeIcons = [];
+        let themeIcons = [];
         let arrowIcons = [];
-        
+        let shapeIcons = [];
+
         let stairs = [];
 
         const aux = {
-            maxSublevel: null,
-            maxDifficulty: null,
-            color: ['0x99b3ff', '0xff6666', '0xb366ff'], // blue, red, purple
-            base_y1: [135, 285, 435],
+            maxSublevel:    null,
+            maxDifficulty:  null,
+            color:      [colors.diffBlue, colors.diffRed, colors.diffPurple],
+            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;
+                return (currentGameState == 'gameSquareTwo') ? this.sublevel_2 : this.sublevel_1;
             },
         }
 
-        switch(currentGameState){
-            
-            case "gameSquareOne":
+        // Placing icons
+        switch (currentGameState) {
 
-                aux.maxSublevel = 2;
-                aux.maxDifficulty = 3;
+            case "gameSquareOne":
 
                 // Blue square
-                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].drawRect(0, 0, 80, 40);
-                geometricFigure[0].endFill();
+                shapeIcons[0] = game.add.graphics(startShape, 175);
+                shapeIcons[0].anchor.setTo(0.5, 0.5);
+                shapeIcons[0].lineStyle(2, colors.darkBlue);
+                shapeIcons[0].beginFill(colors.lightBlue);
+                shapeIcons[0].drawRect(0, 0, 80, 40);
+                shapeIcons[0].endFill();
                 // Red square
-                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].drawRect(0, 0, 80, 40);
-                geometricFigure[1].endFill();
+                shapeIcons[1] = game.add.graphics(startShape, 330);
+                shapeIcons[1].anchor.setTo(0.5, 0.5);
+                shapeIcons[1].lineStyle(2, colors.red);
+                shapeIcons[1].beginFill(colors.lightBlue);
+                shapeIcons[1].drawRect(0, 0, 80, 40);
+                shapeIcons[1].endFill();
 
                 // Green tractor
-                levelThemeIcons[0] = game.add.sprite(startSymbol+30, 215, 'tractor_green');
-                levelThemeIcons[0].scale.setTo(0.5);
-                levelThemeIcons[0].alpha = 0.9;
-                levelThemeIcons[0].anchor.setTo(0.5,0.5);
+                themeIcons[0] = game.add.sprite(startTheme + 30, 215, 'tractor');
+                themeIcons[0].frame = 1;
+                themeIcons[0].scale.setTo(0.5);
+                themeIcons[0].alpha = 0.9;
+                themeIcons[0].anchor.setTo(0.5, 0.5);
                 // Red tractor
-                levelThemeIcons[1] = game.add.sprite(startSymbol+70, 370, 'tractor_red');
-                levelThemeIcons[1].scale.setTo(0.5);
-                levelThemeIcons[1].alpha = 0.9;
-                levelThemeIcons[1].anchor.setTo(0.5,0.5);
-                
+                themeIcons[1] = game.add.sprite(startTheme + 70, 370, 'tractor');
+                themeIcons[1].frame = 5;
+                themeIcons[1].scale.setTo(0.5);
+                themeIcons[1].alpha = 0.9;
+                themeIcons[1].anchor.setTo(0.5, 0.5);
+
                 // Plus Arrow
-                arrowIcons[0] = game.add.sprite(startSymbol+100, 215, 'h_arrow');
+                arrowIcons[0] = game.add.sprite(startTheme + 100, 215, 'h_arrow');
                 arrowIcons[0].scale.setTo(0.3);
                 arrowIcons[0].alpha = 0.9;
-                arrowIcons[0].anchor.setTo(0.5,0.5);
+                arrowIcons[0].anchor.setTo(0.5, 0.5);
                 // Minus Arrow
-                arrowIcons[1] = game.add.sprite(startSymbol, 370, 'h_arrow');
+                arrowIcons[1] = game.add.sprite(startTheme, 370, 'h_arrow');
                 arrowIcons[1].scale.setTo(0.3);
                 arrowIcons[1].alpha = 0.9;
-                arrowIcons[1].anchor.setTo(0.5,0.5);
+                arrowIcons[1].anchor.setTo(0.5, 0.5);
                 arrowIcons[1].scale.x *= -1;
 
             break;
-
             case "gameCircleOne":
 
-                aux.maxSublevel = 3;
-                aux.maxDifficulty = 5;
-
                 // Blue Circle
-                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();
+                shapeIcons[0] = game.add.graphics(startShape, 175);
+                shapeIcons[0].anchor.setTo(0.5, 0.5);
+                shapeIcons[0].lineStyle(2, colors.darkBlue);
+                shapeIcons[0].beginFill(colors.lightBlue);
+                shapeIcons[0].drawCircle(0, 0, 60);
+                shapeIcons[0].endFill();
                 // Red Circle
-                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();
+                shapeIcons[1] = game.add.graphics(startShape, 330);
+                shapeIcons[1].anchor.setTo(0.5, 0.5);
+                shapeIcons[1].lineStyle(2, colors.red);
+                shapeIcons[1].beginFill(colors.lightBlue);
+                shapeIcons[1].drawCircle(0, 0, 60);
+                shapeIcons[1].endFill();
                 // Both blue and red circles
-                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, 485);
-                geometricFigure[3].anchor.setTo(0.5,0.5);
-                geometricFigure[3].lineStyle(2, 0xb30000);
-                geometricFigure[3].beginFill(0xefeff5);
-                geometricFigure[3].drawCircle(0, 0, 60);
-                geometricFigure[3].endFill();
+                shapeIcons[2] = game.add.graphics(startShape - 30, 485);
+                shapeIcons[2].anchor.setTo(0.5, 0.5);
+                shapeIcons[2].lineStyle(2, colors.darkBlue);
+                shapeIcons[2].beginFill(colors.lightBlue);
+                shapeIcons[2].drawCircle(0, 0, 60);
+                shapeIcons[2].endFill();
+                shapeIcons[3] = game.add.graphics(startShape + 40, 485);
+                shapeIcons[3].anchor.setTo(0.5, 0.5);
+                shapeIcons[3].lineStyle(2, colors.red);
+                shapeIcons[3].beginFill(colors.lightBlue);
+                shapeIcons[3].drawCircle(0, 0, 60);
+                shapeIcons[3].endFill();
 
                 // Kid plus
-                levelThemeIcons[0] = game.add.sprite(startSymbol, 195, 'kid_walk'); 
-                levelThemeIcons[0].scale.setTo(0.6);
-                levelThemeIcons[0].alpha = 0.8;
-                levelThemeIcons[0].anchor.setTo(0.5,0.5);
+                themeIcons[0] = game.add.sprite(startTheme, 195, 'kid_walk');
+                themeIcons[0].scale.setTo(0.6);
+                themeIcons[0].alpha = 0.8;
+                themeIcons[0].anchor.setTo(0.5, 0.5);
                 // Kid minus
-                levelThemeIcons[1] = game.add.sprite(startSymbol+40, 350, 'kid_walk');
-                levelThemeIcons[1].scale.setTo(-0.6, 0.6);
-                levelThemeIcons[1].alpha = 0.8;
-                levelThemeIcons[1].anchor.setTo(0.5,0.5);
+                themeIcons[1] = game.add.sprite(startTheme + 40, 350, 'kid_walk');
+                themeIcons[1].scale.setTo(-0.6, 0.6);
+                themeIcons[1].alpha = 0.8;
+                themeIcons[1].anchor.setTo(0.5, 0.5);
 
                 // Plus arrow
-                arrowIcons[0] = game.add.sprite(startSymbol+40, 195, 'h_arrow'); 
+                arrowIcons[0] = game.add.sprite(startTheme + 40, 195, 'h_arrow');
                 arrowIcons[0].scale.setTo(0.35);
                 arrowIcons[0].alpha = 0.8;
-                arrowIcons[0].anchor.setTo(0.5,0.5);
+                arrowIcons[0].anchor.setTo(0.5, 0.5);
                 // Minus arrow
-                arrowIcons[1] = game.add.sprite(startSymbol, 350, 'h_arrow');
+                arrowIcons[1] = game.add.sprite(startTheme, 350, 'h_arrow');
                 arrowIcons[1].scale.setTo(-0.35, 0.35);
                 arrowIcons[1].alpha = 0.8;
-                arrowIcons[1].anchor.setTo(0.5,0.5);
+                arrowIcons[1].anchor.setTo(0.5, 0.5);
                 // Both plus and minus arrows
-                arrowIcons[2] = game.add.sprite(startSymbol+20, 500, 'h_double'); 
+                arrowIcons[2] = game.add.sprite(startTheme + 20, 500, 'h_double');
                 arrowIcons[2].scale.setTo(0.5);
                 arrowIcons[2].alpha = 0.8;
-                arrowIcons[2].anchor.setTo(0.5,0.5);
+                arrowIcons[2].anchor.setTo(0.5, 0.5);
 
             break;
-
             case "gameSquareTwo":
 
-                aux.maxSublevel = 3;
-                aux.maxDifficulty = 5;
-
-                levelThemeIcons[0] = game.add.sprite(startSymbol, 370, 'equal');
-                levelThemeIcons[0].scale.setTo(0.7);
-                levelThemeIcons[0].anchor.setTo(0.5,0.5);
+                themeIcons[0] = game.add.sprite(startTheme, 370, 'equal');
+                themeIcons[0].scale.setTo(0.7);
+                themeIcons[0].anchor.setTo(0.5, 0.5);
 
             break;
+            default: if (debugMode) console.log("Error: couldn't finish loading difficulty screen assets");
 
-            default:
-                console.log("Error: couldn't finish loading difficulty screen assets");
         }
 
-        // Pacing difficulty 'stairs'
-        for(let sublevel=0; sublevel<aux.maxSublevel; sublevel++){
-            for(let difficulty=1; difficulty<=aux.maxDifficulty; difficulty++){
+        // Placing difficulty 'stairs'
+        for (let sublevel = 0; sublevel < maxSublevel; sublevel++) {
+            for (let difficulty = 1; difficulty <= maxDifficulty; difficulty++) {
                 // Position
-                let x1 = startStair+(stairWidth*(difficulty-1));
-                let y1 = aux.base_y1[sublevel]+maxHeight-difficulty*stairHeight;
-                let x2 = stairWidth;//x1 + 40;
-                let y2 = stairHeight*difficulty;//y1 + 24;
+                const x1 = startStair + (stairWidth * (difficulty - 1));
+                const y1 = aux.base_y1[sublevel] + maxStairHeight - difficulty * stairHeight;
+                const x2 = stairWidth;//x1 + 40;
+                const y2 = stairHeight * difficulty;//y1 + 24;
                 // Graphics
                 stairs[difficulty] = game.add.graphics(0, 0);
-                stairs[difficulty].lineStyle(1, 0xFFFFFF, 1);
+                stairs[difficulty].lineStyle(1, colors.blueBckg);
                 stairs[difficulty].beginFill(aux.color[sublevel]);
                 stairs[difficulty].drawRect(x1, y1, x2, y2);
                 stairs[difficulty].endFill();
-                // Events
+
                 stairs[difficulty].inputEnabled = true;
                 stairs[difficulty].input.useHandCursor = true;
-                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);
+                stairs[difficulty].events.onInputDown.add(this.func_loadMap, { 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, textStyles.difficultyLabel);
-                    label.anchor.setTo(0.5, 0.4);
+                const xl = x1 + stairWidth / 2; //x label
+                const yl = y1 + (stairHeight * difficulty) / 2; //y label
+                const label = game.add.text(xl, yl, difficulty, textStyles.difficultyLabel);
+                label.anchor.setTo(0.5, 0.4);
             }
         }
 
     },
 
     // Calls map state
-    func_loadMap: function(){
+    func_loadMap: function () {
 
-        if(audioStatus) this.beep.play();
+        if (audioStatus) beepSound.play();
 
-        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
+        mapPosition = 0;   //Map position
+        mapCanMove = true;       //Move no next point
+        levelDifficulty = this.difficulty;  // difficulty for selected level (1..3 or 1..5)
+        sublevelType = this.sublevelType;   //Type of game
+        completedLevels = 0;       //reset the game progress when entering a new level
 
         game.state.start('map');
 
     },
+
+    func_setLabel: function () {
+
+        if (levelLabel) {
+        
+            levelLabel = false;
+            this.selectionBox.frame = 0;
+            this.labelText.text = lang.without_name + " " + lang.label_name;
+        
+        } else {
+        
+            levelLabel = true;
+            this.selectionBox.frame = 1;
+            this.labelText.text = lang.with_name + " " + lang.label_name;
+        
+        }
+        
+        if (audioStatus) beepSound.play();
+    
+    }
 };

js/end.js

@@ -1,100 +0,0 @@
-/*
-
-    let endState = {
-        create: function(){},
-        update: function(){},
-        ---------------------------- end of phaser functions
-    };
-
-*/
-
-endState = {
-
-    create: function(){
-
-        // Background
-        game.add.image(0, 0, 'bgimage');
-        
-        //Clouds
-        game.add.image(300, 100, 'cloud');
-        game.add.image(660, 80, 'cloud');
-        game.add.image(110, 85, 'cloud').scale.setTo(0.8);
-                
-        //Floor
-        for(let i=0;i<9;i++){
-            game.add.image(i*100, 501, 'floor');
-        }
-        
-        // Progress bar
-        for(let p=1;p<=5;p++){
-            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%', 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
-        game.add.sprite(600, 222 , 'school').scale.setTo(0.7);
-        game.add.sprite(30, 280 , 'tree4');
-        game.add.sprite(360, 250 , 'tree2');
-        
-        if(currentGameState == 'gameCircleOne'){
-            //kid
-            this.kid = game.add.sprite(0, -152 , 'kid_run');
-
-            this.kid.anchor.setTo(0.5,0.5);
-            this.kid.scale.setTo(0.7);
-            this.kid.animations.add('walk', [0,1,2,3,4,5,6,7,8,9,10,11]);
-            //globo
-            this.balloon = game.add.sprite(0, -260, 'balloon');
-            this.balloon.anchor.setTo(0.5,0.5);
-            this.basket = game.add.sprite(0, -150, 'balloon_basket');
-            this.basket.anchor.setTo(0.5,0.5);
-        }else{
-            //kid
-            this.kid = game.add.sprite(0, 460 , 'kid_run');
-            
-            this.kid.anchor.setTo(0.5,0.5);
-            this.kid.scale.setTo(0.7);
-            this.kid.animations.add('walk', [0,1,2,3,4,5,6,7,8,9,10,11]);
-
-            this.kid.animations.play('walk', 6, true);
-        }
-
-    },
-
-    update: function(){
-
-        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{
-                    passedLevels = 0;
-                    game.state.start('menu');
-                }
-            }else{
-                this.balloon.y += 2;
-                this.basket.y += 2;
-                this.kid.y +=2;
-                this.balloon.x += 1;
-                this.basket.x += 1;
-                this.kid.x +=1;
-            }
-
-        }else{    
-                    
-            if(this.kid.x <= 700){
-                this.kid.x += 2;
-            }else{
-                passedLevels = 0;
-                game.state.start('menu');
-            }
-        }
-
-    },
-
-}

js/globals.js

@@ -0,0 +1,329 @@
+const imgsrc = "assets/img/"
+const defaultWidth = 900;
+const defaultHeight = 600;
+
+const debugMode = false; 	// Turns console messages ON/OFF
+let audioStatus = false; 	// Turns game audio ON/OFF
+
+let lang, langString; 		// Object and String that contain the selected language
+let playerName;
+
+let levelLabel = true; 		// Turns explicitly showing the fractions in levels ON/OFF
+
+let currentGameState; 		// Name of the current selected 'game' state
+let self;
+
+let mapPosition;			// character position in the map
+let mapCanMove;				// When true the character can move to next position in the map
+let completedLevels;		// Number of finished levels in the map
+
+let levelShape;		 	    // Can be 'circle' or 'square'
+let levelDifficulty; 		// A value from 1..3 or 1..5 that defines the current level difficulty
+
+/* LEVEL TYPE (the ones in the menu screen)
+ * in squareOne/circleOne can be: 'A' (click on the floor) or 'B' (click on the amount to go/stacked figures)
+ * in squareTwo           can be: 'C' (comparing fractions) */
+let levelType;
+
+/* SUBLEVEL TYPE (the ones in the difficulty screen)
+ * in squareOne		levels can be: 'Plus' or 'Minus'
+ * in circleOne 	levels can be: 'Plus', 'Minus' or 'Mixed'
+ * in squareTwo     levels can be: 'A', 'B' or 'C' */
+let sublevelType;
+
+let beepSound, okSound, errorSound; // output game sounds
+
+let timer, totalTime; // Counts time spent in each game
+
+const hip = "143.107.45.11"; // Host ip
+
+// Colors available
+const colors = {
+    // used in text
+	green: "#00804d",
+	darkRed: "#330000",
+    blue: "#003cb3",
+    mediumBlue: "#000080",
+	black: "#000000",
+	almostWhite: "#f0f5f5",
+	// difficulty stairs
+	diffBlue: "0x99b3ff",
+	diffRed: "0xff6666",
+	diffPurple: "0xb366ff",
+	// Background color
+	blueBckg: 0xcce5ff, // default 
+	blueBckgLevel: 0xa8c0e6, // in gameSquareOne (used for floor gap)
+	// ok button in name State
+	teal: 0x3d5c5c, 
+	// difficulty symbols and game color identifier 
+	darkBlue: 0x31314e,
+	red: 0xb30000,
+	lightBlue: 0xefeff5,
+	// gameSquareTwo
+	darkRed_: 0x330000,
+	lightRed: 0xd27979,
+	lighterRed: 0xf2d9d9,
+	darkGreen: 0x1e2f2f,
+	lightGreen: 0x83afaf,
+	lighterGreen: 0xe0ebeb,
+};
+
+// Text styles available
+const textStyles = {
+
+	// titles
+    title1: { font: "32px Arial", fill: colors.green, align: "center" },
+	title2: { font: "27px Arial", fill: colors.green, align: "center" },
+
+	overtitle: { font: "20px Arial", fill: colors.darkRed, align: "center" },
+
+    subtitle1: { font: "27px Arial", fill: colors.blue, align: "center" },
+    subtitle2: { font: "27px Arial", fill: colors.black, align: "center" },
+	
+	// button labels
+    buttonLabel: { font: '34px Arial', fill: colors.almostWhite, align: 'center' },
+    difficultyLabel: { font: '25px Arial', fill: colors.almostWhite, align: 'center' },
+	// in game labels
+	valueLabelBlue1: { font: '26px Arial', fill: colors.mediumBlue, align: 'center' },
+    valueLabelBlue2: { font: '20px Arial', fill: colors.mediumBlue, align: 'center' }, // numbers in gameSquareTwo
+    valueLabelBlue3: { font: '15px Arial', fill: colors.mediumBlue, align: 'center' }, // fractions numbers in gameSquareOne
+
+};
+
+// images, spritesheets and audio files
+const media = {
+
+	boot : function ( type ) {
+		image = [
+			// scenario
+			['birch', 	imgsrc+'scenario/birch.png'],
+			['bgimage', imgsrc+'scenario/bg.jpg'],
+			['bgmap', 	imgsrc+'scenario/bg_map.png'],
+			['cloud', 	imgsrc+'scenario/cloud.png'],
+			['floor',	imgsrc+'scenario/floor.png'],
+			['place_a', imgsrc+'scenario/place_a.png'],
+			['place_b', imgsrc+'scenario/place_b.png'],
+			['rock', 	imgsrc+'scenario/rock.png'],
+			['road', 	imgsrc+'scenario/road.png'],
+			['sign',	imgsrc+'scenario/sign.png'],
+			['tree1', 	imgsrc+'scenario/tree.png'],
+			['tree2', 	imgsrc+'scenario/tree2.png'],
+			['tree3', 	imgsrc+'scenario/tree3.png'],
+			['tree4', 	imgsrc+'scenario/tree4.png'],
+			// flags
+			['flag_BR', imgsrc+'flag/BRAZ.jpg'], 
+			['flag_FR', imgsrc+'flag/FRAN.jpg'], 
+			['flag_IT',	imgsrc+'flag/ITAL.png'],
+			['flag_PE', imgsrc+'flag/PERU.jpg'], 
+			['flag_US', imgsrc+'flag/UNST.jpg'], 
+			// Navigation icons on the top of the page
+			['back', 	imgsrc+'navIcon/back.png'],
+			['block', 	imgsrc+'navIcon/block.png'],
+			['help', 	imgsrc+'navIcon/help.png'],
+			['home', 	imgsrc+'navIcon/home.png'],
+			['world', 	imgsrc+'navIcon/language.png'],
+			['list', 	imgsrc+'navIcon/menu.png'],
+			['pgbar', 	imgsrc+'navIcon/progressBar.png'],
+			// mathematical operators 
+			['equal', 		imgsrc+'operator/equal.png'],
+			['fractionLine',	imgsrc+'operator/fractionLine.png'],
+			//feedback options 
+			['h_arrow', 	imgsrc+'help/arrow.png'],
+			['h_double', 	imgsrc+'help/double.png'],
+			['down', 		imgsrc+'help/down.png'],
+			['h_error', 	imgsrc+'help/error.png'],
+			['h_ok', 		imgsrc+'help/ok.png'],
+			['pointer', 	imgsrc+'help/pointer.png'],						
+		];
+		spritesheet = [
+			// Game Sprites
+			['kid_walk', imgsrc+'character/kid/walk.png', 78, 175, 26],
+			// Menu icons n the top of the page
+			['audio',	imgsrc+'navIcon/audio_48x48.png',48, 48, 2],
+			// feedback options 
+			['select',	imgsrc+'help/selectionBox.png', 310, 310, 2],
+		];
+		audio = [
+			// Sound effects
+			['sound_beep', 	['assets/audio/beep.ogg', 'assets/audio/beep.mp3'] ],
+			['sound_error', ['assets/audio/error.ogg', 'assets/audio/error.mp3'] ],
+			['sound_ok', 	['assets/audio/ok.ogg', 'assets/audio/ok.mp3'] ],
+		];
+		return media.returnType(type);
+	},
+
+	gameSquareOne : function ( type ){
+		image = [
+			// scenario
+			['farm', 	imgsrc+'scenario/farm.png'],
+			['garage', 	imgsrc+'scenario/garage.png'],
+		];
+		spritesheet = [
+			// Game sprites
+			['tractor', 	imgsrc+'character/tractor/frame.png', 201, 144, 10]	
+		];
+		audio = [];
+		return media.returnType(type);
+	},
+
+	gameSquareTwo : function ( type ){
+		image = [
+			// scenario
+			['house', 	imgsrc+'scenario/house.png'],
+			['school', 	imgsrc+'scenario/school.png'],
+		];
+		spritesheet = [
+			['kid_lost', 	imgsrc+'character/kid/lost.png', 72, 170, 6],
+			['kid_run',		imgsrc+'character/kid/run.png', 82, 178, 12],
+		];
+		audio = [];
+		return media.returnType(type);
+	},
+
+	gameCircleOne : function ( type ){
+		image = [
+			// scenario
+			['house', 	imgsrc+'scenario/house.png'],
+			['school', 	imgsrc+'scenario/school.png'],
+			// Game Sprites
+			['balloon', 		imgsrc+'character/balloon/airballoon_upper.png'],
+			['balloon_basket', 	imgsrc+'character/balloon/airballoon_base.png'],	
+		];
+		spritesheet = [
+			['kid_run',	imgsrc+'character/kid/run.png', 82, 178, 12],
+		];
+		audio = [];
+		return media.returnType(type);
+	},
+	
+	menu : function (type) {
+		image = [ 
+			// level Icrons
+			['', imgsrc+'game/squareOne_1.png', 'Square', 'A'], // Square I
+			['', imgsrc+'game/squareOne_2.png', 'Square', 'B'], // Square II
+			['', imgsrc+'game/circleOne_1.png', 'Circle', 'A'], // Circle I
+			['', imgsrc+'game/circleOne_2.png', 'Circle', 'B'], // Circle II
+			['', imgsrc+'game/squareTwo_3.png', 'Square', 'C']	// Square III
+		];
+		if (debugMode) { 
+			for (let i = 0; i < 8; i++) { 
+				image.push(['', imgsrc+'game/squareTwo_3.png', 'Square', 'C']);
+			}
+		}
+		audio = [];
+		spritesheet = [];
+		return media.returnType(type); 
+	},
+
+	returnType : function (type) {
+		if (type == 'image') return image;
+		else if (type == 'spritesheet') return spritesheet;
+		else if (type == 'audio') return audio;
+	},
+
+};
+
+// Control navigation icons on the top of the screen
+let iconSettings = {
+
+    // Add navigation icons on the top of the screen based on parameters
+    func_addIcons: function (left_side, right_side, // icon side
+							left_btn0, left_btn1, left_btn2, // first 3 icon spaces
+							right_btn0, right_btn1, // last 2 icon spaces
+							level, helpBtn) { // auxiliar variables
+
+        let left_x = 10;
+        let right_x = defaultWidth - 50 - 10;
+
+        // 'Descriptive labels' for the navigation icons
+
+        if (left_side) this.left_text = game.add.text(left_x, 53, "", textStyles.overtitle);
+
+        if (right_side) {
+            this.right_text = game.add.text(right_x + 50, 53, "", textStyles.overtitle);
+            this.right_text.anchor.setTo(1, 0.02);
+        }
+
+        // 'Icons' on the LEFT side of the page
+
+        if (left_btn0) { // Return to select difficulty screen
+			const icon_back = game.add.sprite(left_x, 10, 'back');
+			
+            icon_back.inputEnabled = true;
+            icon_back.input.useHandCursor = true;
+            icon_back.events.onInputDown.add(this.func_callState, { state: level });
+            icon_back.events.onInputOver.add(function () { this.left_text.text = lang.menu_back }, { left_text: this.left_text });
+            icon_back.events.onInputOut.add(function () { this.left_text.text = "" }, { left_text: this.left_text });
+            // Offsets value of x for next icon
+            left_x += 50;
+        }
+
+        if (left_btn1) { // Return to main menu screen
+			const icon_list = game.add.sprite(left_x, 10, 'list');
+			
+            icon_list.inputEnabled = true;
+            icon_list.input.useHandCursor = true;
+            icon_list.events.onInputDown.add(this.func_callState, { state: "menu" });
+            icon_list.events.onInputOver.add(function () { this.left_text.text = lang.menu_list }, { left_text: this.left_text });
+            icon_list.events.onInputOut.add(function () { this.left_text.text = "" }, { left_text: this.left_text });
+            // Offsets value of x for next icon
+            left_x += 50;
+        }
+
+        if (left_btn2) { // In some levels, shows solution to the game
+			const icon_help = game.add.sprite(left_x, 10, 'help');
+			
+            icon_help.inputEnabled = true;
+            icon_help.input.useHandCursor = true;
+            icon_help.events.onInputDown.add(helpBtn);
+            icon_help.events.onInputOver.add(function () { this.left_text.text = lang.menu_help }, { left_text: this.left_text });
+            icon_help.events.onInputOut.add(function () { this.left_text.text = "" }, { left_text: this.left_text });
+            // Offsets value of x for next icon
+            left_x += 50;
+        }
+
+        // 'Icons' on the RIGHT side of the page
+
+        if (right_btn0) { // Turns game audio on/off
+            this.icon_audio = game.add.sprite(right_x, 10, 'audio');
+			audioStatus ? this.icon_audio.frame = 0 : this.icon_audio.frame = 1;
+			
+            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 });
+            // Offsets value of x for next icon
+            right_x -= 50;
+        }
+
+        if (right_btn1) { // Return to select language screen
+			this.icon_world = game.add.sprite(right_x, 10, 'world');
+			
+            this.icon_world.inputEnabled = true;
+            this.icon_world.input.useHandCursor = true;
+            this.icon_world.events.onInputDown.add(this.func_callState, { state: "language" });
+            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 });
+            // Offsets value of x for next icon
+            right_x -= 50;
+        }
+
+    },
+
+    // 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;
+        this.icon_world.x = newWidth - 50 - 50 - 10;
+    },
+
+    func_callState: function () {
+
+        if (audioStatus) beepSound.play();
+		
+		game.state.start(this.state);
+	
+	}
+
+};

js/map.js

@@ -5,75 +5,82 @@
         ---------------------------- end of phaser functions
         func_loadGame: function(){},
     }
+
+    let endState = {
+        create: function(){},
+        update: function(){},
+        ---------------------------- end of phaser functions
+    };
 */
 
+// MAP SCREEN: game map where character advances as he passes a level
 let mapState = {
 
-    create: function() {
-        
+    create: function () {
+
         // Background
         game.add.image(0, 40, 'bgmap');
-        
+
         // Calls function that loads navigation icons
-        iconSettings.func_addIcons(true,false,
-                                    true,true,false,
-                                    false,false,
-                                    'difficulty',false);
-                
+        iconSettings.func_addIcons(true, false,
+            true, true, false,
+            false, false,
+            'difficulty', false);
+
         // Progress bar
-        let percentText = passedLevels*25;
-        let percentBlocks = passedLevels;
+        let percentText = completedLevels * 25;
+        let percentBlocks = completedLevels;
 
-        for(let p=0;p<percentBlocks;p++){
-            let block = game.add.image(660+p*37.5, 10, 'block');
-                block.scale.setTo(2.6, 1);
+        for (let p = 0; p < percentBlocks; p++) {
+            let block = game.add.image(660 + p * 37.5, 10, 'block');
+            block.scale.setTo(2.6, 1);
         }
 
-        game.add.text(820, 10, percentText+'%', textStyles.subtitle3);
-        game.add.text(650, 10, lang.difficulty + ' ' + levelDifficulty, textStyles.subtitle3).anchor.setTo(1,0);
+        game.add.text(820, 10, percentText + '%', textStyles.subtitle2);
+        game.add.text(650, 10, lang.difficulty + ' ' + levelDifficulty, textStyles.subtitle2).anchor.setTo(1, 0);
         game.add.image(660, 10, 'pgbar');
-        
-         //Road
+
+        // Road
         this.points = {
-            'x': [ 90, 204, 318, 432, 546, 660 ],
-            'y': [ 486, 422, 358, 294, 230, 166 ]
+            'x': [90, 204, 318, 432, 546, 660],
+            'y': [486, 422, 358, 294, 230, 166]
         };
-        
-        if(currentGameState=="gameSquareOne"){
-        	//Garage
-	        let garage = game.add.image(this.points.x[0], this.points.y[0], 'garage');
-	        garage.scale.setTo(0.4);
-	        garage.anchor.setTo(0.5, 1);
-	         //Farm
-	        let farm = game.add.image(this.points.x[5], this.points.y[5], 'farm');
-	        farm.scale.setTo(0.6);
-	        farm.anchor.setTo(0.1, 0.7);
-        }else{
-	      	//House
-	        let house = game.add.image(this.points.x[0], this.points.y[0], 'house');
-	        house.scale.setTo(0.7);
-	        house.anchor.setTo(0.7, 0.8);
-	         //School
-	        let school = game.add.image(this.points.x[5], this.points.y[5], 'school');
-	        school.scale.setTo(0.35);
-	        school.anchor.setTo(0.2, 0.7);
-	    }
-
-         //Trees and Rocks
-        
+
+        if (currentGameState == "gameSquareOne") {
+            //Garage
+            let garage = game.add.image(this.points.x[0], this.points.y[0], 'garage');
+            garage.scale.setTo(0.4);
+            garage.anchor.setTo(0.5, 1);
+            //Farm
+            let farm = game.add.image(this.points.x[5], this.points.y[5], 'farm');
+            farm.scale.setTo(0.6);
+            farm.anchor.setTo(0.1, 0.7);
+        } else {
+            //House
+            let house = game.add.image(this.points.x[0], this.points.y[0], 'house');
+            house.scale.setTo(0.7);
+            house.anchor.setTo(0.7, 0.8);
+            //School
+            let school = game.add.image(this.points.x[5], this.points.y[5], 'school');
+            school.scale.setTo(0.35);
+            school.anchor.setTo(0.2, 0.7);
+        }
+
+        //Trees and Rocks
+
         const rocks = {
-             'x': [156, 275, 276, 441, 452, 590, 712],
-             'y': [309, 543, 259, 156, 419, 136, 316]
+            'x': [156, 275, 276, 441, 452, 590, 712],
+            'y': [309, 543, 259, 156, 419, 136, 316]
         }
 
         const r_types = [1, 1, 2, 1, 2, 2, 2];
-        
-        for(let i=0; i<r_types.length; i++){
-            if(r_types[i]==1){
+
+        for (let i = 0; i < r_types.length; i++) {
+            if (r_types[i] == 1) {
                 let sprite = game.add.image(rocks.x[i], rocks.y[i], 'rock');
                 sprite.scale.setTo(0.32);
                 sprite.anchor.setTo(0.5, 0.95);
-            }else if(r_types[i]==2){
+            } else if (r_types[i] == 2) {
                 let sprite = game.add.image(rocks.x[i], rocks.y[i], 'birch');
                 sprite.scale.setTo(0.4);
                 sprite.anchor.setTo(0.5, 0.95);
@@ -81,98 +88,228 @@ let mapState = {
         }
 
         const trees = {
-             'x': [105, 214, 354, 364, 570, 600, 740, 779],
-             'y': [341, 219, 180, 520, 550, 392, 488, 286]
+            'x': [105, 214, 354, 364, 570, 600, 740, 779],
+            'y': [341, 219, 180, 520, 550, 392, 488, 286]
         }
 
         const t_types = [2, 4, 3, 4, 1, 2, 4, 4];
-        
-        for(let i=0; i<t_types.length; i++){
-            let sprite = game.add.image(trees.x[i], trees.y[i], 'tree'+t_types[i]);
+
+        for (let i = 0; i < t_types.length; i++) {
+            const sprite = game.add.image(trees.x[i], trees.y[i], 'tree' + t_types[i]);
             sprite.scale.setTo(0.6);
             sprite.anchor.setTo(0.5, 0.95);
         }
-        
-        // places
-        for (let p = 1; p < this.points.x.length -1; p++){
-            let place;
-            if(p<levelPosition){
-                place = game.add.image(this.points.x[p], this.points.y[p], 'place_b');
-            }else if (levelMove && p==levelPosition){
-                place = game.add.image(this.points.x[p], this.points.y[p], 'place_b');
-            }else{
-                place = game.add.image(this.points.x[p], this.points.y[p], 'place_a');
-            }
+
+        // Map positions
+        for (let p = 1; p < this.points.x.length - 1; p++) {
+
+            const aux = (p < mapPosition || (mapCanMove && p == mapPosition)) ? 'place_b' : 'place_a';
+            const place = game.add.image(this.points.x[p], this.points.y[p], aux);
             place.anchor.setTo(0.5, 0.5);
             place.scale.setTo(0.3);
-            let sign = game.add.image(this.points.x[p]-20, this.points.y[p]-60, 'sign');
+
+            const sign = game.add.image(this.points.x[p] - 20, this.points.y[p] - 60, 'sign');
             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, textStyles.difficultyLabel);
+
+            if (p > 0 && p < this.points.x.length - 1) {
+                const 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(currentGameState=="gameSquareOne"){
-	    	this.character = game.add.sprite(this.points.x[levelPosition], this.points.y[levelPosition], 'tractor');
+        if (currentGameState == "gameSquareOne") {
+            this.character = game.add.sprite(this.points.x[mapPosition], this.points.y[mapPosition], 'tractor');
+
+            if (sublevelType == 'Plus') {
+                this.character.animations.add('walk', [0, 1, 2, 3, 4]);
+                this.character.scale.setTo(0.5);
+            } else {
+                this.character.animations.add('walk', [5, 6, 7, 8, 9]);
+                this.character.scale.setTo(-0.5, 0.5);
+            }
 
-	        this.character.animations.play('walk', 5, true);
-	        this.character.angle -= 25;
-        }else{
-	        this.character = game.add.sprite(this.points.x[levelPosition], this.points.y[levelPosition], 'kid_run');
+            this.character.animations.play('walk', 5, true);
 
-	        this.character.animations.add('run');
-	        this.character.animations.play('run', 6, true);
+        } else {
+            this.character = game.add.sprite(this.points.x[mapPosition], this.points.y[mapPosition], 'kid_run');
+            this.character.animations.add('run');
+            this.character.animations.play('run', 6, true);
+            this.character.scale.setTo(0.5);
         }
+
         this.character.anchor.setTo(0.5, 1);
-        this.character.scale.setTo(0.5);
+        this.character.angle -= 25;
+
         game.physics.arcade.enable(this.character);
 
         // Delay to next level
         this.count = 0;
         this.wait = 60;
-        
+
     },
 
-    update: function() {
-        
+    update: function () {
+
         // Wait 2 seconds before moving or staring a game
-        this.count ++;
-        if(this.count<=this.wait) return;
+        this.count++;
+        if (this.count <= this.wait) return;
 
-        if(!levelMove){
+        if (!mapCanMove) {
             this.func_loadGame();
         }
-        
+
         // If momevent is enabled, move to next point from actual
-        if(levelMove){
+        if (mapCanMove) {
             game.physics.arcade.moveToXY(
-                this.character, 
-                this.points.x[levelPosition+1],
-                this.points.y[levelPosition+1],
+                this.character,
+                this.points.x[mapPosition + 1],
+                this.points.y[mapPosition + 1],
                 100
-            );    	
-            
+            );
+
             // I kid/tractor reached the end, stop movement
-            if(Math.ceil(this.character.x)==this.points.x[levelPosition+1] || Math.ceil(this.character.y)==this.points.y[levelPosition+1]){
-                levelMove=false;
-                levelPosition += 1; //Update position
+            if (Math.ceil(this.character.x) == this.points.x[mapPosition + 1] || Math.ceil(this.character.y) == this.points.y[mapPosition + 1]) {
+                mapCanMove = false;
+                mapPosition += 1; //Update position
             }
         }
     },
-        
+
     //MapLoading function
-    func_loadGame: function(){
-    	
-        if(audioStatus) beepSound.play();
+    func_loadGame: function () {
+
+        if (audioStatus) beepSound.play();
 
-        if(levelPosition<=4){
-        	game.state.start(currentGameState);
-        }else{
-        	game.state.start('end');
-    	}
+        if (mapPosition <= 4) game.state.start(currentGameState);
+        else game.state.start('end');
 
     }
-    
-};
+
+};
+
+// ENDING SCREEN: animation after a full level is completed
+let endState = {
+
+    create: function () {
+
+        // Background
+        game.add.image(0, 0, 'bgimage');
+
+        //Clouds
+        game.add.image(300, 100, 'cloud');
+        game.add.image(660, 80, 'cloud');
+        game.add.image(110, 85, 'cloud').scale.setTo(0.8);
+
+        //Floor
+        for (let i = 0; i < 9; i++) {
+            game.add.image(i * 100, 501, 'floor');
+        }
+
+        // Progress bar
+        for (let p = 0; p < 5; p++) {
+            let block = game.add.image(660 + p * 30, 10, 'block');
+            block.scale.setTo(2, 1); //Scaling to double width
+        }
+        game.add.text(820, 10, '100%', textStyles.subtitle2);
+        game.add.text(650, 10, lang.difficulty + ' ' + levelDifficulty, textStyles.subtitle2).anchor.setTo(1, 0);
+        game.add.image(660, 10, 'pgbar');
+
+        game.add.sprite(30, 280, 'tree4');
+        game.add.sprite(360, 250, 'tree2');
+
+        if (currentGameState == 'gameCircleOne') {
+
+            //School and trees
+            game.add.sprite(600, 222, 'school').scale.setTo(0.7);
+            //kid
+            this.kid = game.add.sprite(0, -152, 'kid_run');
+            this.kid.anchor.setTo(0.5, 0.5);
+            this.kid.scale.setTo(0.7);
+            this.kid.animations.add('walk', [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]);
+            //globo
+            this.balloon = game.add.sprite(0, -260, 'balloon');
+            this.balloon.anchor.setTo(0.5, 0.5);
+            this.basket = game.add.sprite(0, -150, 'balloon_basket');
+            this.basket.anchor.setTo(0.5, 0.5);
+
+        } else if (currentGameState == 'gameSquareTwo') {
+
+            //School and trees
+            game.add.sprite(600, 222, 'school').scale.setTo(0.7);
+            //kid
+            this.kid = game.add.sprite(0, 460, 'kid_run');
+            this.kid.anchor.setTo(0.5, 0.5);
+            this.kid.scale.setTo(0.7);
+            this.kid.animations.add('walk', [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]);
+
+            this.kid.animations.play('walk', 6, true);
+
+        } else if (currentGameState == 'gameSquareOne') {
+
+            //Farm and trees
+            game.add.sprite(650, 260, 'farm').scale.setTo(1.1);
+            //tractor
+            this.tractor = game.add.sprite(0, 490, 'tractor');
+            this.tractor.anchor.setTo(0.5, 0.5);
+            this.tractor.scale.setTo(0.8);
+            if (sublevelType == 'Plus') this.tractor.animations.add('tractor_run', [0, 1, 2, 3, 4]);
+            else {
+                this.tractor.animations.add('tractor_run', [5, 6, 7, 8, 9]);
+                this.tractor.scale.x *= -1;
+            }
+            this.tractor.animations.play('tractor_run', 5, true);
+
+        } else {
+            if (debugMode) console.log("Error! Name of the game state is not valid!");
+        }
+
+    },
+
+    update: function () {
+
+        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 {
+                    completedLevels = 0;
+                    game.state.start('menu');
+                }
+            } else {
+                this.balloon.y += 2;
+                this.basket.y += 2;
+                this.kid.y += 2;
+
+                this.balloon.x += 1;
+                this.basket.x += 1;
+                this.kid.x += 1;
+            }
+
+        } else if (currentGameState == 'gameSquareTwo') {
+
+            if (this.kid.x <= 700) {
+                this.kid.x += 2;
+            } else {
+                completedLevels = 0;
+                game.state.start('menu');
+            }
+
+        } else if (currentGameState == 'gameSquareOne') {
+
+            if (this.tractor.x <= 700) {
+                this.tractor.x += 2;
+            } else {
+                completedLevels = 0;
+                game.state.start('menu');
+            }
+
+        } else {
+            if (debugMode) console.log("Error! Name of the game state is not valid!");
+        }
+
+    },
+
+}

js/menu.js

@@ -1,5 +1,6 @@
 /*
     let menuState = {
+        preload: function(){},
         create: function(){},
         ---------------------------- end of phaser functions
         func_loadGame: function(){},
@@ -11,17 +12,22 @@
 // MENU SCREEN: main menu of the game where the user can select the level he wants to play
 let menuState = {
 
-    create: function() {
-        
+    preload: function() {
+        for(let i=0, menuIcons = media.menu('image'); i < menuIcons.length; i++){
+			game.load.image('game' + i, menuIcons[i][1]);
+		}
+    },
+
+    create: function () {
+
         // 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{
+        if (media.menu('image').length > 8) {
+            const aux = media.menu('image').length - 8;
+            this.extraWidth = (aux % 2 == 0) ? (aux / 2) * 235 : ((aux + 1) / 2) * 235; // Each extra column holds 2 levels 
+        } else {
             this.extraWidth = 0;
         }
 
@@ -31,56 +37,56 @@ let menuState = {
         // LABELS
 
         // 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);
+        this.player_info = game.add.text(this.game.world.centerX - this.extraWidth / 2, 40, lang.welcome + ", " + playerName + "!", textStyles.overtitle);
+        this.player_info.anchor.setTo(0.5, 0.5);
 
         // 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);
+        this.title = game.add.text(this.game.world.centerX - this.extraWidth / 2, 80, lang.menu_title, textStyles.title1);
+        this.title.anchor.setTo(0.5, 0.5);
 
         // 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);
+        this.lbl_game = game.add.text(this.game.world.centerX - this.extraWidth / 2, 110, "", textStyles.subtitle1);
+        this.lbl_game.anchor.setTo(0.5, 0.5);
 
         // ICONS
 
         // Calls function that loads navigation icons
-		iconSettings.func_addIcons(false,true,
-                                    false,false,false,
-                                    true,true,
-                                    false,false);
+        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');
+        for (let i = 0, width = this.game.world.width; i < 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
+        let x = -350; // First column
+        let y = -70; // Top line
         const menuObjList = [];
 
-		for(let i=0; i<loadAssets.levelTypeList.length; i++){
+        for (let i = 0, length = media.menu('image').length; i < length; i++) {
             // Adds level buttons
-			menuObjList[i] = game.add.sprite(defaultWidth/2 + x, this.game.world.centerY + y, 'game'+i);
+            menuObjList[i] = game.add.sprite(defaultWidth / 2 + x, this.game.world.centerY + y, 'game' + i);
             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], 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});
+            menuObjList[i].inputEnabled = true;
+            menuObjList[i].input.useHandCursor = true;
+            menuObjList[i].events.onInputDown.add(this.func_loadGame, { levelType: media.menu('image')[i][3], shape: media.menu('image')[i][2], game: this.game, extraWidth: this.extraWidth });
+            menuObjList[i].events.onInputOver.add(this.func_showTitle, { levelType: media.menu('image')[i][3], shape: media.menu('image')[i][2], 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; // The next will be at the top line
-				x += 235; // The next will be at the next column
-			}
+            if (i % 2 == 0) {
+                y = 90; // The next will be at the bottom line
+            } else {
+                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
@@ -89,80 +95,80 @@ let menuState = {
     },
 
     // MANAGES SIDE SCROLLING
-    update: function(){
-        
+    update: function () {
+
         // On mouse release calls function
-        if(this.input.activePointer.leftButton.isUp){
+        if (this.input.activePointer.leftButton.isUp) {
             this.inputUp();
         }
 
         // On mouse click calls function
-        if(this.input.activePointer.leftButton.isDown){
+        if (this.input.activePointer.leftButton.isDown) {
             this.inputDown();
         }
 
         // If true side scrolls
-        if(this.isCameraMoving){
-            // 'this.camera' is a shorthand for 'World.camera' defined by Phaser
-            this.camera.x      += (this.inputStartPosition.x - this.input.activePointer.x)/50;
+        if (this.isCameraMoving) {
+            // 'this.camera' is a shorthand for 'World.camera'
+            this.camera.x += (this.inputStartPosition.x - this.input.activePointer.x) / 10;
 
+            const move = (this.game.world.centerX - this.extraWidth / 2) + this.camera.x;;
             // 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 );
+            this.title.x = move;
+            this.lbl_game.x = move;
+            this.player_info.x = move;
+            iconSettings.func_refreshRightIcons_x((defaultWidth) + this.camera.x);
         }
 
     },
-    
+
     // ON RELEASE
-    inputUp: function(){
+    inputUp: function () {
         this.isCameraMoving = false;
     },
-    
+
     // ON CLICK
-    inputDown: function(){
-        if(!this.isCameraMoving){
+    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;
     },
 
     //calls the selected game menu screen
-    func_loadGame: function(){
+    func_loadGame: function () {
 
         // 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("stage width (after): " + this.game.world.width);
 
-        if(audioStatus) this.beep.play();
+        if (audioStatus) beepSound.play();
 
         levelShape = this.shape;
         levelType = this.levelType;
 
-        if(levelType=="C") currentGameState = "game"+levelShape+"Two";
-        else currentGameState = "game"+levelShape+"One";
-         
-        if(debugMode) console.log(currentGameState+", "+levelType);
+        if (levelType == "C") currentGameState = "game" + levelShape + "Two";
+        else currentGameState = "game" + levelShape + "One";
+
+        if (debugMode) console.log("Game State: " + currentGameState + ", " + levelType);
 
         // Calls level difficulty screen
         game.state.start('difficulty');
+
     },
 
-    func_showTitle: function(){
-        
+    func_showTitle: function () {
+
         let title = "", type = "";
-        
-        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(type!="") title += " " + type;
+
+        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 (type != "") title += " " + type;
 
         // Shows level title on the label
         this.lbl_game.text = title;
@@ -171,13 +177,13 @@ let menuState = {
 
     },
 
-    func_clearTitle: function(){
-        
+    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

@@ -1,7 +1,7 @@
 /*
     let langState = {
         create: function(){},
-        --------------------------------------- end of phaser functions
+        -------------------------------------- end of phaser functions
         func_setLang: function(){} //calls loadState
     };
     
@@ -13,289 +13,167 @@
         
     let nameState = {
         create: function(){},
-        ------------------------------------------------ end of phaser functions
+        -------------------------------------- end of phaser functions
         func_checkEmptyName: function(){}
-        func_saveName: function(){} //calls menu.js -> menuState
-    };
-
-    let iconSettings = {
-        func_addIcons: function(_,_,_,_,_,_,_,_,_){},
-        func_callState: function(){}
+        func_saveName: function(){}
     };
 */
 
 // 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);
+    create: function () {
 
-        game.stage.backgroundColor = '#cce5ff';
+        // Sets stage width back to default (if we are back from 'menu' state where it can be changed) 
+        if (this.game.world.width != defaultWidth) this.game.world.setBounds(0, 0, defaultWidth, this.game.world.height);
         
-        // Preparing and setting language screen elements
-
+        // Parameters for the elements on the screen
         const langs = {
-            list: [],
-            text: ['FRAÇÕES  ', 'FRAZIONI  ',   'FRACTIONS  ',  'FRACCIONES  ', 'FRACTIONS  '],
-            flag: ['flag_BR',   'flag_IT',      'flag_US',      'flag_PE',      'flag_FR'    ],
-            lang: ['pt_BR',     'it_IT',        'en_US',        'es_PE',        'fr_FR'      ],
-            x_text: [-220, -220, -220,  200, 200],
-            x_flag: [-120, -120, -120,  300, 300],
-            y:      [-180,    0,  180, -100, 100]
+            text: ['FRAÇÕES  ', 'FRAZIONI  ', 'FRACTIONS  ', 'FRACCIONES  ', 'FRACTIONS  '], // Language names
+            flag: ['flag_BR'  , 'flag_IT'   , 'flag_US'    , 'flag_PE'     , 'flag_FR'    ], // Icon names
+            lang: ['pt_BR'    , 'it_IT'     , 'en_US'      , 'es_PE'       , 'fr_FR'      ], // Parameters sent for language object
+            x: [-220, -220, -220,  200, 200],
+            y: [-180,    0,  180, -100, 100]
         }
 
-        for(let i=0; i<langs.lang.length; i++){
+        // Create elements on screen  
+        for (let i = 0, length = langs.lang.length; i < 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], 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]);       
-            langs.list[i].anchor.setTo(0.5, 0.5);
-            // Set event listener for the flags
-            langs.list[i].inputEnabled = true;
-            langs.list[i].input.useHandCursor = true;
-            langs.list[i].events.onInputDown.add(this.func_setLang,{ langs_lang: langs.lang[i] });
-            langs.list[i].events.onInputOver.add(function(){ this.langs_list.scale.setTo(1.05) },{ langs_list: langs.list[i] });
-            langs.list[i].events.onInputOut.add( function(){ this.langs_list.scale.setTo(1)    },{ langs_list: langs.list[i] });
+            const language = game.add.text(this.game.world.centerX + langs.x[i], this.game.world.centerY + langs.y[i], langs.text[i], textStyles.title2);
+            language.anchor.setTo(1, 0.5);
+
+            // Add icons for flags
+            const flag = game.add.sprite(this.game.world.centerX + langs.x[i] + 100, this.game.world.centerY + langs.y[i], langs.flag[i]);
+            flag.anchor.setTo(0.5, 0.5);
+            flag.inputEnabled = true;
+            flag.input.useHandCursor = true;
+            flag.events.onInputDown.add(this.func_setLang, { langs_lang: langs.lang[i] });
+            flag.events.onInputOver.add(function () { this.flag.scale.setTo(1.05) }, { flag: flag });
+            flag.events.onInputOut.add(function () { this.flag.scale.setTo(1) }, { flag: flag });
+        
         }
 
     },
-    
+
     // Calls loading screen while loads language
-    func_setLang: function(){
-        // Sets value of global 'langString' to chosen language name e.g 'pt_BR'
+    func_setLang: function () {
+        // Saves language name e.g 'pt_BR'
         langString = this.langs_lang;
         // Calls loading screen
         game.state.start('load');
-    
     }
 
 };
 
-// LOADING SCREEN: shows loading bar while loads and sets json dictionary
+
+
+
+// Loads selected language to be able to translate the game text
 let loadState = {
-    
-    preload: function() {
 
-        let progressBar = game.add.sprite(game.world.centerX, game.world.centerY, 'progressBar');
-        progressBar.anchor.setTo(0.5, 0.5);
-        game.load.setPreloadSprite(progressBar);
+    preload: function () {
 
-        // Loads jason dictionary, setting the game language chosen by the player
-        game.load.json('dictionary', 'assets/languages/'+langString+'.json');
-        
-    },
+        // Progress bar
+		const progressBar = game.add.sprite(game.world.centerX, game.world.centerY, 'progressBar');
+		progressBar.anchor.setTo(0.5, 0.5);
+		game.load.setPreloadSprite(progressBar);
 
-    create: function() {  
+        // Loads json with language chosen by the player
+        game.load.json('dictionary', 'assets/lang/' + langString + '.json');
+
+    },
 
-        // Set value of global 'lang' to json's dictionary 
-        lang = game.cache.getJSON('dictionary');
-        if(debugMode) console.log("language: " + langString); 
+    create: function () {
+ 
+        // object used to translate text
+        lang = game.cache.getJSON('dictionary'); 
         
-        if(this.firstTime == undefined){ // first time opening ifractions goes from 'language' to 'name' then 'menu' screens 
+        if (debugMode) console.log("Language: " + langString);
+
+        // Make sure to only ask for player name on the first time oppening the game
+        if (this.firstTime == undefined) { 
             this.firstTime = false;
-            game.state.start('name');
-        }else game.state.start('menu'); // if changing language during the game skips 'name' screen          
-    
+            game.state.start('name'); // first time opening ifractions ('language' >> 'name' >> 'menu')
+        } else {
+            game.state.start('menu'); // if changing language during the game ('language' >>>> 'menu')         
+        }
+
     }
 
 };
 
+
+
+
 // NAME SCREEN: asks for player's name 
 let nameState = {
 
-    create: function() {
-          
-        // Set title and error text
+    create: function () {
 
-        const title = game.add.text(this.game.world.centerX, this.game.world.centerY - 100, lang.insert_name, textStyles.title);
+        // Set title and warning text
+
+        const title = game.add.text(this.game.world.centerX, this.game.world.centerY - 100, lang.insert_name, textStyles.title1);
         title.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
+        this.warningEmptyName = game.add.text(this.game.world.centerX, this.game.world.centerY - 70, "", textStyles.overtitle);
+        this.warningEmptyName.anchor.setTo(0.5);
+
+        // Set 'ok' button that gets player's information
         
-        let btn = game.add.graphics(this.game.world.centerX - 84, this.game.world.centerY + 70);
-        btn.lineStyle(1, 0x293d3d);
-        btn.beginFill(0x3d5c5c);
+        const btn = game.add.graphics(this.game.world.centerX - 84, this.game.world.centerY + 70);
+        btn.beginFill(colors.teal);
         btn.drawRect(0, 0, 168, 60);
         btn.alpha = 0.5;
         btn.endFill();
-
         btn.inputEnabled = true;
         btn.input.useHandCursor = true;
         btn.events.onInputDown.add(this.func_checkEmptyName);
-        btn.events.onInputOver.add(function(){ btn.alpha=0.4 });
-        btn.events.onInputOut.add(function(){ btn.alpha=0.5 });
+        btn.events.onInputOver.add(function () { btn.alpha = 0.4 });
+        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, textStyles.buttonLabel);
-        ready.anchor.setTo(0.5);      
+        ready.anchor.setTo(0.5);
 
         // Makes text field visible
-        document.getElementById("text-field-div").style.visibility = "visible";
-        
+        document.getElementById("text-field").style.visibility = "visible";
+
         // 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();
+        document.getElementById("name_id").addEventListener('keypress', function (e) {
+            let keycode = e.keycode ? e.keycode : e.which;
+            if (keycode == 13) nameState.func_checkEmptyName();
         });
 
     },
-         
-    func_checkEmptyName: function() {
+
+    func_checkEmptyName: function () {
 
         // 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
+        if (document.getElementById("name_id").value == "") {
+            nameState.warningEmptyName.setText(lang.empty_name);
+        } else { // If text field is NOT empty calls function that saves the player's name
             nameState.func_saveName();
         }
 
     },
 
-    func_saveName: function() {
-        
-        // Saves player's input in global variable 'username'
-        username = document.getElementById("name_id").value;
-        if(debugMode) console.log("username: " + username);        
+    func_saveName: function () {
+
+        // Saves player's input in global variable 'playerName'
+        playerName = document.getElementById("name_id").value;
 
         // Hides and clears text field
-        document.getElementById("text-field-div").style.visibility = "hidden";
+        document.getElementById("text-field").style.visibility = "hidden";
         document.getElementById("name_id").value = "";
 
-        if(audioStatus) beepSound.play();
+        if (audioStatus) beepSound.play();
+
+        if (debugMode) console.log("Username: " + playerName);
 
         // 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 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;
-
-        // Labels for the navigation icons
-
-        if(left_side){
-            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, "", textStyles.overtitle);
-            this.right_text.anchor.setTo(1,0.02);
-        }
-
-        // 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');
-            // Events
-            this.icon_back.inputEnabled = true;
-            this.icon_back.input.useHandCursor = true;
-            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});
-            // 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');
-            // Events
-            this.icon_list.inputEnabled = true;
-            this.icon_list.input.useHandCursor = true;
-            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});
-            // 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});
-            // Offsets value of x for next icon
-            this.left_x += 50;
-        }
-
-        // 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});
-            // 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.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});
-            // Offsets value of x for next icon
-            this.right_x -= 50;
-        }
-
-    },
-
-    // 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;
-        this.icon_world.x = newWidth - 50 - 50 - 10;
-    },
-
-    func_callState: function(){
-
-        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
-
-}
-
+};

temp/file_2019_04_09_12_18.txt

@@ -1,5 +0,0 @@
-nome=
-INSERT INTO 'ifractions'
-(s_hostip, s_playername, s_datetime, s_lang, s_game, s_mode, s_operator, s_level, s_mappos, s_result, s_time, s_details)
-VALUES
-( '::1; localhost', '', '2019-04-09 12:42:18', 'pt', 'Square', 'A', 'Plus', 1, 1, 'true', 3, 'numBlocks:3, valBlocks: 1,1,1, blockIndex: 2, floorIndex: 2')

temp/file_2019_04_09_12_29.txt

@@ -1,5 +0,0 @@
-nome=
-INSERT INTO 'ifractions'
-(s_hostip, s_playername, s_datetime, s_lang, s_game, s_mode, s_operator, s_level, s_mappos, s_result, s_time, s_details)
-VALUES
-( '::1; localhost', '', '2019-04-09 12:43:29', 'pt', 'Square', 'A', 'Plus', 1, 1, 'true', 3, 'numBlocks:4, valBlocks: 1,1,1,1, blockIndex: 3, floorIndex: 3')

temp/file_2019_04_09_12_31.txt

@@ -1,4 +0,0 @@
-INSERT INTO 'ifractions'
-(s_hostip, s_playername, s_datetime, s_lang, s_game, s_mode, s_operator, s_level, s_mappos, s_result, s_time, s_details)
-VALUES
-( '::1; localhost', '', '2019-04-09 12:37:31', 'pt', 'Square', 'A', 'Plus', 1, 1, 'true', 3, 'numBlocks:3, valBlocks: 1,1,1, blockIndex: 2, floorIndex: 2')