resize and refactor end screen

src/assets/lang/en_US

@@ -1,5 +1,6 @@
 audio=AUDIO
 aux_rectangle=Auxiliar Rectangles
+back_to_menu=Go back to main menu
 circle=Circles
 circleOne_intro_a=Where should the balloon be placed so the boy\ncan get to it?
 circleOne_intro_b=How many arcs must we select so that\nthe boy can reach the balloon?
@@ -7,6 +8,7 @@ squareOne_intro_a=What size hole must be opened in the ground so that\nall the b
 squareOne_intro_b=How many blocks must the tractor push to\nfill the hole in the ground?
 squareTwo_intro_a=...\n...
 squareTwo_intro_b=...\n...
+congratulations=congratulations!
 continue=Continue
 custom_game=CUSTOMIZE THE CURRENT GAME
 difficulties=Difficulties

src/assets/lang/es_PE

@@ -1,13 +1,15 @@
 audio=AUDIO
 aux_rectangle=Rectángulos Auxiliares
+back_to_menu=Volver al menú principal
 circle=Circulos
-continue=Continúa
 circleOne_intro_a=¿Dónde debe estar el globo para que el niño\npueda alcanzarlo?
 circleOne_intro_b=¿Cuántos aros debemos seleccionar para que\nel niño pueda llegar al globo?
 squareOne_intro_a=¿Qué tamaño de agujero hay que abrir en el suelo para que quepan todos los bloques que llevará el tractor?
 squareOne_intro_b=¿Cuántos bloques debe empujar la excavadora para llenar\nel agujero en el suelo?
 squareTwo_intro_a=...\n...
 squareTwo_intro_b=...\n...
+congratulations=¡Felicidades!
+continue=Continúa
 custom_game=PERSONALIZAR EL JUEGO ACTUAL
 difficulties=Dificultades
 difficulty=Dificultade

src/assets/lang/fr_FR

@@ -1,13 +1,15 @@
 audio=AUDIO
 aux_rectangle=Rectangles Auxiliaires
+back_to_menu=Retour au menu principal
 circle=Cercles
-continue=Continuez
 circleOne_intro_a=Où doit être le ballon pour que le garçon\npuisse l'atteindre ?
 circleOne_intro_b=Combien de cerceaux devons-nous choisir pour que\nle garçon puisse atteindre le ballon ?
 squareOne_intro_a=Quelle taille de trou faut-il ouvrir dans le sol pour que tous les blocs\nque prendra le tracteur puissent y rentrer ?
 squareOne_intro_b=Combien de blocs le bulldozer doit-il pousser\npour combler le trou dans le sol ?
 squareTwo_intro_a=...\n...
 squareTwo_intro_b=...\n...
+congratulations=Toutes nos félicitations!
+continue=Continuez
 custom_game=PERSONNALISER LE JEU ACTUEL
 difficulties=Difficultés
 difficulty=Difficulté

src/assets/lang/it_IT

@@ -1,13 +1,15 @@
 audio=AUDIO
 aux_rectangle=Rettangoli Ausiliari
+back_to_menu=Torna al menu principale
 circle=Cerchi
-continue=Continua
 circleOne_intro_a=Dove dovrebbe essere il pallone in modo che il\nragazzo possa raggiungerlo?
 circleOne_intro_b=Quanti cerchi dobbiamo selezionare affinché\nil ragazzo possa raggiungere il pallone?
 squareOne_intro_a=Di che dimensione deve essere aperto il buco nel terreno in modo\nche nentrino tutti i blocchi che prenderà il trattore?
 squareOne_intro_b=Quanti blocchi deve spingere il bulldozer\nper riempire il buco nel terreno?
 squareTwo_intro_a=...\n...
 squareTwo_intro_b=...\n...
+congratulations=Congratulazioni!
+continue=Continua
 custom_game=PERSONALIZZA IL GIOCO ATTUALE
 difficulties=Difficoltà
 difficulty=Difficoltà

src/assets/lang/pt_BR

@@ -1,5 +1,6 @@
 audio=ÁUDIO
 aux_rectangle=Retângulos Auxiliares
+back_to_menu=Voltar ao menu principal
 circle=Círculos
 circleOne_intro_a=Onde o balão deve ficar para que o menino\nconsiga chegar até ele?
 circleOne_intro_b=Quantos arcos devemos selecionar para que\no menino consiga chegar até o balão?
@@ -8,6 +9,7 @@ squareOne_intro_b=Quantos blocos o trator deve empurrar para conseguir\npreenche
 squareTwo_intro_a=...\n...
 squareTwo_intro_b=...\n...
 continue=Continue
+congratulations=Parabéns!
 custom_game=PERSONALIZE O JOGO ATUAL
 difficulties=Dificuldades
 difficulty=Dificuldade

src/js/games/squareTwo.js

@@ -293,10 +293,11 @@ const squareTwo = {
         100,
         context.canvas.height - 128 * 1.5,
         'kid_standing',
-        5,
+        0,
         1.2
       );
       self.kidAnimation.anchor(0.5, 0.7);
+      self.kidAnimation.curFrame = 3;
     },
     renderMainUI: () => {
       // Intro text

src/js/globals/globals_control.js

@@ -220,8 +220,8 @@ const gameList = [
       map: {
         characterAnimation: (operation) => {
           return operation === 'plus'
-            ? ['green_tractor', [0, 1, 2, 3, 4], 3]
-            : ['red_tractor', [10, 11, 12, 13, 14], 3];
+            ? ['move', [0, 1, 2, 3, 4], 3]
+            : ['move', [10, 11, 12, 13, 14], 3];
         },
         character: (operation) => {
           let char;
@@ -265,29 +265,32 @@ const gameList = [
         },
       },
       end: {
-        characterAnimation: (animation) =>
-          animation === 'plus'
-            ? ['move', [0, 1, 2, 3, 4], 4]
-            : ['move', [10, 11, 12, 13, 14], 4],
-        character: (operation) => {
+        characterAnimation: () =>
+          gameOperation === 'plus'
+            ? ['move', [0, 1, 2, 3, 4], 3]
+            : ['move', [10, 11, 12, 13, 14], 3],
+        character: () => {
           const char = game.add.sprite(
             0,
-            context.canvas.height - 170,
+            context.canvas.height - 170 - 80,
             'tractor',
             0,
             1.05
           );
           char.anchor(0.5, 0.5);
-          if (operation === 'plus') char.curFrame = 10;
+          if (gameOperation === 'minus') char.curFrame = 10;
+
           return char;
         },
         building: () =>
-          game.add.image(
-            context.canvas.width - 400,
-            context.canvas.height - 400,
-            'farm',
-            1.155
-          ),
+          game.add
+            .image(
+              context.canvas.width - 420,
+              context.canvas.height - 100,
+              'farm',
+              1.7
+            )
+            .anchor(0, 1),
       },
     },
   },
@@ -410,13 +413,25 @@ const gameList = [
         },
       },
       end: {
-        characterAnimation: ['move', [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11], 3],
+        characterAnimation: () => [
+          'move',
+          [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11],
+          3,
+        ],
         character: () => {
           const char = game.add.sprite(0, -152, 'kid_running', 0, 1.05);
           char.anchor(0.5, 0.5);
           return char;
         },
-        building: () => game.add.image(600, 222, 'school', 1.05),
+        building: () =>
+          game.add
+            .image(
+              context.canvas.width - 620,
+              context.canvas.height - 20 - 15,
+              'school',
+              1.3
+            )
+            .anchor(0, 1),
       },
     },
   },
@@ -525,13 +540,31 @@ const gameList = [
         },
       },
       end: {
-        characterAnimation: ['move', [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11], 3],
+        characterAnimation: () => [
+          'move',
+          [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11],
+          3,
+        ],
         character: () => {
-          const char = game.add.sprite(0, 460, 'kid_running', 6, 1.05);
+          const char = game.add.sprite(
+            0,
+            context.canvas.height - 240,
+            'kid_running',
+            0,
+            1.05
+          );
           char.anchor(0.5, 0.5);
           return char;
         },
-        building: () => game.add.image(600, 222, 'school', 1.05),
+        building: () =>
+          game.add
+            .image(
+              context.canvas.width - 620,
+              context.canvas.height - 20 - 15,
+              'school',
+              1.3
+            )
+            .anchor(0, 1),
       },
     },
   },

src/js/globals/globals_debug.js

@@ -3,15 +3,15 @@ const isDebugMode = true;
 const debugState = {
   lang: { skip: true, lang: 'pt_BR' },
   name: { skip: true, name: 'Username' },
-  menu: { skip: true, id: 2 },
+  menu: { skip: true, id: 0 },
   customMenu: {
     skip: true,
     getData: () => {
-      return { mode: 'a', operation: 'plus', difficulty: 5, label: true };
+      return { mode: 'a', operation: 'minus', difficulty: 5, label: true };
     },
   },
   map: { skip: true },
-  end: { skip: false, stop: false },
+  end: { skip: true, stop: false },
 };
 
 const debugFunctions = {

src/js/globals/globals_functions.js

@@ -292,9 +292,9 @@ const renderBackground = (type) => {
   game.add.image(0, 0, 'bg_default', 2.2);
 
   // Add clouds
-  game.add.image(640, 100, 'cloud', 1.5);
-  game.add.image(1280, 80, 'cloud', 1.5);
-  game.add.image(300, 85, 'cloud', 1.2);
+  game.add.image(300, context.canvas.height / 2 - 50, 'cloud', 1.5);
+  game.add.image(700, context.canvas.height / 2 + 50 - 50, 'cloud', 1.5);
+  game.add.image(1280, context.canvas.height / 2 - 50 - 50, 'cloud', 1.5);
 
   // Add floor
   const floorSize = 150;
@@ -325,6 +325,19 @@ const renderBackground = (type) => {
       1.5
     );
   }
+
+  if (type === 'end') {
+    game.add.geom.rect(
+      0,
+      context.canvas.height - floorSize * 2 + 15,
+      150 * (context.canvas.width / floorSize),
+      150,
+      undefined,
+      0,
+      '#48d813',
+      1
+    );
+  }
 };
 
 const getFrameInfo = function () {

src/js/screens/end.js

@@ -7,109 +7,55 @@
  * @namespace
  */
 const endState = {
+  ui: undefined,
+  control: undefined,
+
+  character: undefined,
+  balloon: undefined,
+  basket: undefined,
+
   /**
    * Main code
    */
   create: function () {
-    self.preAnimate = false;
-    self.animate = true;
+    this.control = {
+      animate: true,
+      preAnimate: false,
+      waitUserAction: false,
+      endUpdate: false,
+      counter: 0,
+      direc: 1,
+    };
 
-    self.waitUserAction = false;
-    self.endUpdate = false;
+    this.ui = {
+      continue: {
+        button: undefined,
+        text: undefined,
+      },
+    };
 
-    renderBackground();
+    renderBackground('end');
 
-    // Progress bar
-    const y = 20;
-
-    for (let i = 0; i < 4; i++) {
-      game.add.image(
-        context.canvas.width - 300 + 37.5 * i,
-        y,
-        'progress_bar_tile'
-      );
-    }
-
-    game.add.geom.rect(
-      context.canvas.width - 300 + 1,
-      y + 1,
-      149,
-      34,
-      colors.blue,
-      3,
-      undefined,
-      1
-    );
-    game.add.text(
-      context.canvas.width - 300 + 160,
-      y + 33,
-      '100%',
-      textStyles.h2_
-    ).align = 'left';
-    game.add.text(
-      context.canvas.width - 300 - 10,
-      y + 33,
-      game.lang.difficulty + ' ' + gameDifficulty,
-      textStyles.h2_
-    ).align = 'right';
+    self.utils.renderProgressBar();
 
+    // Back trees
     game.add
-      .image(360 + 400, context.canvas.height - 100, 'tree_4', 1.05)
+      .image(-100, context.canvas.height - 200, 'tree_4', 1.05)
+      .anchor(0, 1);
+    game.add
+      .image(360 + 400 + 400, context.canvas.height - 200, 'tree_4', 1.05)
       .anchor(0, 1);
 
-    gameList[gameId].assets.end.building();
-
-    this.character = gameList[gameId].assets.end.character();
-    this.character.animation = gameList[gameId].assets.end.characterAnimation;
-
-    if (gameName === 'circleOne') {
-      this.preAnimate = true;
-      this.animate = false;
-
-      // Balloon
-      this.balloon = game.add.image(0, -260, 'balloon', 1.5);
-      this.balloon.anchor(0.5, 0.5);
-
-      this.basket = game.add.image(0, -150, 'balloon_basket', 1.5);
-      this.basket.anchor(0.5, 0.5);
-    }
-
-    if (this.animate) game.animation.play(this.character.animation[0]);
+    self.utils.renderCharacters();
+    if (this.control.animate) game.animation.play(this.character.animation[0]);
 
-    //tree
+    // Front tree
     game.add
-      .image(30 + 200, context.canvas.height - 20, 'tree_4', 1.275)
+      .image(30 + 200 + 100, context.canvas.height - 30, '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,
-      0,
-      colors.green,
-      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 main menu',
-      textStyles.btn
-    );
-    this.continueText.alpha = 0;
-
-    game.event.add('click', this.onInputDown);
-    game.event.add('mousemove', this.onInputOver);
+    game.event.add('click', this.events.onInputDown);
+    game.event.add('mousemove', this.events.onInputOver);
   },
 
   /**
@@ -118,42 +64,52 @@ const endState = {
   update: function () {
     if (isDebugMode && debugState.end.skip) {
       if (debugState.end.stop) {
-        self.animate = false;
+        self.control.animate = false;
       }
     }
 
+    self.control.counter++;
+
     // Balloon falling
-    if (self.preAnimate) {
-      if (self.character.y < 460) {
-        self.balloon.y += 2;
-        self.basket.y += 2;
-        self.character.y += 2;
-
-        self.balloon.x++;
-        self.basket.x++;
-        self.character.x++;
+    if (self.control.preAnimate) {
+      const speedY = 3,
+        speedX = 2;
+      if (self.basket.y < context.canvas.height - 240) {
+        self.balloon.y += speedY;
+        self.basket.y += speedY;
+        self.character.y += speedY;
+
+        self.balloon.x += speedX;
+        self.basket.x += speedX;
+        self.character.x += speedX;
       } else {
-        self.preAnimate = false;
-        self.animate = true;
+        self.control.preAnimate = false;
+        self.control.animate = true;
         game.animation.play(self.character.animation[0]);
       }
     }
 
+    if (gameName == 'circleOne') {
+      if (self.control.counter % 40 === 0) {
+        self.balloon.x += 5 * self.control.direc;
+        self.control.direc *= -1;
+      }
+    }
+
     // Character running
-    if (self.animate) {
-      if (self.character.x <= 700) {
-        self.character.x += 2;
+    if (self.control.animate) {
+      if (self.character.x <= 1550) {
+        self.character.x += 4;
       } else {
-        self.waitUserAction = true;
-        self.continueText.alpha = 1;
-        self.continueButton.alpha = 1;
+        self.control.animate = false;
+        game.animation.stop(self.character.animation[0]);
+        self.character.alpha = 0;
+        self.control.waitUserAction = true;
+        self.utils.renderEndUI();
       }
     }
 
-    if (self.endUpdate) {
-      self.animate = false;
-      game.animation.stop(self.character.animation[0]);
-
+    if (self.control.endLevel) {
       // FOR MOODLE
       if (!moodle) {
         completedLevels = 0;
@@ -167,50 +123,151 @@ const endState = {
     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();
-    }
+  utils: {
+    renderProgressBar: () => {
+      const x0 = 300;
+      const y0 = 20;
+
+      // Bar content
+      for (let i = 0; i < 4; i++) {
+        game.add.image(
+          context.canvas.width - x0 + 37.5 * i,
+          y0,
+          'progress_bar_tile'
+        );
+      }
+
+      // Bar wrapper
+      game.add.geom.rect(
+        context.canvas.width - x0 + 1,
+        y0 + 1,
+        149, //150, //149,
+        34, //35, //34,
+        colors.blue,
+        3,
+        undefined,
+        1
+      );
+
+      // percentage label
+      game.add.text(
+        context.canvas.width - x0 + 160,
+        y0 + 33,
+        '100%',
+        textStyles.h2_
+      ).align = 'left';
+
+      // Difficulty label
+      game.add.text(
+        context.canvas.width - x0 - 10,
+        y0 + 33,
+        game.lang.difficulty + ' ' + gameDifficulty,
+        textStyles.h2_
+      ).align = 'right';
+    },
+    renderCharacters: () => {
+      gameList[gameId].assets.end.building();
+
+      self.character = gameList[gameId].assets.end.character();
+      self.character.animation =
+        gameList[gameId].assets.end.characterAnimation();
+
+      if (gameName === 'circleOne') {
+        self.control.preAnimate = true;
+        self.control.animate = false;
+
+        // Balloon
+        self.balloon = game.add.image(0, -350, 'balloon', 1.5);
+        self.balloon.anchor(0.5, 0.5);
+
+        self.basket = game.add.image(0, -150, 'balloon_basket', 1.5);
+        self.basket.anchor(0.5, 0.5);
+
+        self.character.curFrame = 6;
+      }
+    },
+    renderEndUI: () => {
+      const btnY = context.canvas.height / 2;
+
+      // Continue Button
+      self.ui.continue.button = game.add.geom.rect(
+        context.canvas.width / 2,
+        btnY,
+        600,
+        100,
+        undefined,
+        0,
+        colors.green,
+        1
+      );
+      self.ui.continue.button.anchor(0.5, 0.5);
+
+      // Continue button text
+      self.ui.continue.text = game.add.text(
+        context.canvas.width / 2,
+        btnY + 16,
+        game.lang.back_to_menu,
+        textStyles.btn
+      );
+
+      // Title
+      const font = { ...textStyles.btnLg };
+      font.fill = colors.blue;
+      game.add.text(
+        context.canvas.width / 2,
+        btnY - 100,
+        game.lang.congratulations,
+        font
+      );
+    },
   },
 
-  /**
-   * Called by mouse move event
-   *
-   * @param {object} mouseEvent contains the mouse move coordinates
-   */
-  onInputOver: function (mouseEvent) {
-    console.log('moved');
+  events: {
+    /**
+     * Called by mouse click event
+     *
+     * @param {object} mouseEvent contains the mouse click coordinates
+     */
+    onInputDown: function (mouseEvent) {
+      const x = game.math.getMouse(mouseEvent).x;
+      const y = game.math.getMouse(mouseEvent).y;
 
-    const x = game.math.getMouse(mouseEvent).x;
-    const y = game.math.getMouse(mouseEvent).y;
-    let overIcon;
+      if (self.control.waitUserAction) {
+        if (game.math.isOverIcon(x, y, self.ui.continue.button)) {
+          self.control.endLevel = true;
+        }
+      }
+    },
 
-    if (game.math.isOverIcon(x, y, self.continueButton)) {
-      overIcon = true;
-      console.log('is over icon');
-    }
+    /**
+     * Called by mouse move event
+     *
+     * @param {object} mouseEvent contains the mouse move coordinates
+     */
+    onInputOver: function (mouseEvent) {
+      const x = game.math.getMouse(mouseEvent).x;
+      const y = game.math.getMouse(mouseEvent).y;
+      let overIcon;
 
-    // Update gui
-    if (overIcon) {
-      // If pointer is over icon
-      document.body.style.cursor = 'pointer';
-      self.continueButton.scale = self.continueButton.initialScale * 1.1;
-      self.continueText.style = textStyles.btnLg;
-    } else {
-      // If pointer is not over icon
-      self.continueButton.scale = self.continueButton.initialScale * 1;
-      document.body.style.cursor = 'auto';
-      self.continueText.style = textStyles.btn;
-    }
+      if (self.control.waitUserAction) {
+        if (game.math.isOverIcon(x, y, self.ui.continue.button)) {
+          overIcon = true;
+        }
+      }
+      // Update gui
+      if (overIcon) {
+        // If pointer is over icon
+        document.body.style.cursor = 'pointer';
+        self.ui.continue.button.scale =
+          self.ui.continue.button.initialScale * 1.1;
+        self.ui.continue.text.style = textStyles.btnLg;
+      } else {
+        // If pointer is not over icon
+        self.ui.continue.button.scale =
+          self.ui.continue.button.initialScale * 1;
+        document.body.style.cursor = 'auto';
+        self.ui.continue.text.style = textStyles.btn;
+      }
+    },
   },
 };