From 4501938b7419915ba0d225d77aa05146f1e80743 Mon Sep 17 00:00:00 2001 From: Marla Schulz Date: Mon, 15 Aug 2022 18:03:43 -0600 Subject: [PATCH] Modify highlight for chocolate bars, see: https://github.com/phetsims/mean-share-and-balance/issues/52 --- js/common/MeanShareAndBalanceConstants.ts | 4 +-- js/leveling-out/view/ChocolateBarRectangle.ts | 31 ++++++++++++------- 2 files changed, 21 insertions(+), 14 deletions(-) diff --git a/js/common/MeanShareAndBalanceConstants.ts b/js/common/MeanShareAndBalanceConstants.ts index bbef2268..1b6550ec 100644 --- a/js/common/MeanShareAndBalanceConstants.ts +++ b/js/common/MeanShareAndBalanceConstants.ts @@ -40,8 +40,8 @@ const MeanShareAndBalanceConstants = { MAX_CONTROLS_TEXT_WIDTH: 175, - CHOCOLATE_WIDTH: 125, - CHOCOLATE_HEIGHT: 35 + CHOCOLATE_WIDTH: 300, + CHOCOLATE_HEIGHT: 84 }; diff --git a/js/leveling-out/view/ChocolateBarRectangle.ts b/js/leveling-out/view/ChocolateBarRectangle.ts index d5f5eed8..9b985f74 100644 --- a/js/leveling-out/view/ChocolateBarRectangle.ts +++ b/js/leveling-out/view/ChocolateBarRectangle.ts @@ -35,29 +35,36 @@ export default class ChocolateBarRectangle extends Rectangle { // the new width of the partial chocolate bar. const x2 = ( MeanShareAndBalanceConstants.CHOCOLATE_WIDTH / 4 ) * options.visiblePieces; const y2 = MeanShareAndBalanceConstants.CHOCOLATE_HEIGHT; + const outerOffset = MeanShareAndBalanceConstants.CHOCOLATE_WIDTH / 25; + const innerOffset = outerOffset * 2; super( 0, 0, x2, y2, options ); const createChocolateEdge = ( xPosition: number ): Shape => { - const innerSquare = Shape.rectangle( xPosition + 5, 10, MeanShareAndBalanceConstants.CHOCOLATE_HEIGHT - 20, MeanShareAndBalanceConstants.CHOCOLATE_HEIGHT - 20 ); - const outerSquare = Shape.rectangle( xPosition, 5, MeanShareAndBalanceConstants.CHOCOLATE_HEIGHT - 10, MeanShareAndBalanceConstants.CHOCOLATE_HEIGHT - 10 ); - return outerSquare.shapeDifference( innerSquare ); + const innerSquare = Shape.roundRect( xPosition + innerOffset, innerOffset, MeanShareAndBalanceConstants.CHOCOLATE_HEIGHT - innerOffset * 2, MeanShareAndBalanceConstants.CHOCOLATE_HEIGHT - innerOffset * 2, 3, 3 ); + const outerSquare = Shape.roundRect( xPosition + outerOffset, outerOffset, MeanShareAndBalanceConstants.CHOCOLATE_HEIGHT - innerOffset, MeanShareAndBalanceConstants.CHOCOLATE_HEIGHT - innerOffset, 5, 5 ); + const chocolateEdges = outerSquare.shapeDifference( innerSquare ); + const clippingTriangle = new Shape().moveTo( xPosition + outerOffset, outerOffset ) + .lineTo( xPosition + ( MeanShareAndBalanceConstants.CHOCOLATE_HEIGHT / 2 ), MeanShareAndBalanceConstants.CHOCOLATE_HEIGHT / 2 ) + .lineTo( xPosition + outerOffset, MeanShareAndBalanceConstants.CHOCOLATE_HEIGHT - outerOffset ) + .close(); + + return chocolateEdges.shapeIntersection( clippingTriangle ); }; for ( let i = 0; i < options.visiblePieces; i++ ) { - const xPosition = ( ( x2 - 5 ) / options.visiblePieces ) * i; + const xPosition = ( ( x2 - outerOffset ) / options.visiblePieces ) * i; - const chocolateHighlight = new Path( createChocolateEdge( xPosition + 5 ), { + const chocolateHighlightLeft = new Path( createChocolateEdge( xPosition ), { fill: '#8C603D' } ); - - const innerChocolateSquare = new Rectangle( xPosition + 10, 10, MeanShareAndBalanceConstants.CHOCOLATE_HEIGHT - 20, MeanShareAndBalanceConstants.CHOCOLATE_HEIGHT - 20, { - fill: MeanShareAndBalanceColors.chocolateColorProperty, - cornerRadius: 4 + const chocolateHighlightRight = new Path( createChocolateEdge( xPosition ), { + fill: '#8C603D', + rotation: Math.PI / 2 } ); - - this.addChild( innerChocolateSquare ); - this.addChild( chocolateHighlight ); + + this.addChild( chocolateHighlightLeft ); + this.addChild( chocolateHighlightRight ); } } }