Draw the Arena (#7)

* Add defaults to config

* Create arena sprite

* Draw the arena

* Draw a face when cooling down the dash

* Correct linter issues

2 files changed, 145 insertions, 6 deletions

diff --git a/lib/factories/pixi.js b/lib/factories/pixi.js
index 839e593..786639f 100644
--- a/lib/factories/pixi.js
+++ b/lib/factories/pixi.js
@@ -27,8 +27,9 @@ export default {
       .endFill();
 
     // The mouth
-    const mouth = new Graphics();
-    mouth.lineStyle(10, 0xff0080, 1)
+    const smile = new Graphics();
+    smile.name = 'smile';
+    smile.lineStyle(10, 0xff0080, 1)
       .arc(
         0, 0, // center
         radius * 0.6,
@@ -36,6 +37,18 @@ export default {
         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)
@@ -53,8 +66,11 @@ export default {
     leftPupil.beginFill(0x11)
       .drawCircle(radius / 3 + radius / 8, -radius / 4, radius / 10);
 
+    body.addChild(this.createBlush({ radius }));
+
     // The group
-    body.addChild(mouth);
+    body.addChild(smile);
+    body.addChild(frown);
     body.addChild(leftEye);
     body.addChild(rightEye);
     body.addChild(leftPupil);
@@ -101,6 +117,91 @@ export default {
     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;
   }
 };
-
diff --git a/lib/factories/sumo.js b/lib/factories/sumo.js
index ea5a71c..dad9987 100644
--- a/lib/factories/sumo.js
+++ b/lib/factories/sumo.js
@@ -82,8 +82,8 @@ export default {
     const frictionAir = 0.02;
     const friction = 1;
     const frictionStatic = 1;
-    const restitution = 0.9;
-    const density = 1;
+    const restitution = 1;
+    const density = 1.5;
 
     const body = Bodies.circle(position.x / Config.meterSize, position.y / Config.meterSize, radius / Config.meterSize, {
       label: 'Sumo body',
@@ -297,5 +297,43 @@ export default {
     }
 
     return entity;
+  },
+
+  /**
+   * Creates a static arena entity
+   *
+   * @function createArena
+   * @memberof SumoFactory
+   * @param {external:Serpentity} [engine] the serpentity engine to attach
+   * to. If not sent, it will not be attached.
+   * @param {object} [config] the config to override the entity, accepts
+   * the key `position` as an object with an x and y property.
+   * @return {external:Serpentity.Entity} the created entity
+   */
+  createArena(engine, config = {}) {
+
+    const entity = new Entity();
+
+    // POSITION
+
+    entity.addComponent(new PositionComponent(config.position));
+    const position = entity.getComponent(PositionComponent);
+
+    // RENDERING
+
+    const radius = 300;
+
+    const container = config.container || {
+      container: PixiFactory.createArena({ radius })
+    };
+    container.container.position.x = position.x;
+    container.container.position.y = position.y;
+    entity.addComponent(new PixiContainerComponent(container));
+
+    if (engine) {
+      engine.addEntity(entity);
+    }
+
+    return entity;
   }
 };