adjusting custom menu

index.html

@@ -10,96 +10,9 @@
   <meta name="description" content="Educational game for teaching fractions" />
   <meta name="keywords" content="ifractions, fraction, game, private data" />
   <link rel="shortcut icon" href="assets/img/scene/flag.png">
+  <link rel="stylesheet" href="./src/style/bootstrap/bootstrap.min.css">
+  <link rel="stylesheet" href="./src/style/IFractions.css">
   <title>iFractions</title>
-  <link rel="stylesheet" href="./src/style/bootstrap.min.css">
-
-  <style>
-    /* canvas */
-    #iFractions-canvas {
-      width: 100%;
-    }
-
-    /* Text box */
-    #textbox {
-      position: absolute;
-      margin-left: auto;
-      margin-right: auto;
-      top: 330px;
-      left: 0;
-      right: 0;
-      text-align: center;
-      visibility: hidden;
-    }
-
-    input[type=text] {
-      background-color: #fff;
-      padding: 15px 40px;
-      box-sizing: border-box;
-      border: 3px solid #ccc;
-      font-size: 24px;
-      font-family: Arial;
-      color: #000;
-      text-align: center;
-    }
-
-    input:focus {
-      outline: 3px solid #85accc;
-    }
-
-    /* The Modal (background) */
-    .modal {
-      /* Hidden by default */
-      display: none;
-      /* Stay in place */
-      position: fixed;
-      /* Sit on top */
-      z-index: 1;
-      /* Location of the box */
-      padding-top: 155px;
-      left: 0;
-      top: 0;
-      /* Full width */
-      width: 100%;
-      /* Full height */
-      height: 100%;
-      /* Enable scroll if needed */
-      overflow: auto;
-      /* Fallback color */
-      background-color: rgb(0, 0, 0);
-      /* Black w/ opacity */
-      background-color: rgba(0, 0, 0, 0.4);
-    }
-
-    /* Modal Content */
-    .modal-content {
-      background-color: #fefefe;
-      margin: auto;
-      padding: 20px;
-      border: 1px solid #888;
-      width: 50%;
-    }
-
-    .modal-content img {
-      display: block;
-      margin-left: auto;
-      margin-right: auto;
-    }
-
-    /* The Close Button */
-    .close {
-      color: #aaaaaa;
-      float: right;
-      font-size: 28px;
-      font-weight: bold;
-    }
-
-    .close:hover,
-    .close:focus {
-      color: #000;
-      text-decoration: none;
-      cursor: pointer;
-    }
-  </style>
 
 </head>
 
@@ -113,17 +26,16 @@
 
       <div class="panel-body">
 
-        <canvas id="iFractions-canvas"></canvas> <!-- iFractions game -->
+        <canvas class="ifr-canvas"></canvas>
 
-        <div id="textbox" onsubmit="return false">
-          <input type="text" id="textbox-content" value="" size="13" maxlength="36"> <!-- Textbox to get player name -->
+        <div class="ifr-input__container">
+          <input class="ifr-input" type="text" value="" size="13" maxlength="36">
         </div>
 
-        <div id="my-modal" class="modal">
-          <!-- Modal black background-->
-          <div class="modal-content">
-            <span class="close">&times;</span> <!-- Modal close button -->
-            <div id='infobox-content'></div> <!-- Modal box -->
+        <div class="ifr-modal">
+          <div class="ifr-modal__content">
+            <span class="ifr-modal__closeButton">&times;</span>
+            <div class='ifr-modal__infobox'></div>
           </div>
         </div>
 
@@ -154,7 +66,7 @@
       const defaultWidth = 1920; // Default width for the Canvas
       const defaultHeight = 1080; // Default height for the Canvas
 
-      const context = document.getElementById("iFractions-canvas").getContext("2d");
+      const context = document.querySelector('.ifr-canvas').getContext("2d");
       context.canvas.width = defaultWidth;
       context.canvas.height = defaultHeight;
 

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, 73, '', textStyles.h4_brown);
+    this.left_text = game.add.text(xLeft, 110, '', textStyles.p_brown);
     this.left_text.align = 'left';
 
-    this.right_text = game.add.text(xRight + 50, 73, '', textStyles.h4_brown);
+    this.right_text = game.add.text(xRight + 50, 110, '', textStyles.p_brown);
     this.right_text.align = 'right';
 
     // Left icons
@@ -308,7 +308,17 @@ const gameFrame = function () {
     for (let i = 0, y1 = y; i < 4; i++) {
       x1 = x;
       for (let j = 0; j < 7; j++) {
-        game.add.geom.rect(x1, y1, 20, 20, undefined, 0, colors.red, 1);
+        let sqr = game.add.geom.rect(
+          x1,
+          y1,
+          20,
+          20,
+          undefined,
+          0,
+          colors.red,
+          1
+        );
+        sqr.anchor(0.5, 0.5);
         x1 += offsetW;
       }
       y1 += offsetH;

src/js/globals/globals_tokens.js

@@ -106,11 +106,6 @@ const fontSizes = {
   h3: '38px',
   h4: '36px',
   p: '30px',
-  h1_old: '32px',
-  h2_old: '26px',
-  h3_old: '22px',
-  h4_old: '20px',
-  p_old: '14px',
 };
 /**
  * Preset text styles for game text.<br>
@@ -128,6 +123,21 @@ const textStyles = {
     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',
@@ -155,6 +165,11 @@ const textStyles = {
     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,
@@ -176,22 +191,47 @@ const textStyles = {
     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,
     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,
     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,
+    align: 'center',
+  },
   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,
+    align: 'center',
+  },
   h4_blueDark: {
     font: fontSizes.h4 + ' Arial,sans-serif',
     fill: colors.blueDark,

src/js/menus/menu_custom.js

@@ -23,7 +23,6 @@ const customMenuState = {
     // FOR MOODLE
     if (moodle && iLMparameters.iLM_PARAM_SendAnswer == 'false') {
       // Student role
-
       game.state.start('map');
     } else {
       renderBackground();
@@ -31,9 +30,9 @@ const customMenuState = {
       // Overtitle : Selected game
       game.add.text(
         context.canvas.width / 2,
-        60,
+        50,
         game.lang.game.toUpperCase() + ': ' + menuState.menuIcons,
-        textStyles.h3_brown
+        textStyles.p_brown
       );
       // Title : Customize the selected game
       game.add.text(
@@ -46,13 +45,9 @@ const customMenuState = {
       // Loads navigation icons
       navigationIcons.add(true, false, false, true, true, 'menu', false);
 
-      let infoIcon;
-      const iconScale = 1;
       const curGame = info.all[gameType];
-      this.menuIcons = [];
 
-      let x = gameFrame().x;
-      let y = gameFrame().y;
+      this.menuIcons = [];
 
       let offsetW = game.math.getOffset(gameFrame().width, 5);
       let offsetH = game.math.getOffset(
@@ -60,465 +55,16 @@ const customMenuState = {
         curGame.gameMode.length
       );
 
-      const line_thickness = 5;
-
-      // Label 'Game Modes'
-      game.add.text(x + offsetW, y, game.lang.game_modes, textStyles.h2_blue);
-
-      infoIcon = game.add.image(x + 2 * offsetW - 30, y - 20, 'info', 0.9, 1);
-      infoIcon.anchor(0.5, 0.5);
-      infoIcon.iconType = 'infoIcon';
-      infoIcon.id = 'gameMode';
-      this.menuIcons.push(infoIcon);
-
-      // Label 'Operations'
-      game.add.text(
-        x + 3 * offsetW,
-        y,
-        game.lang.operations,
-        textStyles.h2_blue
-      );
-
-      infoIcon = game.add.image(x + 4 * offsetW - 30, y - 20, 'info', 0.9, 1);
-      infoIcon.anchor(0.5, 0.5);
-      infoIcon.iconType = 'infoIcon';
-      infoIcon.id = 'gameOperation';
-      this.menuIcons.push(infoIcon);
-
-      // Label 'Difficulties'
-      game.add.text(
-        x + 5 * offsetW,
-        y,
-        game.lang.difficulties,
-        textStyles.h2_blue
-      );
-
-      infoIcon = game.add.image(x + 6 * offsetW - 30, y - 20, 'info', 0.9, 1);
-      infoIcon.anchor(0.5, 0.5);
-      infoIcon.iconType = 'infoIcon';
-      infoIcon.id = 'gameDifficulty';
-      this.menuIcons.push(infoIcon);
-
-      // Horizontal line
-      /*game.add.geom
-        .rect(
-          x - 25,
-          y + 10,
-          gameFrame().width,
-          line_thickness,
-          undefined,
-          0,
-          colors.blueMenuLine
-        )
-        .anchor(0, 0.5);*/
-      // Vertical lines
-      /*game.add.geom
-        .rect(
-          x + 2 * offsetW,
-          y - 25,
-          line_thickness,
-          gameFrame().height,
-          undefined,
-          0,
-          colors.blueMenuLine
-        )
-        .anchor(0.5, 0);
-      game.add.geom
-        .rect(
-          x + 4 * offsetW,
-          y - 25,
-          line_thickness,
-          gameFrame().height,
-          undefined,
-          0,
-          colors.blueMenuLine
-        )
-        .anchor(0.5, 0);*/
-
-      // --------------------------- TURN ON/OFF FRACTION LABELS / RECTANGLE GUIDE
-
-      // Horizontal line
-      /*game.add.geom
-        .rect(
-          x + 4 * offsetW,
-          y + offsetH,
-          gameFrame().width / 3 - 4 * line_thickness,
-          line_thickness,
-          undefined,
-          0,
-          colors.blueMenuLine
-        )
-        .anchor(0, 0.5);
-
-      infoIcon = game.add.image(
-        x + 6 * offsetW - 30,
-        y + offsetH - 20,
-        'info',
-        0.0,
-        1
-      );
-      infoIcon.anchor(0.5, 0.5);
-      infoIcon.iconType = 'infoIcon';
-      infoIcon.id = 'gameMisc';
-      this.menuIcons.push(infoIcon);*/
-
-      // Label 'Show Fractions / Auxiliar rectangles'
-      game.add.text(
-        x + 5 * offsetW,
-        y + offsetH + 50,
-        game.lang.show,
-        textStyles.h4_blue
-      );
-
-      let auxText;
-      if (gameType == 'squareTwo') {
-        auxText = game.lang.aux_rectangle;
-        game.add.text(
-          x + 5 * offsetW + 10,
-          y + offsetH + 80,
-          auxText,
-          textStyles.h4_blue
-        );
-      } else {
-        auxText = game.lang.title;
-        game.add.text(
-          x + 5 * offsetW,
-          y + offsetH + 80,
-          auxText,
-          textStyles.h2_blue
-        );
-      }
-
-      // Selection box
-      y += 40;
-      const frame = fractionLabel ? 1 : 0;
-
-      const selectionBox = game.add.sprite(
-        x + 5 * offsetW,
-        y + offsetH + 90,
-        'select',
-        frame,
-        0.18
-      );
-      selectionBox.anchor(0.5, 0.5);
-      selectionBox.iconType = 'selectionBox';
-      this.menuIcons.push(selectionBox);
-
-      // --------------------------- GAME MODE ICONS
-
-      x = gameFrame().x + offsetW;
-      y = gameFrame().y + offsetH / 2;
-
-      for (let i = 0; i < curGame.gameModeUrl.length; i++, y += offsetH) {
-        const icon = game.add.sprite(
-          x,
-          y,
-          curGame.gameModeUrl[i],
-          0,
-          iconScale,
-          1
-        );
-        icon.anchor(0.5, 0.5);
-
-        icon.gameMode = curGame.gameMode[i];
-        icon.iconType = 'gameMode';
-        if (i == 0) {
-          gameMode = icon.gameMode;
-          icon.curFrame = 1;
-        }
-
-        this.menuIcons.push(icon);
-      }
-
-      // --------------------------- GAME OPERATION ICONS
-
-      x += 2 * offsetW;
-      y = gameFrame().y + offsetH / 2;
-      offsetH = game.math.getOffset(
-        gameFrame().height,
-        curGame.gameOperation.length
-      );
-
-      let icon;
-
-      // Placing math operation icons
-      for (let i = 0; i < curGame.gameOperation.length; i++, y += offsetH) {
-        icon = game.add.sprite(
-          x,
-          y,
-          curGame.gameOperationUrl[i],
-          0,
-          iconScale,
-          1
-        );
-        icon.anchor(0.5, 0.5);
-
-        icon.gameOperation = curGame.gameOperation[i];
-        icon.iconType = 'gameOperation';
-
-        if (i == 0) {
-          gameOperation = icon.gameOperation;
-          icon.curFrame = 1;
-        }
-
-        this.menuIcons.push(icon);
-      }
-
-      // --------------------------- DIFFICULTY ICONS
-      x = gameFrame().x - 50 + 5 * offsetW;
-
-      offsetH = game.math.getOffset(
-        gameFrame().height,
-        curGame.gameMode.length
-      );
-      y = gameFrame().y + offsetH / 3;
-
-      if (gameType != 'squareOne') x -= 40;
-
-      for (let i = 0; i < curGame.gameDifficulty; i++) {
-        // Parameters
-        const curX = x + (50 + 10) * i;
-
-        // Difficulty menuIcons
-        const icon = game.add.geom.rect(
-          curX,
-          y - 5,
-          50,
-          50,
-          undefined,
-          0,
-          colors.gray,
-          1
-        );
-        icon.anchor(0.5, 0.5);
-        icon.difficulty = i + 1;
-        icon.iconType = 'difficulty';
-
-        if (i == 0) {
-          gameDifficulty = icon.difficulty;
-          icon.fillColor = colors.blue;
-        }
-        this.menuIcons.push(icon);
-
-        // Difficulty numbers
-        game.add.text(curX, y + 7, i + 1, textStyles.h4_white);
-      }
-
-      // --------------------------- ENTER ICON
-
-      // FOR MOODLE
-      if (!moodle) {
-        x = context.canvas.width - 150;
-        y = context.canvas.height - 150;
-
-        const enterIcon = game.add.image(x, y, 'bush', 1.5);
-        enterIcon.anchor(0.5, 0.5);
-        enterIcon.iconType = 'enter';
-
-        this.menuIcons.push(enterIcon);
-
-        this.enterText = game.add.text(
-          x,
-          y,
-          game.lang.continue,
-          textStyles.h4_white
-        );
-      }
-
-      // --------------------------- INFO BOX
-
-      this.infoBox = document.getElementById('my-modal');
-
-      // When the user clicks on the 'x', close the modal
-      document.getElementsByClassName('close')[0].onclick = function () {
-        self.infoBox.style.display = 'none';
-      };
-
-      // When the user clicks anywhere outside of the modal, close it
-      window.onclick = function (event) {
-        if (event.target == self.infoBox) {
-          self.infoBox.style.display = 'none';
-        }
-      };
-
-      this.infoBoxContent = {
-        gameMode: {
-          squareOne: {
-            title: '<b>' + game.lang.game_modes + '</b>',
-            body: game.lang.infoBox_mode,
-            img:
-              '<table> <tr> <td> <b>A)</b> ' +
-              game.lang.infoBox_mode_s1_A +
-              ' </td> <td> <b>B)</b> ' +
-              game.lang.infoBox_mode_s1_B +
-              ' </td> </tr> <tr> <td> <img width=100% src="' +
-              game.image['s1-A-h'].src +
-              '"> ' +
-              ' </td> <td> <img width=100% src="' +
-              game.image['s1-B-h'].src +
-              '"> </td> </tr> <table>',
-          },
-          circleOne: {
-            title: '<b>' + game.lang.game_modes + '</b>',
-            body: game.lang.infoBox_mode,
-            img:
-              '<table> <tr style="border-bottom: 5px solid white"> <td width=70%> <img width=100% src="' +
-              game.image['c1-A-h'].src +
-              '">' +
-              ' </td> <td> &nbsp; <b>A)</b> ' +
-              game.lang.infoBox_mode_c1_A +
-              ' </td> </tr> </tr> <td> <img width=100% src="' +
-              game.image['c1-B-h'].src +
-              '"> ' +
-              ' </td> <td> &nbsp; <b>B)</b> ' +
-              game.lang.infoBox_mode_c1_B +
-              '</td> </tr> <table>',
-          },
-          squareTwo: {
-            title: '<b>' + game.lang.game_modes + '</b>',
-            body: game.lang.infoBox_mode,
-            img:
-              '<table> <tr> <td> <b>A)</b> ' +
-              game.lang.infoBox_mode_s2_A +
-              ' </td> <td> <b>B)</b> ' +
-              game.lang.infoBox_mode_s2_B +
-              ' </td> </tr> <tr> <td> <img width=98% src="' +
-              game.image['s2-A-h'].src +
-              '"> ' +
-              ' </td> <td> <img width=98% src="' +
-              game.image['s2-B-h'].src +
-              '"> </td> </tr> <table>',
-          },
-        },
-
-        gameOperation: {
-          title: '<b>' + game.lang.operation_math + '</b>',
-          body: game.lang.infoBox_oper,
-          img:
-            '<table class="table">' +
-            '<tr>' +
-            '<td> <img width=50 src="' +
-            game.image['operation_plus'].src +
-            '"> </td>' +
-            '<td> <img width=50 src="' +
-            game.image['operation_mixed'].src +
-            '"> </td>' +
-            '<td> <img width=50 src="' +
-            game.image['operation_minus'].src +
-            '"> </td>' +
-            '<td> <img width=50 src="' +
-            game.image['operation_equals'].src +
-            '"> </td>' +
-            '</tr> <tr>' +
-            '<td class="text-center">' +
-            game.lang.plus +
-            '</td>' +
-            '<td class="text-center">' +
-            game.lang.mixed +
-            '</td>' +
-            '<td class="text-center">' +
-            game.lang.minus +
-            '</td>' +
-            '<td class="text-center">' +
-            game.lang.equals +
-            '</td>' +
-            '</tr>' +
-            '</table>',
-        },
-
-        gameDifficulty: {
-          squareOne: {
-            title: '<b>' + game.lang.difficulties + '</b>',
-            body: game.lang.infoBox_diff + ' ' + game.lang.infoBox_diff_obs,
-            img:
-              '<table> <tr> <td> <b>' +
-              game.lang.difficulty +
-              ':</b> 1' +
-              ' </td> <td> <b>' +
-              game.lang.difficulty +
-              ':</b> 3' +
-              ' </td> </tr> <tr> <td> <img width=100% src="' +
-              game.image['s1-diff-1'].src +
-              '"> ' +
-              ' </td> <td style="border-left: 4px solid white"> <img width=100% src="' +
-              game.image['s1-diff-3'].src +
-              '"> </td> </tr> </table> <br>' +
-              game.lang.infoBox_diff_aux +
-              '<center> <img width=50% src="' +
-              game.image['map-s1'].src +
-              '"> </center>',
-          },
-          circleOne: {
-            title: '<b>' + game.lang.difficulties + '</b>',
-            body: game.lang.infoBox_diff + ' ' + game.lang.infoBox_diff_obs,
-            img:
-              '<table> <tr> <td style="border-right: 4px solid white"> <b>' +
-              game.lang.difficulty +
-              ':</b> 1' +
-              ' </td> <td> <b>' +
-              game.lang.difficulty +
-              ':</b> 5' +
-              ' </td> </tr> <tr> <td> <img width=100% src="' +
-              game.image['c1-diff-1'].src +
-              '"> ' +
-              ' </td> <td style="border-left: 4px solid white"> <img width=100% src="' +
-              game.image['c1-diff-5'].src +
-              '"> </td> </tr> </table> <center> <br>' +
-              game.lang.infoBox_diff_aux +
-              '<center> <img width=50% src="' +
-              game.image['map-c1s2'].src +
-              '"> </center>',
-          },
-          squareTwo: {
-            title: '<b>' + game.lang.difficulties + '</b>',
-            body: game.lang.infoBox_diff,
-            img:
-              '<table> <tr> <td> <b>' +
-              game.lang.difficulty +
-              ':</b> 1' +
-              ' </td> <td> <b>' +
-              game.lang.difficulty +
-              ':</b> 5' +
-              ' </td> </tr> <tr> <td> <img width=100% src="' +
-              game.image['s2-diff-1'].src +
-              '"> ' +
-              ' </td> <td style="border-left: 4px solid white"> <img width=100% src="' +
-              game.image['s2-diff-5'].src +
-              '"> </td> </tr> </table> <br>' +
-              game.lang.infoBox_diff_aux +
-              '<center> <img width=50% src="' +
-              game.image['map-c1s2'].src +
-              '"> </center>',
-          },
-        },
+      let x = gameFrame().x;
+      let y = gameFrame().y;
 
-        gameMisc: {
-          squareOne: {
-            title: '<b>' + game.lang.show + ' ' + auxText + '</b>',
-            body: game.lang.infoBox_misc_label,
-            img:
-              '<img class="mx-auto" width=80% src="' +
-              game.image['s1-label'].src +
-              '">',
-          },
-          circleOne: {
-            title: '<b>' + game.lang.show + ' ' + auxText + '</b>',
-            body: game.lang.infoBox_misc_label,
-            img:
-              '<img class="mx-auto" width=60% src="' +
-              game.image['c1-label'].src +
-              '">',
-          },
-          squareTwo: {
-            title: '<b>' + game.lang.show + ' ' + auxText + '</b>',
-            body: game.lang.infoBox_misc_rect,
-            img:
-              '<img class="mx-auto" width=100% src="' +
-              game.image['s2-label'].src +
-              '">',
-          },
-        },
-      };
+      const auxText = this.renderSectionTitles(x, y, offsetW, offsetH);
+      this.renderCheckBox(x, y, offsetW, offsetH);
+      this.renderModeSection(x, y, offsetW, offsetH, curGame);
+      this.renderOperationSection(x, y, offsetW, offsetH, curGame);
+      this.renderDifficultySection(x, y, offsetW, offsetH, curGame);
+      this.renderEnterSection(x, y);
+      this.renderInfoBox(auxText);
 
       // ------------- EVENTS
 
@@ -526,34 +72,13 @@ const customMenuState = {
       game.event.add('mousemove', this.onInputOver);
 
       console.log('DEBUG');
+      gameFrame().rect();
+      gameFrame().point(offsetW, offsetH);
       //self.load(this.menuIcons[11]);
       //console.log(this.menuIcons);
     }
   },
 
-  /**
-   * Displays game menu information boxes.
-   */
-  showInfoBox: function (icon) {
-    self.infoBox.style.display = 'block';
-
-    const element =
-      icon.id == 'gameOperation'
-        ? self.infoBoxContent[icon.id]
-        : self.infoBoxContent[icon.id][gameType];
-
-    let msg =
-      '<h3>' +
-      element.title +
-      '</h3>' +
-      '<p align=justify>' +
-      element.body +
-      '</p>' +
-      element.img;
-
-    document.getElementById('infobox-content').innerHTML = msg;
-  },
-
   /**
    * Saves information selected by the player
    *
@@ -701,4 +226,412 @@ const customMenuState = {
 
     game.render.all();
   },
+
+  renderSectionTitles: function (x, y, offsetW, offsetH) {
+    let infoIcon;
+
+    // Label 'Game Modes'
+    game.add.text(x + offsetW, y, game.lang.game_modes, textStyles.h2_blue);
+
+    infoIcon = game.add.image(x + 2 * offsetW - 30, y - 20, 'info', 0.9, 1);
+    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);
+
+    infoIcon = game.add.image(x + 4 * offsetW - 30, y - 20, 'info', 0.9, 1);
+    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
+    );
+
+    infoIcon = game.add.image(x + 6 * offsetW - 30, y - 20, 'info', 0.9, 1);
+    infoIcon.anchor(0.5, 0.5);
+    infoIcon.iconType = 'infoIcon';
+    infoIcon.id = 'gameDifficulty';
+    self.menuIcons.push(infoIcon);
+
+    // Label 'Show Fractions / Auxiliar rectangles'
+    game.add.text(
+      x + 5 * offsetW,
+      y + offsetH + 50,
+      game.lang.show,
+      textStyles.h4_blue
+    );
+
+    let auxText;
+
+    if (gameType == 'squareTwo') {
+      auxText = game.lang.aux_rectangle;
+      game.add.text(
+        x + 5 * offsetW + 10,
+        y + offsetH + 80,
+        auxText,
+        textStyles.h4_blue
+      );
+    } else {
+      auxText = game.lang.title;
+      game.add.text(
+        x + 5 * offsetW,
+        y + offsetH + 80,
+        auxText,
+        textStyles.h2_blue
+      );
+    }
+
+    return auxText;
+  },
+
+  renderCheckBox: function (x, y, offsetW, offsetH) {
+    y += 40;
+    const frame = fractionLabel ? 1 : 0;
+
+    const selectionBox = game.add.sprite(
+      x + 5 * offsetW,
+      y + offsetH + 90,
+      'select',
+      frame,
+      0.18
+    );
+    selectionBox.anchor(0.5, 0.5);
+    selectionBox.iconType = 'selectionBox';
+    self.menuIcons.push(selectionBox);
+  },
+
+  renderModeSection: function (x, y, offsetW, offsetH, curGame) {
+    x = gameFrame().x + offsetW;
+    y = gameFrame().y + offsetH / 2;
+
+    for (let i = 0; i < curGame.gameModeUrl.length; i++, y += offsetH) {
+      const icon = game.add.sprite(x, y, curGame.gameModeUrl[i], 0, 1, 1);
+      icon.anchor(0.5, 0.5);
+
+      icon.gameMode = curGame.gameMode[i];
+      icon.iconType = 'gameMode';
+      if (i == 0) {
+        gameMode = icon.gameMode;
+        icon.curFrame = 1;
+      }
+
+      self.menuIcons.push(icon);
+    }
+  },
+
+  renderOperationSection: function (x, y, offsetW, offsetH, curGame) {
+    x += 3 * offsetW;
+    y = gameFrame().y + offsetH / 2;
+
+    offsetH = game.math.getOffset(
+      gameFrame().height,
+      curGame.gameOperation.length - 1
+    );
+
+    let icon;
+
+    // Placing math operation icons
+    for (let i = 0; i < curGame.gameOperation.length; i++, y += offsetH) {
+      icon = game.add.sprite(x, y, curGame.gameOperationUrl[i], 0, 1, 1);
+      icon.anchor(0.5, 0.5);
+
+      icon.gameOperation = curGame.gameOperation[i];
+      icon.iconType = 'gameOperation';
+
+      if (i == 0) {
+        gameOperation = icon.gameOperation;
+        icon.curFrame = 1;
+      }
+
+      self.menuIcons.push(icon);
+    }
+  },
+
+  renderDifficultySection: function (x, y, offsetW, offsetH, curGame) {
+    x = gameFrame().x - 50 + 5 * offsetW;
+
+    offsetH = game.math.getOffset(gameFrame().height, curGame.gameMode.length);
+    y = gameFrame().y + offsetH / 3;
+
+    if (gameType != 'squareOne') x -= 40;
+
+    for (let i = 0; i < curGame.gameDifficulty; i++) {
+      // Parameters
+      const curX = x + (50 + 10) * i;
+
+      // Difficulty menuIcons
+      const icon = game.add.geom.rect(
+        curX,
+        y - 5,
+        50,
+        50,
+        undefined,
+        0,
+        colors.gray,
+        1
+      );
+      icon.anchor(0.5, 0.5);
+      icon.difficulty = i + 1;
+      icon.iconType = 'difficulty';
+
+      if (i == 0) {
+        gameDifficulty = icon.difficulty;
+        icon.fillColor = colors.blue;
+      }
+      self.menuIcons.push(icon);
+
+      // Difficulty numbers
+      game.add.text(curX, y + 7, i + 1, textStyles.h4_white);
+    }
+  },
+
+  renderEnterSection: function (x, y) {
+    // FOR MOODLE
+    if (!moodle) {
+      x = context.canvas.width - 150;
+      y = context.canvas.height - 180;
+
+      const enterIcon = game.add.image(x, y, 'bush', 1.7);
+      enterIcon.anchor(0.5, 0.5);
+      enterIcon.iconType = 'enter';
+
+      self.menuIcons.push(enterIcon);
+
+      self.enterText = game.add.text(
+        x,
+        y,
+        game.lang.continue,
+        textStyles.h4_white
+      );
+    }
+  },
+
+  renderInfoBox: function (auxText) {
+    // --------------------------- INFO BOX
+
+    self.infoBox = document.querySelector('.ifr-modal');
+
+    // When the user clicks on the 'x', close the modal
+    document.querySelector('.ifr-modal__closeButton').onclick = function () {
+      self.infoBox.style.display = 'none';
+    };
+
+    // When the user clicks anywhere outside of the modal, close it
+    window.onclick = function (event) {
+      if (event.target == self.infoBox) {
+        self.infoBox.style.display = 'none';
+      }
+    };
+
+    self.infoBoxContent = {
+      gameMode: {
+        squareOne: {
+          title: '<b>' + game.lang.game_modes + '</b>',
+          body: game.lang.infoBox_mode,
+          img:
+            '<table> <tr> <td> <b>A)</b> ' +
+            game.lang.infoBox_mode_s1_A +
+            ' </td> <td> <b>B)</b> ' +
+            game.lang.infoBox_mode_s1_B +
+            ' </td> </tr> <tr> <td> <img width=100% src="' +
+            game.image['s1-A-h'].src +
+            '"> ' +
+            ' </td> <td> <img width=100% src="' +
+            game.image['s1-B-h'].src +
+            '"> </td> </tr> <table>',
+        },
+        circleOne: {
+          title: '<b>' + game.lang.game_modes + '</b>',
+          body: game.lang.infoBox_mode,
+          img:
+            '<table> <tr style="border-bottom: 5px solid white"> <td width=70%> <img width=100% src="' +
+            game.image['c1-A-h'].src +
+            '">' +
+            ' </td> <td> &nbsp; <b>A)</b> ' +
+            game.lang.infoBox_mode_c1_A +
+            ' </td> </tr> </tr> <td> <img width=100% src="' +
+            game.image['c1-B-h'].src +
+            '"> ' +
+            ' </td> <td> &nbsp; <b>B)</b> ' +
+            game.lang.infoBox_mode_c1_B +
+            '</td> </tr> <table>',
+        },
+        squareTwo: {
+          title: '<b>' + game.lang.game_modes + '</b>',
+          body: game.lang.infoBox_mode,
+          img:
+            '<table> <tr> <td> <b>A)</b> ' +
+            game.lang.infoBox_mode_s2_A +
+            ' </td> <td> <b>B)</b> ' +
+            game.lang.infoBox_mode_s2_B +
+            ' </td> </tr> <tr> <td> <img width=98% src="' +
+            game.image['s2-A-h'].src +
+            '"> ' +
+            ' </td> <td> <img width=98% src="' +
+            game.image['s2-B-h'].src +
+            '"> </td> </tr> <table>',
+        },
+      },
+
+      gameOperation: {
+        title: '<b>' + game.lang.operation_math + '</b>',
+        body: game.lang.infoBox_oper,
+        img:
+          '<table class="table">' +
+          '<tr>' +
+          '<td> <img width=50 src="' +
+          game.image['operation_plus'].src +
+          '"> </td>' +
+          '<td> <img width=50 src="' +
+          game.image['operation_mixed'].src +
+          '"> </td>' +
+          '<td> <img width=50 src="' +
+          game.image['operation_minus'].src +
+          '"> </td>' +
+          '<td> <img width=50 src="' +
+          game.image['operation_equals'].src +
+          '"> </td>' +
+          '</tr> <tr>' +
+          '<td class="text-center">' +
+          game.lang.plus +
+          '</td>' +
+          '<td class="text-center">' +
+          game.lang.mixed +
+          '</td>' +
+          '<td class="text-center">' +
+          game.lang.minus +
+          '</td>' +
+          '<td class="text-center">' +
+          game.lang.equals +
+          '</td>' +
+          '</tr>' +
+          '</table>',
+      },
+
+      gameDifficulty: {
+        squareOne: {
+          title: '<b>' + game.lang.difficulties + '</b>',
+          body: game.lang.infoBox_diff + ' ' + game.lang.infoBox_diff_obs,
+          img:
+            '<table> <tr> <td> <b>' +
+            game.lang.difficulty +
+            ':</b> 1' +
+            ' </td> <td> <b>' +
+            game.lang.difficulty +
+            ':</b> 3' +
+            ' </td> </tr> <tr> <td> <img width=100% src="' +
+            game.image['s1-diff-1'].src +
+            '"> ' +
+            ' </td> <td style="border-left: 4px solid white"> <img width=100% src="' +
+            game.image['s1-diff-3'].src +
+            '"> </td> </tr> </table> <br>' +
+            game.lang.infoBox_diff_aux +
+            '<center> <img width=50% src="' +
+            game.image['map-s1'].src +
+            '"> </center>',
+        },
+        circleOne: {
+          title: '<b>' + game.lang.difficulties + '</b>',
+          body: game.lang.infoBox_diff + ' ' + game.lang.infoBox_diff_obs,
+          img:
+            '<table> <tr> <td style="border-right: 4px solid white"> <b>' +
+            game.lang.difficulty +
+            ':</b> 1' +
+            ' </td> <td> <b>' +
+            game.lang.difficulty +
+            ':</b> 5' +
+            ' </td> </tr> <tr> <td> <img width=100% src="' +
+            game.image['c1-diff-1'].src +
+            '"> ' +
+            ' </td> <td style="border-left: 4px solid white"> <img width=100% src="' +
+            game.image['c1-diff-5'].src +
+            '"> </td> </tr> </table> <center> <br>' +
+            game.lang.infoBox_diff_aux +
+            '<center> <img width=50% src="' +
+            game.image['map-c1s2'].src +
+            '"> </center>',
+        },
+        squareTwo: {
+          title: '<b>' + game.lang.difficulties + '</b>',
+          body: game.lang.infoBox_diff,
+          img:
+            '<table> <tr> <td> <b>' +
+            game.lang.difficulty +
+            ':</b> 1' +
+            ' </td> <td> <b>' +
+            game.lang.difficulty +
+            ':</b> 5' +
+            ' </td> </tr> <tr> <td> <img width=100% src="' +
+            game.image['s2-diff-1'].src +
+            '"> ' +
+            ' </td> <td style="border-left: 4px solid white"> <img width=100% src="' +
+            game.image['s2-diff-5'].src +
+            '"> </td> </tr> </table> <br>' +
+            game.lang.infoBox_diff_aux +
+            '<center> <img width=50% src="' +
+            game.image['map-c1s2'].src +
+            '"> </center>',
+        },
+      },
+
+      gameMisc: {
+        squareOne: {
+          title: '<b>' + game.lang.show + ' ' + auxText + '</b>',
+          body: game.lang.infoBox_misc_label,
+          img:
+            '<img class="mx-auto" width=80% src="' +
+            game.image['s1-label'].src +
+            '">',
+        },
+        circleOne: {
+          title: '<b>' + game.lang.show + ' ' + auxText + '</b>',
+          body: game.lang.infoBox_misc_label,
+          img:
+            '<img class="mx-auto" width=60% src="' +
+            game.image['c1-label'].src +
+            '">',
+        },
+        squareTwo: {
+          title: '<b>' + game.lang.show + ' ' + auxText + '</b>',
+          body: game.lang.infoBox_misc_rect,
+          img:
+            '<img class="mx-auto" width=100% src="' +
+            game.image['s2-label'].src +
+            '">',
+        },
+      },
+    };
+  },
+
+  /**
+   * Displays game menu information boxes.
+   */
+  showInfoBox: function (icon) {
+    self.infoBox.style.display = 'block';
+
+    const element =
+      icon.id == 'gameOperation'
+        ? self.infoBoxContent[icon.id]
+        : self.infoBoxContent[icon.id][gameType];
+
+    let msg =
+      '<h3>' +
+      element.title +
+      '</h3>' +
+      '<p align=justify>' +
+      element.body +
+      '</p>' +
+      element.img;
+
+    document.querySelector('.ifr-modal__infobox').innerHTML = msg;
+  },
 };

src/js/menus/menu_main.js

@@ -29,7 +29,7 @@ const menuState = {
         context.canvas.width / 2,
         60,
         game.lang.welcome + ', ' + playerName + '!',
-        textStyles.h2_brown
+        textStyles.h3_brown
       );
       // Title : Select a game
       game.add.text(
@@ -92,10 +92,10 @@ const menuState = {
 
       // --------------------------- INFO BOX
 
-      this.infoBox = document.getElementById('my-modal');
+      this.infoBox = document.querySelector('.ifr-modal');
 
       // When the user clicks on the 'x', close the modal
-      document.getElementsByClassName('close')[0].onclick = function () {
+      document.querySelector('.ifr-modal__closeButton').onclick = function () {
         self.infoBox.style.display = 'none';
       };
 
@@ -153,8 +153,11 @@ const menuState = {
       game.event.add('click', this.onInputDown);
       game.event.add('mousemove', this.onInputOver);
 
-      //console.log('DEBUG');
-      //this.load(self.menuIcons[0]);
+      console.log('DEBUG');
+      const s1 = 0;
+      const c1 = 2;
+      const s2 = 4;
+      this.load(self.menuIcons[c1]);
     }
   },
 
@@ -173,7 +176,7 @@ const menuState = {
       '</p>' +
       self.infoBoxContent[icon.id].img;
 
-    document.getElementById('infobox-content').innerHTML = msg;
+    document.querySelector('.ifr-modal__infobox').innerHTML = msg;
   },
 
   /**

src/js/menus/preMenu_lang.js

@@ -26,7 +26,7 @@ const langState = {
       ], // Language names
       flag: ['flag_BR', 'flag_PE', 'flag_FR', 'flag_US', 'flag_IT'], // Icon names
       lang: ['pt_BR', 'es_PE', 'fr_FR', 'en_US', 'it_IT'], // Parameters sent for language object
-      x: [-350, -350, -350, 170, 170],
+      x: [-350, -350, -350, 250, 250],
       y: [-220, 0, 220, -110, 110],
     };
 
@@ -53,8 +53,8 @@ const langState = {
     game.event.add('click', this.onInputDown);
     game.event.add('mousemove', this.onInputOver);
 
-    //console.log('DEBUG');
-    //this.setLang('pt_BR');
+    console.log('DEBUG');
+    this.setLang('pt_BR');
   },
 
   /**

src/js/menus/preMenu_name.js

@@ -16,24 +16,24 @@ const nameState = {
     // Set title and warning text
     game.add.text(
       context.canvas.width / 2,
-      context.canvas.height / 2 - 100,
+      context.canvas.height / 2 - 150,
       game.lang.insert_name,
       textStyles.h1_green
     );
 
     this.warningEmptyName = game.add.text(
       context.canvas.width / 2,
-      context.canvas.height / 2 - 70,
+      context.canvas.height / 2 - 80,
       '',
       textStyles.h4_brown
     );
 
     // Set 'ok' button that gets player's information
     this.okBtn = game.add.geom.rect(
-      context.canvas.width / 2 - 104,
-      context.canvas.height / 2 + 62,
-      208, //168,
-      72, //60,
+      context.canvas.width / 2 - 124,
+      context.canvas.height / 2 + 93, //62,
+      248, //168,
+      82, //60,
       undefined,
       0,
       colors.gray,
@@ -42,18 +42,19 @@ const nameState = {
 
     // Set button Text
     game.add.text(
-      context.canvas.width / 2 + 1,
-      context.canvas.height / 2 + 112,
+      context.canvas.width / 2,
+      context.canvas.height / 2 + 152, //112,
       game.lang.ready,
       textStyles.h1_white
     );
 
     // Makes text field visible
-    document.getElementById('textbox').style.visibility = 'visible';
+    document.querySelector('.ifr-input__container').style.visibility =
+      'visible';
 
     // Does the same as the button click when the player presses 'enter'
     document
-      .getElementById('textbox-content')
+      .querySelector('.ifr-input')
       .addEventListener('keypress', function (e) {
         const keycode = e.key || e.code;
         if (keycode == 'Enter') {
@@ -65,9 +66,9 @@ const nameState = {
     game.event.add('click', this.onInputDown);
     game.event.add('mousemove', this.onInputOver);
 
-    //console.log('DEBUG');
-    //document.getElementById('textbox-content').value = 'Laira';
-    //this.saveName();
+    console.log('DEBUG');
+    document.querySelector('.ifr-input').value = 'Laira';
+    this.saveName();
   },
 
   /**
@@ -77,7 +78,7 @@ const nameState = {
    */
   checkEmptyName: function () {
     // If text field is empty displays error message
-    if (document.getElementById('textbox-content').value == '') {
+    if (document.querySelector('.ifr-input').value == '') {
       self.warningEmptyName.name = game.lang.empty_name;
       return false;
     }
@@ -89,11 +90,11 @@ const nameState = {
    */
   saveName: function () {
     // Saves player's input in global variable 'playerName'
-    playerName = document.getElementById('textbox-content').value;
+    playerName = document.querySelector('.ifr-input').value;
 
     // Hides and clears text field
-    document.getElementById('textbox').style.visibility = 'hidden';
-    document.getElementById('textbox-content').value = '';
+    document.querySelector('.ifr-input__container').style.visibility = 'hidden';
+    document.querySelector('.ifr-input').value = '';
 
     if (audioStatus) game.audio.popSound.play();
     if (debugMode) console.log('Username: ' + playerName);

src/style/IFractions.css

@@ -0,0 +1,117 @@
+.ifr-canvas {
+    width: 100%;
+}
+
+.ifr-input__container {
+  position: absolute;
+  margin-left: auto;
+  margin-right: auto;
+  left: 0;
+  right: 0;
+  text-align: center;
+  visibility: hidden;
+}
+.ifr-input {
+  background-color: #fff;
+  padding: 15px 40px;
+  box-sizing: border-box;
+  border: 3px solid #ccc;
+  font-size: 24px;
+  font-family: Arial;
+  color: #000;
+  text-align: center;
+}
+.ifr-input:focus {
+  outline: 3px solid #85accc;
+}
+
+.ifr-input__container {
+  top: 220px;
+}
+.ifr-input {
+  padding: 5px 4px;
+  font-size: 8px;
+}
+@media only screen and (min-width: 576px) {
+  .ifr-input__container {
+    top: 220px;
+  }
+  .ifr-input {
+    padding: 10px 36px;
+    font-size: 16px;
+  }
+}
+@media only screen and (min-width: 768px) {
+  .ifr-input__container {
+    top: 220px;
+  }
+  .ifr-input {
+    padding: 10px 36px;
+    font-size: 16px;
+  }
+}
+@media only screen and (min-width: 992px) {
+  .ifr-input__container {
+    top: 280px;
+  }
+  .ifr-input {
+    padding: 14px 40px;
+    font-size: 18px;
+  }
+}
+@media only screen and (min-width: 1200px) {
+  .ifr-input__container {
+    top: 330px;
+  }
+  .ifr-input {
+    padding: 14px 40px;
+    font-size: 24px;
+  }
+}
+
+.ifr-modal {
+    /* Hidden by default */
+    display: none;
+    /* Stay in place */
+    position: fixed;
+    /* Sit on top */
+    z-index: 1;
+    /* Location of the box */
+    padding-top: 155px;
+    left: 0;
+    top: 0;
+    /* Full width */
+    width: 100%;
+    /* Full height */
+    height: 100%;
+    /* Enable scroll if needed */
+    overflow: auto;
+    /* Fallback color */
+    background-color: rgb(0, 0, 0);
+    /* Black w/ opacity */
+    background-color: rgba(0, 0, 0, 0.4);
+}
+.ifr-modal__content {
+    background-color: #fefefe;
+    margin: auto;
+    padding: 20px;
+    border: 1px solid #888;
+    width: 50%;
+}
+.ifr-modal__content img {
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+}
+.ifr-modal__closeButton {
+    color: #aaaaaa;
+    float: right;
+    font-size: 28px;
+    font-weight: bold;
+}
+.ifr-modal__closeButton:hover,
+.ifr-modal__closeButton:focus {
+    color: #000;
+    text-decoration: none;
+    cursor: pointer;
+}