X-Git-Url: https://git.r.bdr.sh/rbdr/sumo/blobdiff_plain/7ade6f8d96825386bf2e89dea51f9297cbac8e9c..7741a3cc37662ab2ff9606bdaffc0317b79a8dd9:/lib/factories/pixi.js?ds=sidebyside diff --git a/lib/factories/pixi.js b/lib/factories/pixi.js index 839e593..077c5b4 100644 --- a/lib/factories/pixi.js +++ b/lib/factories/pixi.js @@ -19,16 +19,18 @@ 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(); // 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 +38,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 +67,14 @@ export default { 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); @@ -101,6 +121,194 @@ 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; + }, + + /** + * 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; } }; -