X-Git-Url: https://git.r.bdr.sh/rbdr/sumo/blobdiff_plain/493ec31cb19b4211c703762d14a4e6232c4c2143..6768cd461ec1a8ea87c0f64e1b3c29e36b0b02ed:/lib/factories/pixi.js diff --git a/lib/factories/pixi.js b/lib/factories/pixi.js index 851a074..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); @@ -73,6 +89,119 @@ export default { 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; } }; -