Ifractions-web/js/gameMechanics.js

/***************************************************************
 * LInE - Free Education, Private Data - http://www.usp.br/line
 *
 * This file handles all the game mechanics.
 **************************************************************/

/**
 * Variable that handles game mechanics.
 *
 * @namespace
 */
const game = {
  image: {}, // [Not directly used] Holds cached reference to media.
  sprite: {}, // [Not directly used] Holds cached reference to media.
  audio: {}, // Holds cached reference to media - game.audio.<name>.play() plays that audio once.
  lang: {}, // Holds language dictionary in a key-value format - game.lang.<key> returns <value>.

  /** 
   * Handles game states. <br>
   * 
   * When a state is associated with an object 
   * it can accessed using game.state.start('state name'). <br>

   * That way the object can use the especial functions: preload(), create() and update(); 
   * that behave according to the following rules: <br> 
   * - preload() : first function to run when a state is called. Loads media. Runs only once. (is optional) <br>
   * - create() : called right after preload(). Where the main code goes. Runs only once. (must exist) <br>
   * - update() : called right after create(). Is iteratively called by 'game loop' until going to next state. (is optional)
   *
   * @namespace 
   */
  state: {
    // [Not directly used] List of game states.
    list: [],
    // [Not directly used]
    name: undefined,
    // progressBar
    progressBar: undefined,
    progressBarLabel: undefined,
    /**
     * Create new state. <br>
     *
     * After a state is created, the object associated with that state
     * can be called using game.state.start('state name')
     *
     * @param {string} name state name
     * @param {object} obj object that should be called when accessing the state
     */
    add: function (name, obj) {
      game.state.list[name] = obj;
    },
    /**
     * Start new state.
     *
     * Will look for the state's preload() to load the files for the current state.
     * If there is no preload, will call create().
     *
     * @param {string} name state name
     */
    start: function (name) {
      document.body.style.cursor = 'auto'; // Set cursor to default
      game.loop.stop(); // Stop last game loop
      game.event.clear(); // Clears last event queue
      game.animation.clear(); // Clears last animation queue
      game.loadedCur = 0; // Clears last state's number of loaded media
      game.loadedMax = 0; // Clears last state's expected loaded media
      game.state.name = name; // Updates state name
      navigation.list = [];
      self = game.state.list[name]; // Updates self to current state
      if (self.preload) {
        game.render.clear(); // Clears render queue
        // IF there's media to be loaded, creates progress bar
        game.add.geom.rect(
          0,
          0,
          context.canvas.width,
          context.canvas.height,
          colors.blueBg,
          1
        );
        game.add.geom.rect(
          context.canvas.width / 2 - 500 / 2,
          context.canvas.height / 2 - 40 / 2,
          500,
          40,
          colors.white,
          1
        );

        game.state.progressBar = game.add.geom.rect(
          context.canvas.width / 2 - 500 / 2,
          context.canvas.height / 2,
          40,
          40,
          colors.blue,
          0.4
        );
        game.state.progressBar.anchor(0, 0.5);

        game.state.progressBarLabel = game.add.text(
          context.canvas.width / 2,
          context.canvas.height / 2 + 80,
          'Loading...',
          textStyles.h2_
        );

        // Calls state's preload() to load the state's media
        self.preload();
      } else {
        game.state.create();
      }
    },
    /**
     * [Not directly used] Encapsulate create() function in the current state.
     */
    create: function () {
      game.render.clear(); // Clears render queue, removing 'progress bar' if preload() was called
      if (!self.create) {
        console.error(
          "Game error: The state called does not have a 'create' function. Unable to continue."
        );
      } else {
        self.create(); // Calls create()
        game.render.all(); // After create() ends, renders media on canvas
        if (self?.restart) {
          // If needed, restart state
          game.state.start(game.state.name);
        } else {
          if (self.update) game.loop.start(self); // Calls update() if it exists
        }
      }
    },
  },

  loadHandler: {
    cur: 0, // [Not directly used] CURRENT number of cached media (on current state)
    max: 0, // [Not directly used] EXPECTED number of cached media (on current state)
    // [Not directly used] media type and status information
    type: {
      lang: { isLoading: false, cached: 0, length: 0 },
      audio: { isLoading: false, cached: 0, length: 0 },
      image: { isLoading: false, cached: 0, length: 0 },
      sprite: { isLoading: false, cached: 0, length: 0 },
    },
    /** [Not directly used] Removes the urls that are already in the cache.
     *
     * @param {string[]} unfilteredUrls array of urls
     * @param {object} mediaCategory media category
     *
     * @returns {string[]} array of uncached urls
     */
    getUncachedUrlsOnly: function (unfilteredUrls, mediaCategory) {
      const uncachedUrls = [];
      unfilteredUrls.forEach((url) => {
        if (mediaCategory[url[0]] === undefined) uncachedUrls.push(url);
      });
      return uncachedUrls;
    },
    /** [Not directly used] Informs ONE media file was loaded to cache. <br>
     *
     * After ALL FILES of the SAME CATEGORY are cached, calls game.load.cachedAllInOneMediaType()
     *
     * @param {String} mediaType media category (to update the cached files from that category)
     */
    cachedOneFile: function (mediaType) {
      const length = game.loadHandler.type[mediaType].length;

      // Update progress bar on loading screen
      if (length - 1 !== 0) {
        // if (game.state..progressBarLabel?.name) {
        //   game.state..progressBarLabel.name = `${game.loadHandler.cur + 1}/${
        //     game.loadHandler.max
        //   }`;
        // }
        game.state.progressBar.width =
          (500 / game.loadHandler.max) * game.loadHandler.cur;
        game.render.all();
        game.loadHandler.cur++;
        // console.log(game.loadHandler.cur, game.loadHandler.max);
      }
      // If reached last index of current media array
      if (game.loadHandler.type[mediaType].cached >= length - 1) {
        // Resets load manager
        game.loadHandler.type[mediaType].isLoading = false;
        game.loadHandler.type[mediaType].cached = 0;
        game.loadHandler.type[mediaType].length = 0;
        // Informs
        game.loadHandler.cachedAllInOneMediaType();
      } else {
        // Updates
        game.loadHandler.type[mediaType].cached++;
      }
    },
    /** [Not directly used] Informs ALL MEDIA files from the SAME CATEGORY are cached. <br>
     *
     * After ALL CATEGORIES of media are cached, calls create() via game.state. <br>
     * ATTENTION: Do not call create() directly.
     */
    cachedAllInOneMediaType: function () {
      // Checks if finished loading ALL media categories
      let endPreload = true;
      for (let key in game.loadHandler.type) {
        if (game.loadHandler.type[key].isLoading) {
          endPreload = false;
          break;
        }
      }
      // If flag doesnt change, all media is cached
      if (endPreload) {
        game.loadHandler.cur = 0;
        game.loadHandler.max = 0;
        game.state.create();
      }
    },
  },
  /**
   * Loads media files to cache. <br>
   *
   * IMPORTANT: Must ONLY be used inside the function preload(),
   * as it calls create() after all media is cached.
   *
   * @see /js/globals.js for the list of media urls (var url)
   *
   * @namespace
   */
  load: {
    /**
     * Loads language file to cache using Fetch API and
     * saves its content as dictionary on game.lang.
     *
     * @param {string} url url for the selected language
     */
    lang: function (url) {
      game.loadHandler.type.lang.isLoading = true;
      game.loadHandler.type.lang.cached = 0;

      game.lang = {}; // Clear previously loaded language

      fetch(url, { mode: 'same-origin' })
        .then((response) => response.text())
        .then((text) => {
          const lines = text.split('\n');
          game.loadHandler.type.lang.length = lines.length;
          game.loadHandler.max += lines.length;
          lines.forEach((line) => {
            try {
              const msg = line.split('=');
              if (msg.length !== 2)
                throw Error('Game error: sintax error in i18y file');
              game.lang[msg[0].trim()] = msg[1].trim();
            } catch (error) {
              console.error(error.message);
            }
            game.loadHandler.cachedOneFile('lang');
          });
        })
        .catch((error) => {
          console.error(error);
        });
    },
    /**
     * Loads audio files to cache using Fetch API
     * saves references in game.audio.
     *
     * @param {string[]} urls audio urls for the current state
     */
    audio: function (urls) {
      game.loadHandler.type.audio.isLoading = true;
      game.loadHandler.type.audio.cached = 0;

      urls = game.loadHandler.getUncachedUrlsOnly(urls, game.audio);

      game.loadHandler.type.audio.length = urls.length;

      if (urls.length == 0) {
        game.loadHandler.cachedOneFile('audio');
      } else {
        game.loadHandler.max += urls.length;

        urls.forEach((url) => {
          fetch(url[1][1], { mode: 'same-origin' })
            .then((response) => response.blob())
            .then((data) => {
              game.audio[url[0]] = new Audio(URL.createObjectURL(data));
              game.loadHandler.cachedOneFile('audio');
            })
            .catch((error) => {
              console.error(error);
            });
        });
      }
    },
    /**
     * Loads image files to cache using HTMLImageElement
     * saves references in game.image.
     *
     * @param {string[]} urls image urls for the current state
     */
    image: function (urls) {
      game.loadHandler.type.image.isLoading = true;
      game.loadHandler.type.image.cached = 0;

      urls = game.loadHandler.getUncachedUrlsOnly(urls, game.image);

      game.loadHandler.type.image.length = urls.length;

      if (urls.length == 0) {
        game.loadHandler.cachedOneFile('image');
      } else {
        game.loadHandler.max += urls.length;

        urls.forEach((url) => {
          const img = new Image();
          img.onload = () => {
            game.image[url[0]] = img;
            game.loadHandler.cachedOneFile('image');
          };
          img.onerror = () => {
            console.error(
              'Game error: image "' + url[0] + '" not found in sourse files.'
            );
            game.image[url[0]] = img;
            img.src = fallbackImgUrl;
            game.loadHandler.cachedOneFile('image');
          };
          img.src = url[1];
        });
      }
    },
    /**
     * Loads image files that contains spritesheets to cache using HTMLImageElement
     * saves references in game.sprite.
     *
     * @param {string[]} urls spritesheet urls for the current state
     */
    sprite: function (urls) {
      game.loadHandler.type.sprite.isLoading = true;
      game.loadHandler.type.sprite.cached = 0;

      urls = game.loadHandler.getUncachedUrlsOnly(urls, game.sprite);

      game.loadHandler.type.sprite.length = urls.length;

      if (urls.length == 0) {
        game.loadHandler.cachedOneFile('sprite');
      } else {
        game.loadHandler.max += urls.length;

        urls.forEach((url) => {
          try {
            const img = new Image();
            img.onload = () => {
              game.sprite[url[0]] = img;
              game.loadHandler.cachedOneFile('sprite');
            };
            img.onerror = () => {
              console.error('Game error: sprite not found');
              game.sprite[url[0]] = img;
              img.src = fallbackImgUrl;
              img.frames = 1;
              game.loadHandler.cachedOneFile('sprite');
            };
            img.src = url[1];
            img.frames = url[2];
          } catch (error) {
            console.error(error);
          }
        });
      }
    },
  },

  /**
   * Adds new media to the 'media queue' (game.render.queue). <br>
   *
   * All queued media will be rendered on canvas when game.render.all() is called.
   *
   * @namespace
   */
  add: {
    /**
     * Adds image to media queue.
     *
     * @param {number} x x coordinate for the figure
     * @param {number} y y coordinate for the figure
     * @param {string} img name of the cached image
     * @param {undefined|number} scale scale for the image (default = 1)
     * @param {undefined|number} alpha level of transparency, from 0 (invisible) to 1 (100% visible) (default = 1)
     *
     * @returns {object} a reference to the created image.
     */
    image: function (x, y, img, scale, alpha) {
      if (x == undefined || y == undefined || img == undefined)
        console.error('Game error: missing parameters.');
      else if (game.image[img] == undefined)
        console.error('Game error: image not found in cache: ' + img + '.');
      else {
        const med = {
          typeOfMedia: 'image',
          name: img,

          x: x || game.add.default.x,
          y: y || game.add.default.y,
          _xWithAnchor: x || game.add.default._xWithAnchor,
          _yWithAnchor: y || game.add.default._yWithAnchor,
          xAnchor: game.add.default.xAnchor,
          yAnchor: game.add.default.yAnchor,

          shadow: game.add.default.shadow,
          shadowColor: game.add.default.shadowColor,
          shadowBlur: game.add.default.shadowBlur,
          alpha: alpha != undefined ? alpha : game.add.default.alpha,

          scale: scale || game.add.default.scale,
          width: game.image[img].width,
          height: game.image[img].height,

          anchor: function (xAnchor, yAnchor) {
            this.xAnchor = xAnchor;
            this.yAnchor = yAnchor;
          },
          get xWithAnchor() {
            return this.x - this.width * this.scale * this.xAnchor;
          },
          get yWithAnchor() {
            return this.y - this.height * this.scale * this.yAnchor;
          },
        };
        med.initialScale = med.scale;
        game.render.queue.push(med);
        return med;
      }
    },
    /**
     * Adds spritesheet to media queue. <br>
     * A spritesheet is an image that can be cropped to show only one 'frame' at a time.
     *
     * @param {number} x x coordinate for the figure
     * @param {number} y Y coordinate for the figure
     * @param {string} img name of the cached spritesheet
     * @param {undefined|number} curFrame current frame (default = 0)
     * @param {undefined|number} scale scale for the spritesheet (default = 1)
     * @param {undefined|number} alpha level of transparency, from 0 (invisible) to 1 (100% visible) (default = 1)
     *
     * @returns {object} a reference to the created sprite.
     */
    sprite: function (x, y, img, curFrame, scale, alpha) {
      if (x == undefined || y == undefined || img == undefined)
        console.error('Game error: missing parameters.');
      else if (game.sprite[img] == undefined)
        console.error('Game error: sprite not found in cache: ' + img + '.');
      else {
        const med = {
          typeOfMedia: 'sprite',
          name: img,

          x: x || game.add.default.x,
          y: y || game.add.default.y,
          _xWithAnchor: x || game.add.default._xWithAnchor,
          _yWithAnchor: y || game.add.default._yWithAnchor,
          xAnchor: game.add.default.xAnchor,
          yAnchor: game.add.default.yAnchor,

          shadow: game.add.default.shadow,
          shadowColor: game.add.default.shadowColor,
          shadowBlur: game.add.default.shadowBlur,
          alpha: alpha != undefined ? alpha : game.add.default.alpha,

          scale: scale || game.add.default.scale,
          width: game.sprite[img].width / game.sprite[img].frames, // Frame width
          height: game.sprite[img].height, // Frame height

          curFrame: curFrame || 0,

          anchor: function (xAnchor, yAnchor) {
            this.xAnchor = xAnchor;
            this.yAnchor = yAnchor;
          },
          get xWithAnchor() {
            return this.x - this.width * this.scale * this.xAnchor;
          },
          get yWithAnchor() {
            return this.y - this.height * this.scale * this.yAnchor;
          },
        };
        med.initialScale = med.scale;
        game.render.queue.push(med);
        return med;
      }
    },
    /**
     * Adds text to media queue.
     *
     * @param {number} x x coordinate for the figure
     * @param {number} y y coordinate for the figure
     * @param {string} text text to be displayed on screen
     * @param {object} style object containing font, color and align for the text
     * @param {object|undefined} lineHeight space between current and next paragraph
     *
     * @returns {object} a reference to the created text.
     */
    text: function (x, y, text, style, lineHeight) {
      if (
        x == undefined ||
        y == undefined ||
        text == undefined ||
        style == undefined
      ) {
        console.error('Game error: missing parameters.');
      } else {
        const med = {
          typeOfMedia: 'text',
          name: style?.increaseLetterSpacing
            ? text.split('').join(String.fromCharCode(8202))
            : text,

          x: x || game.add.default.x,
          y: y || game.add.default.y,
          _xWithAnchor: x || game.add.default._xWithAnchor,
          _yWithAnchor: y || game.add.default._yWithAnchor,
          xAnchor: game.add.default.xAnchor,
          yAnchor: game.add.default.yAnchor,

          shadow: game.add.default.shadow,
          shadowColor: game.add.default.shadowColor,
          shadowBlur: game.add.default.shadowBlur,
          alpha: game.add.default.alpha,

          font: style.font || game.add.default.font,
          fill: style.fill || game.add.default.fill,
          align: style.align || game.add.default.align,

          lineHeight: lineHeight || game.add.default.lineHeight,

          anchor: function () {
            console.error("Game error: there's no anchor for text.");
          },
          set style(style) {
            this.font = style.font;
            this.fill = style.fill;
            this.align = style.align;
          },
          get xWithAnchor() {
            return this.x;
          },
          get yWithAnchor() {
            return this.y;
          },
        };
        game.render.queue.push(med);
        return med;
      }
    },
    /**
     * Adds geometric shapes.
     * @namespace
     */
    geom: {
      /**
       * Adds rectangle to media queue.
       *
       * @param {number} x x coordinate for top left corner of the rectangle
       * @param {number} y y coordinate for top left corner of the rectangle
       * @param {number} width rectangle width (default = 50)
       * @param {undefined|number} height rectangle height (default = 50)
       * @param {undefined|string} lineColor stroke color (default = black)
       * @param {undefined|number} lineWidth stroke width (default = 1px)
       * @param {undefined|string} fillColor fill color (default = no fill)
       * @param {undefined|number} alpha level of transparency, from 0 (invisible) to 1 (100% visible)) (default = 1)
       *
       * @returns {object} a reference to the created rectangle.
       */
      rect: function (
        x,
        y,
        width,
        height,
        fillColor,
        alpha,
        lineColor,
        lineWidth
      ) {
        if (x == undefined || y == undefined || width == undefined)
          console.error('Game error: missing parameters.');
        else {
          const med = {
            typeOfMedia: 'rect',

            x: x || game.add.default.x,
            y: y || game.add.default.y,
            _xWithAnchor: x || game.add.default._xWithAnchor,
            _yWithAnchor: y || game.add.default._yWithAnchor,
            xAnchor: game.add.default.xAnchor,
            yAnchor: game.add.default.yAnchor,

            shadow: game.add.default.shadow,
            shadowColor: game.add.default.shadowColor,
            shadowBlur: game.add.default.shadowBlur,
            alpha: alpha != undefined ? alpha : game.add.default.alpha,

            scale: game.add.default.scale,

            width: 0,
            height: 0,

            lineColor: lineColor || game.add.default.lineColor,
            lineWidth: 0,
            fillColor: fillColor || game.add.default.fillColor,

            anchor: function (xAnchor, yAnchor) {
              this.xAnchor = xAnchor;
              this.yAnchor = yAnchor;
            },
            get xWithAnchor() {
              return this.x - this.width * this.scale * this.xAnchor;
            },
            get yWithAnchor() {
              return this.y - this.height * this.scale * this.yAnchor;
            },
          };
          med.initialScale = med.scale;
          if (width != 0) {
            med.width = width || game.add.default.width;
          }
          if (height != 0) {
            med.height = height || width || game.add.default.height;
          }
          if (lineWidth != 0) {
            med.lineWidth = lineWidth || game.add.default.lineWidth;
          }
          game.render.queue.push(med);
          return med;
        }
      },
      /**
       * Adds line to media queue.
       *
       * @param {number} x x coordinate for top left corner of the rectangle
       * @param {number} y y coordinate for top left corner of the rectangle
       * @param {number} width rectangle width (default = 50)
       * @param {undefined|number} lineWidth stroke width (default = 1px)
       * @param {undefined|string} lineColor stroke color (default = black)
       * @param {undefined|number} alpha level of transparency, from 0 (invisible) to 1 (100% visible)) (default = 1)
       *
       * @returns {object} a reference to the created rectangle.
       */
      line: function (x0, y0, x1, y1, lineWidth, lineColor, alpha) {
        if (x0 == undefined || y0 == undefined)
          console.error('Game error: missing parameters.');
        else {
          const med = {
            typeOfMedia: 'line',

            x0: x0 || game.add.default.x,
            y0: y0 || game.add.default.y,
            x1: x1 || x0 + 50,
            y1: y1 || y0,
            x0Anchor: 0,
            y0Anchor: 0,
            x1Anchor: 0,
            y1Anchor: 0,

            shadow: game.add.default.shadow,
            shadowColor: game.add.default.shadowColor,
            shadowBlur: game.add.default.shadowBlur,
            alpha: alpha != undefined ? alpha : game.add.default.alpha,

            width: 0,

            lineColor: lineColor || game.add.default.lineColor,
            lineWidth: lineWidth || 1,

            anchor: function (xAnchor, yAnchor) {
              this.x0Anchor = xAnchor;
              this.y0Anchor = yAnchor;
              this.x1Anchor = xAnchor;
              this.y1Anchor = yAnchor;
            },
            get x0WithAnchor() {
              return this.x0 - this.width * this.x0Anchor;
            },
            get y0WithAnchor() {
              return this.y0 - this.width * this.y0Anchor;
            },
            get x1WithAnchor() {
              return this.x1 - this.width * this.x1Anchor;
            },
            get y1WithAnchor() {
              return this.y1 - this.width * this.y1Anchor;
            },
          };
          const width =
            (med.x1 - x0) * (med.x1 - x0) + (med.y1 - y0) * (med.y1 - y0);
          med.width = Math.sqrt(width);

          game.render.queue.push(med);
          return med;
        }
      },
      /**
       * Adds circle to media queue.
       *
       * @param {number} x x coordinate for the circle center
       * @param {number} y y coordinate for the circle center
       * @param {number} diameter circle diameter (default = 50)
       * @param {undefined|string} lineColor stroke color (default = black)
       * @param {undefined|number} lineWidth stroke width (default = 1px)
       * @param {undefined|string} fillColor fill color (default = no fill)
       * @param {undefined|number} alpha level of transparency, from 0 (invisible) to 1 (100% visible)) (default = 1)
       *
       * @returns {object} a reference to the created circle.
       */
      circle: function (
        x,
        y,
        diameter,
        lineColor,
        lineWidth,
        fillColor,
        alpha
      ) {
        if (x == undefined || y == undefined || diameter == undefined)
          console.error('Game error: missing parameters.');
        else {
          const med = {
            typeOfMedia: 'arc',

            x: x || game.add.default.x,
            y: y || game.add.default.y,
            _xWithAnchor: x || game.add.default._xWithAnchor,
            _yWithAnchor: y || game.add.default._yWithAnchor,
            xAnchor: game.add.default.xAnchor,
            yAnchor: game.add.default.yAnchor,

            shadow: game.add.default.shadow,
            shadowColor: game.add.default.shadowColor,
            shadowBlur: game.add.default.shadowBlur,
            alpha: alpha != undefined ? alpha : game.add.default.alpha,

            scale: game.add.default.scale,

            diameter: 0,

            width: 0,
            height: 0,

            angleStart: 0,
            angleEnd: 2 * Math.PI,
            counterclockwise: game.add.default.counterclockwise,

            lineColor: lineColor || game.add.default.lineColor,
            lineWidth: 0,
            fillColor: fillColor || game.add.default.fillColor,

            anchor: function (xAnchor, yAnchor) {
              this.xAnchor = xAnchor;
              this.yAnchor = yAnchor;
            },
            get xWithAnchor() {
              return this.x - this.width * this.scale * this.xAnchor;
            },
            get yWithAnchor() {
              return this.y - this.height * this.scale * this.yAnchor;
            },
          };
          med.initialScale = med.scale;
          if (diameter != 0) {
            med.diameter = diameter || game.add.default.diameter;
            med.width = med.height = med.diameter;
          }
          if (lineWidth != 0) {
            med.lineWidth = lineWidth || game.add.default.lineWidth;
          }
          game.render.queue.push(med);
          return med;
        }
      },
      /**
       * Adds arc to media queue.
       *
       * @param {number} x x coordinate for the arc center
       * @param {number} y y coordinate for the arc center
       * @param {number} diameter arc diameter
       * @param {number} angleStart angle to start the arc
       * @param {number} angleEnd angle to end the arc
       * @param {undefined|boolean} counterclockwise if true, arc is created counterclockwise (default = false)
       * @param {undefined|string} lineColor stroke color (default = black)
       * @param {undefined|number} lineWidth stroke width (default = 1px)
       * @param {undefined|string} fillColor fill color (default = no fill)
       * @param {undefined|number} alpha level of transparency, from 0 (invisible) to 1 (100% visible)) (default = 1)
       *
       * @returns {object} a reference to the created arc.
       */
      arc: function (
        x,
        y,
        diameter,
        angleStart,
        angleEnd,
        counterclockwise,
        lineColor,
        lineWidth,
        fillColor,
        alpha
      ) {
        if (
          x == undefined ||
          y == undefined ||
          diameter == undefined ||
          angleStart == undefined ||
          angleEnd == undefined
        )
          console.error('Game error: missing parameters.');
        else {
          const med = {
            typeOfMedia: 'arc',

            x: x || game.add.default.x,
            y: y || game.add.default.y,
            _xWithAnchor: x || game.add.default._xWithAnchor,
            _yWithAnchor: y || game.add.default._yWithAnchor,
            xAnchor: game.add.default.xAnchor,
            yAnchor: game.add.default.yAnchor,

            shadow: game.add.default.shadow,
            shadowColor: game.add.default.shadowColor,
            shadowBlur: game.add.default.shadowBlur,
            alpha: alpha != undefined ? alpha : game.add.default.alpha,

            scale: game.add.default.scale,

            diameter: 0,

            width: 0,
            height: 0,

            angleStart: angleStart || 0,
            angleEnd: angleEnd || 2 * Math.PI,
            counterclockwise:
              counterclockwise || game.add.default.counterclockwise,

            lineColor: lineColor || game.add.default.lineColor,
            lineWidth: 0,
            fillColor: fillColor || game.add.default.fillColor,

            anchor: function (xAnchor, yAnchor) {
              this.xAnchor = xAnchor;
              this.yAnchor = yAnchor;
            },
            get xWithAnchor() {
              return this.x - this.width * this.scale * this.xAnchor;
            },
            get yWithAnchor() {
              return this.y - this.height * this.scale * this.yAnchor;
            },
          };
          med.initialScale = med.scale;
          if (diameter != 0) {
            med.diameter = diameter || game.add.default.diameter;
            med.width = med.height = med.diameter;
          }
          if (lineWidth != 0) {
            med.lineWidth = lineWidth || game.add.default.lineWidth;
          }
          game.render.queue.push(med);
          return med;
        }
      },
    },
    /**
     * [Not directly used] Default values for the media properties.
     */
    default: {
      // Used in: all types of media.
      x: 0,
      y: 0,
      _xWithAnchor: 0,
      _yWithAnchor: 0,
      xAnchor: 0,
      yAnchor: 0,
      shadow: false,
      shadowColor: '#0075c5',
      shadowBlur: 20,
      alpha: 1,
      // Used in: image, sprite, square, circle.
      scale: 1,
      // Used in: text.
      font: '14px Arial,sans-serif',
      fill: '#000',
      align: 'center',
      lineHeight: 50,
      // Used in: square, circle (image and sprite have width and height, but do not have default values).
      width: 50,
      height: 50,
      lineColor: '#000',
      lineWidth: 0, // No line
      fillColor: '#fff', // white fill
      // Used in: circle.
      diameter: 50,
      counterclockwise: false,
    },
  },

  /**
   * Renders media on current screen. <br<
   * It uses properties of html canvas to draw media on screen during game loop.
   *
   * @namespace
   */
  render: {
    // [Not directly used] Media queue to be rendered on the current state.
    queue: [],
    /** [Not directly used] Renders image on canvas.
     *
     * @param {object} cur current media in media queue
     */
    image: function (cur) {
      const x = cur.xWithAnchor,
        y = cur.yWithAnchor;
      // Rotation
      if (cur.rotate && cur.rotate != 0) {
        context.save();
        context.translate(cur.x, cur.y);
        context.rotate((cur.rotate * Math.PI) / 180);
        context.translate(-cur.x, -cur.y);
      }
      // Alpha
      context.globalAlpha = cur.alpha;
      // Shadow
      context.shadowBlur = cur.shadow ? cur.shadowBlur : 0;
      context.shadowColor = cur.shadowColor;
      // Image
      context.drawImage(
        game.image[cur.name],
        x,
        y,
        cur.width * cur.scale,
        cur.height * cur.scale
      );
      // End
      context.shadowBlur = 0;
      context.globalAlpha = 1;
      if (cur.rotate && cur.rotate != 0) context.restore();
    },
    /** [Not directly used] Renders spritesheet on canvas.
     *
     * @param {object} cur current media in media queue
     */
    sprite: function (cur) {
      const x = cur.xWithAnchor,
        y = cur.yWithAnchor;
      // Rotation
      if (cur.rotate && cur.rotate != 0) {
        context.save();
        context.translate(cur.x, cur.y);
        context.rotate((cur.rotate * Math.PI) / 180);
        context.translate(-cur.x, -cur.y);
      }
      // Alpha
      context.globalAlpha = cur.alpha;
      // Shadow
      context.shadowBlur = cur.shadow ? cur.shadowBlur : 0;
      context.shadowColor = cur.shadowColor;
      // Image
      context.drawImage(
        game.sprite[cur.name],
        cur.width * cur.curFrame,
        0,
        cur.width,
        cur.height,
        x,
        y,
        cur.width * cur.scale,
        cur.height * cur.scale
      );
      // End
      context.shadowBlur = 0;
      context.globalAlpha = 1;
      if (cur.rotate && cur.rotate != 0) context.restore();
    },
    /** [Not directly used] Renders text on canvas.
     *
     * @param {object} cur current media in media queue
     */
    text: function (cur) {
      const x = cur.xWithAnchor,
        y = cur.yWithAnchor;
      // Rotation
      if (cur.rotate && cur.rotate != 0) {
        context.save();
        context.translate(cur.x, cur.y);
        context.rotate((cur.rotate * Math.PI) / 180);
        context.translate(-cur.x, -cur.y);
      }
      // Alpha
      context.globalAlpha = cur.alpha;
      // Shadow
      context.shadowBlur = cur.shadow ? cur.shadowBlur : 0;
      context.shadowColor = cur.shadowColor;
      // Font style
      context.font = cur.font;
      context.textAlign = cur.align;
      context.fillStyle = cur.fill;
      // Text
      const paragraphs = String(cur.name).split('\n');
      let newY = y;
      for (let line in paragraphs) {
        context.fillText(paragraphs[line], x, newY);
        newY += cur.lineHeight;
      }
      // End
      context.shadowBlur = 0;
      context.globalAlpha = 1;
      if (cur.rotate && cur.rotate != 0) context.restore();
    },
    /** [Not directly used] Renders geometric shapes on canvas.
     *
     * @namespace
     */
    geom: {
      /**
       * Renders rectangle on canvas.
       *
       * @param {object} cur current media in media queue
       */
      rect: function (cur) {
        const x = cur.xWithAnchor,
          y = cur.yWithAnchor;
        // Rotation
        if (cur.rotate && cur.rotate != 0) {
          context.save();
          context.translate(cur.x, cur.y);
          context.rotate((cur.rotate * Math.PI) / 180);
          context.translate(-cur.x, -cur.y);
        }
        // Alpha
        context.globalAlpha = cur.alpha;
        // Shadow
        context.shadowBlur = cur.shadow ? cur.shadowBlur : 0;
        context.shadowColor = cur.shadowColor;
        // Fill
        if (cur.fillColor !== 'transparent') {
          context.fillStyle = cur.fillColor;
          context.fillRect(x, y, cur.width * cur.scale, cur.height * cur.scale);
        }
        // Stroke
        if (cur.lineWidth != 0) {
          context.strokeStyle = cur.lineColor;
          context.lineWidth = cur.lineWidth;
          context.strokeRect(
            x,
            y,
            cur.width * cur.scale,
            cur.height * cur.scale
          );
        }
        // End
        context.shadowBlur = 0;
        context.globalAlpha = 1;
        if (cur.rotate && cur.rotate != 0) context.restore();
      },
      /**
       * Renders line on canvas.
       *
       * @param {object} cur current media in media queue
       */
      line: function (cur) {
        const x0 = cur.x0WithAnchor,
          y0 = cur.y0WithAnchor,
          x1 = cur.x1WithAnchor,
          y1 = cur.y1WithAnchor;
        // Rotation
        if (cur.rotate && cur.rotate != 0) {
          context.save();
          context.translate(cur.x0, cur.y0);
          context.rotate((cur.rotate * Math.PI) / 180);
          context.translate(-cur.x0, -cur.y0);
        }
        // Alpha
        context.globalAlpha = cur.alpha;
        // Shadow
        context.shadowBlur = cur.shadow ? cur.shadowBlur : 0;
        context.shadowColor = cur.shadowColor;
        // Stroke
        if (cur.lineWidth != 0) {
          context.strokeStyle = cur.lineColor;
          context.lineWidth = cur.lineWidth;
          context.beginPath();
          context.moveTo(x0, y0);
          context.lineTo(x1, y1);
          context.stroke();
        }
        // End
        context.shadowBlur = 0;
        context.globalAlpha = 1;
        if (cur.rotate && cur.rotate != 0) context.restore();
      },
      /**
       * Renders arc on canvas (arc or circle).
       *
       * @param {object} cur current media in media queue
       */
      arc: function (cur) {
        const x = cur.xWithAnchor,
          y = cur.yWithAnchor;
        // Rotation
        if (cur.rotate && cur.rotate != 0) {
          context.save();
          context.translate(cur.x, cur.y);
          context.rotate((cur.rotate * Math.PI) / 180);
          context.translate(-cur.x, -cur.y);
        }
        // Alpha
        context.globalAlpha = cur.alpha;
        // Shadow
        context.shadowBlur = cur.shadow ? cur.shadowBlur : 0;
        context.shadowColor = cur.shadowColor;
        // Fill info
        if (cur.fillColor != 0) context.fillStyle = cur.fillColor;
        // Stroke info
        if (cur.lineWidth != 0) {
          context.strokeStyle = cur.lineColor;
          context.lineWidth = cur.lineWidth;
        }
        // Path
        context.beginPath();
        if (cur.angleEnd != 2 * Math.PI) context.lineTo(x, y);
        context.arc(
          x,
          y,
          (cur.diameter / 2) * cur.scale,
          cur.angleStart,
          cur.angleEnd,
          cur.counterclockwise
        );
        if (cur.angleEnd != 2 * Math.PI) context.lineTo(x, y);
        // End
        if (cur.fillColor != 0) context.fill();
        if (cur.lineWidth != 0) context.stroke();
        context.shadowBlur = 0;
        context.globalAlpha = 1;
        if (cur.rotate && cur.rotate != 0) context.restore();
      },
    },
    /**
     * Renders all queued media on screen. Called repeatedly by the game loop.
     */
    all: function () {
      game.render.queue.forEach((cur) => {
        switch (cur.typeOfMedia) {
          case 'image':
            this.image(cur);
            break;
          case 'sprite':
            this.sprite(cur);
            break;
          case 'text':
            this.text(cur);
            break;
          case 'rect':
            this.geom.rect(cur);
            break;
          case 'line':
            this.geom.line(cur);
            break;
          case 'arc':
            this.geom.arc(cur);
            break;
        }
      });
    },
    /**
     * Clears media queue (used when changing states).
     */
    clear: function () {
      game.render.queue = [];
    },
  },

  /**
   * Math functions.
   *
   * @namespace
   */
  math: {
    /**
     * Returns a random integer in a range (inclusive for min and max).
     *
     * @param {number} min smaller integer
     * @param {number} max larger integer
     *
     * @returns {number} random integer in range
     */
    randomInRange: function (min, max) {
      min = Math.ceil(min);
      max = Math.floor(max);
      return Math.floor(Math.random() * (max - min + 1) + min);
    },
    /**
     * Returns a random divisor for a given number.
     *
     * @param {number} number number
     *
     * @returns {number} random divisor for that number
     */
    randomDivisor: function (number) {
      const validDivisors = [];
      // If 'number' can be divided by 'i', add to list of 'validDivisors'
      for (let i = 2; i < number; i++) {
        if (number % i == 0) validDivisors.push(i);
      }
      const randIndex = game.math.randomInRange(0, validDivisors.length - 1);
      return validDivisors[randIndex];
    },
    /**
     * Converts degree to radian.
     *
     * @param {number} degree number in degrees
     *
     * @returns {number} its radian equivalent
     */
    degreeToRad: function (degree) {
      return (degree * Math.PI) / 180;
    },
    getRadiusFromCircunference: function (circunference) {
      return circunference / (2 * Math.PI);
    },
    /**
     * Returns distance from the center of an icon to mouse/pointer (radius).
     *
     * @param {number} xMouse mouse x coordinate
     * @param {number} xIcon icon x coordinate
     * @param {number} yMouse mouse y coordinate
     * @param {number} yIcon icon y coordinate
     *
     * @returns {number} distance between the two icons
     */
    distanceToPointer: function (xMouse, xIcon, yMouse, yIcon) {
      const a = Math.max(xMouse, xIcon) - Math.min(xMouse, xIcon);
      const b = Math.max(yMouse, yIcon) - Math.min(yMouse, yIcon);
      return Math.sqrt(a * a + b * b);
    },
    mdc: function (num1, num2) {
      if (num2 === 0) return num1;
      return game.math.mdc(num2, num1 % num2);
    },
    mmcArray: (input) => {
      if (toString.call(input) !== '[object Array]') return false;
      var len, a, b;
      len = input.length;
      if (!len) {
        return null;
      }
      a = input[0];
      for (var i = 1; i < len; i++) {
        b = input[i];
        a = game.math.mmcTwoNumbers(a, b);
      }
      return a;
    },
    mmcTwoNumbers: (num1, num2) => {
      var resto, x, y;
      x = num1;
      y = num2;
      while (resto != 0) {
        resto = x % y;
        x = y;
        y = resto;
      }
      return (num1 * num2) / x;
    },
    getFractionFromDecimal: function (fraction) {
      const len = fraction.toString().length - 2;

      let denominator = Math.pow(10, len);
      let numerator = fraction * denominator;

      const divisor = game.math.greatestCommonDivisor(numerator, denominator);

      numerator /= divisor;
      denominator /= divisor;

      return {
        string: Math.floor(numerator) + '/' + Math.floor(denominator),
        numerator: Math.floor(numerator),
        denominator: Math.floor(denominator),
      };
    },
    /**
     * Checks if pointer/mouse is over (rectangular) icon.
     *
     * @param {number} xMouse contains the mouse x coordinate
     * @param {number} yMouse contains the mouse y coordinate
     * @param {object} icon icon
     *
     * @returns {boolean} true if cursor is over icon
     */
    isOverIcon: function (xMouse, yMouse, icon) {
      const x = xMouse,
        y = yMouse,
        cur = icon;
      return (
        y >= cur.yWithAnchor &&
        y <= cur.yWithAnchor + cur.height * cur.scale &&
        x >= cur.xWithAnchor &&
        x <= cur.xWithAnchor + cur.width * cur.scale
      );
    },
    /**
     * Checks if 2 images overlap
     *
     * @param {object} imageA image 1
     * @param {object} imageB image 2
     *
     * @returns {boolean} true if there is overlap
     */
    isOverlap: function (imageA, imageB) {
      const xA = imageA.x;
      const xB = imageB.x;

      // Consider it comming from both sides
      return !(Math.abs(xA - xB) > 14);
    },
    /**
     * Get mouse position coordinates
     *
     * @param {object} mouseEvent
     * @returns {object} x and y mouse coordinates
     */
    getMouse: function (mouseEvent) {
      const c = context.canvas.getBoundingClientRect();
      const canvas_scale = context.canvas.width / parseFloat(c.width);
      return {
        x: (mouseEvent.clientX - c.left) * canvas_scale,
        y: (mouseEvent.clientY - c.top) * canvas_scale,
      };
    },
    /**
     * Calculate spacing for icons on the menu screen
     *
     * @param {number} width width of the desirable part of the screen
     * @param {number} numberOfIcons number or icons to be put on the screen
     *
     * @returns {number} correct spacing between icons
     */
    getOffset: function (width, numberOfIcons) {
      return width / (numberOfIcons + 1);
    },
    /**
     * Converts a given time in seconds (number) to the format HH:MM:SS (string)
     *
     * @param {number} s time in seconds
     *
     * @returns {string} time in the format HH:MM:SS
     */
    convertTime: function (s) {
      let h = 0,
        m = 0;
      if (s > 1200) {
        h = s / 1200;
        s = s % 1200;
      }
      if (s > 60) {
        m = s / 60;
        s = s % 60;
      }
      h = '' + h;
      m = '' + m;
      s = '' + s;
      if (h.length < 2) h = '0' + h;
      if (m.length < 2) m = '0' + m;
      if (s.length < 2) s = '0' + s;
      return h + ':' + m + ':' + s;
    },
  },

  /**
   * Timer used to get the time spent to complete a game.
   *
   * @namespace
   */
  timer: {
    // [Not directly used] Start time.
    _start: 0,
    // [Not directly used] End time.
    end: 0,
    // Elapsed time.
    elapsed: 0,
    /**
     * Reset values and start timer.
     */
    start: function () {
      game.timer._start = game.timer.end = game.timer.elapsed = 0;
      game.timer._start = new Date().getTime();
    },
    /**
     * Stop timer and set elapsed time.
     */
    stop: function () {
      if (game.timer._start != 0 && game.timer.end == 0) {
        // If timer has started but not finished
        game.timer.end = new Date().getTime();
        game.timer.elapsed = Math.floor(
          (game.timer.end - game.timer._start) / 1000
        );
      }
    },
  },

  /**
   * Handles pointer events. <br>
   *
   * @namespace
   */
  event: {
    // [Not directly used] List of events in current state.
    list: [],
    /**
     * Adds new event to current state.
     *
     * @param {string} name event name, can be: 'click' or 'mousemove'
     * @param {function} func function to be called when event is triggered
     */
    add: function (name, func) {
      context.canvas.addEventListener(name, func);
      game.event.list.push([name, func]);
    },
    /** [Not directly used] Clears list of events. Called before moving to new state.
     */
    clear: function () {
      game.event.list.forEach((cur) => {
        context.canvas.removeEventListener(cur[0], cur[1]);
      });
      game.event.list = [];
    },
  },

  /** [Not directly used] Handles 'game loop'. <br>
   *
   * After the media queue is filled in create(), the 'game loop' starts.
   * It calls update() iteratively, re-rendering the screen every time. <br>
   *
   * The 'game loop' is stoped by leaving the current state.
   *
   * @namespace
   */
  loop: {
    // [Not directly used] Holds animation event.
    id: undefined,
    // [Not directly used] State that called the loop.
    curState: undefined,
    // [Not directly used] Loop status, can be: 'on', 'ending' or 'off'.
    status: 'off',
    // [Not directly used]
    waitingToStart: undefined,
    // [Not directly used]
    startTime: 0,
    // [Not directly used] 1000: 1 second | 60: expected frames per second.
    duration: 1000 / 60,
    /** [Not directly used] Starts game loop.
     *
     * @param {object} state current state
     */
    start: function (state) {
      if (game.loop.status == 'off') {
        game.loop.curState = state;
        game.loop.startTime = new Date().getTime();
        game.loop.status = 'on';
        game.loop.id = requestAnimationFrame(game.loop.run);
      } else {
        // If 'game.loop.status' is either 'on' or 'ending'
        game.loop.waitingToStart = state;
        if (game.loop.status == 'on') game.loop.stop();
      }
    },
    /**
     * [Not directly used] Stops game loop.
     */
    stop: function () {
      if (game.loop.status == 'on') game.loop.status = 'ending';
    },
    /**
     * [Not directly used] Executes game loop.
     *
     * This code will run on each iteration of the game loop.
     */
    run: function () {
      if (game.loop.status != 'on') {
        game.loop.clear();
      } else {
        const timestamp = new Date().getTime();
        const runtime = timestamp - game.loop.startTime;
        if (runtime >= game.loop.duration) {
          // Calls state's update()
          game.loop.curState.update();
          // Updates state's animation
          game.animation.run();
        }
        game.loop.id = requestAnimationFrame(game.loop.run); // Loop
      }
    },
    /**
     * [Not directly used] Resets game loop values.
     */
    clear: function () {
      if (game.loop.id != undefined) {
        cancelAnimationFrame(game.loop.id); // Cancel animation event
        game.loop.id = undefined; // Clears object that holds animation event
        game.loop.curState = undefined; // Clears object that holds current state
        game.loop.status = 'off'; // Inform animation must end (read in game.loop.run())
      }
      if (game.loop.waitingToStart != undefined) {
        const temp = game.loop.waitingToStart;
        game.loop.waitingToStart = undefined;
        game.loop.start(temp);
      }
    },
  },

  /**
   * Handles spritesheet animation. <br>
   * It iterates through the spritesheet frames inside the animation queue.
   * Called by game loop.
   *
   * @namespace
   */
  animation: {
    // [Not directly used] Animation queue for the current state.
    queue: [],
    // [Not directly used]
    count: 0,
    /**
     * Plays animation.
     *
     * @param {string} name animation name (identifier)
     */
    play: function (name) {
      let newAnimation;
      // Gets first object in the 'render queue' with that animation name
      for (let i in game.render.queue) {
        if (
          game.render.queue[i].animation != undefined &&
          game.render.queue[i].animation[0] == name
        ) {
          newAnimation = game.render.queue[i];
          break;
        }
      }
      // If found, saves object in the 'animation queue'
      if (newAnimation != undefined) game.animation.queue.push(newAnimation);
    },
    /**
     * Stops animation.
     *
     * @param {string} name animation name
     */
    stop: function (name) {
      // Removes all with that name from the 'animation queue'
      game.animation.queue.forEach((cur) => {
        if (cur.animation[0] == name) {
          game.animation.queue.splice(cur, 1);
        }
      });
    },
    /**
     * [Not directly used] Executes animation.
     */
    run: function () {
      game.animation.queue.forEach((character) => {
        if (
          !character.animation[2] ||
          game.animation.count % character.animation[2] == 0
        ) {
          const i = character.animation[1].indexOf(character.curFrame);
          if (i == -1) {
            // Frame not found
            if (isDebugMode)
              console.error('Game error: animation frame not found.');
          } else if (i < character.animation[1].length - 1) {
            // Go to next frame
            character.curFrame = character.animation[1][i + 1];
          } else {
            character.curFrame = character.animation[1][0]; // If last frame, restart
          }
        }
      });
      game.animation.count++;
    },
    /**
     * [Not directly used] Clears animation queue.
     */
    clear: function () {
      // Resets animation counter
      game.animation.count = 0;
      // Clears property 'animation' from objects in game.render.queue
      game.render.queue.forEach((cur) => {
        if (cur.animation != undefined) {
          delete cur.animation;
        }
      });
      // Clears animation queue
      game.animation.queue = [];
    },
  },
};