dynamic locale adjustments to the "Available Decays" panel, #90

phetsims · Jul 21, 2023 · 5bf9645 · 5bf9645
1 parent 58bf983
commit 5bf9645
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 12 deletions.
diff --git a/js/chart-intro/view/DecayEquationNode.ts b/js/chart-intro/view/DecayEquationNode.ts
@@ -10,14 +10,14 @@
 import buildANucleus from '../../buildANucleus.js';
 import DecayEquationModel from '../model/DecayEquationModel.js';
 import BuildANucleusStrings from '../../BuildANucleusStrings.js';
-import StringUtils from '../../../../phetcommon/js/util/StringUtils.js';
 import { HBox, Text, VBox } from '../../../../scenery/js/imports.js';
 import ArrowNode from '../../../../scenery-phet/js/ArrowNode.js';
 import DecaySymbolNode from './DecaySymbolNode.js';
 import IconFactory from '../../decay/view/IconFactory.js';
 import PatternStringProperty from '../../../../axon/js/PatternStringProperty.js';
 import BANColors from '../../common/BANColors.js';
 import BANConstants from '../../common/BANConstants.js';
+import DerivedStringProperty from '../../../../axon/js/DerivedStringProperty.js';
 
 const unknownSpacePatternStringProperty = new PatternStringProperty( BuildANucleusStrings.unknownSpacePatternStringProperty, { space: ' ' } );
 
@@ -51,8 +51,10 @@ class DecayEquationNode extends VBox {
     decayEquationModel.currentCellModelProperty.link( currentCellModel => {
       equationHBox.visible = true;
       if ( currentCellModel ) {
-        const decayLikelihoodPercentString = new Text( StringUtils.fillIn( BuildANucleusStrings.percentageInParenthesesPatternStringProperty, {
-          decayLikelihoodPercent: currentCellModel.decayTypeLikelihoodPercent || unknownSpacePatternStringProperty
+        const decayLikelihoodPercentString = new Text( new PatternStringProperty( BuildANucleusStrings.percentageInParenthesesPatternStringProperty, {
+          decayLikelihoodPercent: new DerivedStringProperty( [
+            unknownSpacePatternStringProperty
+          ], unknownString => `${currentCellModel.decayTypeLikelihoodPercent}` || unknownString )
         } ), {
           font: BANConstants.LEGEND_FONT
         } );

diff --git a/js/common/view/BANScreenView.ts b/js/common/view/BANScreenView.ts
@@ -30,7 +30,6 @@ import ParticleAtom from '../../../../shred/js/model/ParticleAtom.js';
 import Vector2 from '../../../../dot/js/Vector2.js';
 import DerivedProperty from '../../../../axon/js/DerivedProperty.js';
 import arrayRemove from '../../../../phet-core/js/arrayRemove.js';
-import StringUtils from '../../../../phetcommon/js/util/StringUtils.js';
 import BANQueryParameters from '../BANQueryParameters.js';
 import ParticleNucleus from '../../chart-intro/model/ParticleNucleus.js';
 import ParticleAtomNode from './ParticleAtomNode.js';
@@ -40,6 +39,7 @@ import dotRandom from '../../../../dot/js/dotRandom.js';
 import BANParticle from '../model/BANParticle.js';
 import Animation from '../../../../twixt/js/Animation.js';
 import Easing from '../../../../twixt/js/Easing.js';
+import PatternStringProperty from '../../../../axon/js/PatternStringProperty.js';
 
 const TOUCH_AREA_Y_DILATION = 3;
 
@@ -728,6 +728,8 @@ abstract class BANScreenView<M extends BANModel<ParticleAtom | ParticleNucleus>>
 
   /**
    * Define the update function for the element name.
+   * TODO: support dynamic locale for this whole function, https://github.com/phetsims/build-a-nucleus/issues/90
+   *
    */
   public static updateElementName( elementNameText: Text, protonCount: number, neutronCount: number,
                                    doesNuclideExist: boolean, centerX: number, centerY?: number ): void {
@@ -739,7 +741,6 @@ abstract class BANScreenView<M extends BANModel<ParticleAtom | ParticleNucleus>>
 
       // no protons
       if ( name.length === 0 ) {
-        // TODO: support dynamic locale, https://github.com/phetsims/build-a-nucleus/issues/90
         name += massNumber.toString() + ' ' + BuildANucleusStrings.neutronsLowercaseStringProperty.value + ' ' + BuildANucleusStrings.doesNotFormStringProperty.value;
       }
       else {
@@ -762,9 +763,9 @@ abstract class BANScreenView<M extends BANModel<ParticleAtom | ParticleNucleus>>
 
       // multiple neutrons
       else {
-        name = StringUtils.fillIn( BuildANucleusStrings.clusterOfNeutronsPatternStringProperty, {
+        name = new PatternStringProperty( BuildANucleusStrings.clusterOfNeutronsPatternStringProperty, {
           neutronCount: neutronCount
-        } );
+        } ).value;
       }
 
     }

diff --git a/js/decay/view/AvailableDecaysPanel.ts b/js/decay/view/AvailableDecaysPanel.ts
@@ -57,7 +57,9 @@ class AvailableDecaysPanel extends Panel {
   public constructor( model: DecayModel, options: AvailableDecaysPanelOptions ) {
 
     // create and add the title
-    const titleNode = new Text( BuildANucleusStrings.availableDecaysStringProperty, { font: TITLE_FONT, maxWidth: 285 } );
+    const titleNode = new Text( BuildANucleusStrings.availableDecaysStringProperty, {
+      font: TITLE_FONT, maxWidth: 250
+    } );
 
     // create and add the decays info dialog and button
     const decaysInfoDialog = new Dialog(
@@ -109,8 +111,10 @@ class AvailableDecaysPanel extends Panel {
       const buttonBackgroundRectangle = new Rectangle( 0, 0, BUTTON_CONTENT_WIDTH, BUTTON_HEIGHT );
       const buttonText = new RichText( decayType.labelStringProperty, { font: LABEL_FONT, maxWidth: BUTTON_CONTENT_WIDTH } );
 
-      assert && assert( BUTTON_TEXT_BOTTOM_MARGIN + buttonText.height < BUTTON_HEIGHT, 'The button text is changing the size of the button.' );
-      buttonText.centerBottom = buttonBackgroundRectangle.centerBottom.minusXY( 0, BUTTON_TEXT_BOTTOM_MARGIN );
+      buttonText.boundsProperty.link( () => {
+        assert && assert( BUTTON_TEXT_BOTTOM_MARGIN + buttonText.height < BUTTON_HEIGHT, 'The button text is changing the size of the button.' );
+        buttonText.centerBottom = buttonBackgroundRectangle.centerBottom.minusXY( 0, BUTTON_TEXT_BOTTOM_MARGIN );
+      } );
       buttonBackgroundRectangle.addChild( buttonText );
 
       return new RectangularPushButton( {
@@ -162,7 +166,7 @@ class AvailableDecaysPanel extends Panel {
       return new HBox( {
         children: [
           new ParticleNode( particleType.particleTypeString, particleType === ParticleType.PROTON || particleType === ParticleType.NEUTRON ? NUCLEON_PARTICLE_RADIUS : ELECTRON_PARTICLE_RADIUS ),
-          new Text( particleType.labelStringProperty, { font: LABEL_FONT, maxWidth: 100 } )
+          new Text( particleType.labelStringProperty, { font: LABEL_FONT, maxWidth: 110 } )
         ],
         spacing: SPACING
       } );
@@ -180,7 +184,8 @@ class AvailableDecaysPanel extends Panel {
         createParticleLabelsVBox( [ particleLabels[ 0 ], particleLabels[ 2 ] ] ),
         createParticleLabelsVBox( [ particleLabels[ 1 ], particleLabels[ 3 ] ] )
       ],
-      spacing: SPACING * 5
+      spacing: SPACING,
+      minContentWidth: 100
     } );
     particleLabelsLegend.top = separator.bottom + SPACING;