Ifractions-web/js/games/scaleOne.js

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

/** [GAME STATE]
 *
 *  ...
 *
 * @namespace
 */
const scaleOne = {
  control: undefined,

  scale: undefined,
  icicles: undefined,
  icicleFractions: undefined,
  gameIcicle: undefined,

  /**
   * Main code
   */
  create: function () {
    this.control = {
      scale: {
        x0: (context.canvas.width / 3) * 2,
        y0: context.canvas.height - 128,
        move: {
          center: 0,
          left: -15,
          right: 15,
        },
        coordinates: undefined,
      },
      icicles: {
        x0: 100,
        y0: 197,
        coordinates: undefined,
        fractions: [
          // { nom: 1, denom: 2 },
          // { nom: 1, denom: 3 },
          // { nom: 1, denom: 4 },
          { nom: 1, denom: 2 },
          { nom: 1, denom: 3 },
          { nom: 1, denom: 4 },
        ],
      },
    };
    this.control.scale.coordinates = {
      base: {
        x: this.control.scale.x0,
        y: this.control.scale.y0,
      },
      top: {
        x: this.control.scale.x0,
        y: this.control.scale.y0 - 170,
      },
      plate_left: {
        x: this.control.scale.x0 - 258,
        y: this.control.scale.y0 - 200,
      },
      plate_right: {
        x: this.control.scale.x0 + 258,
        y: this.control.scale.y0 - 200,
      },
    };
    this.control.icicles.coordinates = [
      // { x: this.control.icicles.x0, y: this.control.icicles.y0 },
      // { x: this.control.icicles.x0 + 160, y: this.control.icicles.y0 },
      // {
      //   x: this.control.icicles.x0 + 160 * 2,
      //   y: this.control.icicles.y0,
      // },
      {
        x: this.control.icicles.x0,
        y: this.control.icicles.y0 + 160 * 1.5,
      },
      {
        x: this.control.icicles.x0 + 160,
        y: this.control.icicles.y0 + 160 * 1.5,
      },
      {
        x: this.control.icicles.x0 + 160 * 2,
        y: this.control.icicles.y0 + 160 * 1.5,
      },
    ];

    this.scale = {
      base: null,
      top: null,
      plate_left: null,
      plate_right: null,
    };
    this.icicles = [];
    this.icicleFractions = [];

    renderBackground('scale');

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

    this.utils.render.scale();
    this.utils.render.icicles();

    this.gameIcicle = game.add.sprite(
      this.scale.plate_left.x,
      this.scale.plate_left.y - 50,
      'floor_snow',
      2,
      2
    );
    this.gameIcicle.anchor(0.5, 1);
    this.gameIcicleFraction = game.add.text(
      this.gameIcicle.x,
      this.gameIcicle.y - 50,
      '1/2',
      textStyles.h2_
    );
    this.utils.animate.moveScale('left');

    // this.counter = 0;
    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 () {
    // self.counter++;
    game.render.all();
  },

  utils: {
    render: {
      scale: () => {
        // base of the scale
        self.scale.base = game.add.image(
          self.control.scale.coordinates.base.x,
          self.control.scale.coordinates.base.y,
          'scale_base',
          2
        );
        // top of the scale
        self.scale.top = game.add.image(
          self.control.scale.coordinates.top.x,
          self.control.scale.coordinates.top.y,
          'scale_arm',
          2
        );
        self.scale.top.rotate = self.control.scale.rotate;
        // left plate
        self.scale.plate_left = game.add.image(
          self.control.scale.coordinates.plate_left.x,
          self.control.scale.coordinates.plate_left.y,
          'scale_plate',
          2
        );
        // right plate
        self.scale.plate_right = game.add.image(
          self.control.scale.coordinates.plate_right.x,
          self.control.scale.coordinates.plate_right.y,
          'scale_plate',
          2
        );
        for (let item in self.scale) {
          if (self.scale[item] !== null) self.scale[item].anchor(0.5, 1);
        }
      },
      icicles: () => {
        for (let i = 0; i < self.control.icicles.coordinates.length; i++) {
          const x = self.control.icicles.coordinates[i].x;
          const y = self.control.icicles.coordinates[i].y;

          const icicle = game.add.sprite(x, y, 'floor_snow', 2, 2);
          self.icicles.push(icicle);

          const fractionTop = game.add.text(
            x + 65,
            y + 120,
            '1',
            textStyles.h2_
          );
          const fractionLine = game.add.text(
            x + 65,
            y + 120 + 3,
            '__',
            textStyles.h2_
          );
          const fractionBottom = game.add.text(
            x + 65,
            y + 120 * 1.4,
            '2',
            textStyles.h2_
          );
          self.icicleFractions.push({
            fractionTop,
            fractionLine,
            fractionBottom,
          });
        }
      },
    },
    animate: {
      moveScale: (type) => {
        const leftY = self.control.scale.coordinates.plate_left.y;
        const rightY = self.control.scale.coordinates.plate_right.y;
        let leftOffset = (rightOffset = 0);
        let icicleOffset = 50;

        switch (type) {
          case 'left':
            self.scale.top.rotate = self.control.scale.move.left;
            leftOffset = 80;
            rightOffset = -40;
            break;
          case 'right':
            self.scale.top.rotate = self.control.scale.move.right;
            leftOffset = -40;
            rightOffset = 80;
            break;
          case 'center':
            self.scale.top.rotate = self.control.scale.move.center;
            leftOffset = 0;
            rightOffset = 0;
            break;
          default:
            console.error('Game error: could not render scale animation.');
        }

        self.scale.plate_left.y = leftY + leftOffset;
        self.scale.plate_right.y = rightY + rightOffset;
        self.gameIcicle.y = leftY + leftOffset - icicleOffset;
        self.gameIcicleFraction.y = leftY + leftOffset - icicleOffset * 2;
      },
    },
    /**
     * Display correct answer
     */
    showAnswer: function () {},
  },
  events: {
    /**
     * Function called by self.onInputOver() when cursor is over a valid rectangle
     *
     * @param {object} cur rectangle the cursor is over
     */
    overIcicleHandler: function (cur) {
      // for (let i in self.icicles) {
      //   if (i === cur.index) {
      //     self.icicles[i].scale = 1.2;
      //   }
      // }
    },

    /**
     * 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;
      // 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 = game.math.getMouse(mouseEvent).x;
      // const y = game.math.getMouse(mouseEvent).y;
      // self.icicles.forEach((icicle) => {
      //   if (game.math.isOverIcon(x, y, icicle)) {
      //     self.overIcicleHandler(icicle);
      //   }
      // });
      // navigationIcons.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: function () {},
  },
};