X-Git-Url: https://git.r.bdr.sh/rbdr/sumo/blobdiff_plain/6768cd461ec1a8ea87c0f64e1b3c29e36b0b02ed..refs/heads/rbdr-bouncy-walls:/lib/factories/pixi.js diff --git a/lib/factories/pixi.js b/lib/factories/pixi.js index 786639f..077c5b4 100644 --- a/lib/factories/pixi.js +++ b/lib/factories/pixi.js @@ -19,10 +19,11 @@ export default { 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(); @@ -68,6 +69,9 @@ export default { body.addChild(this.createBlush({ radius })); + body.addChild(this.createEffortMark({ radius })); + body.addChild(this.createShadow({ radius })); + // The group body.addChild(smile); body.addChild(frown); @@ -203,5 +207,108 @@ export default { 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; } };