feature: insert game mode legend on custom menu

assets/lang/pt_BR

@@ -63,4 +63,10 @@ results=RESULTADOS
 student=Aluno
 submit=Envie sua tarefa abaixo
 professor=Professor
-scale=Balança
+scale=Balança
+s1_a_description=Selecione uma porção do solo
+s1_b_description=Selecione uma porção dos blocos
+s2_a_description=Maior numero de subdivisões no retângulo de cima
+s2_b_description=Maior numero de subdivisões no retângulo de baixo
+c1_a_description=Selecione a posição do balão
+c1_b_description=Selecione os arcos

js/globals/globals_control.js

@@ -170,6 +170,7 @@ const gameList = [
       customMenu: {
         gameModeBtn: ['mode_0', 'mode_1'],
         gameOperationBtn: ['operation_plus', 'operation_minus'],
+        gameModeDescription: ['s1_a_description', 's1_b_description'],
         auxiliarTitle: (x, y, offsetW, offsetH) => {
           game.add.text(
             x + 5 * offsetW,
@@ -312,6 +313,7 @@ const gameList = [
       },
       customMenu: {
         gameModeBtn: ['mode_2', 'mode_3'],
+        gameModeDescription: ['c1_a_description', 'c1_b_description'],
         gameOperationBtn: [
           'operation_plus',
           'operation_minus',
@@ -448,6 +450,7 @@ const gameList = [
       customMenu: {
         gameModeBtn: ['mode_4', 'mode_5'],
         gameOperationBtn: ['operation_equals'],
+        gameModeDescription: ['s2_a_description', 's2_b_description'],
         auxiliarTitle: (x, y, offsetW, offsetH) => {
           game.add.text(
             x + 5 * offsetW,

js/globals/globals_debug.js

@@ -1,9 +1,9 @@
-const isDebugMode = false;
+const isDebugMode = true;
 
 const debugState = {
   lang: { skip: true, lang: 'pt_BR' },
   name: { skip: true, name: 'Username' },
-  menu: { skip: false, id: 1, audioStatus: false },
+  menu: { skip: true, id: 2, audioStatus: false },
   customMenu: {
     skip: false,
     getData: () => {

js/menus/menu_custom.js

@@ -39,6 +39,13 @@ const customMenuState = {
         ...textStyles.h1_,
         fill: colors.green,
       });
+      // Subtitle : <game mode>
+      this.lbl_game = game.add.text(
+        context.canvas.width / 2,
+        170,
+        '...',
+        textStyles.h2_
+      );
 
       // Loads navigation icons
       navigation.add.left(['back'], 'menu');
@@ -213,6 +220,7 @@ const customMenuState = {
     if (overIcon) {
       // If pointer is over icon
       document.body.style.cursor = 'pointer';
+      self.showTitle(self.menuIcons[overIcon]);
       self.menuIcons.forEach((cur) => {
         if (cur.iconType == self.menuIcons[overIcon].iconType) {
           // If its in the same icon category
@@ -228,6 +236,7 @@ const customMenuState = {
       });
     } else {
       // If pointer is not over icon
+      self.clearTitle();
       if (self.enterText) self.enterText.style = textStyles.btn;
       self.menuIcons.forEach((cur) => {
         cur.scale = cur.initialScale;
@@ -311,7 +320,8 @@ const customMenuState = {
         1
       );
       icon.anchor(0.5, 0.5);
-
+      
+      icon.gameModeDescription = curGame.assets.customMenu.gameModeDescription[i];
       icon.gameMode = curGame.gameMode[i];
       icon.iconType = 'gameMode';
 
@@ -350,7 +360,7 @@ const customMenuState = {
 
       icon.gameOperation = curGame.gameOperation[i];
       icon.iconType = 'gameOperation';
-
+      
       if (gameList[gameId].gameOperation[i] == gameOperation) {
         icon.curFrame = 1;
       }
@@ -462,4 +472,20 @@ const customMenuState = {
 
     document.querySelector('.ifr-modal__infobox').innerHTML = content;
   },
+
+    /**
+   * Display the description the game mode on screen
+   *
+   * @param {object} icon icon for the game mode
+   */
+    showTitle: function (icon) {
+          self.lbl_game.name = game.lang[icon.gameModeDescription];
+    },
+  
+    /**
+     * Remove the description the game mode from screen
+     */
+    clearTitle: function () {
+      self.lbl_game.name = '';
+    },
 };