Colorize the winner renderer

[rbdr/sumo] / lib / systems / render_points.js

import { System } from '@serpentity/serpentity';
import { Graphics } from 'pixi.js';

import Config from '../config';
import PointsNode from '../nodes/points';

const internals = {
  kNoPixiError: 'No pixi application passed to render system. Make sure you set the `application` key in the config object when initializing.',
  redBar: new Graphics(),
  blueBar: new Graphics()
};

/**
 * Renders points assuming there exist a "red" and a "blue" score
 *
 * @extends {external:Serpentity.System}
 * @class RenderPointsSystem
 * @param {object} config a configuration object to extend.
 */
export default class RenderPointsSystem extends System {

  constructor(config = {}) {

    super();

    /**
     * The node collection of points keepers
     *
     * @property {external:Serpentity.NodeCollection} pointsKeepers
     * @instance
     * @memberof RenderPointsSystem
     */
    this.pointsKeepers = null;

    /**
     * The pixi engine we will use to render
     *
     * @property {external:PixiJs.Application} application
     * @instance
     * @memberof RenderPointsSystem
     */
    this.application = config.application;

    if (!this.application) {
      throw new Error(internals.kNoPixiError);
    }
  }

  /**
   * Initializes system when added. Requests renderable nodes and
   * attaches to event listeners to add / remove them to pixi stage
   *
   * @function added
   * @memberof RenderPointsSystem
   * @instance
   * @param {external:Serpentity.Engine} engine the serpentity engine to
   * which we are getting added
   */
  added(engine) {

    this.pointsKeepers = engine.getNodes(PointsNode);
    this.application.stage.addChild(internals.blueBar);
    this.application.stage.addChild(internals.redBar);
  }

  /**
   * Clears system resources when removed.
   *
   * @function removed
   * @instance
   * @memberof RenderPointsSystem
   */
  removed() {

    this.pointsKeepers = null;
    this.application.stage.removeChild(internals.blueBar);
    this.application.stage.removeChild(internals.redBar);
  }

  /**
   * Runs on every update of the loop. Updates the bars
   *
   * @function update
   * @instance
   * @param {Number} currentFrameDuration the duration of the current
   * frame
   * @memberof RenderPointsSystem
   */
  update(currentFrameDuration) {

    for (const pointsKeeper of this.pointsKeepers) {

      const redPoints = pointsKeeper.points.red;
      const bluePoints = pointsKeeper.points.blue;

      const redBarHeight = redPoints * Config.verticalResolution / Config.maxPoints;
      const blueBarHeight = bluePoints * Config.verticalResolution / Config.maxPoints;

      internals.redBar.removeChildren();
      const redBar = new Graphics();
      redBar.lineStyle(20, 0xeaacac, 0.75)
        .moveTo(Config.horizontalResolution, 0)
        .lineTo(Config.horizontalResolution, redBarHeight);
      internals.redBar.addChild(redBar);

      internals.blueBar.removeChildren();
      const blueBar = new Graphics();
      blueBar.lineStyle(20, 0x87c5ea, 0.75)
        .moveTo(0, 0)
        .lineTo(0, blueBarHeight);
      internals.blueBar.addChild(blueBar);
    }
  }
};