create debg function for state management

index.html

@@ -61,6 +61,7 @@
     <script src="src/js/globals/globals_control.js"></script>
     <script src="src/js/globals/globals_tokens.js"></script>
     <script src="src/js/globals/globals_functions.js"></script>
+    <script src="src/js/globals/globals_debug.js"></script>
 
     <script>
 

src/js/gameMechanics.js

@@ -157,7 +157,7 @@ const game = {
               let msg = cur.split('=');
               game.lang[msg[0].trim()] = msg[1].trim();
             } catch (Error) {
-              if (debugMode) console.log('Sintax error fixed');
+              if (isDebugMode) console.log('Sintax error fixed');
             }
             game.load.finishedOneMediaElement(msg.length - 1, 'lang');
           });
@@ -1322,7 +1322,7 @@ const game = {
           const i = character.animation[1].indexOf(character.curFrame);
           if (i == -1) {
             // Frame not found
-            if (debugMode)
+            if (isDebugMode)
               console.error('Game error: animation frame not found.');
           } else if (i < character.animation[1].length - 1) {
             // Go to next frame

src/js/games/circleOne.js

@@ -460,7 +460,7 @@ const circleOne = {
           .image(context.canvas.width / 2, context.canvas.height / 2, 'ok')
           .anchor(0.5, 0.5);
         completedLevels++;
-        if (debugMode) console.log('Completed Levels: ' + completedLevels);
+        if (isDebugMode) console.log('Completed Levels: ' + completedLevels);
       } else {
         self.result = false; // Answer is incorrect
         if (audioStatus) game.audio.errorSound.play();

src/js/games/squareOne.js

@@ -281,7 +281,7 @@ const squareOne = {
         if (audioStatus) game.audio.okSound.play();
 
         completedLevels++; // Increases number os finished levels
-        if (debugMode) console.log('Completed Levels: ' + completedLevels);
+        if (isDebugMode) console.log('Completed Levels: ' + completedLevels);
       } else {
         // Incorrect answer
         // Displays feedback image and sound
@@ -537,7 +537,7 @@ const squareOne = {
       restart = true; // If any error is found restart the level
     }
 
-    if (debugMode)
+    if (isDebugMode)
       console.log(
         'Stacked blocks: ' +
           total +

src/js/games/squareTwo.js

@@ -135,7 +135,7 @@ const squareTwo = {
     const totalBlocksA = points[randomIndex];
     const totalBlocksB = game.math.randomDivisor(totalBlocksA);
 
-    if (debugMode) {
+    if (isDebugMode) {
       console.log(
         'Difficulty: ' +
           gameDifficulty +
@@ -371,7 +371,7 @@ const squareTwo = {
           canGoToNextMapPosition = true; // Allow character to move to next level in map state
           completedLevels++;
 
-          if (debugMode) console.log('Completed Levels: ' + completedLevels);
+          if (isDebugMode) console.log('Completed Levels: ' + completedLevels);
 
           // Fractions are not equivalent : INCORRECT
         } else {

src/js/globals/globals_control.js

@@ -30,12 +30,6 @@
  * ................(start)....(end).....................
  **************************************************************/
 
-/**
- * Turns console messages ON/OFF (for debug purposes only)
- * @type {boolean}
- */
-const debugMode = false;
-
 /** FOR MOODLE <br>
  *
  * iFractions can run on a server or inside moodle through iAssign. <br>
@@ -46,10 +40,9 @@ const debugMode = false;
 const moodle = false;
 
 /**
- * index of the current game in gameList
- * Can be: 'squareOne', 'squareTwo' or 'circleOne'.
+ * Index of the current game in gameList array
  *
- * @type {string}
+ * @type {number}
  */
 let gameId;
 

src/js/globals/globals_debug.js

@@ -0,0 +1,45 @@
+const isDebugMode = true;
+
+const debugState = {
+  lang: { status: true, lang: 'pt_BR' },
+  name: { status: true, name: 'Username' },
+  menu: { status: false, id: 1 },
+  customMenu: {
+    status: false,
+    getData: () => {
+      return { mode: 'A', operation: 'Plus', difficulty: 1, label: true };
+    },
+  },
+  map: { status: false, stop: false },
+  end: { status: false, stop: false },
+};
+
+const debugFunctions = {
+  grid: () => {
+    const grid = 2;
+    const h = 1920 / (grid + 0.5);
+    const v = 1080 / (grid + 0.5);
+    for (let i = 0; i < grid; i++) {
+      game.add.geom.rect(
+        h / 2 + i * h,
+        0,
+        h / 2,
+        1080,
+        '',
+        0,
+        colors.blue,
+        0.3
+      );
+      game.add.geom.rect(
+        0,
+        v / 2 + i * v,
+        1920,
+        v / 2,
+        '',
+        0,
+        colors.blue,
+        0.3
+      );
+    }
+  },
+};

src/js/globals/globals_functions.js

@@ -186,37 +186,6 @@ const navigationIcons = {
   },
 };
 
-// For debug
-const debug = {
-  grid: function () {
-    const grid = 2;
-    const h = 1920 / (grid + 0.5);
-    const v = 1080 / (grid + 0.5);
-    for (let i = 0; i < grid; i++) {
-      game.add.geom.rect(
-        h / 2 + i * h,
-        0,
-        h / 2,
-        1080,
-        '',
-        0,
-        colors.blue,
-        0.3
-      );
-      game.add.geom.rect(
-        0,
-        v / 2 + i * v,
-        1920,
-        v / 2,
-        '',
-        0,
-        colors.blue,
-        0.3
-      );
-    }
-  },
-};
-
 /**
  * Sends game information to database
  *
@@ -251,7 +220,7 @@ const sendToDatabase = function (extraData) {
     fetch(url, init)
       .then((response) => {
         if (response.ok) {
-          if (debugMode) console.log('Processing...');
+          if (isDebugMode) console.log('Processing...');
         } else {
           console.error('Game error: Network response was not ok.');
         }
@@ -283,9 +252,9 @@ const sendToDatabase = function (extraData) {
     fetch(url, init)
       .then((response) => {
         if (response.ok) {
-          if (debugMode) console.log('Processing...');
+          if (isDebugMode) console.log('Processing...');
           response.text().then((text) => {
-            if (debugMode) {
+            if (isDebugMode) {
               console.log(text);
             }
           });

src/js/menus/menu_custom.js

@@ -72,13 +72,21 @@ const customMenuState = {
       game.event.add('click', this.onInputDown);
       game.event.add('mousemove', this.onInputOver);
 
-      // console.log('DEBUG');
-      //gameFrame().rect();
-      //gameFrame().point(offsetW, offsetH);
-      // const s1 = 11;
-      // const c1 = 14;
-      // const s2 = 12;
-      // self.load(this.menuIcons[s1]);
+      if (isDebugMode && debugState.customMenu.status) {
+        // programmatically customize a game
+        const { mode, operation, difficulty, label } =
+          debugState.customMenu.getData();
+
+        gameMode = mode;
+        gameOperation = operation;
+        gameDifficulty = difficulty || 1;
+        fractionLabel = label || true;
+
+        curMapPosition = 0; // Map position
+        canGoToNextMapPosition = true; // Move no next point
+        completedLevels = 0; // Reset the game progress when entering a new level
+        game.state.start('map');
+      }
     }
   },
 
@@ -116,7 +124,7 @@ const customMenuState = {
         game.render.all();
         break;
       case 'enter':
-        if (debugMode) {
+        if (isDebugMode) {
           console.log(
             '------------------------------' +
               '\nGame State: ' +

src/js/menus/menu_main.js

@@ -65,8 +65,6 @@ const menuState = {
         icon.anchor(0.5, 0.5);
 
         icon.gameId = i;
-        icon.gameName = gameList[i].gameName;
-        icon.gameShape = gameList[i].gameShape;
         icon.iconType = 'game';
 
         this.menuIcons.push(icon);
@@ -81,7 +79,7 @@ const menuState = {
         );
         infoIcon.anchor(0.5, 0.5);
         infoIcon.iconType = 'infoIcon';
-        infoIcon.id = icon.gameName;
+        infoIcon.id = gameList[i].gameName;
         this.menuIcons.push(infoIcon);
       }
 
@@ -94,12 +92,16 @@ const menuState = {
       game.event.add('click', this.onInputDown);
       game.event.add('mousemove', this.onInputOver);
 
-      // console.log('DEBUG');
-      // const s1 = 0;
-      // const c1 = 2;
-      // const s2 = 4;
-      // const sc1 = 6;
-      // this.load(self.menuIcons[sc1]);
+      if (isDebugMode && debugState.menu.status) {
+        // programmatically select a game
+        const id = debugState.menu.id;
+        gameId = id;
+        gameName = gameList[id].gameName;
+        gameShape = gameList[id].gameShape;
+        self.menuIcons =
+          game.lang[gameShape] + ' ' + gameName.slice(-3) == 'One' ? 'I' : 'II';
+        game.state.start('customMenu');
+      }
     }
   },
 
@@ -187,8 +189,8 @@ const menuState = {
         break;
       case 'game':
         gameId = icon.gameId;
-        gameName = icon.gameName;
-        gameShape = icon.gameShape;
+        gameName = gameList[gameId].gameName;
+        gameShape = gameList[gameId].gameShape;
         if (!gameList.find((game) => game.gameName === gameName))
           console.error('Game error: the name of the game is not valid.');
         self.menuIcons = self.lbl_game.name;
@@ -203,8 +205,9 @@ const menuState = {
    * @param {object} icon icon for the game
    */
   showTitle: function (icon) {
-    const number = icon.gameName.slice(-3) == 'One' ? 'I' : 'II';
-    const shape = icon.gameName.slice(0, -3);
+    const number =
+      gameList[icon.gameId].gameName.slice(-3) == 'One' ? 'I' : 'II';
+    const shape = gameList[icon.gameId].gameName.slice(0, -3);
     self.lbl_game.name = game.lang[shape] + ' ' + number;
   },
 

src/js/menus/preMenu_lang.js

@@ -53,8 +53,10 @@ const langState = {
     game.event.add('click', this.onInputDown);
     game.event.add('mousemove', this.onInputOver);
 
-    // console.log('DEBUG');
-    this.setLang('pt_BR');
+    if (isDebugMode && debugState.lang.status) {
+      // programmatically select a language
+      this.setLang(debugState.lang.lang || 'pt_BR');
+    }
   },
 
   /**
@@ -134,7 +136,7 @@ const loadLangState = {
    * Main code
    */
   create: function () {
-    if (debugMode) console.log('Language: ' + langString);
+    if (isDebugMode) console.log('Language: ' + langString);
 
     // Make sure to only ask for player name on the first time oppening the game
     if (this.firstTime == undefined) {

src/js/menus/preMenu_name.js

@@ -62,9 +62,12 @@ const nameState = {
     game.event.add('click', this.onInputDown);
     game.event.add('mousemove', this.onInputOver);
 
-    // console.log('DEBUG');
-    document.querySelector('.ifr-input').value = 'Laira';
-    this.saveName();
+    if (isDebugMode && debugState.name.status) {
+      // programmatically select a user name
+      document.querySelector('.ifr-input').value =
+        debugState.name.name || 'My User Name';
+      this.saveName();
+    }
   },
 
   /**
@@ -93,7 +96,7 @@ const nameState = {
     document.querySelector('.ifr-input').value = '';
 
     if (audioStatus) game.audio.popSound.play();
-    if (debugMode) console.log('Username: ' + playerName);
+    if (isDebugMode) console.log('Username: ' + playerName);
 
     // FOR MOODLE
     // Calls 'menu' state

src/js/moodle/integrationFunctions.js

@@ -155,7 +155,7 @@ const getiLMContent = function () {
     fetch(url, init)
       .then((response) => {
         if (response.ok) {
-          if (debugMode) console.log('Processing...');
+          if (isDebugMode) console.log('Processing...');
           response.text().then((text) => {
             breakString(text);
           }); // Sends text to be treated

src/js/screens/end.js

@@ -54,7 +54,7 @@ const endState = {
     gameList[gameId].assets.endBuilding();
 
     this.character = gameList[gameId].assets.endCharacter();
-    this.character.animation = gameList[gameId].assets.endCharacterAnimation();
+    this.character.animation = gameList[gameId].assets.endCharacterAnimation;
 
     if (gameName === 'circleOne') {
       this.preAnimate = true;
@@ -77,6 +77,12 @@ const endState = {
    * Game loop
    */
   update: function () {
+    if (isDebugMode && debugState.end.status) {
+      if (debugState.end.stop) {
+        self.animate = false;
+      }
+    }
+
     // Balloon falling
     if (self.preAnimate) {
       if (self.character.y < 460) {

src/js/screens/map.js

@@ -38,7 +38,7 @@ const mapState = {
       );
     }
 
-    // console.log('DEBUG');
+    // console.log('debugState');
     const xAdjust = 0;
     const yAdjust = 200;
 
@@ -237,7 +237,7 @@ const mapState = {
     //this.character.anchor(0.5, 1);
     game.animation.play(this.character.animation[0]);
 
-    this.count = 0;
+    this.moveCounter = 0;
 
     const speed = 60;
     const xA = this.points.x[curMapPosition];
@@ -255,14 +255,25 @@ const mapState = {
    * Game loop
    */
   update: function () {
-    // console.log('DEBUG');
-    // self.loadGame();
-
     let endUpdate = false;
 
-    self.count++;
+    self.moveCounter++;
+
+    if (isDebugMode && debugState.end.status) {
+      curMapPosition = 4;
+    }
+
+    if (isDebugMode && debugState.map.status) {
+      // programmatically skip map
+      if (debugState.map.stop) {
+        self.moveCounter--;
+      } else {
+        curMapPosition++;
+        self.loadGame();
+      }
+    }
 
-    if (self.count > 60) {
+    if (self.moveCounter > 60) {
       // Wait 1 second before moving or staring a game
 
       if (canGoToNextMapPosition) {
@@ -285,7 +296,7 @@ const mapState = {
 
     if (endUpdate) {
       game.animation.stop(self.character.animation[0]);
-      // console.log('DEBUG');
+
       self.loadGame();
     }
   },