iassign/ilm/iFractions/0.1.20200221/ifractions/js/squareTwo.js

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

/** [GAME STATE]
 *  
 * .squareTwo. = gameType
 * .../...\...
 * ..A.....B.. = gameMode
 * ....\./....
 * .....|.....
 * ...Equals.. = gameOperation
 * .....|.....
 * .1,2,3,4,5. = gameDifficulty
 * 
 * Character : kid
 * Theme : (not themed)
 * Concept : player select equivalent dividends for fractions with different divisors
 * Represent fractions as : subdivided rectangles
 *
 * Game modes can be :
 * 
 *   A : equivalence of fractions 
 *       top has more subdivisions
 *   B : equivalence of fractions
 *       bottom has more subdivisions
 * 
 * Operations :
 *
 *   Equals : Player selects equivalent fractions of both blocks 
 * 
 * @namespace
 */
const squareTwo = {

  /**
   * Main code
   */
  create: function () {
    // CONTROL VARIABLES

    this.result = false;    // Check if selected blocks are correct
    this.delay = 0;         // Counter for game dalays
    this.endLevel = false;

    this.A = {
      blocks: [],     // List of selection blocks
      auxBlocks: [],  // List of shadow under selection blocks
      fractions: [],  // Fraction numbers
      selected: 0,    // Number of selected blocks for A
      hasClicked: false,  // Check if player clicked blocks from A
      animate: false,     // Animate blocks from A
      warningText: undefined,
      label: undefined,
    };

    this.B = {
      blocks: [],
      auxBlocks: [],
      fractions: [],
      selected: 0,
      hasClicked: false,
      animate: false,
      warningText: undefined,
      label: undefined,
    };

    // BACKGROUND AND KID
    // Add background image
    game.add.image(0, 0, 'bgimage');
    // Add clouds
    game.add.image(300, 100, 'cloud');
    game.add.image(660, 80, 'cloud');
    game.add.image(110, 85, 'cloud', 0.8);

    // Add floor of grass
    for (let i = 0; i < 9; i++) { game.add.image(i * 100, defaultHeight - 100, 'floor'); }

    // Calls function that loads navigation icons

    // FOR MOODLE
    if (moodle) {
      navigationIcons.add(
        false, false, false, // Left buttons
        true, false,         // Right buttons
        false, false);
    } else {
      navigationIcons.add(
        true, true, false, // Left buttons
        true, false,       // Right buttons
        'customMenu', false);
    }

    // Add kid
    this.kidAnimation = game.add.sprite(100, defaultHeight - 128, 'kid_standing', 5, 0.8);
    this.kidAnimation.anchor(0.5, 0.7);

    // Width and Height of A and B
    this.figureWidth = 400;
    const figureHeight = 50;

    // Coordinates for A and B
    let xA, xB, yA, yB;
    if (gameMode != 'B') { // More subdivisions on B
      xA = 230;
      yA = 90;
      xB = xA;
      yB = yA + 3 * figureHeight + 30;
    } else { // More subdivisions on A
      xB = 230;
      yB = 90;
      xA = xB;
      yA = yB + 3 * figureHeight + 30;
    }

    // Possible points for A
    const points = [2, 4, 6, 8, 9, 10, 12, 14, 15, 16, 18, 20];

    // Random index for 'points'
    const randomIndex = game.math.randomInRange((gameDifficulty - 1) * 2 + 1, (gameDifficulty - 1) * 2 + 3);

    // Number of subdivisions of A and B (blocks)
    const totalBlocksA = points[randomIndex];
    const totalBlocksB = game.math.randomDivisor(totalBlocksA);

    if (debugMode) {
      console.log('Difficulty: ' + gameDifficulty +
        '\ncur index: ' + randomIndex + ', (min index: ' + ((gameDifficulty - 1) * 2 + 1) + ', max index: ' + ((gameDifficulty - 1) * 2 + 3) + ')' +
        '\ntotal blocks A: ' + totalBlocksA + ', total blocks B: ' + totalBlocksB);
    }

    // CREATING TOP FIGURE (A)
    let blockWidth = this.figureWidth / totalBlocksA; // Width of each block in A
    let lineColor = colors.darkRed;
    let fillColor = colors.lightRed;

    // Create blocks
    for (let i = 0; i < totalBlocksA; i++) {
      const x = xA + i * blockWidth;

      // Blocks
      const block = game.add.geom.rect(x, yA, blockWidth, figureHeight, lineColor, 2, fillColor, 0.5);
      block.figure = 'A';
      block.index = i;
      block.finalX = xA;
      this.A.blocks.push(block);

      // Auxiliar blocks
      const alpha = (fractionLabel) ? 0.1 : 0;

      const yAux = yA + figureHeight + 10; // On the bottom of A
      const auxBlock = game.add.geom.rect(x, yAux, blockWidth, figureHeight, lineColor, 1, fillColor, alpha);
      this.A.auxBlocks.push(auxBlock);
    }

    // 'total blocks' label for A : on the side of A
    let xLabel = xA + this.figureWidth + 30;
    let yLabel = yA + figureHeight / 2;

    this.A.label = game.add.text(xLabel, yLabel, this.A.blocks.length, textStyles.h4_blue);

    // 'selected blocks/fraction' label for A : at the bottom of A
    yLabel = yA + figureHeight + 34;

    this.A.fractions[0] = game.add.text(xLabel, yLabel, '', textStyles.h4_blue);
    this.A.fractions[1] = game.add.text(xLabel, yLabel + 21, '', textStyles.h4_blue);
    this.A.fractions[2] = game.add.text(xLabel, yLabel, '___', textStyles.h4_blue);
    this.A.fractions[0].alpha = 0;
    this.A.fractions[1].alpha = 0;
    this.A.fractions[2].alpha = 0;

    // CREATING BOTTOM FIGURE (B)
    blockWidth = this.figureWidth / totalBlocksB; // Width of each block in B
    lineColor = colors.darkGreen;
    fillColor = colors.lightGreen;

    // Blocks and auxiliar blocks
    for (let i = 0; i < totalBlocksB; i++) {
      const x = xB + i * blockWidth;

      // Blocks
      const block = game.add.geom.rect(x, yB, blockWidth, figureHeight, lineColor, 2, fillColor, 0.5);
      block.figure = 'B';
      block.index = i;
      block.finalX = xB;
      this.B.blocks.push(block);

      // Auxiliar blocks
      const alpha = (fractionLabel) ? 0.1 : 0;
      const yAux = yB + figureHeight + 10; // On the bottom of B
      const auxBlock = game.add.geom.rect(x, yAux, blockWidth, figureHeight, lineColor, 1, fillColor, alpha);
      this.B.auxBlocks.push(auxBlock);
    }

    // Label block B
    xLabel = xB + this.figureWidth + 30;
    yLabel = yB + figureHeight / 2;

    this.B.label = game.add.text(xLabel, yLabel, this.B.blocks.length, textStyles.h4_blue);

    // Label fraction
    yLabel = yB + figureHeight + 34;

    this.B.fractions[0] = game.add.text(xLabel, yLabel, '', textStyles.h4_blue);
    this.B.fractions[1] = game.add.text(xLabel, yLabel + 21, '', textStyles.h4_blue);
    this.B.fractions[2] = game.add.text(xLabel, yLabel, '___', textStyles.h4_blue);
    this.B.fractions[0].alpha = 0;
    this.B.fractions[1].alpha = 0;
    this.B.fractions[2].alpha = 0;

    // Invalid selection text
    this.A.warningText = game.add.text(defaultWidth / 2, defaultHeight / 2 - 225, '', textStyles.h4_brown);
    this.B.warningText = game.add.text(defaultWidth / 2, defaultHeight / 2 - 45, '', textStyles.h4_brown);

    game.timer.start(); // Set a timer for the current level (used in postScore)

    game.event.add('click', this.onInputDown);
    game.event.add('mousemove', this.onInputOver);
  },

  /**
   * Game loop
   */
  update: function () {
    // Animate blocks
    if (self.A.animate || self.B.animate) {
      ['A', 'B'].forEach(cur => {
        if (self[cur].animate) {
          // Lower selected blocks
          for (let i = 0; i < self[cur].selected; i++) {
            self[cur].blocks[i].y += 2;
          }

          // After fully lowering blocks, set fraction value
          if (self[cur].blocks[0].y >= self[cur].auxBlocks[0].y) {
            self[cur].fractions[0].name = self[cur].selected;
            self[cur].animate = false;
          }
        }
      });
    }

    // If A and B are already clicked
    if (self.A.hasClicked && self.B.hasClicked && !self.endLevel) {
      game.timer.stop();
      self.delay++;

      // After delay is over, check result
      if (self.delay > 50) {
        self.result = (self.A.selected / self.A.blocks.length) == (self.B.selected / self.B.blocks.length);

        // Fractions are equivalent : CORRECT
        if (self.result) {
          if (audioStatus) game.audio.okSound.play();

          game.add.image(defaultWidth / 2, defaultHeight / 2, 'ok').anchor(0.5, 0.5);
          mapMove = true; // Allow character to move to next level in map state
          completedLevels++;

          if (debugMode) console.log('Completed Levels: ' + completedLevels);

          // Fractions are not equivalent : INCORRECT
        } else {
          if (audioStatus) game.audio.errorSound.play();
          game.add.image(defaultWidth / 2, defaultHeight / 2, 'error').anchor(0.5, 0.5);
          mapMove = false; // Doesnt allow character to move to next level in map state
        }

        self.postScore();
        self.endLevel = true;

        // Reset delay values for next delay
        self.delay = 0;
      }
    }

    // Wait a bit and go to map state
    if (self.endLevel) {
      self.delay++;

      if (self.delay >= 80) {
        game.state.start('map');
      }
    }

    game.render.all();
  },

  /**
   * Function called by self.onInputOver() when cursor is over a valid rectangle.
   * 
   * @param {object} curBlock rectangle the cursor is over : can be self.A.blocks[i] or self.B.blocks[i]
   */
  overSquare: function (curBlock) {
    const curSet = curBlock.figure; // 'A' || 'B'

    if (!self[curSet].hasClicked) { // self.A.hasClicked || self.B.hasClicked 
      // If over fraction 'n/n' shows warning message not allowing it
      if (curBlock.index == self[curSet].blocks.length - 1) {
        const otherSet = (curSet == 'A') ? 'B' : 'A';

        self[curSet].warningText.name = game.lang.s2_error_msg;
        self[otherSet].warningText.name = '';

        self.outSquare(curSet);
      } else {
        document.body.style.cursor = 'pointer';

        self.A.warningText.name = '';
        self.B.warningText.name = '';

        // Selected blocks become fully visible
        for (let i in self[curSet].blocks) {
          self[curSet].blocks[i].alpha = (i <= curBlock.index) ? 1 : 0.5;
        }

        self[curSet].fractions[0].name = curBlock.index + 1; // Nominator : selected blocks
        self[curSet].fractions[1].name = self[curSet].blocks.length; // Denominator : total blocks

        const newX = curBlock.finalX + ((curBlock.index + 1) * (self.figureWidth / self[curSet].blocks.length)) + 25;
        self[curSet].fractions[0].x = newX;
        self[curSet].fractions[1].x = newX;
        self[curSet].fractions[2].x = newX;

        self[curSet].fractions[0].alpha = 1;
      }
    }
  },

  /**
   * Function called (by self.onInputOver() and self.overSquare()) when cursor is out of a valid rectangle.
   * 
   * @param {object} curSet set of rectangles : can be top (self.A) or bottom (self.B)
   */
  outSquare: function (curSet) {
    if (!self[curSet].hasClicked) {
      self[curSet].fractions[0].alpha = 0;
      self[curSet].fractions[1].alpha = 0;
      self[curSet].fractions[2].alpha = 0;

      self[curSet].blocks.forEach(cur => {
        cur.alpha = 0.5;
      });
    }
  },

  /**
   * Function called by self.onInputDown() when player clicked a valid rectangle.
   * 
   * @param {object} curBlock clicked rectangle : can be self.A.blocks[i] or self.B.blocks[i]
   */
  clickSquare: function (curBlock) {
    const curSet = curBlock.figure; // 'A' || 'B'

    if (!self[curSet].hasClicked && curBlock.index != self[curSet].blocks.length - 1) {
      document.body.style.cursor = 'auto';

      // Turn auxiliar blocks invisible
      for (let i in self[curSet].blocks) {
        if (i > curBlock.index) self[curSet].auxBlocks[i].alpha = 0;
      }

      // Turn value label invisible
      self[curSet].label.alpha = 0;

      if (audioStatus) game.audio.beepSound.play();

      // Save number of selected blocks
      self[curSet].selected = curBlock.index + 1;

      // Set fraction x position
      const newX = curBlock.finalX + (self[curSet].selected * (self.figureWidth / self[curSet].blocks.length)) + 25;
      self[curSet].fractions[0].x = newX;
      self[curSet].fractions[1].x = newX;
      self[curSet].fractions[2].x = newX;

      self[curSet].fractions[1].alpha = 1;
      self[curSet].fractions[2].alpha = 1;

      self[curSet].hasClicked = true; // Inform player have clicked in current block set
      self[curSet].animate = true; // Let it initiate animation
    }

    game.render.all();
  },

  /**
   * Called by mouse click event
   * 
   * @param {object} mouseEvent contains the mouse click coordinates
   */
  onInputDown: function (mouseEvent) {
    const x = mouseEvent.offsetX;
    const y = mouseEvent.offsetY;

    // Click block in A
    self.A.blocks.forEach(cur => {
      if (game.math.isOverIcon(x, y, cur)) self.clickSquare(cur);
    });

    // Click block in B
    self.B.blocks.forEach(cur => {
      if (game.math.isOverIcon(x, y, cur)) self.clickSquare(cur);
    });

    // Click navigation icons
    navigationIcons.onInputDown(x, y);

    game.render.all();
  },

  /**
   * Called by mouse move event
   * 
   * @param {object} mouseEvent contains the mouse move coordinates
   */
  onInputOver: function (mouseEvent) {
    const x = mouseEvent.offsetX;
    const y = mouseEvent.offsetY;
    let flagA = false;
    let flagB = false;

    // Mouse over A : show fraction
    self.A.blocks.forEach(cur => {
      if (game.math.isOverIcon(x, y, cur)) {
        flagA = true;
        self.overSquare(cur);
      }
    });
    if (!flagA) self.outSquare('A');

    // Mouse over B : show fraction
    self.B.blocks.forEach(cur => {
      if (game.math.isOverIcon(x, y, cur)) {
        flagB = true;
        self.overSquare(cur);
      }
    });
    if (!flagB) self.outSquare('B');

    if (!flagA && !flagB) document.body.style.cursor = 'auto';

    // Mouse over navigation icons : show name
    navigationIcons.onInputOver(x, y);

    game.render.all();
  },

  /**
   * 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: function () {
    // Creates string that is going to be sent to db
    const data = '&line_game=' + gameShape
      + '&line_mode=' + gameMode
      + '&line_oper=Equal'
      + '&line_leve=' + gameDifficulty
      + '&line_posi=' + mapPosition
      + '&line_resu=' + self.result
      + '&line_time=' + game.timer.elapsed
      + '&line_deta='
      + 'numBlocksA: ' + self.A.blocks.length
      + ', valueA: ' + self.A.selected
      + ', numBlocksB: ' + self.B.blocks.length
      + ', valueB: ' + self.B.selected;

    // FOR MOODLE
    sendToDB(data);
  }

};