- Menu GUI changes: changed menu and difficulty screens to make game selection more intuitive (deleted difficulty.js and menu.js now handles two states - menuScreen and menuScreenCustom)

- GUI changes in game icons and colors
- redefined text style and colors (name and values) to make it more intuitive
- fixed bugs and redefined way gameMechanics.js handles adding and rendering media
- added 'shadow' to media features
- fixed bug in scaling rectangles
- centered canvas in div
- centered text box in name screen
- changes in language files

assets/lang/en_US

@@ -14,11 +14,13 @@ circle_name=Circles
 square_name=Quadrangles
 label_name=labels
 mode_name=MODE
-with_name=WITH
-without_name=WITHOUT
+show=Show
 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
+sublevel=Sublevel
+continue=Continue
+custom_game=CUSTOMIZE THE CURRENT GAME

assets/lang/es_PE

@@ -14,11 +14,13 @@ circle_name=Circulos
 square_name=Cuadrilateros
 label_name=etiquetas
 mode_name=MODO
-with_name=CON
-without_name=SIN
+show=Mostrar
 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
+sublevel=Subnivel
+continue=Continúa
+custom_game=PERSONALIZAR EL JUEGO ACTUAL

assets/lang/fr_FR

@@ -14,11 +14,13 @@ circle_name=Circles
 square_name=Quadrangles
 label_name=étiquettes
 mode_name=MODE
-with_name=AVEC
-without_name=SANS
+show=Afficher les
 insert_name=ENTREZ VOTRE NOM
-ready=PRET
+ready=PRÊT
 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
+sublevel=Sous-niveau
+continue=Continuez
+custom_game=PERSONNALISER LE JEU ACTUEL

assets/lang/it_IT

@@ -12,13 +12,15 @@ 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
+label_name=legendas
+mode_name=MODO
+show=Mostra le
 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
+audio=AUDIO
+sublevel=Sottolivello
+continue=Continua
+custom_game=PERSONALIZZA IL GIOCO ATTUALE

assets/lang/pt_BR

@@ -13,12 +13,14 @@ 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
+mode_name=MODO
+show=Mostrar
 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
+audio=ÁUDIO
+sublevel=Subnível
+continue=Continue
+custom_game=PERSONALIZE O JOGO ATUAL

index.html

@@ -12,13 +12,23 @@
 	<link rel="stylesheet" href="css/bootstrap.min.css">
 
 	<style>
-		#text-field {
+		#iFractions-canvas {
+			padding: 0 auto 0 auto;
+			margin-left: auto;
+			margin-right: auto;
+			display: block;
+		}
+
+		#textbox {
 			position: absolute;
+			margin-left: auto;
+			margin-right: auto;
 			top: 300px;
-			margin-left: 340px;
+			left: 0;
+			right: 0;
+			text-align: center;
 			visibility: hidden;
 		}
-
 		input[type=text] {
 			background-color: #fff;
 			padding: 15px 40px;
@@ -29,16 +39,9 @@
 			color: #000;
 			text-align: center;
 		}
-
 		input:focus {
 			outline: 3px solid #85accc;
 		}
-
-		#iFractions-canvas {
-			padding: 0 auto 0 auto;
-			border: solid 3px #fff;
-		}
-
 	</style>
 
 </head>
@@ -54,10 +57,15 @@
 			<div class="panel-body">
 				<!-- iFractions game -->
 				<canvas id="iFractions-canvas"></canvas>
+				<!-- get player name -->
+				<div id="textbox" onsubmit="return false">
+					<input type="text" id="textbox-content" value="" size="13" maxlength="36">
+				</div>
+				
 			</div>
 		</div>
 
-		<div id="div-fps"><!-- display frames per second--></div>
+		<div id="div-fps"><!-- display frames per second in debugmode --></div>
 
 		<div class="panel panel-info">
 			<div class="panel-heading">TEAM</div>
@@ -92,23 +100,16 @@
 			</div>
 		</div>
 
-		<div id="text-field">
-			<form onsubmit="return false">
-				<input type="text" id="name_id" value="" size="13" maxlength="36">
-			</form>
-		</div>
-
 	</div>
 
 	<script src="js/preMenu.js"></script>
 	<script src="js/menu.js"></script>
-	<script src="js/difficulty.js"></script>
 	<script src="js/map.js"></script>
 	<script src="js/circleOne.js"></script>
 	<script src="js/squareOne.js"></script>
 	<script src="js/squareTwo.js"></script>
-	<script src="js/globals.js"></script>
 	<script src="js/gameMechanics.js"></script>
+	<script src="js/globals.js"></script>
 
 	<script>
 		

js/circleOne.js

@@ -86,7 +86,7 @@ const circleOne = {
 
         for (let i = 0; i <= 5; i++) {
             game.add.image(66 + i * distanceBetweenPoints, 526, 'place_off', 0.3).anchor(0.5, 0.5);
-            game.add.text(66 + i * distanceBetweenPoints, 560, i, textStyles.valueLabelBlue1);
+            game.add.text(66 + i * distanceBetweenPoints, 560, i, textStyles.h2_blue);
         }
 
         this.trace = game.add.graphic.rect(startX - 1, 526, 1, 1, undefined, 1);
@@ -96,7 +96,7 @@ const circleOne = {
         navigationIcons.func_addIcons(
             true, true, true, // left buttons
             true, false,      // right buttons
-            difficultyScreen, this.func_viewHelp
+            menuScreenCustom, this.func_viewHelp
         );
 
 
@@ -177,14 +177,14 @@ const circleOne = {
             if (divisor == 1) {
 
                 circle = game.add.graphic.circle(startX, 490 - i * this.circles.diameter, this.circles.diameter,
-                    lineColor, 2, colors.lightBlue, 1);
+                    lineColor, 2, colors.white, 1);
 
                 circle.anticlockwise = anticlockwise;
 
                 this.circles.angle.push(360);
 
                 if (fractionLabel) {
-                    label[0] = game.add.text(x, 490 - i * this.circles.diameter, divisor, textStyles.valueLabelBlue1);
+                    label[0] = game.add.text(x, 490 - i * this.circles.diameter, divisor, textStyles.h2_blue);
                     this.circles.label.push(label);
                 }
 
@@ -196,14 +196,14 @@ const circleOne = {
 
                 circle = game.add.graphic.arc(startX, 490 - i * this.circles.diameter, this.circles.diameter,
                     0, game.math.degreeToRad(degree), anticlockwise,
-                    lineColor, 2, colors.lightBlue, 1);
+                    lineColor, 2, colors.white, 1);
 
                 this.circles.angle.push(degree);
 
                 if (fractionLabel) {
-                    label[0] = game.add.text(x, 480 - i * this.circles.diameter + 32, divisor, textStyles.valueLabelBlue2);
-                    label[1] = game.add.text(x, 488 - i * this.circles.diameter, '1', textStyles.valueLabelBlue2);
-                    label[2] = game.add.text(x, 488 - i * this.circles.diameter, '___', textStyles.valueLabelBlue2);
+                    label[0] = game.add.text(x, 480 - i * this.circles.diameter + 32, divisor, textStyles.h4_blue);
+                    label[1] = game.add.text(x, 488 - i * this.circles.diameter, '1', textStyles.h4_blue);
+                    label[2] = game.add.text(x, 488 - i * this.circles.diameter, '___', textStyles.h4_blue);
                     this.circles.label.push(label);
                 }
 
@@ -274,7 +274,7 @@ const circleOne = {
 
         // BALLOON
 
-        this.balloon = game.add.image(this.balloonPlace, 350, 'balloon', 1, 1, 0.5);
+        this.balloon = game.add.image(this.balloonPlace, 350, 'balloon', 1, 0.5);
         this.balloon.alpha = 0.5;
         this.balloon.anchor(0.5, 0.5);
 
@@ -452,7 +452,7 @@ const circleOne = {
 
             const cur = self.road;
 
-            const valid = y > 60 && (x >= cur.xWithAnchor && x <= (cur.xWithAnchor + cur.width * cur.scaleWidth));
+            const valid = y > 60 && (x >= cur.xWithAnchor && x <= (cur.xWithAnchor + cur.width * cur.scale));
             if (valid) self.func_clicked(x);
         }
 
@@ -460,7 +460,7 @@ const circleOne = {
         if (levelType == 'B') {
             self.circles.all.forEach(cur => {
                 const distance = game.math.distanceToPointer(x, cur.xWithAnchor, y, cur.yWithAnchor);
-                const valid = distance <= cur.diameter / 2;
+                const valid = distance <= (cur.diameter / 2) * cur.scale;
                 if (valid) self.func_clicked(cur);
             });
         }
@@ -492,7 +492,7 @@ const circleOne = {
 
             self.circles.all.forEach(cur => {
                 const distance = game.math.distanceToPointer(x, cur.xWithAnchor, y, cur.yWithAnchor);
-                const valid = distance <= cur.diameter / 2;
+                const valid = distance <= (cur.diameter / 2) * cur.scale;
                 if (valid) {
                     self.func_overCircle(cur);
                     flag = true;

js/difficulty.js

@@ -1,297 +0,0 @@
-// DIFFICULTY SCREEN: player can select (I) sublevel type, (II) game difficulty and (III) turn on/off fractions labels
-const difficultyScreen = {
-
-    preload: function () {
-
-        document.body.style.cursor = "auto";
-        game.loop.stop();
-        game.event.clear();
-        game.animation.clear();
-
-        self = this;
-
-        // LOADING MEDIA
-        game.load.sprite(game.url[gameTypeString].sprite);
-        game.load.image(game.url[gameTypeString].image);
-
-    },
-
-    create: function () {
-
-        game.render.clear();
-
-        // Background color
-        game.add.graphic.rect(0, 0, 900, 600, colors.white, 0, colors.blueBckg, 1);
-
-        // Calls function that loads navigation icons
-        navigationIcons.func_addIcons(false, true, false,
-            true, false,
-            false, false);
-
-        // Title
-        game.add.text(defaultWidth / 2, 40, game.lang.game_menu_title, textStyles.title2);
-
-        // Icon that turns fraction labels ON/OFF
-        if (gameTypeString != 'squareTwo') {
-
-            const frame = (fractionLabel) ? 1 : 0;
-
-            // Text : 'with/without' labeling the fractions
-            this.labelText = game.add.text(defaultWidth / 2 - 100, 105, "", textStyles.subtitle2l);
-            this.labelText.name = fractionLabel ? game.lang.with_name + " " + game.lang.label_name : game.lang.without_name + " " + game.lang.label_name;
-            // Selection box
-            this.selectionBox = game.add.sprite(defaultWidth / 2 - 110 - 30, 75, 'select', frame, 0.12);
-        }
-
-        // SETTING DIFFICULTY LEVELS (STAIR)
-
-        this.stairs = [];
-
-        const maxStairHeight = 120;  // Maximum height of the stairs        
-
-        let stairHeight;    // Height growth of a stair
-        let stairWidth;     // Width of the stairs
-
-        let maxSublevel;    // number of sublevels
-        let maxDifficulty;  // Number of difficulty stairs (in each sublevel)
-
-        let xTheme;     // Start 'x' position of the illustrations on the left (theme: character/arrow/equalSign)
-        let xStair;     // Start 'x' position of the stairs
-        let xShape;     // Start 'x' position of the illustrations on the right (shapes)
-
-        switch (gameTypeString) {
-            case "squareOne":
-                stairHeight = 40;
-                stairWidth = 100;
-                maxSublevel = 2;
-                maxDifficulty = 3;
-                xTheme = 180;
-                xStair = 320;
-                xShape = (xTheme / 2) + xStair + stairWidth * maxDifficulty;
-                break;
-            case "squareTwo":
-            case "circleOne":
-                stairHeight = 29;
-                stairWidth = 85;
-                maxSublevel = 3;
-                maxDifficulty = 5;
-                xTheme = 150;
-                xStair = 240;
-                xShape = (xTheme / 2) + xStair + stairWidth * maxDifficulty;
-                break;
-        }
-
-        // Placing icons
-        switch (gameTypeString) {
-
-            case "squareOne":
-
-                // Blue square
-                game.add.graphic.rect(xShape, 175, 80, 40, colors.darkBlue, 2, colors.lightBlue, 1);
-                // Red square
-                game.add.graphic.rect(xShape, 330, 80, 40, colors.red, 2, colors.lightBlue, 1);
-
-                // Green tractor
-                game.add.sprite(xTheme + 30 - 50, 215 - 40, 'tractor', 1, 0.5);
-                // Red tractor
-                game.add.sprite(xTheme + 70 - 50, 370 - 41, 'tractor', 5, 0.5);
-
-                // Plus Arrow
-                game.add.image(xTheme + 100 - 20, 215 - 20, 'arrow_right', 0.3);
-                // Minus Arrow
-                game.add.image(xTheme - 20, 370 - 20, 'arrow_left', 0.3);
-
-                break;
-
-            case "circleOne":
-
-                // Blue Circle
-                game.add.graphic.circle(xShape, 175, 60, colors.darkBlue, 2, colors.lightBlue, 1);
-                // Red Circle
-                game.add.graphic.circle(xShape, 330, 60, colors.red, 2, colors.lightBlue, 1);
-                // Blue and red circle
-                game.add.graphic.circle(xShape - 30, 485, 60, colors.darkBlue, 2, colors.lightBlue, 1);
-                game.add.graphic.circle(xShape + 40, 485, 60, colors.red, 2, colors.lightBlue, 1);
-
-                // Kid plus
-                game.add.sprite(xTheme, 195, 'kid_walk', 0, 0.6).anchor(0.5, 0.5);
-                // Kid minus
-                game.add.sprite(xTheme + 40, 350, 'kid_walk', 12, 0.6).anchor(0.5, 0.5);
-
-                // Plus arrow
-                game.add.image(xTheme + 40 - 20, 195, 'arrow_right', 0.35);
-                // Minus arrow
-                game.add.image(xTheme - 20, 350 - 20, 'arrow_left', 0.35);
-                // Both plus and minus arrows
-                game.add.image(xTheme + 20 - 30, 500 - 40, 'arrow_double', 0.5);
-
-                break;
-
-            case "squareTwo":
-
-                // Equal sign
-                game.add.image(xTheme - 40, 370 - 40, 'equal', 0.7);
-
-                break;
-
-        }
-
-        const aux = {
-            color: [colors.diffBlue, colors.diffRed, colors.diffPurple],
-            y: [135, 285, 435],
-
-            _sublevel: [['Plus', 'Minus', 'Mixed'], ['A', 'B', 'C']],
-            get sublevel() { return (gameTypeString == 'squareTwo') ? this._sublevel[1] : this._sublevel[0]; },
-        };
-
-        // Placing difficulty 'stairs'
-        for (let i_subl = 0; i_subl < maxSublevel; i_subl++) { // sublevel (vertical)
-
-            for (let j_dif = 1; j_dif <= maxDifficulty; j_dif++) { // difficulty (horizontal)
-
-                // Parameters
-                const x = xStair + (stairWidth * (j_dif - 1));
-                const y = aux.y[i_subl] + maxStairHeight - j_dif * stairHeight;
-                const width = stairWidth;
-                const height = stairHeight * j_dif;
-
-                // Difficulty stairs
-                const stair = game.add.graphic.rect(x, y, width, height, colors.blueBckg, 1, aux.color[i_subl], 1);
-                stair.difficulty = j_dif;
-                stair.sublevelType = aux.sublevel[i_subl];
-
-                this.stairs.push(stair);
-
-                // Labels
-                const xLabel = x + stairWidth / 2;
-                const yLabel = y + (stairHeight * j_dif) / 2 + 10;
-                game.add.text(xLabel, yLabel, j_dif, textStyles.difficultyLabel);
-
-            }
-        }
-
-        game.event.add('click', difficultyScreen.func_onInputDown);
-        game.event.add('mousemove', difficultyScreen.func_onInputOver);
-
-        game.render.all();
-
-    },
-
-
-
-    /* EVENT HANDLER */
-
-    func_onInputDown: function (mouseEvent) {
-
-        const x = mouseEvent.offsetX;
-        const y = mouseEvent.offsetY;
-
-        // check if turned labels ON/OFF
-        if (gameTypeString != 'squareTwo') {
-
-            const cur = difficultyScreen.selectionBox;
-
-            const valid = y >= cur.yWithAnchor && y <= (cur.yWithAnchor + cur.height * cur.scaleHeight) &&
-                (x >= cur.xWithAnchor && x <= (cur.xWithAnchor + cur.width * cur.scaleWidth));
-
-            if (valid) difficultyScreen.func_setLabel(cur, difficultyScreen.labelText);
-
-        }
-
-        // check difficulty stairs
-        difficultyScreen.stairs.forEach((cur) => {
-
-            const valid = y >= cur.yWithAnchor && y <= (cur.yWithAnchor + cur.height * cur.scaleHeight) &&
-                (x >= cur.xWithAnchor && x <= (cur.xWithAnchor + cur.width * cur.scaleWidth));
-
-            if (valid) {
-                game.event.clear(self);
-                difficultyScreen.func_loadMap(cur.difficulty, cur.sublevelType);
-            }
-        });
-
-        navigationIcons.func_onInputDown(x, y);
-
-    },
-
-    func_onInputOver: function (mouseEvent) {
-
-        const x = mouseEvent.offsetX;
-        const y = mouseEvent.offsetY;
-        const flag = [false, false];
-
-        // check difficulty stairs
-        difficultyScreen.stairs.forEach((cur) => {
-
-            const valid = y >= cur.yWithAnchor && y <= (cur.yWithAnchor + cur.height * cur.scaleHeight) &&
-                (x >= cur.xWithAnchor && x <= (cur.xWithAnchor + cur.width * cur.scaleWidth));
-
-            if (valid) {
-                flag[0] = true;
-                cur.alpha = 0.5;
-            } else {
-                cur.alpha = 1;
-            }
-        });
-
-        if (gameTypeString != 'squareTwo') {
-
-            const cur = difficultyScreen.selectionBox;
-
-            const valid = y >= cur.yWithAnchor && y <= (cur.yWithAnchor + cur.height * cur.scaleHeight) &&
-                (x >= cur.xWithAnchor && x <= (cur.xWithAnchor + cur.width * cur.scaleWidth));
-
-            if (valid) {
-                flag[1] = true;
-            }
-        }
-
-        if (flag[0] || flag[1]) document.body.style.cursor = "pointer";
-        else document.body.style.cursor = "auto";
-
-        navigationIcons.func_onInputOver(x, y);
-
-        game.render.all();
-
-    },
-
-
-    /* GAME FUNCTIONS */
-
-    // Calls map state
-    func_loadMap: function (stairDifficulty, stairSublevelType) {
-
-        if (audioStatus) game.audio.beepSound.play();
-
-        mapPosition = 0;   //Map position
-        mapMove = true;       //Move no next point
-        gameDifficulty = stairDifficulty;  // difficulty for selected level (1..3 or 1..5)
-        sublevelType = stairSublevelType;   //Type of game
-        completedLevels = 0;       //reset the game progress when entering a new level
-
-        mapScreen.preload();
-
-    },
-
-    func_setLabel: function (selectionBox, selectionLabel) {
-
-        if (fractionLabel) {
-
-            fractionLabel = false;
-            selectionBox.curFrame = 0;
-            selectionLabel.name = game.lang.without_name + " " + game.lang.label_name;
-
-        } else {
-
-            fractionLabel = true;
-            selectionBox.curFrame = 1;
-            selectionLabel.name = game.lang.with_name + " " + game.lang.label_name;
-
-        }
-
-        if (audioStatus) game.audio.beepSound.play();
-
-        game.render.all();
-    }
-
-};

js/gameMechanics.js

@@ -5,123 +5,6 @@ const game = {
 	mediaTypes: ['lang', 'audio', 'image', 'sprite'],
 	loadedMedia: [],
 	isLoaded: [],
-	
-	// List of media URL
-	url: {
-		boot: {
-			image: [
-				// Scene
-				['bgimage', medSrc + 'scene/bg.jpg'],
-				['bgmap', 	medSrc + 'scene/bg_map.png'],
-				['bush', 	medSrc + 'scene/bush.png'],
-				['cloud', 	medSrc + 'scene/cloud.png'],
-				['floor', 	medSrc + 'scene/floor.png'],
-				['place_off', 	medSrc + 'scene/place_off.png'],
-				['place_on', 	medSrc + 'scene/place_on.png'],
-				['rock', 	medSrc + 'scene/rock.png'],
-				['road', 	medSrc + 'scene/road.png'],
-				['sign', 	medSrc + 'scene/sign.png'],
-				['tree1', 	medSrc + 'scene/tree.png'],
-				['tree2', 	medSrc + 'scene/tree2.png'],
-				['tree3', 	medSrc + 'scene/tree3.png'],
-				['tree4', 	medSrc + 'scene/tree4.png'],
-				// Flags
-				['flag_BR', medSrc + 'flag/BRAZ.jpg'],
-				['flag_FR', medSrc + 'flag/FRAN.jpg'],
-				['flag_IT', medSrc + 'flag/ITAL.png'],
-				['flag_PE', medSrc + 'flag/PERU.jpg'],
-				['flag_US', medSrc + 'flag/UNST.jpg'],
-				// Navigation icons on the top of the page
-				['back', 		medSrc + 'navig_icon/back.png'],
-				['help', 		medSrc + 'navig_icon/help.png'],
-				['home', 		medSrc + 'navig_icon/home.png'],
-				['language', 	medSrc + 'navig_icon/language.png'],
-				['menu', 		medSrc + 'navig_icon/menu.png'],
-				// Interactive icons
-				['arrow_down', 		medSrc + 'interac_icon/down.png'],
-				['error', 			medSrc + 'interac_icon/error.png'],
-				['help_pointer', 	medSrc + 'interac_icon/pointer.png'],
-				['ok',				medSrc + 'interac_icon/ok.png'],
-				// Non-interactive icons
-				['arrow_double', 	medSrc + 'non_interac_icon/double.png'],
-				['arrow_left', 		medSrc + 'non_interac_icon/left_arrow.png'],
-				['arrow_right', 	medSrc + 'non_interac_icon/right_arrow.png'],
-				['equal', 			medSrc + 'non_interac_icon/equal.png']
-			],
-			sprite: [
-				// Game Sprites
-				['kid_walk', 	medSrc + 'character/kid/walk.png', 26],
-				// Navigation icons on the top of the page
-				['audio', 		medSrc + 'navig_icon/audio.png', 2],
-				// Interactive icons
-				['select', 		medSrc + 'interac_icon/selectionBox.png', 2]
-			],
-			audio: [
-				// Sound effects
-				['beepSound', ['assets/audio/beep.ogg', 'assets/audio/beep.mp3']],
-				['okSound', ['assets/audio/ok.ogg', 'assets/audio/ok.mp3']],
-				['errorSound', ['assets/audio/error.ogg', 'assets/audio/error.mp3']]
-			]
-		},
-		menu: {
-			// @@ TRY TO MAKE GAME+I NOVAMENTE PARA NAO PRECISAR DEFINIR O NOME DO JOGO SEMPRE
-			image: [
-				// Level Icons
-				['game0', medSrc + 'levels/squareOne_1.png', 'Square', 'A'], // Square I
-				['game1', medSrc + 'levels/squareOne_2.png', 'Square', 'B'], // Square II
-				['game2', medSrc + 'levels/circleOne_1.png', 'Circle', 'A'], // Circle I
-				['game3', medSrc + 'levels/circleOne_2.png', 'Circle', 'B'], // Circle II
-				['game4', medSrc + 'levels/squareTwo_3.png', 'Square', 'C']	// Square III
-			],
-			//if (debugMode) {
-			//	for (let i = 0; i < 8; i++) {
-			//		image.push(['', medSrc + 'levels/squareTwo_3.png', 'Square', 'C']);
-			//	}
-			//}
-			sprite: [],
-			audio: []
-		},
-		squareOne: {
-			image: [
-				// Scene
-				['farm', 	medSrc + 'scene/farm.png'],
-				['garage', 	medSrc + 'scene/garage.png']
-			],
-			sprite: [
-				// Game sprites
-				['tractor', medSrc + 'character/tractor/tractor.png', 15]
-			],
-			audio: []
-		},
-		squareTwo: {
-			image: [
-				// Scene
-				['house', 	medSrc + 'scene/house.png'],
-				['school', 	medSrc + 'scene/school.png']
-			],
-			sprite: [
-				// Game sprites
-				['kid_standing', 	medSrc + 'character/kid/lost.png', 6],
-				['kid_run', 		medSrc + 'character/kid/run.png', 12]
-			],
-			audio: []
-		},
-		circleOne: {
-			image: [
-				// Scene
-				['house', medSrc + 'scene/house.png'],
-				['school', medSrc + 'scene/school.png'],
-				// Game images
-				['balloon', medSrc + 'character/balloon/airballoon_upper.png'],
-				['balloon_basket', medSrc + 'character/balloon/airballoon_base.png']
-			],
-			sprite: [
-				// Game sprites
-				['kid_run', medSrc + 'character/kid/run.png', 12]
-			],
-			audio: []
-		},
-	},
 
 	// Loads a list of URL to Cache
 	load: {
@@ -232,11 +115,44 @@ const game = {
 
 	// Adds new media to "media queue" to be rendered by current screen
 	add: {
+		default : {
+			// all
+			x: 0,
+			y: 0,
+			_xWithAnchor: 0,
+			_yWithAnchor: 0,
+			xAnchor: 0,
+			yAnchor: 0,
+
+			shadow : false,
+			shadowColor : "#0075c5",
+			shadowBlur : 20,
+			alpha: 1,
+
+			// image, sprite, square, circle
+			scale: 1,
+
+			// text
+			font: '14px Arial,sans-serif',
+			fill: '#000',
+			align: 'center',
+
+			// square, circle (image and sprite have width and height, but do not have default values)
+			width: 50,
+			height: 50,
+
+			lineColor: "#000",
+			lineWidth: 1,
+			fillColor: 0, // default no fill
+
+			// circle 
+			diameter: 50,
+			anticlockwise: false,
+		},
 		// game.add.image(x, y, img)
 		// game.add.image(x, y, img, scale)
-		// game.add.image(x, y, img, scaleWidth, scaleHeigth)
-		// game.add.image(x, y, img, scaleWidth, scaleHeigth, alpha)
-		image: function (x, y, img, sW, sH, alpha) {
+		// game.add.image(x, y, img, scale, alpha)
+		image: function (x, y, img, scale, alpha) {
 			if (x == undefined || y == undefined || img == undefined) console.error("Game error: parameters missing");
 			else if (game.image[img] == undefined) console.error("Game error: image not found in cache: " + img);
 			else {
@@ -244,29 +160,29 @@ const game = {
 					typeOfMedia: 'image',
 					name: img,
 
-					x: x || 0,
-					y: y || 0,
-					_xWithAnchor: x || 0,
-					_yWithAnchor: y || 0,
-					xAnchor: 0,
-					yAnchor: 0,
+					x: x || game.add.default.x,
+					y: y || game.add.default.y,
+					_xWithAnchor: x || game.add.default._xWithAnchor,
+					_yWithAnchor: y || game.add.default._yWithAnchor,
+					xAnchor: game.add.default.xAnchor,
+					yAnchor: game.add.default.yAnchor,
+
+					shadow : game.add.default.shadow,
+					shadowColor : game.add.default.shadowColor,
+					shadowBlur : game.add.default.shadowBlur,
+					alpha: (alpha != undefined) ? alpha : game.add.default.alpha,
 
-					scaleWidth: sW || 1,
-					scaleHeight: sW || 1,
+					scale: scale || game.add.default.scale,
 					width: game.image[img].width,
 					height: game.image[img].height,
 
-					alpha: alpha || 1,
-
 					anchor: function (xAnchor, yAnchor) {
 						this.xAnchor = xAnchor;
 						this.yAnchor = yAnchor;
 					},
-
-					get xWithAnchor() { return this.x - (this.width * this.scaleWidth * this.xAnchor); },
-					get yWithAnchor() { return this.y - (this.height * this.scaleHeight * this.yAnchor); }
+					get xWithAnchor() { return this.x - (this.width * this.scale * this.xAnchor); },
+					get yWithAnchor() { return this.y - (this.height * this.scale * this.yAnchor); }
 				};
-				if (sH != undefined) med.scaleHeight = sH;
 				game.render.queue.push(med);
 				return med;
 			}
@@ -274,7 +190,8 @@ const game = {
 		// game.add.sprite(x, y, img) 
 		// game.add.sprite(x, y, img, curFrame) 
 		// game.add.sprite(x, y, img, curFrame, scale) 
-		sprite: function (x, y, img, curFrame, scale) {
+		// game.add.sprite(x, y, img, curFrame, scale, alpha) 
+		sprite: function (x, y, img, curFrame, scale, alpha) {
 			if (x == undefined || y == undefined || img == undefined) console.error("Game error: parameters missing");
 			else if (game.sprite[img] == undefined) console.error("Game error: sprite not found in cache: " + img);
 			else {
@@ -282,56 +199,61 @@ const game = {
 					typeOfMedia: 'sprite',
 					name: img,
 
-					x: x || 0,
-					y: y || 0,
-					_xWithAnchor: x || 0,
-					_yWithAnchor: y || 0,
-					xAnchor: 0,
-					yAnchor: 0,
+					x: x || game.add.default.x,
+					y: y || game.add.default.y,
+					_xWithAnchor: x || game.add.default._xWithAnchor,
+					_yWithAnchor: y || game.add.default._yWithAnchor,
+					xAnchor: game.add.default.xAnchor,
+					yAnchor: game.add.default.yAnchor,
 
-					scaleWidth: scale || 1,
-					scaleHeight: scale || 1,
+					shadow : game.add.default.shadow,
+					shadowColor : game.add.default.shadowColor,
+					shadowBlur : game.add.default.shadowBlur,
+					alpha: (alpha != undefined) ? alpha : game.add.default.alpha,
+
+					scale: scale || game.add.default.scale,
 					width: game.sprite[img].width / game.sprite[img].frames, // frame width
 					height: game.sprite[img].height, // frame height
-
+					
 					curFrame: curFrame || 0,
 
-					alpha: 1,
-
 					anchor: function (xAnchor, yAnchor) {
 						this.xAnchor = xAnchor;
 						this.yAnchor = yAnchor;
 					},
-
-					get xWithAnchor() { return this.x - (this.width * this.scaleWidth * this.xAnchor); },
-					get yWithAnchor() { return this.y - (this.height * this.scaleHeight * this.yAnchor); }
+					get xWithAnchor() { return this.x - (this.width * this.scale * this.xAnchor); },
+					get yWithAnchor() { return this.y - (this.height * this.scale * this.yAnchor); }
 				};
 				game.render.queue.push(med);
 				return med;
 			}
 		},
-		// game.add.text(x, y, text)
 		// game.add.text(x, y, text, style) 
-		text: function (x, y, text, style) {
-			if (x == undefined || y == undefined || text == undefined) console.error("Game error: parameters missing");
+		// game.add.text(x, y, text, style, align) 
+		text: function (x, y, text, style, align) {
+			if (x == undefined || y == undefined || text == undefined || style == undefined) console.error("Game error: parameters missing");
 			else {
 				const med = {
 					typeOfMedia: 'text',
 					name: text,
 
-					x: x || 0,
-					y: y || 0,
-					_xWithAnchor: x || 0,
-					_yWithAnchor: y || 0,
-					xAnchor: 0,
-					yAnchor: 0,
+					x: x || game.add.default.x,
+					y: y || game.add.default.y,
+					_xWithAnchor: x || game.add.default._xWithAnchor,
+					_yWithAnchor: y || game.add.default._yWithAnchor,
+					xAnchor: game.add.default.xAnchor,
+					yAnchor: game.add.default.yAnchor,
 
-					style: style || textStyles.default,
+					shadow : game.add.default.shadow,
+					shadowColor : game.add.default.shadowColor,
+					shadowBlur : game.add.default.shadowBlur,
+					alpha: game.add.default.alpha,
 
-					alpha: 1,
+					font: style.font || game.add.default.font,
+					fill: style.fill || game.add.default.fill,
+					align: align || style.align || game.add.default.align,
 
 					anchor: function () { console.error("Game error: there's no anchor for text"); },
-
 					get xWithAnchor() { return this.x; },
 					get yWithAnchor() { return this.y; }
 				};
@@ -340,146 +262,170 @@ const game = {
 			}
 		},
 		graphic: {
-			// game.add.graphics.rect(x, y, width, height)
-			// game.add.graphics.rect(x, y, width, height, lineColor)
-			// game.add.graphics.rect(x, y, width, height, lineColor, lineWidth)
-			// game.add.graphics.rect(x, y, width, height, lineColor, lineWidth, fillColor)
-			// game.add.graphics.rect(x, y, width, height, lineColor, lineWidth, fillColor, alpha)
+			// game.add.graphic.rect(x, y, width, height)
+			// game.add.graphic.rect(x, y, width, height, lineColor)
+			// game.add.graphic.rect(x, y, width, height, lineColor, lineWidth)
+			// game.add.graphic.rect(x, y, width, height, lineColor, lineWidth, fillColor)
+			// game.add.graphic.rect(x, y, width, height, lineColor, lineWidth, fillColor, alpha)
 			rect: function (x, y, width, height, lineColor, lineWidth, fillColor, alpha) {
-				if (x == undefined || y == undefined || width == undefined || height == undefined) console.error("Game error: parameters missing");
+				if (x == undefined || y == undefined || width == undefined) console.error("Game error: parameters missing");
 				else {
 					const med = {
 						typeOfMedia: 'rect',
 
-						x: x || 0,
-						y: y || 0,
-						_xWithAnchor: x || 0,
-						_yWithAnchor: y || 0,
-						xAnchor: 0,
-						yAnchor: 0,
+						x: x || game.add.default.x,
+						y: y || game.add.default.y,
+						_xWithAnchor: x || game.add.default._xWithAnchor,
+						_yWithAnchor: y || game.add.default._yWithAnchor,
+						xAnchor: game.add.default.xAnchor,
+						yAnchor: game.add.default.yAnchor,
+
+						shadow : game.add.default.shadow,
+						shadowColor : game.add.default.shadowColor,
+						shadowBlur : game.add.default.shadowBlur,
+						alpha: (alpha != undefined) ? alpha : game.add.default.alpha,
 
-						scaleWidth: 1,
-						scaleHeight: 1,
-						width: width || 50,
-						height: height || 50,
+						scale: game.add.default.scale,
 
-						lineColor: lineColor || colors.black,
-						lineWidth: lineWidth || 0,	// by default there's no line width
-						fillColor: fillColor || 0,
+						width: 0,
+						height: 0,
 
-						alpha: (alpha != undefined) ? alpha : 1,
+						lineColor: lineColor || game.add.default.lineColor,
+						lineWidth: 0,
+						fillColor: fillColor || game.add.default.fillColor,
 
 						anchor: function (xAnchor, yAnchor) {
 							this.xAnchor = xAnchor;
 							this.yAnchor = yAnchor;
 						},
-
-						get xWithAnchor() { return this.x - (this.width * this.scaleWidth * this.xAnchor); },
-						get yWithAnchor() { return this.y - (this.height * this.scaleHeight * this.yAnchor); }
+						get xWithAnchor() { return this.x - (this.width * this.scale * this.xAnchor); },
+						get yWithAnchor() { return this.y - (this.height * this.scale * this.yAnchor); }
 					};
+					if (width != 0) { med.width = width || game.add.default.width; }
+					if (height != 0) { med.height = height || width || game.add.default.height; }	
+					if (lineWidth != 0) { med.lineWidth = lineWidth || game.add.default.lineWidth; }							
 					game.render.queue.push(med);
 					return med;
 				}
 			},
-			// game.add.graphics.circle(x, y, diameter)
-			// game.add.graphics.circle(x, y, diameter, lineColor)
-			// game.add.graphics.circle(x, y, diameter, lineColor, lineWidth)
-			// game.add.graphics.circle(x, y, diameter, lineColor, lineWidth, fillColor)
-			// game.add.graphics.circle(x, y, diameter, lineColor, lineWidth, fillColor, alpha)
-			circle: function (x, y, diameter, lineColor, lineWidth, fillColor, alpha) {
+			// game.add.graphic.circle(x, y, diameter)
+			// game.add.graphic.circle(x, y, diameter, lineColor)
+			// game.add.graphic.circle(x, y, diameter, lineColor, lineWidth)
+			// game.add.graphic.circle(x, y, diameter, lineColor, lineWidth, fillColor)
+			// game.add.graphic.circle(x, y, diameter, lineColor, lineWidth, fillColor, alpha)
+			circle: function (x, y, diameter, lineColor, lineWidth, fillColor, alpha) { 
 				if (x == undefined || y == undefined || diameter == undefined) console.error("Game error: parameters missing");
 				else {
 					const med = {
 						typeOfMedia: 'arc',
+						
+						x: x || game.add.default.x,
+						y: y || game.add.default.y,
+						_xWithAnchor: x || game.add.default._xWithAnchor,
+						_yWithAnchor: y || game.add.default._yWithAnchor,
+						xAnchor: game.add.default.xAnchor,
+						yAnchor: game.add.default.yAnchor,
 
-						x: x || 0,
-						y: y || 0,
-						_xWithAnchor: x || 0,
-						_yWithAnchor: y || 0,
-						xAnchor: 0,
-						yAnchor: 0,
+						shadow : game.add.default.shadow,
+						shadowColor : game.add.default.shadowColor,
+						shadowBlur : game.add.default.shadowBlur,
+						alpha: (alpha != undefined) ? alpha : game.add.default.alpha,
 
-						diameter: diameter || 50,
-						angleStart: 0,
-						angleEnd: 2 * Math.PI,
-						anticlockwise: false,
+						scale: game.add.default.scale,
 
-						scaleWidth: 1,
-						scaleHeight: 1,
-						width: diameter,
-						height: diameter,
+						diameter: 0,
 
-						lineColor: lineColor || colors.black,
-						lineWidth: lineWidth || 0, 		// by default there's no line width
-						fillColor: fillColor || colors.white,
+						width: 0,
+						height: 0,
 
-						alpha: (alpha != undefined) ? alpha : 1,
+						angleStart: 0,
+						angleEnd: 2 * Math.PI,
+						anticlockwise: game.add.default.anticlockwise,
+
+						lineColor: lineColor || game.add.default.lineColor,
+						lineWidth: 0,
+						fillColor: fillColor || game.add.default.fillColor,
 
 						anchor: function (xAnchor, yAnchor) {
 							this.xAnchor = xAnchor;
 							this.yAnchor = yAnchor;
 						},
-
-						get xWithAnchor() { return this.x - (this.width * this.scaleWidth * this.xAnchor); },
-						get yWithAnchor() { return this.y - (this.height * this.scaleHeight * this.yAnchor); }
+						get xWithAnchor() { return this.x - (this.width * this.scale * this.xAnchor); },
+						get yWithAnchor() { return this.y - (this.height * this.scale * this.yAnchor); }
 					};
+					if (diameter != 0) {
+						med.diameter = diameter || game.add.default.diameter;
+						med.width = med.height = med.diameter;
+					}
+					if (lineWidth != 0) {
+						med.lineWidth = lineWidth || game.add.default.lineWidth;
+					}
 					game.render.queue.push(med);
 					return med;
 				}
 			},
-			// game.add.graphics.arc(x, y, diameter, angleStart, angleEnd, anticlockWise)
-			// game.add.graphics.arc(x, y, diameter, angleStart, angleEnd, anticlockWise, lineColor)
-			// game.add.graphics.arc(x, y, diameter, angleStart, angleEnd, anticlockWise, lineColor, lineWidth)
-			// game.add.graphics.arc(x, y, diameter, angleStart, angleEnd, anticlockWise, lineColor, lineWidth, fillColor)
-			// game.add.graphics.arc(x, y, diameter, angleStart, angleEnd, anticlockWise, lineColor, lineWidth, fillColor, alpha)
+			// game.add.graphic.arc(x, y, diameter, angleStart, angleEnd)
+			// game.add.graphic.arc(x, y, diameter, angleStart, angleEnd, anticlockWise)
+			// game.add.graphic.arc(x, y, diameter, angleStart, angleEnd, anticlockWise, lineColor)
+			// game.add.graphic.arc(x, y, diameter, angleStart, angleEnd, anticlockWise, lineColor, lineWidth)
+			// game.add.graphic.arc(x, y, diameter, angleStart, angleEnd, anticlockWise, lineColor, lineWidth, fillColor)
+			// game.add.graphic.arc(x, y, diameter, angleStart, angleEnd, anticlockWise, lineColor, lineWidth, fillColor, alpha)
 			arc: function (x, y, diameter, angleStart, angleEnd, anticlockwise, lineColor, lineWidth, fillColor, alpha) {
 				if (x == undefined || y == undefined || diameter == undefined || angleStart == undefined || angleEnd == undefined) console.error("Game error: parameters missing");
 				else {
 					const med = {
 						typeOfMedia: 'arc',
 
-						x: x || 0,
-						y: y || 0,
-						_xWithAnchor: x || 0,
-						_yWithAnchor: y || 0,
-						xAnchor: 0,
-						yAnchor: 0,
+						x: x || game.add.default.x,
+						y: y || game.add.default.y,
+						_xWithAnchor: x || game.add.default._xWithAnchor,
+						_yWithAnchor: y || game.add.default._yWithAnchor,
+						xAnchor: game.add.default.xAnchor,
+						yAnchor: game.add.default.yAnchor,
+
+						shadow : game.add.default.shadow,
+						shadowColor : game.add.default.shadowColor,
+						shadowBlur : game.add.default.shadowBlur,
+						alpha: (alpha != undefined) ? alpha : game.add.default.alpha,
 
-						diameter: diameter || 50,
-						angleStart: angleStart,
-						angleEnd: angleEnd,
-						anticlockwise: anticlockwise || false,
+						scale: game.add.default.scale,
 
-						scaleWidth: 1,
-						scaleHeight: 1,
-						width: diameter,
-						height: diameter,
+						diameter: 0,
 
-						lineColor: lineColor || colors.black,
-						lineWidth: lineWidth || 0, 		// by default there's no line width
-						fillColor: fillColor || colors.white,
+						width: 0,
+						height: 0,
 
-						alpha: (alpha != undefined) ? alpha : 1,
+						angleStart: angleStart || 0,
+						angleEnd: angleEnd || 2 * Math.PI,
+						anticlockwise: anticlockwise || game.add.default.anticlockwise,
+
+						lineColor: lineColor || game.add.default.lineColor,
+						lineWidth: 0,
+						fillColor: fillColor || game.add.default.fillColor,
 
 						anchor: function (xAnchor, yAnchor) {
 							this.xAnchor = xAnchor;
 							this.yAnchor = yAnchor;
 						},
-
-						get xWithAnchor() { return this.x - (this.width * this.scaleWidth * this.xAnchor); },
-						get yWithAnchor() { return this.y - (this.height * this.scaleHeight * this.yAnchor); }
+						get xWithAnchor() { return this.x - (this.width * this.scale * this.xAnchor); },
+						get yWithAnchor() { return this.y - (this.height * this.scale * this.yAnchor); }
 					};
+					if (diameter != 0) {
+						med.diameter = diameter || game.add.default.diameter;
+						med.width = med.height = med.diameter;
+					}
+					if (lineWidth != 0) { med.lineWidth = lineWidth || game.add.default.lineWidth; }
 					game.render.queue.push(med);
 					return med;
 				}
 			}
 		}
 	},
-
+	
 	// Renders media on current screen
 	render: {
 		queue: [], // media queue to be rendered by the current state
-		_image: function (cur) {	// ( x, y, img, sW, sH, alpha)
+		_image: function (cur) {	// ( x, y, img, scale, alpha)
 			const x = cur.xWithAnchor, y = cur.yWithAnchor;
 			if (cur.rotate && cur.rotate != 0) {
 				context.save();
@@ -488,17 +434,20 @@ const game = {
 				context.translate(-cur.x, -cur.y);
 			}
 			context.globalAlpha = cur.alpha;
+			context.shadowBlur = (cur.shadow) ? cur.shadowBlur : 0;
+			context.shadowColor = cur.shadowColor;
 			context.drawImage(
 				game.image[cur.name],
 				x,
 				y,
-				cur.width * cur.scaleWidth,
-				cur.height * cur.scaleHeight
+				cur.width * cur.scale,
+				cur.height * cur.scale
 			);
+			context.shadowBlur = 0;
 			context.globalAlpha = 1;
 			if (cur.rotate && cur.rotate != 0) context.restore();
 		},
-		_sprite: function (cur) {	// ( x, y, img, curFrame, s )
+		_sprite: function (cur) {	// ( x, y, img, curFrame, scale, alpha )
 			const x = cur.xWithAnchor, y = cur.yWithAnchor;
 			if (cur.rotate && cur.rotate != 0) {
 				context.save();
@@ -507,6 +456,8 @@ const game = {
 				context.translate(-cur.x, -cur.y);
 			}
 			context.globalAlpha = cur.alpha;
+			context.shadowBlur = (cur.shadow) ? cur.shadowBlur : 0;
+			context.shadowColor = cur.shadowColor;
 			context.drawImage(
 				game.sprite[cur.name],
 				cur.width * cur.curFrame,
@@ -515,9 +466,10 @@ const game = {
 				cur.height,
 				x,
 				y,
-				cur.width * cur.scaleWidth,
-				cur.height * cur.scaleHeight
+				cur.width * cur.scale,
+				cur.height * cur.scale
 			);
+			context.shadowBlur = 0;
 			context.globalAlpha = 1;
 			if (cur.rotate && cur.rotate != 0) context.restore();
 		},
@@ -530,54 +482,78 @@ const game = {
 				context.translate(-cur.x, -cur.y);
 			}
 			context.globalAlpha = cur.alpha;
-			context.font = cur.style.font;
-			context.textAlign = cur.style.align;
-			context.fillStyle = cur.style.fill;
+			context.shadowBlur = (cur.shadow) ? cur.shadowBlur : 0;
+			context.shadowColor = cur.shadowColor;
+			context.font = cur.font;
+			context.textAlign = cur.align;
+			context.fillStyle = cur.fill;
 			context.fillText(cur.name, x, y);
+			context.shadowBlur = 0;
 			context.globalAlpha = 1;
 			if (cur.rotate && cur.rotate != 0) context.restore();
 		},
 		_graphic: {
 			_rect: function (cur) { // ( x, y, width, height, lineColor, lineWidth, fillColor, alpha)
 				const x = cur.xWithAnchor, y = cur.yWithAnchor;
+				// rotation
 				if (cur.rotate && cur.rotate != 0) {
 					context.save();
 					context.translate(cur.x, cur.y);
 					context.rotate(cur.rotate * Math.PI / 180);
 					context.translate(-cur.x, -cur.y);
 				}
+				// alpha
 				context.globalAlpha = cur.alpha;
+				// shadow
+				context.shadowBlur = (cur.shadow) ? cur.shadowBlur : 0;
+				context.shadowColor = cur.shadowColor;
+				// fill
 				if (cur.fillColor != 0) {
 					context.fillStyle = cur.fillColor;
-					context.fillRect(x, y, cur.width, cur.height);
+					context.fillRect(x, y, cur.width * cur.scale, cur.height * cur.scale);
 				}
+				// stroke
 				if (cur.lineWidth != 0) {
 					context.strokeStyle = cur.lineColor;
 					context.lineWidth = cur.lineWidth;
-					context.strokeRect(x, y, cur.width, cur.height);
+					context.strokeRect(x, y, cur.width * cur.scale, cur.height * cur.scale);
 				}
+				// end
+				context.shadowBlur = 0;
 				context.globalAlpha = 1;
 				if (cur.rotate && cur.rotate != 0) context.restore();
 			},
 
 			_arc: function (cur) {	// ( x, y, diameter, angleStart, angleEnd, anticlockWise, lineColor, lineWidth, fillColor, alpha);
 				const x = cur.xWithAnchor, y = cur.yWithAnchor;
+				// rotation
 				if (cur.rotate && cur.rotate != 0) {
 					context.save();
 					context.translate(cur.x, cur.y);
 					context.rotate(cur.rotate * Math.PI / 180);
 					context.translate(-cur.x, -cur.y);
 				}
+				// alpha
 				context.globalAlpha = cur.alpha;
-				context.fillStyle = cur.fillColor;
-				context.strokeStyle = cur.lineColor;
-				context.lineWidth = cur.lineWidth;
+				// shadow
+				context.shadowBlur = (cur.shadow) ? cur.shadowBlur : 0;
+				context.shadowColor = cur.shadowColor;
+				// fill info
+				if (cur.fillColor != 0) context.fillStyle = cur.fillColor;
+				// stroke info
+				if (cur.lineWidth != 0) {
+					context.strokeStyle = cur.lineColor;
+					context.lineWidth = cur.lineWidth;
+				}
+				// path
 				context.beginPath();
 				if (cur.angleEnd != 2 * Math.PI) context.lineTo(x, y);
-				context.arc(x, y, cur.diameter / 2, cur.angleStart, cur.angleEnd, cur.anticlockwise);
+				context.arc(x, y, (cur.diameter / 2) * cur.scale, cur.angleStart, cur.angleEnd, cur.anticlockwise);
 				if (cur.angleEnd != 2 * Math.PI) context.lineTo(x, y);
-				context.fill();
-				context.stroke();
+				// end
+				if (cur.fillColor != 0) context.fill();
+				if (cur.lineWidth != 0) context.stroke();
+				context.shadowBlur = 0;
 				context.globalAlpha = 1;
 				if (cur.rotate && cur.rotate != 0) context.restore();
 			},
@@ -629,6 +605,13 @@ const game = {
 			const b = Math.max(yMouse, yIcon) - Math.min(yMouse, yIcon);
 			return Math.sqrt(a * a + b * b);
 		},
+		isOverIcon : function (xMouse, yMouse, icon) {
+			const x = xMouse, y = yMouse, cur = icon;
+			const valid = 
+			y >= cur.yWithAnchor && y <= (cur.yWithAnchor + cur.height * cur.scale) && 
+			(x >= cur.xWithAnchor && x <= (cur.xWithAnchor + cur.width * cur.scale));
+			return valid;
+		}
 	},
 
 	// Timer 

js/globals.js

@@ -1,20 +1,3 @@
-const defaultWidth = 900;
-const defaultHeight = 600;
-const medSrc = "assets/img/";
-
-const debugMode = false; 	// Turns console messages ON/OFF
-let audioStatus = false; 	// Turns game audio ON/OFF
-let fractionLabel = true; 	// Turns showing fractions in levels ON/OFF
-
-let playerName;
-let langString; 		// String that contains the selected language
-
-let self;				// Current state
-
-let mapPosition;		// character position in the map (1..4 valid, 5 end)
-let mapMove;			// When true, the character can move to next position in the map
-let completedLevels;	// Number of finished levels in the map
-
 /*
 .................................................... 
 .............square.................circle.......... }					} (gameShape)		 			 
@@ -33,33 +16,22 @@ let completedLevels;	// Number of finished levels in the map
 .................................................... 
 */
 
-const TESTE = {
-	gameShape: [
-		'Square',
-		'Square',
-		'Circle'
-	],
-	gameType: [
-		'squareOne',
-		'squareTwo',
-		'circleOne'
-	],
-	levelType: [
-		['A', 'B'],
-		['C'],
-		['A', 'B']
-	],
-	sublevelType: [
-		['Plus', 'Minus'],
-		['A', 'B', 'C'],
-		['Plus', 'Minus', 'Mixed']
-	],
-	gameDifficulty: [
-		3,
-		5,
-		5
-	],
-};
+const defaultWidth = 900;
+const defaultHeight = 600;
+const medSrc = "assets/img/";
+
+const debugMode = false; 	// Turns console messages ON/OFF
+let audioStatus = false; 	// Turns game audio ON/OFF
+let fractionLabel = true; 	// Turns showing fractions in levels ON/OFF
+
+let playerName;
+let langString; 		// String that contains the selected language
+
+let self;				// Current state
+
+let mapPosition;		// character position in the map (1..4 valid, 5 end)
+let mapMove;			// When true, the character can move to next position in the map
+let completedLevels;	// Number of finished levels in the map
 
 /* GAME TYPE (in menu screen)
  * can be: squareOne, 'SquareTwo' or 'CircleOne' */
@@ -83,76 +55,257 @@ let sublevelType;
  * in circleOne/squareTwo	can be: 1..5 */
 let gameDifficulty;
 
+const info = {
 
+	squareOne : {
+		gameShape : 'Square',
+		gameType : 'squareOne',
+		gameTypeUrl : 'game0',
+		levelType : ['A', 'B'],
+		levelTypeUrl : ['level0', 'level1'],
+		sublevelType : ['Plus', 'Minus'],
+		gameDifficulty : 3
+	},
 
-// Colors
-const colors = {
-	white: "#fff",
-	black: "#000",
-	gray: "#708090",
+	circleOne : {
+		gameShape : 'Circle',
+		gameType : 'circleOne',
+		gameTypeUrl : 'game1',
+		levelType : ['A', 'B'],
+		levelTypeUrl : ['level2','level3'],
+		sublevelType : ['Plus', 'Minus', 'Mixed'],
+		gameDifficulty : 5
+	},
+
+	squareTwo : {
+		gameShape : 'Square',
+		gameType : 'squareTwo',
+		gameTypeUrl : 'game2',
+		levelType : ['C'],
+		levelTypeUrl : [],
+		sublevelType : [/*'A',*/ 'B', 'C'],
+		gameDifficulty : 5
+	},
+
+	gameShape : [],
+	gameType : [],
+	gameTypeUrl : [],
+	levelType : [],
+	levelTypeUrl : [],
+	sublevelType : [],
+	gameDifficulty : [],
+
+	start : function () {
+
+		info.gameShape = [ 
+			info.squareOne.gameShape, 
+			info.circleOne.gameShape, 
+			info.squareTwo.gameShape
+		];
+	
+		info.gameType = [ 
+			info.squareOne.gameType, 
+			info.circleOne.gameType,
+			info.squareTwo.gameType
+		];
+	
+		info.gameTypeUrl = [ 
+			info.squareOne.gameTypeUrl, 
+			info.circleOne.gameTypeUrl,
+			info.squareTwo.gameTypeUrl
+		];
+	
+		info.levelType = info.squareOne.levelType.concat(info.circleOne.levelType, info.squareTwo.levelType);
+	
+		info.levelTypeUrl = info.squareOne.levelTypeUrl.concat(info.circleOne.levelTypeUrl, info.squareTwo.levelTypeUrl);
+	
+		info.sublevelType = info.squareOne.sublevelType.concat(info.circleOne.sublevelType, info.squareTwo.sublevelType);
+	
+		info.gameDifficulty = [ 
+			info.squareOne.gameDifficulty, 
+			info.circleOne.gameDifficulty, 
+			info.squareTwo.gameDifficulty 
+		];
 
-	// used in text
-	green: "#00804d",
-	blue: "#003cb3",
+	},
 
-	darkRed: "#330000",
-	mediumBlue: "#000080",
+};
 
-	// difficulty stairs
-	diffBlue: "#99b3ff",
-	diffRed: "#ff6666",
-	diffPurple: "#b366ff",
+// Colors
+const colors = {
 
-	// Background color
-	blueBckg: "#cce5ff", // default 
-	blueBckgLevel: "#a8c0e6", // in squareOne (used for floor gap)
+	// blues
 
-	// ok button in name State
-	teal: "#3d5c5c",
+	blueBckg: "#cce5ff", // background color 
+	blueBckgOff: "#adc8e6",
+	blueBckgInsideLevel: "#a8c0e6", // background color in squareOne (used for floor gap)
+	blue: "#003cb3", // subtitle
+	blueMenuLine: "#b7cdf4",
+	darkBlue: "#183780", // linecolor that indicates right and fraction numbers
 
-	// difficulty symbols and game color identifier 
-	red: "#b30000",
+	// reds
 
-	darkBlue: "#183780",
-	lightBlue: "#efeff5",
+	red: "#b30000", // linecolor that indicates left
+	lightRed: "#d27979", // squareTwo figures
+	darkRed: "#330000", // squareTwo figures and some titles
 
-	// squareTwo
-	darkRed: "#330000",
-	lightRed: "#d27979",
-	lighterRed: "#2d9d9",
+	// greens
 
-	darkGreen: "#1e2f2f",
-	lightGreen: "#83afaf",
-	lighterGreen: "#e0ebeb",
+	green: "#00804d", // title
+	lightGreen: "#83afaf", // squareTwo figures
+	darkGreen: "#1e2f2f", // squareTwo figures
+	intenseGreen: "#00d600",
+
+	// neutrals
+	
+	white: "#efeff5",
+	gray: "#708090",
+	black: "#000",
+	yellow: "#fff570",
 };
 
 // Text styles
 const textStyles = {
 
-	dafault: { font: "12px Arial", fill: colors.black, align: "center" },
+	h1_green: { font: "32px Arial,sans-serif", fill: colors.green, align: "center" }, // menu title
+	h2_green: { font: "26px Arial,sans-serif", fill: colors.green, align: 'center' }, // flag labels (langScreen)
 
-	// titles
-	title1: { font: "32px Arial", fill: colors.green, align: "center" },
-	title2: { font: "27px Arial", fill: colors.green, align: "center" },
-	title2right: { font: "27px Arial", fill: colors.green, align: 'right' },
+	h1_white: { font: '32px Arial,sans-serif', fill: colors.white, align: 'center' }, // ok button (nameScreen)
+	h2_white: { font: '26px Arial,sans-serif', fill: colors.white, align: 'center' }, // difficulty buttons (menuScreen)
+	h4_white: { font: '20px Arial,sans-serif', fill: colors.white, align: 'center' }, // difficulty numbers (menuScreen)
+	p_white: { font: '14px Arial,sans-serif', fill: colors.white, align: 'center' }, // enter button (menuScreen)
 
-	overtitle: { font: "20px Arial", fill: colors.darkRed, align: "center" },
-	overtitlel: { font: "20px Arial", fill: colors.darkRed, align: "left" },
-	overtitler: { font: "20px Arial", fill: colors.darkRed, align: "right" },
+	h2_brown: { font: "26px Arial,sans-serif", fill: colors.darkRed, align: "center" }, // map difficulty label
+	h4_brown: { font: "20px Arial,sans-serif", fill: colors.darkRed, align: "center" }, // menu overtitle
 
-	subtitle1: { font: "27px Arial", fill: colors.blue, align: "center" },
-	subtitle2: { font: "27px Arial", fill: colors.black, align: "center" },
-	subtitle2l: { font: "27px Arial", fill: colors.black, align: "left" },
-	subtitle2r: { font: "27px Arial", fill: colors.black, align: "right" },
+	h2_blue_2: { font: "26px Arial,sans-serif", fill: colors.blue, align: "center" }, // menu subtitle
+	h4_blue_2: { font: "20px Arial,sans-serif", fill: colors.blue, align: "center" }, // menu subtitle
+	h2_blue: { font: '26px Arial,sans-serif', fill: colors.darkBlue, align: 'center' }, // fractions
+	h4_blue: { font: '20px Arial,sans-serif', fill: colors.darkBlue, align: 'center' }, // fractions
+	p_blue: { font: '14px Arial,sans-serif', fill: colors.darkBlue, align: 'center' }, // fractions
+
+};
 
-	// button labels
-	buttonLabel: { font: '34px Arial', fill: colors.white, align: 'center' },
-	difficultyLabel: { font: '25px Arial', fill: colors.white, 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 squareTwo
-	valueLabelBlue3: { font: '15px Arial', fill: colors.mediumBlue, align: 'center' }, // fractions numbers in squareOne
 
+// List of media URL
+url = {
+	boot: {
+		image: [
+			// Scene
+			['bgimage', medSrc + 'scene/bg.jpg'],
+			['bgmap', 	medSrc + 'scene/bg_map.png'],
+			['bush', 	medSrc + 'scene/bush.png'],
+			['cloud', 	medSrc + 'scene/cloud.png'],
+			['floor', 	medSrc + 'scene/floor.png'],
+			['place_off', 	medSrc + 'scene/place_off.png'],
+			['place_on', 	medSrc + 'scene/place_on.png'],
+			['rock', 	medSrc + 'scene/rock.png'],
+			['road', 	medSrc + 'scene/road.png'],
+			['sign', 	medSrc + 'scene/sign.png'],
+			['tree1', 	medSrc + 'scene/tree.png'],
+			['tree2', 	medSrc + 'scene/tree2.png'],
+			['tree3', 	medSrc + 'scene/tree3.png'],
+			['tree4', 	medSrc + 'scene/tree4.png'],
+			// Flags
+			['flag_BR', medSrc + 'flag/BRAZ.jpg'],
+			['flag_FR', medSrc + 'flag/FRAN.jpg'],
+			['flag_IT', medSrc + 'flag/ITAL.png'],
+			['flag_PE', medSrc + 'flag/PERU.jpg'],
+			['flag_US', medSrc + 'flag/UNST.jpg'],
+			// Navigation icons on the top of the page
+			['back', 		medSrc + 'navig_icon/back.png'],
+			['help', 		medSrc + 'navig_icon/help.png'],
+			['home', 		medSrc + 'navig_icon/home.png'],
+			['language', 	medSrc + 'navig_icon/language.png'],
+			['menu', 		medSrc + 'navig_icon/menu.png'],
+			// Interactive icons
+			['arrow_down', 		medSrc + 'interac_icon/down.png'],
+			['error', 			medSrc + 'interac_icon/error.png'],
+			['help_pointer', 	medSrc + 'interac_icon/pointer.png'],
+			['ok',				medSrc + 'interac_icon/ok.png'],
+			// Non-interactive icons
+			['arrow_double', 	medSrc + 'non_interac_icon/double.png'],
+			['arrow_left', 		medSrc + 'non_interac_icon/left_arrow.png'],
+			['arrow_right', 	medSrc + 'non_interac_icon/right_arrow.png'],
+			['equal', 			medSrc + 'non_interac_icon/equal.png']
+		],
+		sprite: [
+			// Game Sprites
+			['kid_walk', 	medSrc + 'character/kid/walk.png', 26],
+			// Navigation icons on the top of the page
+			['audio', 		medSrc + 'navig_icon/audio.png', 2],
+			// Interactive icons
+			['select', 		medSrc + 'interac_icon/selectionBox.png', 2]
+		],
+		audio: [
+			// Sound effects
+			['beepSound', ['assets/audio/beep.ogg', 'assets/audio/beep.mp3']],
+			['okSound', ['assets/audio/ok.ogg', 'assets/audio/ok.mp3']],
+			['errorSound', ['assets/audio/error.ogg', 'assets/audio/error.mp3']]
+		]
+	},
+	menu: {
+		image: [
+			// Game
+			['game0', medSrc + 'levels/squareOne.png'], // Square I
+			['game1', medSrc + 'levels/circleOne.png'], // Circle I
+			['game2', medSrc + 'levels/squareTwo.png'], // Square II
+			// level
+			['level0', medSrc + 'levels/squareOne_1.png'], // Square I : A
+			['level1', medSrc + 'levels/squareOne_2.png'], // Square I : B
+			['level2', medSrc + 'levels/circleOne_1.png'], // Circle I : A
+			['level3', medSrc + 'levels/circleOne_2.png'], // Circle I : B
+			['level4', medSrc + 'levels/squareTwo.png'],  // Square II : C
+			// sublevel
+			['sublevel_right', medSrc + 'levels/sublevel_right.png'], // Square I/II : left
+			['sublevel_left', medSrc + 'levels/sublevel_left.png'], // Square I/II : right
+			['sublevel_mixed', medSrc + 'levels/sublevel_mixed.png'], // Circle I : mixed
+			['sublevel_top', medSrc + 'levels/sublevel_top.png'], // Square II : top
+			['sublevel_bottom', medSrc + 'levels/sublevel_bottom.png']  // Square II : bottom
+		],
+		sprite: [],
+		audio: []
+	},
+	squareOne: {
+		image: [
+			// Scene
+			['farm', 	medSrc + 'scene/farm.png'],
+			['garage', 	medSrc + 'scene/garage.png']
+		],
+		sprite: [
+			// Game sprites
+			['tractor', medSrc + 'character/tractor/tractor.png', 15]
+		],
+		audio: []
+	},
+	squareTwo: {
+		image: [
+			// Scene
+			['house', 	medSrc + 'scene/house.png'],
+			['school', 	medSrc + 'scene/school.png']
+		],
+		sprite: [
+			// Game sprites
+			['kid_standing', 	medSrc + 'character/kid/lost.png', 6],
+			['kid_run', 		medSrc + 'character/kid/run.png', 12]
+		],
+		audio: []
+	},
+	circleOne: {
+		image: [
+			// Scene
+			['house', medSrc + 'scene/house.png'],
+			['school', medSrc + 'scene/school.png'],
+			// Game images
+			['balloon', medSrc + 'character/balloon/airballoon_upper.png'],
+			['balloon_basket', medSrc + 'character/balloon/airballoon_base.png']
+		],
+		sprite: [
+			// Game sprites
+			['kid_run', medSrc + 'character/kid/run.png', 12]
+		],
+		audio: []
+	},
 };
 
 // Navigation icons on the top of the screen
@@ -174,9 +327,9 @@ const navigationIcons = {
 
 		// 'Descriptive labels' for the navigation icons
 
-		this.left_text = game.add.text(left_x, 73, "", textStyles.overtitlel);
+		this.left_text = game.add.text(left_x, 73, "", textStyles.h4_brown, 'left');
 
-		this.right_text = game.add.text(right_x + 50, 73, "", textStyles.overtitler);
+		this.right_text = game.add.text(right_x + 50, 73, "", textStyles.h4_brown, 'right');
 
 		// 'Icons' on the LEFT side of the page
 
@@ -229,23 +382,27 @@ const navigationIcons = {
 
 		navigationIcons.iconsList.forEach(cur => {
 
-			const valid = y >= cur.yWithAnchor && y <= (cur.yWithAnchor + cur.height * cur.scaleHeight) &&
-				(x >= cur.xWithAnchor && x <= (cur.xWithAnchor + cur.width * cur.scaleWidth));
+			const valid = y >= cur.yWithAnchor && y <= (cur.yWithAnchor + cur.height * cur.scale) &&
+				(x >= cur.xWithAnchor && x <= (cur.xWithAnchor + cur.width * cur.scale));
 
 			if (valid) {
-				if (cur.name == 'back') navigationIcons.func_CallScreen(navigationIcons.level);
-				else if (cur.name == 'menu') navigationIcons.func_CallScreen(menuScreen);
-				else if (cur.name == 'help') navigationIcons.helpBtn();
-				else if (cur.name == 'language') navigationIcons.func_CallScreen(langScreen);
-				else if (cur.name == 'audio') {
-					if (audioStatus) {
-						audioStatus = false;
-						navigationIcons.icon_audio.curFrame = 1;
-					} else {
-						audioStatus = true;
-						navigationIcons.icon_audio.curFrame = 0;
-					}
-					game.render.all();
+				const name = cur.name;
+				switch (name) {
+					case 'back' : navigationIcons.func_CallScreen(navigationIcons.level); break;
+					case 'menu' : navigationIcons.func_CallScreen(menuScreen); break;
+					case 'help' : navigationIcons.helpBtn(); break;
+					case 'language' : navigationIcons.func_CallScreen(langScreen); break;
+					case  'audio' :
+						if (audioStatus) {
+							audioStatus = false;
+							navigationIcons.icon_audio.curFrame = 1;
+						} else {
+							audioStatus = true;
+							navigationIcons.icon_audio.curFrame = 0;
+						}
+						game.render.all();
+						break;
+					default: console.log("Game error: error in navigation icon")
 				}
 			}
 		});
@@ -257,8 +414,8 @@ const navigationIcons = {
 
 		navigationIcons.iconsList.forEach(cur => {
 
-			const valid = y >= cur.yWithAnchor && y <= (cur.yWithAnchor + cur.height * cur.scaleHeight) &&
-				(x >= cur.xWithAnchor && x <= (cur.xWithAnchor + cur.width * cur.scaleWidth));
+			const valid = y >= cur.yWithAnchor && y <= (cur.yWithAnchor + cur.height * cur.scale) &&
+				(x >= cur.xWithAnchor && x <= (cur.xWithAnchor + cur.width * cur.scale));
 
 			if (valid) {
 

js/map.js

@@ -28,15 +28,17 @@ const mapScreen = {
         // Calls function that loads navigation icons
         navigationIcons.func_addIcons(true, true, false, // left icons
             false, false, // right icons
-            difficultyScreen, false);
+            menuScreenCustom, false);
 
         // Progress bar
-        const percentText = completedLevels * 25;
+        const percentText = 4 * 25;
 
-        if (completedLevels != 0) game.add.graphic.rect(660, 10, completedLevels * 37.5, 35, undefined, 0, colors.gray, 1);
-        game.add.graphic.rect(661, 11, 149, 34, colors.black, 3, undefined, 1);
-        game.add.text(820, 38, percentText + '%', textStyles.subtitle2l);
-        game.add.text(650, 38, game.lang.difficulty + ' ' + gameDifficulty, textStyles.subtitle2r);
+        if (completedLevels == 4) game.add.graphic.rect(660, 10, completedLevels * 37.5, 35, undefined, 0, colors.intenseGreen, 0.5);
+        else game.add.graphic.rect(660, 10, completedLevels * 37.5, 35, undefined, 0, colors.yellow, 0.9);
+        
+        game.add.graphic.rect(661, 11, 149, 34, colors.blue, 3, undefined, 1);
+        game.add.text(820, 38, percentText + '%', textStyles.h2_blue, 'left');
+        game.add.text(650, 38, game.lang.difficulty + ' ' + gameDifficulty, textStyles.h2_blue, 'right');
 
         // Map positions
         this.points = {
@@ -92,7 +94,7 @@ const mapScreen = {
 
             // Level signs
             game.add.image(this.points.x[i] - 20, this.points.y[i] - 60, 'sign', 0.4).anchor(0.5, 1);
-            game.add.text(this.points.x[i] - 20, this.points.y[i] - 79, i, textStyles.difficultyLabel);
+            game.add.text(this.points.x[i] - 20, this.points.y[i] - 79, i, textStyles.h2_white);
 
         }
 
@@ -241,10 +243,10 @@ const endScreen = {
         for (let i = 0; i < 9; i++) { game.add.image(i * 100, 501, 'floor'); }
 
         // Progress bar
-        game.add.graphic.rect(660, 10, 4 * 37.5, 35, undefined, 0, colors.gray, 1); // progress
-        game.add.graphic.rect(661, 11, 149, 34, colors.black, 3, undefined, 1); // box
-        game.add.text(820, 38, '100%', textStyles.subtitle2l);
-        game.add.text(650, 38, game.lang.difficulty + ' ' + gameDifficulty, textStyles.subtitle2r);
+        game.add.graphic.rect(660, 10, 4 * 37.5, 35, undefined, 0, colors.intenseGreen, 0.5); // progress
+        game.add.graphic.rect(661, 11, 149, 34, colors.blue, 3, undefined, 1); // box
+        game.add.text(820, 38, '100%', textStyles.h2_blue, 'left');
+        game.add.text(650, 38, game.lang.difficulty + ' ' + gameDifficulty, textStyles.h2_blue, 'right');
 
         game.add.image(360, 545, 'tree4', 0.7).anchor(0, 1);
 

js/menu.js

@@ -1,4 +1,4 @@
-// MENU SCREEN: main menu of the game where the user can select the level he wants to play
+// MENU SCREEN: main menu - player can select the game he wants to play
 const menuScreen = {
 
     preload: function () {
@@ -11,184 +11,485 @@ const menuScreen = {
         self = this;
 
         // LOADING MEDIA
-        game.load.image(game.url.menu.image);
+        game.load.image(url.menu.image);
 
     },
 
     create: function () {
+
         game.render.clear();
 
-        // Background color
+        // BACKGROUND
+
         game.add.graphic.rect(0, 0, 900, 600, undefined, 0, colors.blueBckg, 1);
 
-        // Adds floor
-        for (let i = 0; i < defaultWidth / 100; i++) {
-            game.add.image(i * 100, 501, 'floor');
+        for (let i = 0; i < defaultWidth / 100; i++) { 
+            game.add.image(i * 100, 501, 'floor'); 
         }
 
         // LABELS
 
-        // Adds Overtitle: Welcome, <player name>!
-        game.add.text(defaultWidth / 2, 40, game.lang.welcome + ", " + playerName + "!", textStyles.overtitle);
+        // h4_brown: Welcome, <player name>!
+        game.add.text(defaultWidth / 2, 40, game.lang.welcome + ", " + playerName + "!", textStyles.h4_brown);
 
-        // Adds Title : Select a game
-        game.add.text(defaultWidth / 2, 80, game.lang.menu_title, textStyles.title1);
+        // Title : Select a game
+        game.add.text(defaultWidth / 2, 80, game.lang.menu_title, textStyles.h1_green);
 
-        // Adds Subtitle : <game mode> 
-        this.lbl_game = game.add.text(defaultWidth / 2, 110, "", textStyles.subtitle1);
+        // Subtitle : <game mode> 
+        this.lbl_game = game.add.text(defaultWidth / 2, 110, "", textStyles.h2_blue_2);
 
-        // ICONS
+        // NAVIGATION ICONS
 
-        // Calls function that loads navigation icons
-        navigationIcons.func_addIcons(false, false, false,
+        // Loads navigation icons
+        navigationIcons.func_addIcons(
+            false, false, false,
             true, true,
             false, false);
 
-        // GAME LEVELS BUTTONS
+        // -------------------- GAME ICONS 
+        this.menuIcons = [];
 
-        // Base coordinates for level buttons
-        let x = -350; // First column
-        let y = -70; // Top line
+        const offset = defaultWidth / (info.gameType.length + 1);    
 
-        menuScreen.menuObjList = [];
+        for (let i = 0, x = offset; i < info.gameType.length; i++, x += offset) {
+            
+            const icon = game.add.image(x, defaultHeight / 2 - 70, info.gameTypeUrl[i], 1);
+            icon.anchor(0.5, 0.5);
 
-        for (let i in game.url.menu.image) {
+            icon.gameShape = info.gameShape[i];
+            icon.gameType = info.gameType[i];
 
-            // Adds level buttons
-            //try {
-            this.menuObjList[i] = game.add.image(defaultWidth / 2 + x, defaultHeight / 2 + y, 'game' + i);
-            this.menuObjList[i].anchor(0.5, 0.5);
-            this.menuObjList[i].levelType = game.url.menu.image[i][3];
-            this.menuObjList[i].gameShape = game.url.menu.image[i][2];
-            //}catch (e) { console.log("Erro:",e)}
-            // 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
-            }
+            this.menuIcons.push(icon);
 
         }
 
-        game.event.add("click", menuScreen.func_onInputDown);
-        game.event.add("mousemove", menuScreen.func_onInputOver);
+        // EVENTS
+
+        game.event.add("click", this.func_onInputDown);
+        game.event.add("mousemove", this.func_onInputOver);
 
         game.render.all();
 
     },
 
+    /* GAME FUNCTIONS */
 
+    func_click: function (icon) {
 
-    /* EVENT HANDLER*/
+        if (audioStatus) game.audio.beepSound.play();
 
-    func_onInputDown: function (mouseEvent) {
+        gameShape = icon.gameShape;
+        gameTypeString = icon.gameType;
+        switch (gameTypeString) {
+            case 'squareOne': gameType = squareOne; break;
+            case 'squareTwo': gameType = squareTwo; break;
+            case 'circleOne': gameType = circleOne; break;
+            default: console.error("Game error: the name of the game is not valid");
+        }
+
+        self.menuIcons = self.lbl_game.name;
+
+        menuScreenCustom.preload();
 
-        const x = mouseEvent.offsetX;
-        const y = mouseEvent.offsetY;
+    },
+
+    func_showTitle: function (icon) {
+
+        let title;
+
+        switch (icon.gameShape){
+            case 'Circle' : title = game.lang.circle_name; break;
+            case 'Square' : title = game.lang.square_name; break;
+        }
+
+        const type = icon.gameType.substring(icon.gameType.length - 3);
+
+        switch (type){
+            case 'One' : title += ' I'; break;
+            case 'Two' : title += ' II'; break;
+        }
 
-        for (let i in menuScreen.menuObjList) {
+        self.lbl_game.name = title;
+        
+    },
 
-            const cur = menuScreen.menuObjList[i];
+    func_clearTitle: function () { 
+        self.lbl_game.name = ''; 
+    },
 
-            const valid = y >= cur.yWithAnchor && y <= (cur.yWithAnchor + cur.height * cur.scaleHeight) &&
-                (x >= cur.xWithAnchor && x <= (cur.xWithAnchor + cur.width * cur.scaleWidth));
+    /* EVENTS */
 
-            if (valid) {
-                menuScreen.func_loadGame(game.url.menu.image[i][3], game.url.menu.image[i][2]);
+    func_onInputDown: function (mouseEvent) {
+        const x = mouseEvent.offsetX, y = mouseEvent.offsetY;
+
+        // check menu icons
+        for (let i in self.menuIcons) {
+            // if mouse is within the bounds of an icon
+            if ( game.math.isOverIcon(x, y, self.menuIcons[i]) ) {
+                // click first valid icon
+                self.func_click(self.menuIcons[i]);
                 break;
             }
         }
 
+        // check navigation icons
         navigationIcons.func_onInputDown(x, y);
-
     },
 
     func_onInputOver: function (mouseEvent) {
-
-        const x = mouseEvent.offsetX;
-        const y = mouseEvent.offsetY;
+        const x = mouseEvent.offsetX, y = mouseEvent.offsetY;
         let flag = false;
 
-        menuScreen.menuObjList.forEach(cur => {
-
-            const valid = y >= cur.yWithAnchor && y <= (cur.yWithAnchor + cur.height * cur.scaleHeight) &&
-                (x >= cur.xWithAnchor && x <= (cur.xWithAnchor + cur.width * cur.scaleWidth));
-
-            if (valid) {
+        // check menu icons
+        self.menuIcons.forEach( cur => {
+            if ( game.math.isOverIcon(x, y, cur) ) {
+                cur.scale = 1.08;
+                self.func_showTitle(cur);
                 flag = true;
-                cur.scaleWidth = cur.scaleHeight = 1.05;
-                menuScreen.func_showTitle(cur.levelType, cur.gameShape);
             } else {
-                cur.scaleWidth = cur.scaleHeight = 1;
+                cur.scale = 1;
             }
-
         });
 
-        if (!flag) {
-            menuScreen.func_clearTitle();
+        if (flag) { 
+            document.body.style.cursor = "pointer";
+        } else {
+            document.body.style.cursor = "auto";
+           // menuScreen.func_clearTitle();
         }
 
+        // check navigation icons
         navigationIcons.func_onInputOver(x, y);
 
         game.render.all();
+    },
+    
+};
+
+// IN MENU SCREEN: player can select level, sublevel and difficulty
+const menuScreenCustom = {
+
+    preload: function () {
+
+        document.body.style.cursor = "auto";
+        game.loop.stop();
+        game.event.clear();
+        game.animation.clear();
+
+        self = this;
+
+        // LOADING MEDIA
+        game.load.sprite(url[gameTypeString].sprite);
+        game.load.image(url[gameTypeString].image);
 
     },
 
+    create: function () {
 
+        game.render.clear();
 
-    /* GAME FUNCTIONS */
+        let x, y, width, height, offsetH, offsetW;
+        const iconScale = 0.5;
 
-    //calls the selected game menu screen
-    func_loadGame: function (level, shape) {
+        // Background color
+        game.add.graphic.rect(0, 0, 900, 600, undefined, 0, colors.blueBckg, 1);
 
-        if (audioStatus) game.audio.beepSound.play();
+        // Floor
+        for (let i = 0; i < defaultWidth / 100; i++) { game.add.image(i * 100, 501, 'floor'); }
+        
+        // LABELS
 
-        gameShape = shape;
-        levelType = level;
+        // Add Title : Select a game
+        game.add.text(defaultWidth / 2, 80, game.lang.custom_game, textStyles.h1_green);
 
-        if (levelType == "C") gameTypeString = gameShape.toLowerCase() + "Two";
-        else gameTypeString = gameShape.toLowerCase() + "One";
+        // Selected game
+        game.add.text(defaultWidth / 2, 40, menuScreen.menuIcons, textStyles.h4_brown);
+
+        // Loads animation icons
+        navigationIcons.func_addIcons(
+            true, false, false,
+            true, true,
+            menuScreen, false);
+
+        
+        this.menuIcons = [];
+
+        offsetW = 600 / 6;
+        x = 150;
+        y = 200;
+        height = 280;
+        width = 5;
+
+        // Label 'Level'
+        game.add.text(x + offsetW, y, game.lang.level, textStyles.h2_blue_2);
+        // Label 'Sublevel'
+        const sublevelLabel = game.add.text(x + 3 * offsetW, y, game.lang.sublevel, textStyles.h2_blue_2);
+        // Label 'Difficulty'
+        game.add.text(x + 5 * offsetW, y, game.lang.difficulty, textStyles.h2_blue_2);
+
+        // Horizontal line
+        game.add.graphic.rect(x , y + 10, 600, width, undefined, 0, colors.blueMenuLine).anchor(0,0.5);
+
+        // Vertical line
+        game.add.graphic.rect(x + 2 * offsetW, y - 25, width, height, undefined, 0, colors.blueMenuLine).anchor(0.5,0);
+        game.add.graphic.rect(x + 4 * offsetW, y - 25, width, height, undefined, 0, colors.blueMenuLine).anchor(0.5,0);
+
+        // --------------------------- TURN ON/OFF FRACTION LABELS
+
+        if (gameTypeString == 'squareTwo') {
+            
+            sublevelLabel.alpha = 0.3;
+
+        } else {
+
+            // Horizontal line
+            game.add.graphic.rect(x + 4 * offsetW, y + 136, 200, width, undefined, 0, colors.blueMenuLine).anchor(0,0.5);
+
+            // Label 'Show Fractions'
+            game.add.text(x + 5 * offsetW, y + 102, game.lang.show, textStyles.h4_blue_2);
+            game.add.text(x + 5 * offsetW, y + 102 + 24, game.lang.title, textStyles.h2_blue_2);
+            
+            const frame = (fractionLabel) ? 1 : 0;
+
+            // Selection box
+            y += 40;
+            const selectionBox = game.add.sprite(x + 5 * offsetW, y + 102 + 24 - 2, 'select', frame, 0.1);
+            selectionBox.anchor(0.5, 0.5);
+            selectionBox.iconType = 'selectionBox';
+            selectionBox.originalScale = 0.1;
+            this.menuIcons.push(selectionBox);
+        } 
+
+        // ---------------------------- LEVEL ICONS
+
+        offsetH = this.func_getOffset(height, info[gameTypeString].levelType.length);
+
+        x = 150 + offsetW;
+        y = 270;
+
+        for (let i = 0; i < info[gameTypeString].levelTypeUrl.length; i++, y += offsetH) {
+
+            const icon = game.add.image(x, y, info[gameTypeString].levelTypeUrl[i], iconScale, 1);
+            icon.anchor(0.5, 0.5);
+
+            icon.levelType = info[gameTypeString].levelType[i];
+            icon.iconType = "level";
+            icon.originalScale = iconScale;
+            if (i == 0) {
+                levelType = icon.levelType;
+                icon.shadow = true;
+            }
+
+            this.menuIcons.push(icon);
 
-        switch (gameTypeString) {
-            case 'squareOne': gameType = squareOne; break;
-            case 'squareTwo': gameType = squareTwo; break;
-            case 'circleOne': gameType = circleOne; break;
-            default: console.error("Game error: the name of the game is not valid");
         }
+            
+        // ---------------------------- SUBLEVEL ICONS
+
+        offsetH = this.func_getOffset(height, info[gameTypeString].sublevelType.length);
+
+        if (gameTypeString != 'squareTwo') x += 2 * offsetW;
+        y = 270;
+
+        let icon;
+        let aux = [];
+        aux['squareOne'] = [
+            ['sublevel_right', 'Plus'],
+            ['sublevel_left', 'Minus']  
+        ];
+        aux['circleOne'] = [
+            ['sublevel_right', 'Plus'], 
+            ['sublevel_left', 'Minus'], 
+            ['sublevel_mixed', 'Mixed']
+        ];
+        aux['squareTwo'] = [
+            //['sublevel_top', 'A'],
+            ['sublevel_bottom', 'B'],
+            ['sublevel_top', 'C'],
+        ];
+        // Placing sublevel icons
+        for (let i = 0; i < aux[gameTypeString].length; i++, y += offsetH) {
+
+            icon = game.add.image(x, y, aux[gameTypeString][i][0], iconScale);
+            icon.anchor(0.5, 0.5);
+            icon.alpha = 1;
+
+            icon.sublevelType = aux[gameTypeString][i][1];
+            icon.iconType = "sublevel";
+            icon.originalScale = iconScale;
+
+            if ( i == 0 ) {
+                sublevelType = icon.sublevelType;  
+                icon.shadow = true;
+            }
+
+            this.menuIcons.push(icon);
+
+        }
+
+        // --------------------------- DIFFICULTY ICONS
+                
+        x = (gameTypeString == 'squareOne') ? 600 : 570;
+        y = 235;
+
+        for (let i = 0; i < info[gameTypeString].gameDifficulty; i++) {
+
+            // Parameters
+            const curX = x + (30 + 10) * i;
+
+            // Difficulty menuIcons
+            const icon = game.add.graphic.rect(curX, y, 30, 30, undefined, 0, colors.green, 1);
+            icon.anchor(0.5,0.5);
+            icon.difficulty = i + 1;
+            icon.iconType = 'difficulty';
+            icon.originalScale = 1;
+
+            if (i == 0) {
+                gameDifficulty = icon.difficulty;
+                icon.shadow = true;
+            }
+            this.menuIcons.push(icon);
+
+            // Difficulty numbers
+            game.add.text(curX, y + 7, i + 1, textStyles.h4_white);
+
+        }
+
+        // -------------- ENTER ICON
+
+        x = defaultWidth - 100;
+        y = defaultHeight - 110;
+
+        const enterIcon = game.add.image(x, y, 'bush');
+        enterIcon.anchor(0.5,0.5);
+        enterIcon.iconType = 'enter';
+        enterIcon.originalScale = 0.9;
 
-        if (debugMode) console.log("Game State: " + gameTypeString + ", " + levelType);
+        this.menuIcons.push(enterIcon);
 
-        // Calls level difficulty screen
-        difficultyScreen.preload();
+        game.add.text(x, y, game.lang.continue.toUpperCase(), textStyles.p_white);
+
+        // EVENTS
+
+        game.render.all();
+
+        game.event.add("click", this.func_onInputDown);
+        game.event.add("mousemove", this.func_onInputOver);
 
     },
 
-    func_showTitle: function (levelType, gameShape) {
+    /* GAME FUNCTIONS */
+
+    func_load: function (icon) {
+
+        if (audioStatus) game.audio.beepSound.play();
 
-        let title = "", type = "";
+        const type = icon.iconType;
+        switch (type) {
+            case 'level' : levelType = icon.levelType; break;
+            case 'sublevel' : sublevelType = icon.sublevelType; break;
+            case 'difficulty' : gameDifficulty = icon.difficulty; break;
+            case 'selectionBox' :
+                if (icon.curFrame == 0) {
+                    icon.curFrame = 1;
+                    fractionLabel = true;
+                } else {
+                    icon.curFrame = 0;
+                    fractionLabel = false;
+                }
+                game.render.all();
+                break;
+            case 'enter' :    
+                if (debugMode) console.log("Game State: " + gameTypeString + ", " + levelType);
+                mapPosition = 0;      // Map position
+                mapMove = true;       // Move no next point
+                completedLevels = 0;  // Reset the game progress when entering a new level
+                mapScreen.preload();
+                break;
+        }
 
-        if (levelType == 'A') type = "I";
-        else if (levelType == 'B') type = "II";
-        else if (levelType == 'C') type = "III";
+    },
 
-        if (gameShape == "Circle") title += game.lang.circle_name;
-        else if (gameShape == "Square") title += game.lang.square_name;
+    func_getOffset : function (width, numberOfIcons) {
+        return width / (numberOfIcons + 1);
+    },  
 
-        if (type != "") title += " " + type;
+    /* EVENTS */
 
-        // Shows level title on the label
-        menuScreen.lbl_game.name = title;
+    func_onInputDown: function (mouseEvent) {
+        const x = mouseEvent.offsetX, y = mouseEvent.offsetY;
+        let overIcon;
 
-        document.body.style.cursor = "pointer";
+        // check if clicked on an icon
+        for (let i in self.menuIcons) {
+            if (game.math.isOverIcon(x, y, self.menuIcons[i])) {
+                overIcon = i;
+                break;
+            }
+        }
+
+        // update gui
+        if (overIcon) { 
+
+            document.body.style.cursor = "pointer";
+                
+            self.menuIcons.forEach( cur => {
+                if ( cur.iconType == self.menuIcons[overIcon].iconType ) {
+                    if (cur == self.menuIcons[overIcon]) {
+                        cur.shadow = true;
+                    } else {
+                        cur.shadow = false;
+                    }
+                }
+            });
+        
+            self.func_load(self.menuIcons[overIcon]);
+
+        } else document.body.style.cursor = "auto";
+
+        navigationIcons.func_onInputDown(x, y);
+
+        game.render.all();
 
     },
 
-    func_clearTitle: function () {
+    func_onInputOver: function (mouseEvent) {
+        const x = mouseEvent.offsetX, y = mouseEvent.offsetY;
+        let overIcon;
+
+        // check if pointer is over an icon
+        for (let i in self.menuIcons) {
+            if (game.math.isOverIcon(x, y, self.menuIcons[i])) {
+                overIcon = i;
+                break; 
+            }
+        }
 
-        // Removes text from label
-        menuScreen.lbl_game.name = "";
+        // update gui
+        if (overIcon) { 
+            document.body.style.cursor = "pointer";
+            
+            self.menuIcons.forEach( cur => {
+                if ( cur.iconType == self.menuIcons[overIcon].iconType ) {
+                    if (cur == self.menuIcons[overIcon] ) {
+                        cur.scale = cur.originalScale * 1.1;
+                    } else {
+                        cur.scale = cur.originalScale; 
+                    }
+                }
+            });
+        } else {
+            self.menuIcons.forEach( cur => {
+                cur.scale = cur.originalScale; 
+            });
+            document.body.style.cursor = "auto";
+        }
 
-        document.body.style.cursor = "auto";
-    }
+        // check navigation icons
+        navigationIcons.func_onInputOver(x, y);
 
-};
+        game.render.all();
+        
+    },
+
+}

js/preMenu.js

@@ -3,6 +3,8 @@ const boot = {
 
     preload: function () {
 
+        info.start();
+
         document.body.style.cursor = "auto";
         game.loop.stop();
         game.event.clear();
@@ -11,9 +13,9 @@ const boot = {
         self = this;
 
         // LOADING MEDIA
-        game.load.audio(game.url.boot.audio);
-        game.load.image(game.url.boot.image);
-        game.load.sprite(game.url.boot.sprite);
+        game.load.audio(url.boot.audio);
+        game.load.image(url.boot.image);
+        game.load.sprite(url.boot.sprite);
 
     },
 
@@ -65,7 +67,7 @@ const langScreen = {
         for (let i in this.langs.flag) {
 
             // Add text for language names
-            game.add.text(defaultWidth / 2 + this.langs.x[i], defaultHeight / 2 + this.langs.y[i], this.langs.text[i], textStyles.title2right);
+            game.add.text(defaultWidth / 2 + this.langs.x[i], defaultHeight / 2 + this.langs.y[i], this.langs.text[i], textStyles.h2_green, 'right');
 
             // Add icons for flags
             const flag = game.add.image(defaultWidth / 2 + this.langs.x[i] + 100, defaultHeight / 2 + this.langs.y[i], this.langs.flag[i]);
@@ -92,8 +94,8 @@ const langScreen = {
 
         langScreen.listOfFlags.forEach(cur => {
 
-            const valid = y >= cur.yWithAnchor && y <= (cur.yWithAnchor + cur.height * cur.scaleHeight) &&
-                (x >= cur.xWithAnchor && x <= (cur.xWithAnchor + cur.width * cur.scaleWidth));
+            const valid = y >= cur.yWithAnchor && y <= (cur.yWithAnchor + cur.height * cur.scale) &&
+                (x >= cur.xWithAnchor && x <= (cur.xWithAnchor + cur.width * cur.scale));
 
             if (valid) {
                 for (let i in langScreen.langs.flag) {
@@ -113,14 +115,14 @@ const langScreen = {
 
         langScreen.listOfFlags.forEach(cur => {
 
-            const valid = y >= cur.yWithAnchor && y <= (cur.yWithAnchor + cur.height * cur.scaleHeight) &&
-                (x >= cur.xWithAnchor && x <= (cur.xWithAnchor + cur.width * cur.scaleWidth));
+            const valid = y >= cur.yWithAnchor && y <= (cur.yWithAnchor + cur.height * cur.scale) &&
+                (x >= cur.xWithAnchor && x <= (cur.xWithAnchor + cur.width * cur.scale));
 
             if (valid) {
                 flag = true;
-                cur.scaleHeight = cur.scaleWidth = 1.05;
+                cur.scale = cur.scale = 1.05;
             } else {
-                cur.scaleHeight = cur.scaleWidth = 1;
+                cur.scale = cur.scale = 1;
             }
         });
 
@@ -207,23 +209,21 @@ const nameScreen = {
 
         // Set title and warning text
 
-        game.add.text(defaultWidth / 2, defaultHeight / 2 - 100, game.lang.insert_name, textStyles.title1);
+        game.add.text(defaultWidth / 2, defaultHeight / 2 - 100, game.lang.insert_name, textStyles.h1_green);
 
-        this.warningEmptyName = game.add.text(defaultWidth / 2, defaultHeight / 2 - 70, "", textStyles.overtitle);
+        this.warningEmptyName = game.add.text(defaultWidth / 2, defaultHeight / 2 - 70, "", textStyles.h4_brown);
 
         // Set 'ok' button that gets player's information
-        this.okBtn = game.add.graphic.rect(defaultWidth / 2 - 84, defaultHeight / 2 + 70, 168, 60, undefined, 0, colors.teal, 0.5);
+        this.okBtn = game.add.graphic.rect(defaultWidth / 2 - 84, defaultHeight / 2 + 70, 168, 60, undefined, 0, colors.gray, 0.6);
 
         // Set button Text
-        game.add.text(defaultWidth / 2 + 1, defaultHeight / 2 + 112, game.lang.ready, textStyles.buttonLabel);
+        game.add.text(defaultWidth / 2 + 1, defaultHeight / 2 + 112, game.lang.ready, textStyles.h1_white);
 
         // Makes text field visible
-        document.getElementById("text-field").style.visibility = "visible";
-        document.getElementById("text-field").style.top = "300px";
-        document.getElementById("text-field").style.marginLeft = "240px";
+        document.getElementById("textbox").style.visibility = "visible";
 
         // Does the same as the button click when the player presses "enter"
-        document.getElementById("name_id").addEventListener('keypress', function (e) {
+        document.getElementById("textbox-content").addEventListener('keypress', function (e) {
             const keycode = e.key || e.code;
             if (keycode == 'Enter') {
 
@@ -251,8 +251,8 @@ const nameScreen = {
 
         const cur = self.okBtn;
 
-        const valid = y >= cur.yWithAnchor && y <= (cur.yWithAnchor + cur.height * cur.scaleHeight) &&
-            (x >= cur.xWithAnchor && x <= (cur.xWithAnchor + cur.width * cur.scaleWidth));
+        const valid = y >= cur.yWithAnchor && y <= (cur.yWithAnchor + cur.height * cur.scale) &&
+            (x >= cur.xWithAnchor && x <= (cur.xWithAnchor + cur.width * cur.scale));
 
         if (valid) {
 
@@ -274,15 +274,15 @@ const nameScreen = {
 
         const cur = self.okBtn;
 
-        const valid = y >= cur.yWithAnchor && y <= (cur.yWithAnchor + cur.height * cur.scaleHeight) &&
-            (x >= cur.xWithAnchor && x <= (cur.xWithAnchor + cur.width * cur.scaleWidth));
+        const valid = y >= cur.yWithAnchor && y <= (cur.yWithAnchor + cur.height * cur.scale) &&
+            (x >= cur.xWithAnchor && x <= (cur.xWithAnchor + cur.width * cur.scale));
 
         if (valid) {
             document.body.style.cursor = "pointer";
             cur.alpha = 0.4;
         } else {
             document.body.style.cursor = "auto";
-            cur.alpha = 0.5;
+            cur.alpha = 0.6;
         }
 
         game.render.all();
@@ -296,7 +296,7 @@ const nameScreen = {
     func_checkEmptyName: function () {
 
         // If text field is empty displays error message
-        if (document.getElementById("name_id").value == "") {
+        if (document.getElementById("textbox-content").value == "") {
             self.warningEmptyName.name = game.lang.empty_name;
             return false;
         }
@@ -307,11 +307,11 @@ const nameScreen = {
     func_saveName: function () {
 
         // Saves player's input in global variable 'playerName'
-        playerName = document.getElementById("name_id").value;
+        playerName = document.getElementById("textbox-content").value;
 
         // Hides and clears text field
-        document.getElementById("text-field").style.visibility = "hidden";
-        document.getElementById("name_id").value = "";
+        document.getElementById("textbox").style.visibility = "hidden";
+        document.getElementById("textbox-content").value = "";
 
         if (audioStatus) game.audio.beepSound.play();
 

js/squareOne.js

@@ -85,7 +85,7 @@ const squareOne = {
         navigationIcons.func_addIcons(
             true, true, true,   // left icons
             true, false,        // right icons
-            difficultyScreen, this.func_viewHelp
+            menuScreenCustom, this.func_viewHelp
         );
 
         // TRACTOR 
@@ -354,16 +354,16 @@ const squareOne = {
         if (levelType == 'A') {
             self.floor.blocks.forEach(cur => {
 
-                const valid = y >= cur.yWithAnchor && y <= (cur.yWithAnchor + cur.height * cur.scaleHeight) &&
-                    (x >= cur.xWithAnchor && x <= (cur.xWithAnchor + cur.width * cur.scaleWidth));
+                const valid = y >= cur.yWithAnchor && y <= (cur.yWithAnchor + cur.height * cur.scale) &&
+                    (x >= cur.xWithAnchor && x <= (cur.xWithAnchor + cur.width * cur.scale));
 
                 if (valid) self.func_clickSquare(cur);
             });
         } else {
             self.stck.blocks.forEach(cur => {
 
-                const valid = y >= cur.yWithAnchor && y <= (cur.yWithAnchor + cur.height * cur.scaleHeight) &&
-                    (x >= cur.xWithAnchor && x <= (cur.xWithAnchor + cur.width * cur.scaleWidth));
+                const valid = y >= cur.yWithAnchor && y <= (cur.yWithAnchor + cur.height * cur.scale) &&
+                    (x >= cur.xWithAnchor && x <= (cur.xWithAnchor + cur.width * cur.scale));
 
                 if (valid) self.func_clickSquare(cur);
             });
@@ -393,8 +393,8 @@ const squareOne = {
 
             self.floor.blocks.forEach(cur => {
 
-                const valid = y >= cur.yWithAnchor && y <= (cur.yWithAnchor + cur.height * cur.scaleHeight) &&
-                    (x >= cur.xWithAnchor && x <= (cur.xWithAnchor + cur.width * cur.scaleWidth));
+                const valid = y >= cur.yWithAnchor && y <= (cur.yWithAnchor + cur.height * cur.scale) &&
+                    (x >= cur.xWithAnchor && x <= (cur.xWithAnchor + cur.width * cur.scale));
 
                 if (valid) {
                     flagA = true;
@@ -410,8 +410,8 @@ const squareOne = {
 
             self.stck.blocks.forEach(cur => {
 
-                const valid = y >= cur.yWithAnchor && y <= (cur.yWithAnchor + cur.height * cur.scaleHeight) &&
-                    (x >= cur.xWithAnchor && x <= (cur.xWithAnchor + cur.width * cur.scaleWidth));
+                const valid = y >= cur.yWithAnchor && y <= (cur.yWithAnchor + cur.height * cur.scale) &&
+                    (x >= cur.xWithAnchor && x <= (cur.xWithAnchor + cur.width * cur.scale));
 
                 if (valid) {
                     flagB = true;
@@ -594,7 +594,7 @@ const squareOne = {
                 self.defaultBlockHeight - lineSize,
                 lineColor,
                 lineSize,
-                colors.lightBlue,
+                colors.white,
                 1);
             const anchor = (sublevelType == 'Minus') ? 1 : 0;
             block.anchor(anchor, 0);
@@ -616,11 +616,11 @@ const squareOne = {
                 const label = [];
 
                 if (divisor == 1) {
-                    label[0] = game.add.text(x, 488 - i * y, divisor, textStyles.valueLabelBlue1);
+                    label[0] = game.add.text(x, 488 - i * y, divisor, textStyles.h2_blue);
                 } else {
-                    label[0] = game.add.text(x, 479 - i * y + 16, divisor, textStyles.valueLabelBlue3);
-                    label[1] = game.add.text(x, 479 - i * y, '1', textStyles.valueLabelBlue3);
-                    label[2] = game.add.text(x, 479 - i * y, '_', textStyles.valueLabelBlue3);
+                    label[0] = game.add.text(x, 479 - i * y + 16, divisor, textStyles.p_blue);
+                    label[1] = game.add.text(x, 479 - i * y, '1', textStyles.p_blue);
+                    label[2] = game.add.text(x, 479 - i * y, '_', textStyles.p_blue);
                 }
 
                 // Add current label to group of labels
@@ -713,7 +713,7 @@ const squareOne = {
                 self.defaultBlockHeight - lineSize,
                 colors.blueBckg,
                 lineSize,
-                colors.blueBckgLevel,
+                colors.blueBckgInsideLevel,
                 1);
             const anchor = (sublevelType == 'Minus') ? 1 : 0;
             block.anchor(anchor, 0);
@@ -737,7 +737,7 @@ const squareOne = {
 
             const x = self.startX + (i * self.defaultBlockWidth * self.DIREC_LEVEL);
 
-            game.add.text(x, 462 + self.defaultBlockHeight + 58, i - 1, textStyles.valueLabelBlue1);
+            game.add.text(x, 462 + self.defaultBlockHeight + 58, i - 1, textStyles.h2_blue);
 
         }
 

js/squareTwo.js

@@ -91,7 +91,7 @@ const squareTwo = {
         // Calls function that loads navigation icons
         navigationIcons.func_addIcons(true, true, false,
             true, false,
-            difficultyScreen, false);
+            menuScreenCustom, false);
 
         //Add kid
         this.kidAnimation = game.add.sprite(100, 470, 'kid_standing', 5, 0.8);
@@ -141,7 +141,6 @@ const squareTwo = {
         let blockWidth = this.figureWidth / totalBlocksA; // width of each block in A
         let lineColor = colors.darkGreen;
         let fillColor = colors.lightGreen;
-        let fillColorAux = colors.lighterGreen;
 
         // Create blocks
         for (let i = 0; i < totalBlocksA; i++) {
@@ -158,7 +157,7 @@ const squareTwo = {
             // Auxiliar blocks
             const alpha = (sublevelType == 'A') ? 0.2 : 0;
             const yAux = yA + figureHeight + 10; // on the bottom of A
-            const auxBlock = game.add.graphic.rect(x, yAux, blockWidth, figureHeight, lineColor, 1, fillColorAux, alpha);
+            const auxBlock = game.add.graphic.rect(x, yAux, blockWidth, figureHeight, lineColor, 1, fillColor, alpha);
             self.A.auxBlocks.push(auxBlock);
 
         }
@@ -167,14 +166,14 @@ const squareTwo = {
         let xLabel = xA + this.figureWidth + 30;
         let yLabel = yA + figureHeight / 2;
 
-        this.A.label = game.add.text(xLabel, yLabel, this.A.blocks.length, textStyles.valueLabelBlue2);
+        this.A.label = game.add.text(xLabel, yLabel, this.A.blocks.length, textStyles.h4_blue);
 
         // 'selected blocks/fraction' label for A : at the bottom of A
         yLabel = yA + figureHeight + 34;
 
-        self.A.fractions[0] = game.add.text(xLabel, yLabel, "", textStyles.valueLabelBlue2);
-        self.A.fractions[1] = game.add.text(xLabel, yLabel + 21, "", textStyles.valueLabelBlue2);
-        self.A.fractions[2] = game.add.text(xLabel, yLabel, "___", textStyles.valueLabelBlue2);
+        self.A.fractions[0] = game.add.text(xLabel, yLabel, "", textStyles.h4_blue);
+        self.A.fractions[1] = game.add.text(xLabel, yLabel + 21, "", textStyles.h4_blue);
+        self.A.fractions[2] = game.add.text(xLabel, yLabel, "___", textStyles.h4_blue);
         self.A.fractions[0].alpha = 0;
         self.A.fractions[1].alpha = 0;
         self.A.fractions[2].alpha = 0;
@@ -186,7 +185,6 @@ const squareTwo = {
         blockWidth = this.figureWidth / totalBlocksB; // width of each block in B
         lineColor = colors.darkRed;
         fillColor = colors.lightRed;
-        fillColorAux = colors.lighterRed;
 
         // Blocks and auxiliar blocks
         for (let i = 0; i < totalBlocksB; i++) {
@@ -202,9 +200,9 @@ const squareTwo = {
             self.B.blocks.push(block);
 
             // Auxiliar blocks
-            const alpha = (sublevelType == 'A') ? 0.2 : 0;
+            const alpha = (sublevelType == 'A') ? 0.1 : 0;
             const yAux = yB + figureHeight + 10; // on the bottom of B
-            const auxBlock = game.add.graphic.rect(x, yAux, blockWidth, figureHeight, lineColor, 1, fillColorAux, alpha);
+            const auxBlock = game.add.graphic.rect(x, yAux, blockWidth, figureHeight, lineColor, 1, fillColor, alpha);
             self.B.auxBlocks.push(auxBlock);
 
         }
@@ -213,22 +211,22 @@ const squareTwo = {
         xLabel = xB + this.figureWidth + 30;
         yLabel = yB + figureHeight / 2;
 
-        this.B.label = game.add.text(xLabel, yLabel, this.B.blocks.length, textStyles.valueLabelBlue2);
+        this.B.label = game.add.text(xLabel, yLabel, this.B.blocks.length, textStyles.h4_blue);
 
         // Label fraction
         yLabel = yB + figureHeight + 34;
 
-        self.B.fractions[0] = game.add.text(xLabel, yLabel, "", textStyles.valueLabelBlue2);
-        self.B.fractions[1] = game.add.text(xLabel, yLabel + 21, "", textStyles.valueLabelBlue2);
-        self.B.fractions[2] = game.add.text(xLabel, yLabel, "___", textStyles.valueLabelBlue2);
+        self.B.fractions[0] = game.add.text(xLabel, yLabel, "", textStyles.h4_blue);
+        self.B.fractions[1] = game.add.text(xLabel, yLabel + 21, "", textStyles.h4_blue);
+        self.B.fractions[2] = game.add.text(xLabel, yLabel, "___", textStyles.h4_blue);
         self.B.fractions[0].alpha = 0;
         self.B.fractions[1].alpha = 0;
         self.B.fractions[2].alpha = 0;
 
         // Invalid selection text
-        self.A.warningText = game.add.text(defaultWidth / 2, defaultHeight / 2 - 225, "", textStyles.overtitle);
+        self.A.warningText = game.add.text(defaultWidth / 2, defaultHeight / 2 - 225, "", textStyles.h4_brown);
 
-        self.B.warningText = game.add.text(defaultWidth / 2, defaultHeight / 2 - 45, "", textStyles.overtitle);
+        self.B.warningText = game.add.text(defaultWidth / 2, defaultHeight / 2 - 45, "", textStyles.h4_brown);
 
 
 
@@ -343,14 +341,14 @@ const squareTwo = {
         // click block in A
         self.A.blocks.forEach(cur => {
 
-            const valid = y >= cur.yWithAnchor && y <= (cur.yWithAnchor + cur.height * cur.scaleHeight) && (x >= cur.xWithAnchor && x <= (cur.xWithAnchor + cur.width * cur.scaleWidth));
+            const valid = y >= cur.yWithAnchor && y <= (cur.yWithAnchor + cur.height * cur.scale) && (x >= cur.xWithAnchor && x <= (cur.xWithAnchor + cur.width * cur.scale));
             if (valid) self.func_clickSquare(cur);
         });
 
         // click block in B
         self.B.blocks.forEach(cur => {
 
-            const valid = y >= cur.yWithAnchor && y <= (cur.yWithAnchor + cur.height * cur.scaleHeight) && (x >= cur.xWithAnchor && x <= (cur.xWithAnchor + cur.width * cur.scaleWidth));
+            const valid = y >= cur.yWithAnchor && y <= (cur.yWithAnchor + cur.height * cur.scale) && (x >= cur.xWithAnchor && x <= (cur.xWithAnchor + cur.width * cur.scale));
             if (valid) self.func_clickSquare(cur);
         });
 
@@ -371,8 +369,8 @@ const squareTwo = {
         // mouse over A : show fraction
         self.A.blocks.forEach(cur => {
 
-            const valid = y >= cur.yWithAnchor && y <= (cur.yWithAnchor + cur.height * cur.scaleHeight) &&
-                (x >= cur.xWithAnchor && x <= (cur.xWithAnchor + cur.width * cur.scaleWidth));
+            const valid = y >= cur.yWithAnchor && y <= (cur.yWithAnchor + cur.height * cur.scale) &&
+                (x >= cur.xWithAnchor && x <= (cur.xWithAnchor + cur.width * cur.scale));
 
             if (valid) {
                 flagA = true;
@@ -384,8 +382,8 @@ const squareTwo = {
         // mouse over B : show fraction
         self.B.blocks.forEach(cur => {
 
-            const valid = y >= cur.yWithAnchor && y <= (cur.yWithAnchor + cur.height * cur.scaleHeight) &&
-                (x >= cur.xWithAnchor && x <= (cur.xWithAnchor + cur.width * cur.scaleWidth));
+            const valid = y >= cur.yWithAnchor && y <= (cur.yWithAnchor + cur.height * cur.scale) &&
+                (x >= cur.xWithAnchor && x <= (cur.xWithAnchor + cur.width * cur.scale));
 
             if (valid) {
                 flagB = true;