createSumo(config) {
const radius = config.radius;
+ const sumoColor = config.color || 0x87c5ea;
// The body
const body = new Graphics();
- body.beginFill(0x87c5ea)
+ body.beginFill(sumoColor)
.drawCircle(0, 0, radius)
.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,
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)
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(mouth);
+ body.addChild(smile);
+ body.addChild(frown);
body.addChild(leftEye);
body.addChild(rightEye);
body.addChild(leftPupil);
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;
}
};
-
git.r.bdr.sh / rbdr / sumo / blobdiff