git.r.bdr.sh - rbdr/sumo/blob - lib/factories/pixi.js

   1 import { Graphics } from 'pixi.js';
   2
   3 /**
   4  * Factory object that contains many methods to create prefab pixi
   5  * objects
   6  *
   7  * @type object
   8  * @name PixiFactory
   9  */
  10 export default {
  11
  12   /**
  13    * Creates a sumo container
  14    *
  15    * @function createSumo
  16    * @memberof PixiFactory
  17    * @return {external:CreateJs.Container} the created container
  18    */
  19   createSumo(config) {
  20
  21     const radius = config.radius;
  22
  23     // The body
  24     const body = new Graphics();
  25     body.beginFill(0x87c5ea)
  26       .drawCircle(0, 0, radius)
  27       .endFill();
  28
  29     // The mouth
  30     const smile = new Graphics();
  31     smile.name = 'smile';
  32     smile.lineStyle(10, 0xff0080, 1)
  33       .arc(
  34         0, 0, // center
  35         radius * 0.6,
  36         Math.PI / 6,
  37         5 * Math.PI / 6
  38       );
  39
  40     const frown = new Graphics();
  41     frown.name = 'frown';
  42     frown.visible = false;
  43     frown.lineStyle(10, 0xff0080, 1)
  44       .arc(
  45         0, radius,
  46         radius * 0.6,
  47         -Math.PI / 5,
  48         -4 * Math.PI / 5,
  49         true
  50       );
  51
  52     const leftEye = new Graphics();
  53     leftEye.beginFill(0xffffff)
  54       .drawCircle(-radius / 3 - radius / 8, -radius / 4, radius / 5)
  55       .endFill();
  56
  57     const rightEye = new Graphics();
  58     rightEye.beginFill(0xffffff)
  59       .drawCircle(radius / 3 + radius / 8, -radius / 4, radius / 5);
  60
  61     const leftPupil = new Graphics();
  62     leftPupil.beginFill(0x11)
  63       .drawCircle(-radius / 3 - radius / 8, -radius / 4, radius / 10);
  64
  65     const rightPupil = new Graphics();
  66     leftPupil.beginFill(0x11)
  67       .drawCircle(radius / 3 + radius / 8, -radius / 4, radius / 10);
  68
  69     body.addChild(this.createBlush({ radius }));
  70
  71     body.addChild(this.createEffortMark({ radius }));
  72     body.addChild(this.createShadow({ radius }));
  73
  74     // The group
  75     body.addChild(smile);
  76     body.addChild(frown);
  77     body.addChild(leftEye);
  78     body.addChild(rightEye);
  79     body.addChild(leftPupil);
  80     body.addChild(rightPupil);
  81
  82     return body;
  83   },
  84
  85   /**
  86    * Creates an empty graphic
  87    *
  88    * @function createEmptyGraphic
  89    * @memberof PixiFactory
  90    * @return {external:CreateJs.Container} the created container
  91    */
  92   createEmptyGraphic(config) {
  93
  94     return new Graphics();
  95   },
  96
  97   /**
  98    * Creates a harness graphic
  99    *
 100    * @function createHarness
 101    * @memberof PixiFactory
 102    * @return {external:CreateJs.Container} the created container
 103    */
 104   createHarness(config) {
 105
 106     const radius = config.radius;
 107
 108     const lineThickness = 10;
 109
 110     // The body
 111     const body = new Graphics();
 112     body.lineStyle(lineThickness, 0xe1e1e1, 1)
 113       .drawCircle(0, 0, radius);
 114
 115     const center = new Graphics();
 116     center.beginFill(0xf1f1f1)
 117       .drawCircle(0, 0, radius - lineThickness / 2)
 118       .endFill();
 119
 120     body.addChild(center);
 121
 122     return body;
 123   },
 124
 125   /**
 126    * Creates an arena graphic
 127    *
 128    * @function createArena
 129    * @memberof PixiFactory
 130    * @return {external:CreateJs.Container} the created container
 131    */
 132   createArena(config) {
 133
 134     const radius = config.radius;
 135
 136     const lineThickness = 20;
 137
 138     // The body
 139     const arena = new Graphics();
 140     arena.lineStyle(lineThickness, 0xdfd4b2, 1)
 141       .drawCircle(0, 0, radius);
 142
 143     const leftLine = new Graphics();
 144     leftLine.lineStyle(20, 0xbdb08b, 1)
 145       .moveTo(-radius / 4, -radius / 8)
 146       .lineTo(-radius / 4, radius / 8);
 147
 148     const rightLine = new Graphics();
 149     rightLine.lineStyle(20, 0xbdb08b, 1)
 150       .moveTo(radius / 4, -radius / 8)
 151       .lineTo(radius / 4, radius / 8);
 152
 153     arena.addChild(leftLine);
 154     arena.addChild(rightLine);
 155
 156     return arena;
 157   },
 158
 159   /**
 160    * Creates a blush for the face
 161    *
 162    * @function createBlush
 163    * @memberof PixiFactory
 164    * @return {external:CreateJs.Container} the created container
 165    */
 166   createBlush(config) {
 167
 168     const radius = config.radius;
 169
 170     const blush = new Graphics();
 171
 172     blush.name = 'blush';
 173     blush.visible = false;
 174
 175     const leftEyebrow = new Graphics();
 176     leftEyebrow.lineStyle(4, 0x11, 1)
 177       .arc(
 178         -radius / 3 - radius / 4, -radius / 2 - radius / 4,
 179         radius / 3,
 180         Math.PI / 8,
 181         2 * Math.PI / 3
 182       );
 183
 184     const leftBlush = new Graphics();
 185     leftBlush.lineStyle(4, 0xe7bfe6, 1)
 186       .moveTo(-radius / 3 - radius / 4, radius / 10)
 187       .lineTo(-radius / 3, 0);
 188
 189     const rightEyebrow = new Graphics();
 190     rightEyebrow.lineStyle(4, 0x11, 1)
 191       .arc(
 192         radius / 3 + radius / 4, -radius / 2 - radius / 4,
 193         radius / 3,
 194         Math.PI / 3,
 195         7 * Math.PI / 8
 196       );
 197
 198     const rightBlush = new Graphics();
 199     rightBlush.lineStyle(4, 0xe7bfe6, 1)
 200       .moveTo(radius / 3 + radius / 4, radius / 10)
 201       .lineTo(radius / 3, 0);
 202
 203     blush.addChild(leftEyebrow);
 204     blush.addChild(leftBlush);
 205     blush.addChild(rightEyebrow);
 206     blush.addChild(rightBlush);
 207
 208     return blush;
 209   },
 210
 211   /**
 212    * Creates an effort mark
 213    *
 214    * @function createEffortMark
 215    * @memberof PixiFactory
 216    * @return {external:CreateJs.Container} the created container
 217    */
 218   createEffortMark(config) {
 219
 220     const radius = config.radius;
 221
 222     const effortMark = new Graphics();
 223
 224     const centerX = -3 * radius / 4;
 225     const centerY = -3 * radius / 4;
 226
 227     effortMark.name = 'effort';
 228     effortMark.visible = false;
 229
 230     const color = 0xff00ff;
 231     const lineWidth = 2;
 232
 233     const topRightArch = new Graphics();
 234     topRightArch.lineStyle(lineWidth, color, 1)
 235       .arc(
 236         centerX + 2 * radius / 7, centerY - 2 * radius / 7,
 237         radius / 5,
 238         Math.PI / 2,
 239         Math.PI
 240       );
 241
 242     const topLeftArch = new Graphics();
 243     topLeftArch.lineStyle(lineWidth, color, 1)
 244       .arc(
 245         centerX - 2 * radius / 7, centerY - radius / 4,
 246         radius / 5,
 247         0,
 248         Math.PI / 2
 249       );
 250
 251     const bottomRightArch = new Graphics();
 252     bottomRightArch.lineStyle(lineWidth, color, 1)
 253       .arc(
 254         centerX + 2 * radius / 7, centerY + radius / 4,
 255         radius / 5,
 256         Math.PI,
 257         3 * Math.PI / 2
 258       );
 259
 260     const bottomLeftArch = new Graphics();
 261     bottomLeftArch.lineStyle(lineWidth, color, 1)
 262       .arc(
 263         centerX - 2 * radius / 7, centerY + 2 * radius / 7,
 264         radius / 5,
 265         3 * Math.PI / 2,
 266         0
 267       );
 268
 269     effortMark.addChild(topRightArch);
 270     effortMark.addChild(topLeftArch);
 271     effortMark.addChild(bottomRightArch);
 272     effortMark.addChild(bottomLeftArch);
 273
 274     return effortMark;
 275   },
 276
 277   /**
 278    * Creates a shadow for the eye
 279    *
 280    * @function createShadow
 281    * @memberof PixiFactory
 282    * @return {external:CreateJs.Container} the created container
 283    */
 284   createShadow(config) {
 285
 286     const radius = config.radius;
 287
 288     const shadow = new Graphics();
 289
 290     const centerX = radius / 2;
 291     const centerY = -3 * radius / 4;
 292
 293     shadow.name = 'shadow';
 294     shadow.visible = false;
 295
 296     const color = 0x9900ff;
 297     const lineWidth = 2;
 298
 299     shadow.lineStyle(lineWidth, color, 1)
 300       .moveTo(centerX - radius / 4, centerY - radius / 3)
 301       .lineTo(centerX - radius / 4, centerY + radius / 5)
 302       .moveTo(centerX - radius / 8, centerY - radius / 4)
 303       .lineTo(centerX - radius / 8, centerY + radius / 5)
 304       .moveTo(centerX, centerY - radius / 5)
 305       .lineTo(centerX, centerY + radius / 5)
 306       .moveTo(centerX + radius / 8, centerY - radius / 6)
 307       .lineTo(centerX + radius / 8, centerY + radius / 6)
 308       .moveTo(centerX + radius / 4, centerY - radius / 5)
 309       .lineTo(centerX + radius / 4, centerY + radius / 5);
 310
 311     return shadow;
 312   }
 313 };