Add Grab System (#9)

[rbdr/sumo] / lib / factories / pixi.js

import { Graphics } from 'pixi.js';

/**
 * Factory object that contains many methods to create prefab pixi
 * objects
 *
 * @type object
 * @name PixiFactory
 */
export default {

  /**
   * Creates a sumo container
   *
   * @function createSumo
   * @memberof PixiFactory
   * @return {external:CreateJs.Container} the created container
   */
  createSumo(config) {

    const radius = config.radius;

    // The body
    const body = new Graphics();
    body.beginFill(0x87c5ea)
      .drawCircle(0, 0, radius)
      .endFill();

    // The mouth
    const smile = new Graphics();
    smile.name = 'smile';
    smile.lineStyle(10, 0xff0080, 1)
      .arc(
        0, 0, // center
        radius * 0.6,
        Math.PI / 6,
        5 * Math.PI / 6
      );

    const frown = new Graphics();
    frown.name = 'frown';
    frown.visible = false;
    frown.lineStyle(10, 0xff0080, 1)
      .arc(
        0, radius,
        radius * 0.6,
        -Math.PI / 5,
        -4 * Math.PI / 5,
        true
      );

    const leftEye = new Graphics();
    leftEye.beginFill(0xffffff)
      .drawCircle(-radius / 3 - radius / 8, -radius / 4, radius / 5)
      .endFill();

    const rightEye = new Graphics();
    rightEye.beginFill(0xffffff)
      .drawCircle(radius / 3 + radius / 8, -radius / 4, radius / 5);

    const leftPupil = new Graphics();
    leftPupil.beginFill(0x11)
      .drawCircle(-radius / 3 - radius / 8, -radius / 4, radius / 10);

    const rightPupil = new Graphics();
    leftPupil.beginFill(0x11)
      .drawCircle(radius / 3 + radius / 8, -radius / 4, radius / 10);

    body.addChild(this.createBlush({ radius }));

    body.addChild(this.createEffortMark({ radius }));
    body.addChild(this.createShadow({ radius }));

    // The group
    body.addChild(smile);
    body.addChild(frown);
    body.addChild(leftEye);
    body.addChild(rightEye);
    body.addChild(leftPupil);
    body.addChild(rightPupil);

    return body;
  },

  /**
   * Creates an empty graphic
   *
   * @function createEmptyGraphic
   * @memberof PixiFactory
   * @return {external:CreateJs.Container} the created container
   */
  createEmptyGraphic(config) {

    return new Graphics();
  },

  /**
   * Creates a harness graphic
   *
   * @function createHarness
   * @memberof PixiFactory
   * @return {external:CreateJs.Container} the created container
   */
  createHarness(config) {

    const radius = config.radius;

    const lineThickness = 10;

    // The body
    const body = new Graphics();
    body.lineStyle(lineThickness, 0xe1e1e1, 1)
      .drawCircle(0, 0, radius);

    const center = new Graphics();
    center.beginFill(0xf1f1f1)
      .drawCircle(0, 0, radius - lineThickness / 2)
      .endFill();

    body.addChild(center);

    return body;
  },

  /**
   * Creates an arena graphic
   *
   * @function createArena
   * @memberof PixiFactory
   * @return {external:CreateJs.Container} the created container
   */
  createArena(config) {

    const radius = config.radius;

    const lineThickness = 20;

    // The body
    const arena = new Graphics();
    arena.lineStyle(lineThickness, 0xdfd4b2, 1)
      .drawCircle(0, 0, radius);

    const leftLine = new Graphics();
    leftLine.lineStyle(20, 0xbdb08b, 1)
      .moveTo(-radius / 4, -radius / 8)
      .lineTo(-radius / 4, radius / 8);

    const rightLine = new Graphics();
    rightLine.lineStyle(20, 0xbdb08b, 1)
      .moveTo(radius / 4, -radius / 8)
      .lineTo(radius / 4, radius / 8);

    arena.addChild(leftLine);
    arena.addChild(rightLine);

    return arena;
  },

  /**
   * Creates a blush for the face
   *
   * @function createBlush
   * @memberof PixiFactory
   * @return {external:CreateJs.Container} the created container
   */
  createBlush(config) {

    const radius = config.radius;

    const blush = new Graphics();

    blush.name = 'blush';
    blush.visible = false;

    const leftEyebrow = new Graphics();
    leftEyebrow.lineStyle(4, 0x11, 1)
      .arc(
        -radius / 3 - radius / 4, -radius / 2 - radius / 4,
        radius / 3,
        Math.PI / 8,
        2 * Math.PI / 3
      );

    const leftBlush = new Graphics();
    leftBlush.lineStyle(4, 0xe7bfe6, 1)
      .moveTo(-radius / 3 - radius / 4, radius / 10)
      .lineTo(-radius / 3, 0);

    const rightEyebrow = new Graphics();
    rightEyebrow.lineStyle(4, 0x11, 1)
      .arc(
        radius / 3 + radius / 4, -radius / 2 - radius / 4,
        radius / 3,
        Math.PI / 3,
        7 * Math.PI / 8
      );

    const rightBlush = new Graphics();
    rightBlush.lineStyle(4, 0xe7bfe6, 1)
      .moveTo(radius / 3 + radius / 4, radius / 10)
      .lineTo(radius / 3, 0);

    blush.addChild(leftEyebrow);
    blush.addChild(leftBlush);
    blush.addChild(rightEyebrow);
    blush.addChild(rightBlush);

    return blush;
  },

  /**
   * Creates an effort mark
   *
   * @function createEffortMark
   * @memberof PixiFactory
   * @return {external:CreateJs.Container} the created container
   */
  createEffortMark(config) {

    const radius = config.radius;

    const effortMark = new Graphics();

    const centerX = -3 * radius / 4;
    const centerY = -3 * radius / 4;

    effortMark.name = 'effort';
    effortMark.visible = false;

    const color = 0xff00ff;
    const lineWidth = 2;

    const topRightArch = new Graphics();
    topRightArch.lineStyle(lineWidth, color, 1)
      .arc(
        centerX + 2 * radius / 7, centerY - 2 * radius / 7,
        radius / 5,
        Math.PI / 2,
        Math.PI
      );

    const topLeftArch = new Graphics();
    topLeftArch.lineStyle(lineWidth, color, 1)
      .arc(
        centerX - 2 * radius / 7, centerY - radius / 4,
        radius / 5,
        0,
        Math.PI / 2
      );

    const bottomRightArch = new Graphics();
    bottomRightArch.lineStyle(lineWidth, color, 1)
      .arc(
        centerX + 2 * radius / 7, centerY + radius / 4,
        radius / 5,
        Math.PI,
        3 * Math.PI / 2
      );

    const bottomLeftArch = new Graphics();
    bottomLeftArch.lineStyle(lineWidth, color, 1)
      .arc(
        centerX - 2 * radius / 7, centerY + 2 * radius / 7,
        radius / 5,
        3 * Math.PI / 2,
        0
      );

    effortMark.addChild(topRightArch);
    effortMark.addChild(topLeftArch);
    effortMark.addChild(bottomRightArch);
    effortMark.addChild(bottomLeftArch);

    return effortMark;
  },

  /**
   * Creates a shadow for the eye
   *
   * @function createShadow
   * @memberof PixiFactory
   * @return {external:CreateJs.Container} the created container
   */
  createShadow(config) {

    const radius = config.radius;

    const shadow = new Graphics();

    const centerX = radius / 2;
    const centerY = -3 * radius / 4;

    shadow.name = 'shadow';
    shadow.visible = false;

    const color = 0x9900ff;
    const lineWidth = 2;

    shadow.lineStyle(lineWidth, color, 1)
      .moveTo(centerX - radius / 4, centerY - radius / 3)
      .lineTo(centerX - radius / 4, centerY + radius / 5)
      .moveTo(centerX - radius / 8, centerY - radius / 4)
      .lineTo(centerX - radius / 8, centerY + radius / 5)
      .moveTo(centerX, centerY - radius / 5)
      .lineTo(centerX, centerY + radius / 5)
      .moveTo(centerX + radius / 8, centerY - radius / 6)
      .lineTo(centerX + radius / 8, centerY + radius / 6)
      .moveTo(centerX + radius / 4, centerY - radius / 5)
      .lineTo(centerX + radius / 4, centerY + radius / 5);

    return shadow;
  }
};