Ifractions-web/src/js/screens/map.js

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

/** [MAP STATE] Screen that shows the 4 generated levels in a map (and the level where the player is currently in).
 *
 * @namespace
 */
const mapState = {
  /**
   * Main code
   */
  create: function () {
    let x0 = 306;
    let y0 = 161;
    this.scene = {
      rocks: {
        x: [x0 + 172, x0 + 604, x0 + 353],
        y: [y0 + 319, y0 + 88, y0 + 667, ,],
      },
      bushes: {
        x: [x0 + 344, x0 + 822, x0 + 1006, x0 + 613],
        y: [y0 + 224, y0 + 43, y0 + 310, y0 + 464],
      },
      trees: {
        x: [
          x0 + 26,
          x0 + 776,
          x0 + 401,
          x0 + 1006,
          x0 + 204,
          x0 + 1065,
          x0 + 435,
          x0 + 728,
        ],
        y: [
          y0 + 174,
          y0 + 250,
          y0 - 67,
          y0 + 417,
          y0 + 16,
          y0 + 116,
          y0 + 435,
          y0 + 511,
        ],
        type: [2, 2, 3, 4, 4, 4, 4, 1],
      },
      roadPoints: {
        x: [x0 + 78, x0 + 251, x0 + 424, x0 + 598, x0 + 770, x0 + 943],
        y: [y0 + 629, y0 + 536, y0 + 443, y0 + 347, y0 + 252, y0 + 159],
      },
    };
    this.waitUserAction = false;

    renderBackground('plain');

    // Map
    game.add.image(x0, y0, 'bg_map', 1.5);

    // Buildings
    gameList[gameId].assets.map.startBuilding();
    gameList[gameId].assets.map.endBuilding();

    // Rocks
    for (let i in this.scene.rocks.x) {
      game.add.image(
        this.scene.rocks.x[i],
        this.scene.rocks.y[i],
        'rock',
        0.48
      );
    }

    // Bushes
    for (let i in this.scene.bushes.x) {
      game.add.image(
        this.scene.bushes.x[i],
        this.scene.bushes.y[i],
        'bush',
        0.59
      );
    }

    // Trees
    for (let i in this.scene.trees.x) {
      game.add.image(
        this.scene.trees.x[i],
        this.scene.trees.y[i],
        'tree_' + this.scene.trees.type[i],
        0.9
      );
    }

    //Road points
    for (let i = 1; i < this.scene.roadPoints.x.length - 1; i++) {
      const frame =
        i < curMapPosition || (canGoToNextMapPosition && i == curMapPosition)
          ? 1
          : 0;
      // Road points (game levels)
      game.add.sprite(
        this.scene.roadPoints.x[i],
        this.scene.roadPoints.y[i],
        'map_place',
        frame,
        0.45
      );
      // Road signs
      game.add.image(
        this.scene.roadPoints.x[i] - 40,
        this.scene.roadPoints.y[i] - 154,
        'sign',
        0.7
      );
      game.add.text(
        this.scene.roadPoints.x[i],
        this.scene.roadPoints.y[i] - 104,
        i,
        {
          ...textStyles.h2_,
          fill: colors.white,
        }
      );
    }

    // Character
    this.character = gameList[gameId].assets.map.character(gameOperation);

    // Character animation
    this.character.animation =
      gameList[gameId].assets.map.characterAnimation(gameOperation);

    game.animation.play(this.character.animation[0]);

    this.moveCounter = 0;

    const speed = 60;
    const xA = this.scene.roadPoints.x[curMapPosition];
    const yA = this.scene.roadPoints.y[curMapPosition];
    const xB = this.scene.roadPoints.x[curMapPosition + 1];
    const yB = this.scene.roadPoints.y[curMapPosition + 1];
    self.speedX = (xB - xA) / speed;
    self.speedY = (yA - yB) / speed;

    // Progress bar
    const percentText = completedLevels * 25;
    x0 = 300;
    y0 = 20;

    game.add.geom.rect(
      context.canvas.width - x0,
      y0,
      completedLevels * 37.5,
      35,
      undefined,
      0,
      completedLevels >= 4 ? colors.greenNeon : colors.yellow,
      1
    );

    game.add.geom.rect(
      context.canvas.width - x0 + 1,
      y0 + 1,
      149,
      34,
      colors.blue,
      3,
      undefined,
      1
    );
    // Status Box
    game.add.text(
      context.canvas.width - x0 + 160,
      y0 + 33,
      percentText + '%',
      textStyles.h2_
    ).align = 'left';
    game.add.text(
      context.canvas.width - x0 - 10,
      y0 + 33,
      game.lang.difficulty + ' ' + gameDifficulty,
      textStyles.h2_
    ).align = 'right';

    // feedback
    this.modalBg = game.add.geom.rect(
      0,
      0,
      context.canvas.width,
      context.canvas.height,
      undefined,
      0,
      colors.white,
      0
    );

    this.continueButton = game.add.geom.rect(
      context.canvas.width / 2,
      context.canvas.height / 2,
      300,
      100,
      undefined,
      0,
      colors.green,
      0
    );
    this.continueButton.anchor(0.5, 0.5);

    // continue
    // try again?
    this.continueText = game.add.text(
      context.canvas.width / 2,
      context.canvas.height / 2 + 16,
      game.lang.continue,
      textStyles.btn
    );
    this.continueText.alpha = 0;

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

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

  /**
   * Game loop
   */
  update: function () {
    self.moveCounter++;

    if (isDebugMode && debugState.end.status) {
      curMapPosition = 4;
    }

    if (isDebugMode && debugState.map.status) {
      // programmatically skip map
      curMapPosition++;
      self.loadGame();
    }

    if (self.moveCounter > 60) {
      // Wait 1 second before moving or staring a game

      if (canGoToNextMapPosition) {
        // Move character on screen for 1 second
        self.character.x += self.speedX;
        self.character.y -= self.speedY;
        if (
          Math.ceil(self.character.x) >=
          self.scene.roadPoints.x[curMapPosition + 1]
        ) {
          // Reached next map position
          canGoToNextMapPosition = false;
          curMapPosition++; // Set new next position
        }
      }

      if (!canGoToNextMapPosition) {
        self.waitUserAction = true;
        self.modalBg.alpha = 0.25;
        self.continueText.alpha = 1;
        self.continueButton.alpha = 1;
        //endUpdate = true;
      }
    }

    game.render.all();
  },

  /**
   * Calls game state
   */
  loadGame: function () {
    if (curMapPosition <= 4) game.state.start('' + gameName);
    else game.state.start('end');
  },

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

    if (game.math.isOverIcon(x, y, self.continueButton)) {
      self.loadGame();
    }

    navigationIcons.onInputDown(x, y);
  },

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

    if (game.math.isOverIcon(x, y, self.continueButton)) {
      overIcon = true;
    }

    // Update gui
    if (overIcon) {
      // If pointer is over icon
      document.body.style.cursor = 'pointer';
      self.continueButton.scale = self.continueButton.originalScale * 1.1;
      self.continueText.style = textStyles.btnLg;
    } else {
      // If pointer is not over icon
      self.continueButton.scale = self.continueButton.originalScale * 1;
      self.continueText.style = textStyles.btn;
      document.body.style.cursor = 'auto';
    }

    navigationIcons.onInputOver(x, y);
  },
};