prototype map, end and circle1 ux + rename assets

src/js/gameMechanics.js

@@ -93,8 +93,8 @@ const game = {
         game.state.progressBarLabel = game.add.text(
           context.canvas.width / 2,
           context.canvas.height / 2 + 100,
-          '0/0',
-          textStyles.h2_blue
+          '...',
+          textStyles.h2_
         );
         // Calls state's preload() to load the state's media
         self.preload();

src/js/games/circleOne.js

@@ -73,13 +73,30 @@ const circleOne = {
 
     for (let i = 0; i <= 5; i++) {
       game.add
-        .image(startX + i * distanceBetweenPoints, startY, 'place_off', 0.45)
+        .sprite(
+          startX + i * distanceBetweenPoints,
+          startY,
+          'map_place',
+          0,
+          0.45
+        )
         .anchor(0.5, 0.5);
+      game.add.geom
+        .circle(
+          startX + i * distanceBetweenPoints,
+          startY + 34 * 1.5,
+          50,
+          undefined,
+          0,
+          colors.white,
+          0.5
+        )
+        .anchor(0, 0.25);
       game.add.text(
         startX + i * distanceBetweenPoints,
         startY + 34 * 1.5,
         i,
-        textStyles.h2_blueDark
+        textStyles.h2_
       );
     }
 
@@ -116,7 +133,7 @@ const circleOne = {
       all: [], // Circles objects of current level
       label: [], // Fractions labels
 
-      diameter: 60, // (Fixed) diameter for circles
+      diameter: 90, // (Fixed) diameter for circles
       cur: 0, // Current circle index
       direction: [], // Circle direction : 'Right' (plus), 'Left' (minus)
       distance: [], // Fraction of distance between circles (used in walking animation)
@@ -168,14 +185,16 @@ const circleOne = {
       this.circles.direction[i] = direction;
 
       // Set each circle color
-      let lineColor, anticlockwise;
+      let lineColor, textStyle, anticlockwise;
 
       if (direction == 'Right') {
-        lineColor = colors.blueDark;
+        lineColor = colors.green;
+        textStyle = textStyles.h2_;
         this.circles.direc[i] = 1;
         anticlockwise = true;
       } else {
         lineColor = colors.red;
+        textStyle = textStyles.h2_;
         this.circles.direc[i] = -1;
         anticlockwise = false;
       }
@@ -188,10 +207,10 @@ const circleOne = {
       if (divisor == 1) {
         circle = game.add.geom.circle(
           startX,
-          startY - 36 - i * this.circles.diameter,
+          startY - 54 - i * this.circles.diameter,
           this.circles.diameter,
           lineColor,
-          2,
+          3,
           colors.white,
           1
         );
@@ -203,9 +222,9 @@ const circleOne = {
         if (fractionLabel) {
           label[0] = game.add.text(
             x,
-            startY - 36 - i * this.circles.diameter,
+            startY - 54 - i * this.circles.diameter,
             divisor,
-            textStyles.h2_blueDark
+            textStyle
           );
           this.circles.label.push(label);
         }
@@ -216,13 +235,13 @@ const circleOne = {
 
         circle = game.add.geom.arc(
           startX,
-          startY - 36 - i * this.circles.diameter,
+          startY - 54 - i * this.circles.diameter,
           this.circles.diameter,
           0,
           game.math.degreeToRad(degree),
           anticlockwise,
           lineColor,
-          2,
+          3,
           colors.white,
           1
         );
@@ -234,19 +253,19 @@ const circleOne = {
             x,
             startY - 46 - i * this.circles.diameter + 32,
             divisor,
-            textStyles.h4_blueDark
+            textStyle
           );
           label[1] = game.add.text(
             x,
             startY - 38 - i * this.circles.diameter,
             '1',
-            textStyles.h4_blueDark
+            textStyle
           );
           label[2] = game.add.text(
             x,
             startY - 38 - i * this.circles.diameter,
             '___',
-            textStyles.h4_blueDark
+            textStyle
           );
           this.circles.label.push(label);
         }
@@ -353,6 +372,14 @@ const circleOne = {
     this.help.anchor(0.5, 0);
     this.help.alpha = 0;
 
+    // Text
+    game.add.text(
+      context.canvas.width / 2,
+      200,
+      'Onde o balão deve ficar para que o menino consiga chegar até ele?',
+      textStyles.h1_
+    );
+
     if (!this.restart) {
       game.timer.start(); // Set a timer for the current level (used in postScore())
       game.event.add('click', this.onInputDown);

src/js/games/squareOne.js

@@ -499,26 +499,26 @@ const squareOne = {
             x,
             self.startY - (i - 1) * y,
             divisor,
-            textStyles.h2_blueDark
+            textStyles.h2_
           );
         } else {
           label[0] = game.add.text(
             x,
             self.startY + 45 - i * y + 23,
             divisor,
-            textStyles.p_blueDark
+            textStyles.p_
           );
           label[1] = game.add.text(
             x,
             self.startY + 40 - i * y,
             '1',
-            textStyles.p_blueDark
+            textStyles.p_
           );
           label[2] = game.add.text(
             x,
             self.startY + 40 - i * y,
             '_',
-            textStyles.p_blueDark
+            textStyles.p_
           );
         }
         // Add current label to group of labels
@@ -649,7 +649,7 @@ const squareOne = {
         x,
         self.startY + self.defaultBlockHeight + 78 * 1.5,
         i - 1,
-        textStyles.h2_blueDark
+        textStyles.h2_
       );
     }
   },

src/js/games/squareTwo.js

@@ -203,30 +203,20 @@ const squareTwo = {
       xLabel,
       yLabel,
       this.a.blocks.length,
-      textStyles.h4_blueDark
+      textStyles.h4_
     );
 
     // 'selected blocks/fraction' label for (a) : at the bottom of (a)
     yLabel = yA + figureHeight + 34;
 
-    this.a.fractions[0] = game.add.text(
-      xLabel,
-      yLabel,
-      '',
-      textStyles.h4_blueDark
-    );
+    this.a.fractions[0] = game.add.text(xLabel, yLabel, '', textStyles.h4_);
     this.a.fractions[1] = game.add.text(
       xLabel,
       yLabel + 21,
       '',
-      textStyles.h4_blueDark
-    );
-    this.a.fractions[2] = game.add.text(
-      xLabel,
-      yLabel,
-      '___',
-      textStyles.h4_blueDark
+      textStyles.h4_
     );
+    this.a.fractions[2] = game.add.text(xLabel, yLabel, '___', textStyles.h4_);
     this.a.fractions[0].alpha = 0;
     this.a.fractions[1].alpha = 0;
     this.a.fractions[2].alpha = 0;
@@ -280,30 +270,20 @@ const squareTwo = {
       xLabel,
       yLabel,
       this.b.blocks.length,
-      textStyles.h4_blueDark
+      textStyles.h4_
     );
 
     // Label fraction
     yLabel = yB + figureHeight + 34;
 
-    this.b.fractions[0] = game.add.text(
-      xLabel,
-      yLabel,
-      '',
-      textStyles.h4_blueDark
-    );
+    this.b.fractions[0] = game.add.text(xLabel, yLabel, '', textStyles.h4_);
     this.b.fractions[1] = game.add.text(
       xLabel,
       yLabel + 21,
       '',
-      textStyles.h4_blueDark
-    );
-    this.b.fractions[2] = game.add.text(
-      xLabel,
-      yLabel,
-      '___',
-      textStyles.h4_blueDark
+      textStyles.h4_
     );
+    this.b.fractions[2] = game.add.text(xLabel, yLabel, '___', textStyles.h4_);
     this.b.fractions[0].alpha = 0;
     this.b.fractions[1].alpha = 0;
     this.b.fractions[2].alpha = 0;
@@ -313,13 +293,13 @@ const squareTwo = {
       context.canvas.width / 2,
       context.canvas.height / 2 - 225,
       '',
-      textStyles.h4_brown
+      textStyles.h4_
     );
     this.b.warningText = game.add.text(
       context.canvas.width / 2,
       context.canvas.height / 2 - 45,
       '',
-      textStyles.h4_brown
+      textStyles.h4_
     );
 
     game.timer.start(); // Set a timer for the current level (used in postScore)

src/js/globals/globals_debug.js

@@ -1,16 +1,16 @@
 const isDebugMode = true;
 
 const debugState = {
-  lang: { status: true, lang: 'it_IT' },
+  lang: { status: true, lang: 'en_US' },
   name: { status: true, name: 'Username' },
-  menu: { status: true, id: 2 },
+  menu: { status: false, id: 2 },
   customMenu: {
-    status: true,
+    status: false,
     getData: () => {
-      return { mode: 'a', operation: 'plus', difficulty: 1, label: true };
+      return { mode: 'a', operation: 'mixed', difficulty: 1, label: true };
     },
   },
-  map: { status: false, stop: true },
+  map: { status: false, stop: false },
   end: { status: false, stop: false },
 };
 

src/js/globals/globals_functions.js

@@ -32,10 +32,10 @@ const navigationIcons = {
     this.iconsList = [];
 
     // 'Descriptive labels' for the navigation icons
-    this.left_text = game.add.text(xLeft, 110, '', textStyles.p_brown);
+    this.left_text = game.add.text(xLeft, 110, '', textStyles.p_);
     this.left_text.align = 'left';
 
-    this.right_text = game.add.text(xRight + 60, 110, '', textStyles.p_brown);
+    this.right_text = game.add.text(xRight + 60, 110, '', textStyles.p_);
     this.right_text.align = 'right';
 
     // Left icons
@@ -67,7 +67,7 @@ const navigationIcons = {
         );
       } else {
         this.help = help;
-        this.iconsList.push(game.add.image(xLeft, 10, 'pointer', 1.5));
+        this.iconsList.push(game.add.image(xLeft, 10, 'show_solution', 1.5));
         xLeft += iconSize;
       }
     }

src/js/globals/globals_tokens.js

@@ -28,7 +28,7 @@ const colors = {
   greenNeon: '#00d600',
 
   // Basics
-  white: '#efeff5',
+  white: '#fff',
   gray: '#708090',
   black: '#000',
   yellow: '#ffef1f',
@@ -41,141 +41,40 @@ const fontSizes = {
   h4: '36px',
   p: '30px',
 };
+
+const fontFamily = 'Arial, sans-serif';
+
 /**
  * Preset text styles for game text.<br>
  * Contains: font, size, text color and text align.
  * @type {object}
  */
 const textStyles = {
-  h1_green: {
-    font: fontSizes.h1 + ' Arial,sans-serif',
-    fill: colors.green,
-    align: 'center',
-  }, // Menu title
-  h2_green: {
-    font: fontSizes.h2 + ' Arial,sans-serif',
-    fill: colors.green,
-    align: 'center',
-  }, // Flag labels (langState)
-  h3_green: {
-    font: fontSizes.h3 + ' Arial,sans-serif',
-    fill: colors.green,
-    align: 'center',
-  },
-  h4_green: {
-    font: fontSizes.h4 + ' Arial,sans-serif',
-    fill: colors.green,
-    align: 'center',
-  },
-  p_green: {
-    font: fontSizes.p + ' Arial,sans-serif',
-    fill: colors.green,
-    align: 'center',
-  },
-
-  h1_white: {
-    font: fontSizes.h1 + ' Arial,sans-serif',
-    fill: colors.white,
-    align: 'center',
-  }, // Ok button (nameState)
-  h2_white: {
-    font: fontSizes.h2 + ' Arial,sans-serif',
-    fill: colors.white,
-    align: 'center',
-  }, // Difficulty buttons (menuState)
-  h3__white: {
-    font: fontSizes.h3 + ' Arial,sans-serif',
-    fill: colors.white,
-    align: 'center',
-  }, // Difficulty numbers (menuState)
-  h4_white: {
-    font: fontSizes.h4 + ' Arial,sans-serif',
-    fill: colors.white,
-    align: 'center',
-  }, // Difficulty numbers (menuState)
-  p_white: {
-    font: fontSizes.p + ' Arial,sans-serif',
-    fill: colors.white,
-    align: 'center',
-  }, // Enter button (menuState)
-
-  h1_brown: {
-    font: fontSizes.h1 + ' Arial,sans-serif',
-    fill: colors.redDark,
-    align: 'center',
-  },
-  h2_brown: {
-    font: fontSizes.h2 + ' Arial,sans-serif',
-    fill: colors.redDark,
-    align: 'center',
-  }, // Map difficulty label
-  h3_brown: {
-    font: fontSizes.h3 + ' Arial,sans-serif',
-    fill: colors.redDark,
-    align: 'center',
-  },
-  h4_brown: {
-    font: fontSizes.h4 + ' Arial,sans-serif',
-    fill: colors.redDark,
-    align: 'center',
-  }, // Menu overtitle
-  p_brown: {
-    font: fontSizes.p + ' Arial,sans-serif',
-    fill: colors.redDark,
+  h1_: {
+    font: `${fontSizes.h1} ${fontFamily}`,
     align: 'center',
-  }, // Map difficulty label
-
-  h1_blue: {
-    font: fontSizes.h1 + ' Arial,sans-serif',
     fill: colors.blue,
-    align: 'center',
   },
-  h2_blue: {
-    font: fontSizes.h2 + ' Arial,sans-serif',
-    fill: colors.blue,
+  h2_: {
+    font: `${fontSizes.h2} ${fontFamily}`,
     align: 'center',
-  }, // Menu subtitle
-  h3_blue: {
-    font: fontSizes.h3 + ' Arial,sans-serif',
     fill: colors.blue,
-    align: 'center',
   },
-  h4_blue: {
-    font: fontSizes.h4 + ' Arial,sans-serif',
-    fill: colors.blue,
+  h3_: {
+    font: `${fontSizes.h3} ${fontFamily}`,
     align: 'center',
-  }, // Menu subtitle
-  p_blue: {
-    font: fontSizes.p + ' Arial,sans-serif',
     fill: colors.blue,
-    align: 'center',
   },
-
-  h1_blueDark: {
-    font: fontSizes.h1 + ' Arial,sans-serif',
-    fill: colors.blueDark,
+  h4_: {
+    font: `${fontSizes.h4} ${fontFamily}`,
     align: 'center',
+    fill: colors.blue,
   },
-  h2_blueDark: {
-    font: fontSizes.h2 + ' Arial,sans-serif',
-    fill: colors.blueDark,
-    align: 'center',
-  }, // Fractions
-  h3_blueDark: {
-    font: fontSizes.h3 + ' Arial,sans-serif',
-    fill: colors.blueDark,
+  p_: {
+    font: `${fontSizes.p} ${fontFamily}`,
     align: 'center',
+    fill: colors.redDark,
   },
-  h4_blueDark: {
-    font: fontSizes.h4 + ' Arial,sans-serif',
-    fill: colors.blueDark,
-    align: 'center',
-  }, // Fractions
-  p_blueDark: {
-    font: fontSizes.p + ' Arial,sans-serif',
-    fill: colors.blueDark,
-    align: 'center',
-  }, // Fractions
 };
 
 /**
@@ -213,8 +112,6 @@ const url = {
       ['bush', baseUrl + 'scene/bush.png'],
       ['cloud', baseUrl + 'scene/cloud.png'],
       ['floor', baseUrl + 'scene/floor.png'],
-      ['place_off', baseUrl + 'scene/place_off.png'],
-      ['place_on', baseUrl + 'scene/place_on.png'],
       ['rock', baseUrl + 'scene/rock.png'],
       ['road', baseUrl + 'scene/road.png'],
       ['sign', baseUrl + 'scene/sign.png'],
@@ -239,8 +136,7 @@ const url = {
       ['answer_correct', baseUrl + 'icons_interactive/answer_correct.png'],
       ['answer_wrong', baseUrl + 'icons_interactive/answer_wrong.png'],
       ['arrow_down', baseUrl + 'icons_interactive/arrow_down.png'],
-      ['btn', baseUrl + 'icons_interactive/btn.png'],
-      ['close', baseUrl + 'icons_interactive/close.png'],
+      // ['close', baseUrl + 'icons_interactive/close.png'],
       ['info', baseUrl + 'icons_interactive/info.png'],
       ['pointer', baseUrl + 'icons_interactive/pointer.png'],
       // Menu icons - Games
@@ -275,6 +171,8 @@ const url = {
       ['op_eq', baseUrl + 'info_box/op_eq.png'],
     ],
     sprite: [
+      // scene
+      ['map_place', baseUrl + 'scene/map_place.png', 2],
       // Game Sprites
       ['kid_walking', baseUrl + 'characters/kid/walking.png', 26],
       // Navigation icons on the top of the page
@@ -310,8 +208,8 @@ const url = {
   squareOne: {
     image: [
       // Map buildings
-      ['farm', baseUrl + 'scene/farm.png'],
-      ['garage', baseUrl + 'scene/garage.png'],
+      ['farm', baseUrl + 'scene/building_farm.png'],
+      ['garage', baseUrl + 'scene/building_garage.png'],
     ],
     sprite: [
       // Game sprites
@@ -322,8 +220,8 @@ const url = {
   squareTwo: {
     image: [
       // Map buildings
-      ['house', baseUrl + 'scene/house.png'],
-      ['school', baseUrl + 'scene/school.png'],
+      ['house', baseUrl + 'scene/building_house.png'],
+      ['school', baseUrl + 'scene/building_school.png'],
     ],
     sprite: [
       // Game sprites
@@ -335,8 +233,8 @@ const url = {
   circleOne: {
     image: [
       // Map buildings
-      ['house', baseUrl + 'scene/house.png'],
-      ['school', baseUrl + 'scene/school.png'],
+      ['house', baseUrl + 'scene/building_house.png'],
+      ['school', baseUrl + 'scene/building_school.png'],
       // Game images
       ['balloon', baseUrl + 'characters/balloon/balloon.png'],
       ['balloon_basket', baseUrl + 'characters/balloon/balloon_basket.png'],
@@ -350,8 +248,8 @@ const url = {
   scaleOne: {
     image: [
       // Map buildings
-      ['farm', baseUrl + 'scene/farm.png'],
-      ['garage', baseUrl + 'scene/garage.png'],
+      ['farm', baseUrl + 'scene/building_farm.png'],
+      ['garage', baseUrl + 'scene/building_garage.png'],
       // Game images
       ['scale_base', baseUrl + 'characters/scale/scale_base.png'],
       ['scale_arm', baseUrl + 'characters/scale/scale_arm.png'],

src/js/menus/menu_custom.js

@@ -30,17 +30,15 @@ const customMenuState = {
       // Overtitle : Selected game
       game.add.text(
         context.canvas.width / 2,
-        50,
+        60,
         game.lang.game.toUpperCase() + ': ' + menuState.menuIcons,
-        textStyles.p_brown
+        { ...textStyles.h3_, fill: colors.redDark }
       );
       // Title : Customize the selected game
-      game.add.text(
-        context.canvas.width / 2,
-        100,
-        game.lang.custom_game,
-        textStyles.h1_green
-      );
+      game.add.text(context.canvas.width / 2, 120, game.lang.custom_game, {
+        ...textStyles.h1_,
+        fill: colors.green,
+      });
 
       // Loads navigation icons
       navigationIcons.add(true, false, false, true, true, 'menu', false);
@@ -219,8 +217,7 @@ const customMenuState = {
           // If its in the same icon category
           if (cur == self.menuIcons[overIcon]) {
             // If its the icon the pointer is over
-            if (cur.iconType == 'enter')
-              self.enterText.style = textStyles.h3__white;
+            if (cur.iconType == 'enter') self.enterText.style = textStyles.h3_;
             cur.scale = cur.originalScale * 1.1;
           } else {
             cur.scale = cur.originalScale;
@@ -229,7 +226,7 @@ const customMenuState = {
       });
     } else {
       // If pointer is not over icon
-      if (self.enterText) self.enterText.style = textStyles.h4_white;
+      if (self.enterText) self.enterText.style = textStyles.h4_;
       self.menuIcons.forEach((cur) => {
         cur.scale = cur.originalScale;
       });
@@ -246,32 +243,27 @@ const customMenuState = {
     let infoIcon;
 
     // Label 'Game Modes'
-    game.add.text(x + offsetW, y, game.lang.game_modes, textStyles.h2_blue);
+    game.add.text(x + offsetW, y, game.lang.game_modes, textStyles.h2_);
 
-    infoIcon = game.add.image(x + 2 * offsetW - 30, y - 20, 'info', 0.9, 1);
+    infoIcon = game.add.image(x + 2 * offsetW - 30, y - 20, 'info', 0.7, 0.8);
     infoIcon.anchor(0.5, 0.5);
     infoIcon.iconType = 'infoIcon';
     infoIcon.id = 'gameMode';
     self.menuIcons.push(infoIcon);
 
     // Label 'Operations'
-    game.add.text(x + 3 * offsetW, y, game.lang.operations, textStyles.h2_blue);
+    game.add.text(x + 3 * offsetW, y, game.lang.operations, textStyles.h2_);
 
-    infoIcon = game.add.image(x + 4 * offsetW - 30, y - 20, 'info', 0.9, 1);
+    infoIcon = game.add.image(x + 4 * offsetW - 30, y - 20, 'info', 0.7, 0.8);
     infoIcon.anchor(0.5, 0.5);
     infoIcon.iconType = 'infoIcon';
     infoIcon.id = 'gameOperation';
     self.menuIcons.push(infoIcon);
 
     // Label 'Difficulties'
-    game.add.text(
-      x + 5 * offsetW,
-      y,
-      game.lang.difficulties,
-      textStyles.h2_blue
-    );
+    game.add.text(x + 5 * offsetW, y, game.lang.difficulties, textStyles.h2_);
 
-    infoIcon = game.add.image(x + 6 * offsetW - 30, y - 20, 'info', 0.9, 1);
+    infoIcon = game.add.image(x + 6 * offsetW - 30, y - 20, 'info', 0.7, 0.8);
     infoIcon.anchor(0.5, 0.5);
     infoIcon.iconType = 'infoIcon';
     infoIcon.id = 'gameDifficulty';
@@ -282,7 +274,7 @@ const customMenuState = {
       x + 5 * offsetW,
       y + offsetH + 50,
       game.lang.show,
-      textStyles.h4_blue
+      textStyles.h4_
     );
 
     self.auxText;
@@ -293,7 +285,7 @@ const customMenuState = {
         x + 5 * offsetW + 10,
         y + offsetH + 80,
         self.auxText,
-        textStyles.h4_blue
+        textStyles.h4_
       );
     } else {
       self.auxText = game.lang.title;
@@ -301,7 +293,7 @@ const customMenuState = {
         x + 5 * offsetW,
         y + offsetH + 80,
         self.auxText,
-        textStyles.h2_blue
+        textStyles.h2_
       );
     }
   },
@@ -423,7 +415,7 @@ const customMenuState = {
       self.menuIcons.push(icon);
 
       // Difficulty numbers
-      game.add.text(curX, y + 7, i + 1, textStyles.h4_white);
+      game.add.text(curX, y + 7, i + 1, textStyles.h4_);
     }
   },
 
@@ -439,12 +431,7 @@ const customMenuState = {
 
       self.menuIcons.push(enterIcon);
 
-      self.enterText = game.add.text(
-        x,
-        y,
-        game.lang.continue,
-        textStyles.h4_white
-      );
+      self.enterText = game.add.text(x, y, game.lang.continue, textStyles.h4_);
     }
   },
 

src/js/menus/menu_main.js

@@ -29,21 +29,19 @@ const menuState = {
         context.canvas.width / 2,
         60,
         game.lang.welcome + ', ' + playerName + '!',
-        textStyles.h3_brown
+        { ...textStyles.h3_, fill: colors.redDark }
       );
       // Title : Select a game
-      game.add.text(
-        context.canvas.width / 2,
-        120,
-        game.lang.menu_title,
-        textStyles.h1_green
-      );
+      game.add.text(context.canvas.width / 2, 120, game.lang.menu_title, {
+        ...textStyles.h1_,
+        fill: colors.green,
+      });
       // Subtitle : <game mode>
       this.lbl_game = game.add.text(
         context.canvas.width / 2,
-        160,
+        170,
         '',
-        textStyles.h2_blue
+        textStyles.h2_
       );
 
       // Loads navigation icons
@@ -74,8 +72,8 @@ const menuState = {
           x + 110,
           context.canvas.height / 2 - 100 - 80 - 10,
           'info',
-          1,
-          1
+          0.8,
+          0.6
         );
         infoIcon.anchor(0.5, 0.5);
         infoIcon.iconType = 'infoIcon';

src/js/menus/preMenu_lang.js

@@ -37,7 +37,7 @@ const langState = {
         context.canvas.width / 2 + this.langs.x[i],
         context.canvas.height / 2 + this.langs.y[i],
         this.langs.text[i],
-        textStyles.h1_green
+        { ...textStyles.h2_, fill: colors.green }
       ).align = 'right';
 
       // Add icons for flags

src/js/menus/preMenu_name.js

@@ -18,24 +18,24 @@ const nameState = {
       context.canvas.width / 2,
       context.canvas.height / 2 - 150,
       game.lang.insert_name,
-      textStyles.h1_green
+      { ...textStyles.h1_, fill: colors.green }
     );
 
     this.warningEmptyName = game.add.text(
       context.canvas.width / 2,
       context.canvas.height / 2 - 80,
       '',
-      textStyles.h4_brown
+      { ...textStyles.p_, fill: colors.red }
     );
 
     this.okBtn = game.add.geom.rect(
       context.canvas.width / 2,
       context.canvas.height / 2 + 93 + 44,
-      285,
+      300,
       93.5,
       undefined,
       undefined,
-      colors.blueDark,
+      colors.green,
       1
     );
     this.okBtn.anchor(0.5, 0.5);
@@ -45,7 +45,7 @@ const nameState = {
       context.canvas.width / 2,
       context.canvas.height / 2 + 152, //112,
       game.lang.ready,
-      textStyles.h1_white
+      { ...textStyles.h2_, fill: colors.white }
     );
 
     // Makes text field visible

src/js/moodle/studentReport.js

@@ -28,7 +28,7 @@ const studentReport = {
       context.canvas.width / 2,
       80,
       game.lang.results,
-      textStyles.h1_green
+      textStyles.h1_
     );
     game.add.image(
       x - 40,
@@ -46,24 +46,24 @@ const studentReport = {
       ': ' +
       text +
       (gameName.slice(-3) == 'One' ? ' I' : ' II');
-    game.add.text(190, y - 50, text, textStyles.h4_brown).align = 'left';
+    game.add.text(190, y - 50, text, textStyles.h4_).align = 'left';
     game.add.text(
       190,
       y - 25,
       game.lang.game_mode + ': ' + gameMode,
-      textStyles.h4_brown
+      textStyles.h4_
     ).align = 'left';
     game.add.text(
       190,
       y,
       game.lang.operation + ': ' + gameOperation,
-      textStyles.h4_brown
+      textStyles.h4_
     ).align = 'left';
     game.add.text(
       190,
       y + 25,
       game.lang.difficulty + ': ' + gameDifficulty,
-      textStyles.h4_brown
+      textStyles.h4_
     ).align = 'left';
 
     // Student info
@@ -91,7 +91,7 @@ const studentReport = {
           x,
           context.canvas.height - 100,
           '' + (i + 1),
-          textStyles.h2_white
+          textStyles.h2_
         );
 
         game.add.geom.rect(
@@ -107,19 +107,19 @@ const studentReport = {
           x - 40,
           y - 25,
           game.lang.time + ': ' + game.math.convertTime(moodleVar.time[i]),
-          textStyles.h4_brown
+          textStyles.h4_
         ).align = 'left';
         game.add.text(
           x - 40,
           y,
           game.lang.hits + ': ' + moodleVar.hits[i],
-          textStyles.h4_brown
+          textStyles.h4_
         ).align = 'left';
         game.add.text(
           x - 40,
           y + 25,
           game.lang.errors + ': ' + moodleVar.errors[i],
-          textStyles.h4_brown
+          textStyles.h4_
         ).align = 'left';
       }
     }

src/js/screens/end.js

@@ -14,6 +14,9 @@ const endState = {
     self.preAnimate = false;
     self.animate = true;
 
+    self.waitUserAction = false;
+    self.endUpdate = false;
+
     renderBackground();
 
     // Progress bar
@@ -42,13 +45,13 @@ const endState = {
       context.canvas.width - 300 + 160,
       y + 33,
       '100%',
-      textStyles.h2_blueDark
+      textStyles.h2_
     ).align = 'left';
     game.add.text(
       context.canvas.width - 300 - 10,
       y + 33,
       game.lang.difficulty + ' ' + gameDifficulty,
-      textStyles.h2_blueDark
+      textStyles.h2_
     ).align = 'right';
 
     game.add
@@ -74,9 +77,40 @@ const endState = {
 
     if (this.animate) game.animation.play(this.character.animation[0]);
 
+    //tree
     game.add
       .image(30 + 200, context.canvas.height - 20, 'tree_4', 1.275)
       .anchor(0, 1);
+
+    // feedback
+    this.continueButton = game.add.geom.rect(
+      context.canvas.width / 2,
+      context.canvas.height / 2,
+      500,
+      100,
+      undefined,
+      1,
+      colors.blueDark,
+      0
+    );
+    this.continueButton.anchor(0.5, 0.5);
+
+    game.add.text(
+      context.canvas.width / 2,
+      200,
+      'Congratulations!',
+      textStyles.h1_
+    );
+    this.continueText = game.add.text(
+      context.canvas.width / 2,
+      context.canvas.height / 2 + 16,
+      'Go back to menu',
+      textStyles.h1_
+    );
+    this.continueText.alpha = 0;
+
+    game.event.add('click', this.onInputDown);
+    game.event.add('mousemove', this.onInputOver);
   },
 
   /**
@@ -111,20 +145,71 @@ const endState = {
       if (self.character.x <= 700) {
         self.character.x += 2;
       } else {
-        self.animate = false;
-        game.animation.stop(self.character.animation[0]);
+        self.waitUserAction = true;
+        self.continueText.alpha = 1;
+        self.continueButton.alpha = 1;
+      }
+    }
+
+    if (self.endUpdate) {
+      self.animate = false;
+      game.animation.stop(self.character.animation[0]);
 
+      // FOR MOODLE
+      if (!moodle) {
+        completedLevels = 0;
+        game.state.start('menu');
+      } else {
         // FOR MOODLE
-        if (!moodle) {
-          completedLevels = 0;
-          game.state.start('menu');
-        } else {
-          // FOR MOODLE
-          parent.location.reload(true);
-        }
+        parent.location.reload(true);
       }
     }
 
     game.render.all();
   },
+
+  /**
+   * Called by mouse click event
+   *
+   * @param {object} mouseEvent contains the mouse click coordinates
+   */
+  onInputDown: function (mouseEvent) {
+    console.log('clicked');
+    const x = game.math.getMouse(mouseEvent).x;
+    const y = game.math.getMouse(mouseEvent).y;
+
+    if (game.math.isOverIcon(x, y, self.continueButton)) {
+      self.endUpdate = true;
+      //self.loadGame();
+    }
+  },
+
+  /**
+   * Called by mouse move event
+   *
+   * @param {object} mouseEvent contains the mouse move coordinates
+   */
+  onInputOver: function (mouseEvent) {
+    console.log('moved');
+
+    const x = game.math.getMouse(mouseEvent).x;
+    const y = game.math.getMouse(mouseEvent).y;
+    let overIcon;
+
+    if (game.math.isOverIcon(x, y, self.continueButton)) {
+      overIcon = true;
+      console.log('is over icon');
+    }
+
+    // Update gui
+    if (overIcon) {
+      // If pointer is over icon
+      document.body.style.cursor = 'pointer';
+      self.continueButton.scale = self.continueButton.originalScale * 1.1;
+    } else {
+      // If pointer is not over icon
+      self.continueButton.scale = self.continueButton.originalScale * 1;
+      document.body.style.cursor = 'auto';
+    }
+  },
 };

src/js/screens/map.js

@@ -11,6 +11,8 @@ const mapState = {
    * Main code
    */
   create: function () {
+    self.waitUserAction = false;
+
     renderBackground('plain');
 
     // Calls function that loads navigation icons
@@ -175,14 +177,14 @@ const mapState = {
       context.canvas.width - 240 + 160,
       y + 33,
       percentText + '%',
-      textStyles.h2_blueDark
+      textStyles.h2_
     ).align = 'left';
 
     game.add.text(
       context.canvas.width - 240 - 10,
       y + 33,
       game.lang.difficulty + ' ' + gameDifficulty,
-      textStyles.h2_blueDark
+      textStyles.h2_
     ).align = 'right';
 
     // Map positions
@@ -207,14 +209,14 @@ const mapState = {
 
     // Map positions
     for (let i = 1; i < this.points.x.length - 1; i++) {
-      const aux =
+      const frame =
         i < curMapPosition || (canGoToNextMapPosition && i == curMapPosition)
-          ? 'place_on'
-          : 'place_off';
+          ? 1
+          : 0;
 
       // Map road positions - game levels
       game.add
-        .image(this.points.x[i], this.points.y[i], aux, 0.45)
+        .sprite(this.points.x[i], this.points.y[i], 'map_place', frame, 0.45)
         .anchor(0.5, 0.5);
 
       // Map road signs - game level number
@@ -225,16 +227,16 @@ const mapState = {
         this.points.x[i] - 20,
         this.points.y[i] - 125,
         i,
-        textStyles.h2_white
+        textStyles.h2_
       );
     }
 
     // Character
     this.character = gameList[gameId].assets.map.character(gameOperation);
+    this.character.anchor(0.5, 1);
     this.character.animation =
       gameList[gameId].assets.map.characterAnimation(gameOperation);
 
-    //this.character.anchor(0.5, 1);
     game.animation.play(this.character.animation[0]);
 
     this.moveCounter = 0;
@@ -247,6 +249,29 @@ const mapState = {
     self.speedX = (xB - xA) / speed;
     self.speedY = (yA - yB) / speed;
 
+    // feedback
+    this.continueButton = game.add.geom.rect(
+      context.canvas.width / 2,
+      context.canvas.height / 2,
+      300,
+      100,
+      undefined,
+      1,
+      colors.blueDark,
+      0
+    );
+    this.continueButton.anchor(0.5, 0.5);
+
+    // continue
+    // try again?
+    this.continueText = game.add.text(
+      context.canvas.width / 2,
+      context.canvas.height / 2 + 16,
+      game.lang.continue,
+      textStyles.h1_
+    );
+    this.continueText.alpha = 0;
+
     game.event.add('click', this.onInputDown);
     game.event.add('mousemove', this.onInputOver);
   },
@@ -288,17 +313,20 @@ const mapState = {
       }
 
       if (!canGoToNextMapPosition) {
-        endUpdate = true;
+        self.waitUserAction = true;
+        self.continueText.alpha = 1;
+        self.continueButton.alpha = 1;
+        //endUpdate = true;
       }
     }
 
     game.render.all();
 
-    if (endUpdate) {
-      game.animation.stop(self.character.animation[0]);
+    // if (endUpdate) {
+    //   game.animation.stop(self.character.animation[0]);
 
-      self.loadGame();
-    }
+    //   self.loadGame();
+    // }
   },
 
   /**
@@ -317,6 +345,11 @@ const mapState = {
   onInputDown: function (mouseEvent) {
     const x = game.math.getMouse(mouseEvent).x;
     const y = game.math.getMouse(mouseEvent).y;
+
+    if (game.math.isOverIcon(x, y, self.continueButton)) {
+      self.loadGame();
+    }
+
     navigationIcons.onInputDown(x, y);
   },
 
@@ -328,6 +361,23 @@ const mapState = {
   onInputOver: function (mouseEvent) {
     const x = game.math.getMouse(mouseEvent).x;
     const y = game.math.getMouse(mouseEvent).y;
+    let overIcon;
+
+    if (game.math.isOverIcon(x, y, self.continueButton)) {
+      overIcon = true;
+    }
+
+    // Update gui
+    if (overIcon) {
+      // If pointer is over icon
+      document.body.style.cursor = 'pointer';
+      self.continueButton.scale = self.continueButton.originalScale * 1.1;
+    } else {
+      // If pointer is not over icon
+      self.continueButton.scale = self.continueButton.originalScale * 1;
+      document.body.style.cursor = 'auto';
+    }
+
     navigationIcons.onInputOver(x, y);
   },
 };