Ifractions-web/js/games/squareOne.js

/******************************
 * This file holds game states.
 ******************************/

/** [GAME STATE]
 *
 * ..squareOne...	= gameName
 * ..../...\.....
 * ...a.....b.... = gameMode
 * .....\./......
 * ......|.......
 * ...../.\......
 * .plus...minus. = gameOperation
 * .....\./......
 * ......|.......
 * ....1,2,3..... = gameDifficulty
 *
 * Character : tractor
 * Theme : farm
 * Concept : Player associates 'blocks carried by the tractor' and 'floor spaces to be filled by them'
 * Represent fractions as : blocks/rectangles
 *
 * Game modes can be :
 *
 *   a : Player can select # of 'floor blocks' (hole in the ground)
 *       Selects size of hole to be made in the ground (to fill with the blocks in front of the truck)
 *   b : Player can select # of 'stacked blocks' (in front of the truck)
 *       Selects number of blocks in front of the truck (to fill the hole on the ground)
 *
 * Operations can be :
 *
 *   plus : addition of fractions
 *     Represented by : tractor going to the right (floor positions 0..8)
 *   minus : subtraction of fractions
 *     Represented by: tractor going to the left (floor positions 8..0)
 *
 * @namespace
 */
const squareOne = {
  default: undefined,

  ui: undefined,
  control: undefined,
  animation: undefined,

  tractor: undefined,
  stack: undefined,
  floor: undefined,

  operation: undefined,

  /**
   * Main code
   */
  create: function () {
    const truckWidth = 201;
    const divisor = gameDifficulty == 3 ? 4 : gameDifficulty; // Make sure valid divisors are 1, 2 and 4 (not 3)
    let lineColor = undefined;
    let fillColor = undefined;
    if (gameOperation === 'minus') {
      lineColor = colors.red;
      fillColor = colors.redLight;
    } else {
      lineColor = colors.green;
      fillColor = colors.greenLight;
    }

    this.operation = [];
    this.ui = {
      arrow: undefined,
      help: undefined,
      message: undefined,
      continue: {
        // modal: undefined,
        button: undefined,
        text: undefined,
      },
    };
    this.control = {
      direc: gameOperation == 'minus' ? -1 : 1, // Will be multiplied to values to easily change tractor direction when needed
      divisorsList: '', // Hold the divisors for each fraction on stacked blocks (created for postScore())
      lineWidth: 3,

      hasClicked: false, // Checks if player 'clicked' on a block
      checkAnswer: false, // When true allows game to run 'check answer' code in update
      isCorrect: false, // Checks player 'answer'

      count: 0, // An 'x' position counter used in the tractor animation
    };
    this.animation = {
      animateTractor: false, // When true allows game to run 'tractor animation' code in update (turns animation of the moving tractor ON/OFF)
      animateEnding: false, // When true allows game to run 'tractor ending animation' code in update (turns 'ending' animation of the moving tractor ON/OFF)
      speed: 2 * this.control.direc, // X distance in which the tractor moves in each iteration of the animation
    };
    this.default = {
      width: 172, // Base block width,
      height: 70, // Base block height
      x0:
        gameOperation == 'minus'
          ? context.canvas.width - truckWidth
          : truckWidth, // Initial 'x' coordinate for the tractor and stacked blocks
      y0: context.canvas.height - game.image['floor_grass'].width * 1.5,
    };
    this.default.arrowX0 =
      self.default.x0 + self.default.width * self.control.direc;
    this.default.arrowXEnd =
      self.default.arrowX0 + self.default.width * self.control.direc * 8;

    renderBackground();

    // FOR MOODLE
    if (moodle) {
      navigation.add.right(['audio']);
    } else {
      navigation.add.left(['back', 'menu', 'show_answer'], 'customMenu');
      navigation.add.right(['audio']);
    }

    this.stack = {
      backupList: [],
      list: [],
      selectedIndex: undefined,
      correctIndex: undefined, // (gameMode 'b') index of the CORRECT 'stacked' block

      curIndex: 0, // (needs to be 0)

      curBlockEndX: undefined,
    };
    this.floor = {
      list: [],
      selectedIndex: undefined,
      correctIndex: undefined, // (gameMode 'a') index of the CORRECT 'floor' block

      curIndex: -1, // (needs to be -1)

      correctX: undefined, // 'x' coordinate of CORRECT 'floor' block

      subdivision: divisor,
    };

    let [restart, correctXA] = this.utils.renderStackedBlocks(
      this.control.direc,
      lineColor,
      fillColor,
      this.control.lineWidth,
      divisor
    );

    this.utils.renderFloorBlocks(
      this.control.direc,
      lineColor,
      this.control.lineWidth,
      divisor,
      correctXA
    );
    this.utils.renderCharacters();
    this.utils.renderMainUI();

    this.restart = restart;
    if (!this.restart) {
      game.timer.start(); // Set a timer for the current level (used in postScore())
      game.event.add('click', this.events.onInputDown);
      game.event.add('mousemove', this.events.onInputOver);
    }
  },

  /**
   * Game loop
   */
  update: function () {
    // Starts tractor animation
    if (self.animation.animateTractor) {
      self.utils.animateTractorHandler();
    }

    // Check answer after animation ends
    if (self.control.checkAnswer) {
      self.utils.checkAnswerHandler();
    }

    // Starts tractor moving animation
    if (self.animation.animateEnding) {
      self.utils.animateEndingHandler();
    }

    game.render.all();
  },

  utils: {
    // RENDER
    /**
     * Create stacked blocks for the level in create()
     */
    renderStackedBlocks: (direc, lineColor, fillColor, lineWidth, divisor) => {
      let restart = false;
      let hasBaseDifficulty = false; // Will be true after next for loop if level has at least one '1/difficulty' fraction (if false, restart)

      const max = gameMode == 'b' ? 10 : curMapPosition + 4; // Maximum number of stacked blocks for the level
      const total = game.math.randomInRange(curMapPosition + 2, max); // Current number of stacked blocks for the level

      let correctXA = self.default.x0 + self.default.width * direc;
      for (let i = 0; i < total; i++) {
        let curFractionItems = undefined;
        let font = undefined;

        let curDivisor = game.math.randomInRange(1, gameDifficulty); // Set divisor for fraction
        if (curDivisor === gameDifficulty) hasBaseDifficulty = true;
        if (curDivisor === 3) curDivisor = 4; // Make sure valid divisors are 1, 2 and 4 (not 3)

        const curBlockWidth = self.default.width / curDivisor; // Current width is a fraction of the default
        self.control.divisorsList += curDivisor + ','; // List of divisors (for postScore())
        correctXA += curBlockWidth * direc;

        const curBlock = game.add.geom.rect(
          self.default.x0,
          self.default.y0 - i * self.default.height - lineWidth,
          curBlockWidth,
          self.default.height,
          fillColor,
          1,
          lineColor,
          lineWidth
        );
        curBlock.anchor(gameOperation === 'minus' ? 1 : 0, 1);
        curBlock.blockValue = divisor / curDivisor;

        // If game mode is (b), adding events to stacked blocks
        if (gameMode == 'b') {
          curBlock.blockIndex = i;
        }

        self.stack.list.push(curBlock);

        const backupBlock = game.add.geom.rect(
          curBlock.x,
          curBlock.y,
          curBlock.width,
          curBlock.height,
          fillColor,
          0,
          lineColor,
          lineWidth
        );
        backupBlock.anchor(gameOperation === 'minus' ? 1 : 0, 1);
        self.stack.backupList.push(backupBlock);

        // If 'show fractions' is turned on, create labels that display the fractions on the side of each block
        const x = self.default.x0 + (curBlockWidth + 40) * direc;
        const y = self.default.height + 1;

        if (curDivisor === 1) {
          font = textStyles.h2_;

          curFractionItems = [
            {
              x: x,
              y: self.default.y0 - i * y - 20,
              text: '1',
            },
            {
              x: x - 25,
              y: self.default.y0 - i * y - 27,
              text: gameOperation === 'minus' ? '-' : '',
            },
            null,
          ];
        } else {
          font = textStyles.p_;
          curFractionItems = [
            {
              x: x,
              y: self.default.y0 - i * y - 40,
              text: '1\n' + curDivisor,
            },
            {
              x: x - 25,
              y: self.default.y0 - i * y - 27,
              text: gameOperation === 'minus' ? '-' : '',
            },
            {
              x0: x,
              y: self.default.y0 - i * y - 35,
              x1: x + 25,
              lineWidth: 2,
              color: lineColor,
            },
          ];
        }
        font = { ...font, font: 'bold ' + font.font, fill: lineColor };

        const fractionPartsList = [];
        for (let i = 0; i < 2; i++) {
          const item = game.add.text(
            curFractionItems[i].x,
            curFractionItems[i].y,
            curFractionItems[i].text,
            font
          );
          item.lineHeight = 30;
          fractionPartsList.push(item);
        }
        if (curFractionItems[2]) {
          const line = game.add.geom.line(
            curFractionItems[2].x0,
            curFractionItems[2].y,
            curFractionItems[2].x1,
            curFractionItems[2].y,
            curFractionItems[2].lineWidth,
            curFractionItems[2].color
          );
          line.anchor(0.5, 0);
          fractionPartsList.push(line);
        } else {
          fractionPartsList.push(null);
        }

        curBlock.fraction = {
          labels: fractionPartsList,
          nominator: direc,
          denominator: curDivisor,
        };

        if (!showFractions) {
          curBlock.fraction.labels.forEach((label) => {
            if (label) label.alpha = 0;
          });
        }
      }

      // Computer generated correct stack index
      if (gameMode === 'a') self.stack.selectedIndex = total - 1;

      // Will be used as a counter in update, adding in the width of each stacked block to check if the end matches the floor selected position
      // initial value is end of current block
      self.stack.curBlockEndX =
        self.default.x0 + self.stack.list[0].width * direc;

      // Check for errors (level too easy for its difficulty or end position out of bounds)
      if (
        !hasBaseDifficulty ||
        (gameOperation == 'plus' &&
          (correctXA < self.default.x0 + self.default.width ||
            correctXA > self.default.x0 + 8 * self.default.width)) ||
        (gameOperation == 'minus' &&
          (correctXA < self.default.x0 - 8 * self.default.width ||
            correctXA > self.default.x0 - self.default.width))
      ) {
        restart = true; // If any error is found restart the level
      }

      if (isDebugMode)
        console.log(
          'Stacked blocks: ' +
            total +
            ' (min: ' +
            (curMapPosition + 2) +
            ', max: ' +
            max +
            ')'
        );

      return [restart, correctXA];
    },
    /**
     * Create floor blocks for the level in create()
     */
    renderFloorBlocks: (direc, lineColor, lineWidth, divisor, correctXA) => {
      let correctXB = 0;
      let total = 8 * divisor; // Number of floor blocks

      const blockWidth = self.default.width / divisor; // Width of each floor block

      // If game is type (b), selectiong a random floor x position
      if (gameMode == 'b') {
        self.stack.correctIndex = game.math.randomInRange(
          0,
          self.stack.list.length - 1
        ); // Correct stacked index

        correctXB = self.default.x0 + self.default.width * direc;

        for (let i = 0; i <= self.stack.correctIndex; i++) {
          correctXB += self.stack.list[i].width * direc; // Equivalent x position on the floor
        }
      }

      let flag = true;

      for (let i = 0; i < total; i++) {
        const curX =
          self.default.x0 + (self.default.width + i * blockWidth) * direc;

        if (flag && gameMode == 'a') {
          if (
            (gameOperation == 'plus' && curX >= correctXA) ||
            (gameOperation == 'minus' && curX <= correctXA)
          ) {
            self.floor.correctIndex = i - 1; // Set index of correct floor block
            flag = false;
          }
        }

        if (gameMode == 'b') {
          if (
            (gameOperation == 'plus' && curX >= correctXB) ||
            (gameOperation == 'minus' && curX <= correctXB)
          ) {
            total = i;
            break;
          }
        }

        // Create floor block
        const curBlock = game.add.geom.rect(
          curX,
          self.default.y0,
          blockWidth,
          self.default.height + 10,
          colors.blueBgInsideLevel,
          1,
          colors.gray,
          lineWidth
        );
        const anchor = gameOperation == 'minus' ? 1 : 0;
        curBlock.anchor(anchor, 0);
        curBlock.blockValue = 1;

        // If game is type (a), adding events to floor blocks
        if (gameMode == 'a') {
          curBlock.fillColor = 'transparent';
          curBlock.blockIndex = i;
        }

        // Add current label to group of labels
        self.floor.list.push(curBlock);
      }

      // Computer generated correct floor index
      if (gameMode === 'b') self.floor.selectedIndex = total - 1;

      if (gameMode == 'a') self.floor.correctX = correctXA;
      else if (gameMode == 'b') self.floor.correctX = correctXB;

      // Creates labels on the floor to display the numbers
      for (let i = 0; i <= 8; i++) {
        const x = self.default.x0 + (i + 1) * self.default.width * direc;
        const y = self.default.y0 + self.default.height + 45 - 65;

        let numberX = x;
        let numberText = i;
        let numberCircleSize = 45;
        let numberFont = {
          ...textStyles.h3_,
          fill: lineColor,
          font: 'bold ' + textStyles.h3_.font,
        };
        if (gameOperation === 'minus') {
          numberX = i !== 0 ? x - 2 : x;
          numberText = -i;
          numberCircleSize = 45;
          numberFont.font = 'bold ' + textStyles.h4_.font;
        }

        game.add.geom
          .circle(x, y, numberCircleSize, undefined, 0, colors.white, 1)
          .anchor(0, 0.25);
        game.add.text(numberX, y + 2, numberText, numberFont);
      }
    },
    renderCharacters: () => {
      self.tractor = game.add.sprite(
        self.default.x0,
        self.default.y0,
        'tractor',
        0,
        1
      );

      if (gameOperation == 'plus') {
        self.tractor.anchor(1, 1);
        self.tractor.animation = ['move', [0, 1, 2, 3, 4], 4];
      } else {
        self.tractor.anchor(0, 1);
        self.tractor.animation = ['move', [5, 6, 7, 8, 9], 4];
        self.tractor.curFrame = 5;
      }
    },
    renderMainUI: () => {
      // Help pointer
      self.ui.help = game.add.image(0, 0, 'pointer', 1.7, 0);
      if (gameMode === 'b') self.ui.help.anchor(0.25, 0.7);
      else self.ui.help.anchor(0.2, 0);

      // Selection Arrow
      if (gameMode == 'a') {
        self.ui.arrow = game.add.image(
          self.default.arrowX0,
          self.default.y0,
          'arrow_down',
          1.5
        );
        self.ui.arrow.anchor(0.5, 1);
        self.ui.arrow.alpha = 0.5;
      }

      // Intro text
      const correctMessage =
        gameMode === 'a'
          ? game.lang.squareOne_intro_a
          : game.lang.squareOne_intro_b;
      const treatedMessage = correctMessage.split('\\n');
      const font = textStyles.h1_;
      self.ui.message = [];
      self.ui.message.push(
        game.add.text(
          context.canvas.width / 2,
          170,
          treatedMessage[0] + '\n' + treatedMessage[1],
          font
        )
      );
    },
    renderOperationUI: () => {
      const y0 = 500;
      const color = self.control.isCorrect ? colors.green : colors.red;
      const font = { ...textStyles.fraction, fill: color };
      const offsetX = 50;

      // Display stacked blocks operation
      const displayMainOperation = self.operation.length ? true : false;
      if (displayMainOperation) {
        let signs = [];
        let nominators = [];
        let denominators = [];
        const x0 = self.operation[self.operation.length - 1].x;
        let curX = x0 + offsetX;

        // Setup 1
        for (let i = 0; i < self.operation.length; i += 2) {
          const sign = self.operation[i].name;

          let fraction = self.operation[i + 1].name;
          fraction = fraction.split('\n');

          const nominator = fraction[0];
          const denominator = fraction[1] || '1';

          signs.push(sign);
          nominators.push(nominator);
          denominators.push(denominator);
        }

        // Setup 2
        const updatedNominators = [];
        const mmc = game.math.mmcArray(denominators);
        let resultNominator = 0;
        for (let i in nominators) {
          const temp = nominators[i] * (mmc / denominators[i]);
          updatedNominators.push(temp);
          resultNominator += temp;
        }
        const resultNominatorUnsigned =
          resultNominator < 0 ? -resultNominator : resultNominator;

        // Fraction result
        font.fill = colors.black;
        game.add.text(curX, y0, '=', font);
        font.fill = color;
        if (gameOperation === 'minus') {
          curX += offsetX;
          game.add.text(curX, y0, '-', font);
        }
        curX += offsetX;
        const fraction =
          mmc == 1 || resultNominatorUnsigned === 0
            ? resultNominatorUnsigned + ''
            : resultNominatorUnsigned + '\n' + mmc;
        const result = game.add.text(curX, y0, fraction, font);
        result.lineHeight = 70;
        if (fraction.includes('\n')) {
          const nom = fraction.split('\n')[0];
          const lineWidth = nom - 9 > 0 ? 80 : 40;
          game.add.geom.line(
            curX,
            y0 + 13,
            curX + lineWidth,
            y0 + 15,
            4,
            color,
            mmc === 1 || resultNominatorUnsigned === 0 ? 0 : 1
          );
        }

        // Setup 3
        const mdcAux = game.math.mdc(resultNominator, mmc);
        const mdc = mdcAux < 0 ? -mdcAux : mdcAux;
        if (mdc != 1 && resultNominatorUnsigned !== 0) {
          if (resultNominatorUnsigned - 9 > 0 || mmc - 9 > 0) {
            curX += offsetX;
          }
          curX += offsetX;
          font.fill = colors.black;
          game.add.text(curX, y0, '=', font);
          font.fill = color;
          if (gameOperation === 'minus') {
            curX += offsetX;
            game.add.text(curX, y0, '-', font);
          }

          const nom = resultNominatorUnsigned / mdc;
          const den = mmc / mdc;
          const frac = den === 1 ? '' + nom : nom + '\n' + den;

          curX += offsetX;
          const result = game.add.text(curX, y0, frac, font);
          result.lineHeight = 70;
        }
      }

      const correctFloorIndex =
        gameMode === 'a' ? self.floor.correctIndex : self.floor.selectedIndex;
      console.log(correctFloorIndex);

      // Display flag
      const displayFlag = true;
      if (displayFlag) {
        const floorFlag = game.add.image(
          self.floor.list[correctFloorIndex].x +
            self.floor.list[0].width * self.control.direc -
            15,
          self.tractor.y + 10,
          'flag_red',
          0.7
        );
        floorFlag.anchor(0, 1);

        if (self.control.isCorrect) {
          floorFlag.name = 'flag_green';
        } else {
          // this (maybe) takes in consideration if its mode a or b
          let min = self.floor.selectedIndex,
            max = self.floor.correctIndex;
          if (min > max) {
            let aux = min;
            min = max;
            max = aux;
          }
          // for (let i = min + 1; i <= max; i++) {
          //   self.floor.list[i].fillColor = colors.red;
          //   self.floor.list[i].alpha = 1;
          // }
        }
      }

      // Display floor blocks operation
      const displayFloorOperation = true;
      if (displayFloorOperation) {
        font.fill = colors.black;

        const y = self.tractor.y - 135;
        let x =
          self.floor.list[correctFloorIndex].x +
          self.floor.list[0].width * self.control.direc -
          15;

        const subdivision = self.floor.subdivision;
        console.log(subdivision);

        const decimalResult = (correctFloorIndex + 1) / subdivision;
        console.log(decimalResult);

        const floorDecimalResult = Math.floor(decimalResult);
        console.log(floorDecimalResult);

        const nominator =
          correctFloorIndex + 1 - floorDecimalResult * subdivision;
        const sign = gameOperation === 'plus' ? '+' : '-';

        if (gameOperation === 'minus' && floorDecimalResult != 0) {
          game.add.text(x, y, sign, font);
          x += offsetX;
        }

        game.add.text(x, y, floorDecimalResult, font);

        if (decimalResult > floorDecimalResult) {
          x += offsetX;
          game.add.text(x, y, sign, font);

          x += offsetX;
          game.add.text(x, y, nominator + '\n' + subdivision, font);

          x += offsetX;
          game.add.text(x, y, '=', font);

          let newNom = floorDecimalResult * subdivision + nominator;
          let newDen = subdivision;

          if (gameOperation === 'minus') {
            x += offsetX;
            game.add.text(x, y, sign, font);
          }

          x += offsetX;
          game.add.text(x, y, newNom + '\n' + newDen, font);

          const mdcAux = game.math.mdc(newNom, newDen);
          const mdc = mdcAux < 0 ? -mdcAux : mdcAux;
          if (mdc !== 1) {
            newNom /= mdc;
            newDen /= mdc;

            x += 80;
            game.add.text(x, y, '=', font);

            if (gameOperation === 'minus') {
              x += offsetX;
              game.add.text(x, y, sign, font);
            }

            x += 60;
            game.add.text(x, y, newNom + '\n' + newDen, font);
          }
        }
      }

      const endSignX = context.canvas.width / 2;
      return endSignX;
    },
    renderEndUI: () => {
      let btnColor = colors.green;
      let btnText = game.lang.continue;

      if (!self.control.isCorrect) {
        btnColor = colors.red;
        btnText = game.lang.retry;
      }

      // continue button
      self.ui.continue.button = game.add.geom.rect(
        context.canvas.width / 2,
        context.canvas.height / 2 + 100,
        450,
        100,
        btnColor
      );
      self.ui.continue.button.anchor(0.5, 0.5);
      self.ui.continue.text = game.add.text(
        context.canvas.width / 2,
        context.canvas.height / 2 + 16 + 100,
        btnText,
        textStyles.btn
      );
    },

    // UPDATE HANDLERS
    animateTractorHandler: () => {
      // Move
      self.tractor.x += self.animation.speed;
      self.stack.list.forEach((block) => {
        block.x += self.animation.speed;
        if (showFractions) {
          block.fraction.labels[0].x += self.animation.speed;
          block.fraction.labels[1].x += self.animation.speed;
          if (block.fraction.labels[2])
            block.fraction.labels[2].x += self.animation.speed;
        }
      });

      // If the current block is 1/n (not 1/1) we need to consider the
      // extra space the truck needs to pass after the blocks falls but
      // before reaching the next block
      const curBlockExtra =
        (self.default.width - self.stack.list[self.stack.curIndex].width) *
        self.control.direc;

      const canLowerBlocks =
        (gameOperation == 'plus' &&
          self.stack.list[0].x >= self.stack.curBlockEndX + curBlockExtra) ||
        (gameOperation == 'minus' &&
          self.stack.list[0].x <= self.stack.curBlockEndX + curBlockExtra);
      if (canLowerBlocks) {
        const endAnimation = self.utils.lowerBlocksHandler();

        if (!endAnimation) {
          self.animation.animateTractor = false;
          self.control.checkAnswer = true;
        }
      }
    },
    lowerBlocksHandler: () => {
      self.floor.curIndex += self.stack.list[self.stack.curIndex].blockValue;

      const font = textStyles.fraction;
      font.fill = colors.black;

      const tooManyStackBlocks = self.floor.curIndex > self.floor.selectedIndex;
      if (tooManyStackBlocks) return false;

      // fill floor
      for (let i = 0; i <= self.floor.curIndex; i++) {
        self.floor.list[i].fillColor = 'transparent';
      }
      // lower blocks
      self.stack.list.forEach((block) => {
        block.y += self.default.height;
        if (showFractions) {
          block.fraction.labels[0].y += self.default.height;
          block.fraction.labels[1].y += self.default.height;
          if (block.fraction.labels[2])
            block.fraction.labels[2].y += self.default.height;
        }
      });
      // hide current block
      const currentBlock = self.stack.list[self.stack.curIndex];
      currentBlock.alpha = 0;
      if (showFractions) {
        currentBlock.fraction.labels[0].alpha = 0;
        currentBlock.fraction.labels[1].alpha = 0;
        if (currentBlock.fraction.labels[2])
          currentBlock.fraction.labels[2].alpha = 0;
      }

      const curSignString = currentBlock.fraction.labels[1].name;
      const curSign = game.add.text(
        100 + self.stack.curIndex * 100 - 50,
        500,
        curSignString == '-' ? '-' : '+',
        font
      );
      curSign.alpha = self.stack.curIndex == 0 && curSignString == '' ? 0 : 1;
      self.operation.push(curSign);

      // if (self.stack.curIndex > 0) {
      //   self.operation.push(
      //     game.add.text(
      //       100 + self.stack.curIndex * 100 - 50,
      //       500,
      //       currentBlock.fraction.labels[1].name === '-' ? '-' : '+',
      //       font
      //     )
      //   );
      // } else {
      //   const sign = game.add.text(
      //     100 + self.stack.curIndex * 100 - 50,
      //     500,
      //     currentBlock.fraction.labels[1].name === '-' ? '-' : '+',
      //     font
      //   );
      //   sign.alpha = 0;
      //   self.operation.push(sign);
      // }
      const fractionResult = game.add.text(
        100 + self.stack.curIndex * 100,
        500,
        currentBlock.fraction.labels[0].name,
        font
      );
      fractionResult.lineHeight = 70;
      self.operation.push(fractionResult);

      game.add.geom.line(
        100 + self.stack.curIndex * 100,
        500 + 13,
        100 + self.stack.curIndex * 100 + 40,
        500 + 13,
        4,
        colors.black,
        currentBlock.fraction.labels[0].name.split('\n').length === 1 ? 0 : 1
      );

      const isLastFloorBlock = self.floor.curIndex === self.floor.selectedIndex;
      const notEnoughStackBlocks =
        self.stack.curIndex === self.stack.list.length - 1;

      if (isLastFloorBlock || notEnoughStackBlocks) return false;

      // update stack blocks
      self.stack.curIndex++;
      self.stack.curBlockEndX +=
        self.stack.list[self.stack.curIndex].width * self.control.direc;

      return true;
    },
    checkAnswerHandler: () => {
      game.timer.stop();

      game.animation.stop(self.tractor.animation[0]);

      if (gameMode === 'a') self.ui.arrow.alpha = 0;

      self.control.isCorrect =
        gameMode === 'a'
          ? self.floor.selectedIndex === self.floor.correctIndex
          : self.stack.selectedIndex === self.stack.correctIndex;

      const x = self.utils.renderOperationUI();

      // Give feedback to player and turns on sprite animation
      if (self.control.isCorrect) {
        completedLevels++; // Increases number os finished levels
        if (audioStatus) game.audio.okSound.play();
        game.animation.play(self.tractor.animation[0]);
        game.add
          .image(x + 50, context.canvas.height / 3, 'answer_correct')
          .anchor(0.5, 0.5);
        if (isDebugMode) console.log('Completed Levels: ' + completedLevels);
      } else {
        if (audioStatus) game.audio.errorSound.play();
        game.add
          .image(x, context.canvas.height / 3, 'answer_wrong')
          .anchor(0.5, 0.5);
      }

      self.fetch.postScore();

      self.control.checkAnswer = false;
      self.animation.animateEnding = true;
    },
    animateEndingHandler: () => {
      // ANIMATE ENDING
      self.control.count++;

      // If CORRECT ANSWER runs final tractor animation (else tractor desn't move, just wait)
      if (self.control.isCorrect) self.tractor.x += self.animation.speed;

      if (self.control.count === 100) {
        self.utils.renderEndUI();
        self.control.showEndInfo = true;

        if (self.control.isCorrect) canGoToNextMapPosition = true;
        else canGoToNextMapPosition = false;
      }
    },
    endLevel: () => {
      game.state.start('map');
    },

    // INFORMATION
    /**
     * Display correct answer
     */
    showAnswer: () => {
      // On gameMode (a)
      if (gameMode == 'a') {
        const aux = self.floor.list[0];
        self.ui.help.x =
          self.floor.correctX - (aux.width / 2) * self.control.direc;
        self.ui.help.y = self.default.y0;
        // On gameMode (b)
      } else {
        const aux = self.stack.list[self.stack.correctIndex];
        self.ui.help.x = aux.x + (aux.width / 2) * self.control.direc;
        self.ui.help.y = aux.y;
      }

      if (!self.control.hasClicked) {
        self.ui.help.alpha = 0.7;
      }
    },

    // EVENT HANDLERS
    /**
     * Function called by self.events.onInputDown() when player clicks on a valid rectangle.
     */
    clickHandler: (clickedIndex, curSet) => {
      if (!self.control.hasClicked && !self.animation.animateEnding) {
        document.body.style.cursor = 'auto';
        // Play beep sound
        if (audioStatus) game.audio.popSound.play();

        // Disable show answer nav icon
        navigation.disableIcon(navigation.showAnswerIcon);
        // Hide intro message
        self.ui.message[0].alpha = 0;

        // Hide solution pointer
        if (self.ui.help != undefined) self.ui.help.alpha = 0;
        // Hide unselected blocks
        for (let i = curSet.list.length - 1; i > clickedIndex; i--) {
          curSet.list[i].alpha = 0;
          if (gameMode === 'b') {
            // Hide unselected blocks fractions
            curSet.list[i].fraction.labels.forEach((lbl) => {
              if (lbl) lbl.alpha = 0;
            });
          }
        }

        // Save selected index
        curSet.selectedIndex = clickedIndex;

        if (gameMode == 'a') {
          self.ui.arrow.alpha = 0;
        } else {
          // update list size
          self.stack.list.length = curSet.selectedIndex + 1;
        }

        // Turn tractor animation on
        game.animation.play(self.tractor.animation[0]);
        self.animation.animateTractor = true;
        self.control.hasClicked = true;
      }
    },
    /**
     * Function called by self.events.onInputOver() when cursor is over a valid rectangle
     *
     * @param {object} cur rectangle the cursor is over
     */
    overHandler: (cur) => {
      if (!self.control.hasClicked) {
        document.body.style.cursor = 'pointer';

        if (gameMode === 'a') {
          for (let i in self.floor.list) {
            self.floor.list[i].fillColor =
              i <= cur.blockIndex ? colors.blueBgInsideLevel : 'transparent';
          }
          self.floor.selectedIndex = cur.blockIndex;
        } else {
          for (let i in self.stack.list) {
            const alpha = i <= cur.blockIndex ? 1 : 0.4;

            self.stack.list[i].alpha = alpha;
            if (showFractions) {
              self.stack.list[i].fraction.labels.forEach((lbl) => {
                if (lbl) lbl.alpha = alpha;
              });
            }
          }
          self.stack.selectedIndex = cur.blockIndex;
        }
      }
    },
    /**
     * Function called by self.events.onInputOver() when cursos is out of a valid rectangle
     */
    outHandler: () => {
      if (!self.control.hasClicked) {
        document.body.style.cursor = 'auto';

        if (gameMode === 'a') {
          for (let i in self.floor.list) {
            self.floor.list[i].fillColor = 'transparent';
          }
          self.floor.selectedIndex = undefined;
        } else {
          for (let i in self.stack.list) {
            self.stack.list[i].alpha = 1;
            if (showFractions) {
              self.stack.list[i].fraction.labels.forEach((lbl) => {
                if (lbl) lbl.alpha = 1;
              });
            }
          }
          self.stack.selectedIndex = undefined;
        }
      }
    },
  },

  events: {
    /**
     * Called by mouse click event
     *
     * @param {object} mouseEvent contains the mouse click coordinates
     */
    onInputDown: (mouseEvent) => {
      const x = game.math.getMouse(mouseEvent).x;
      const y = game.math.getMouse(mouseEvent).y;

      // click blocks
      const curSet = gameMode == 'a' ? self.floor : self.stack;
      for (let i in curSet.list) {
        if (game.math.isOverIcon(x, y, curSet.list[i])) {
          self.utils.clickHandler(+i, curSet);
          break;
        }
      }

      // Continue button
      if (self.control.showEndInfo) {
        if (game.math.isOverIcon(x, y, self.ui.continue.button)) {
          if (audioStatus) game.audio.popSound.play();
          self.utils.endLevel();
        }
      }

      navigation.onInputDown(x, y);

      game.render.all();
    },

    /**
     * Called by mouse move event
     *
     * @param {object} mouseEvent contains the mouse move coordinates
     */
    onInputOver: (mouseEvent) => {
      const x = game.math.getMouse(mouseEvent).x;
      const y = game.math.getMouse(mouseEvent).y;
      let isOverFloor = false;
      let isOverStack = false;

      if (gameMode == 'a') {
        self.floor.list.forEach((cur) => {
          // hover floor blocks
          if (game.math.isOverIcon(x, y, cur)) {
            isOverFloor = true;
            self.utils.overHandler(cur);
          }
          // move arrow
          if (
            !self.control.hasClicked &&
            !self.animation.animateEnding &&
            game.math.isOverIcon(x, self.default.y0, cur)
          ) {
            self.ui.arrow.x = x;
          }
        });

        if (!isOverFloor) self.utils.outHandler('a');
      }

      if (gameMode == 'b') {
        // hover stack blocks
        self.stack.list.forEach((cur) => {
          if (game.math.isOverIcon(x, y, cur)) {
            isOverStack = true;
            self.utils.overHandler(cur);
          }
        });
        if (!isOverStack) self.utils.outHandler('b');
      }

      // Continue button
      if (self.control.showEndInfo) {
        if (game.math.isOverIcon(x, y, self.ui.continue.button)) {
          // 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
          document.body.style.cursor = 'auto';
          self.ui.continue.button.scale =
            self.ui.continue.button.initialScale * 1;
          self.ui.continue.text.style = textStyles.btn;
        }
      }

      navigation.onInputOver(x, y);

      game.render.all();
    },
  },

  fetch: {
    /**
     * Saves players data after level ends - to be sent to database <br>
     *
     * Attention: the 'line_' prefix data table must be compatible to data table fields (MySQL server)
     *
     * @see /php/save.php
     */
    postScore: () => {
      // Creates string that is going to be sent to db
      const data =
        '&line_game=' +
        gameShape +
        '&line_mode=' +
        gameMode +
        '&line_oper=' +
        gameOperation +
        '&line_leve=' +
        gameDifficulty +
        '&line_posi=' +
        curMapPosition +
        '&line_resu=' +
        self.control.isCorrect +
        '&line_time=' +
        game.timer.elapsed +
        '&line_deta=' +
        'numBlocks:' +
        self.stack.list.length +
        ', valBlocks: ' +
        self.control.divisorsList + // Ends in ','
        ' blockIndex: ' +
        self.stack.selectedIndex +
        ', floorIndex: ' +
        self.floor.selectedIndex;

      // FOR MOODLE
      sendToDatabase(data);
    },
  },
};