Factor out element name and the regular font used throughout the sim.…

… See #46.

js/chart-intro/view/ChartIntroScreenView.ts

@@ -11,9 +11,6 @@ import buildANucleus from '../../buildANucleus.js';
 import ChartIntroModel from '../model/ChartIntroModel.js';
 import optionize, { EmptySelfOptions } from '../../../../phet-core/js/optionize.js';
 import BANScreenView, { BANScreenViewOptions } from '../../common/view/BANScreenView.js';
-import BANConstants from '../../common/BANConstants.js';
-import { Color, Text } from '../../../../scenery/js/imports.js';
-import PhetFont from '../../../../scenery-phet/js/PhetFont.js';
 import AtomIdentifier from '../../../../shred/js/AtomIdentifier.js';
 import Particle from '../../../../shred/js/model/Particle.js';
 import ParticleAtom from '../../../../shred/js/model/ParticleAtom.js';
@@ -22,7 +19,6 @@ import Multilink from '../../../../axon/js/Multilink.js';
 import PeriodicTableAndIsotopeSymbol from './PeriodicTableAndIsotopeSymbol.js';
 
 // constants
-const LABEL_FONT = new PhetFont( BANConstants.REGULAR_FONT_SIZE );
 const NUCLEON_CAPTURE_RADIUS = 100;
 
 // types
@@ -45,20 +41,13 @@ class ChartIntroScreenView extends BANScreenView<ChartIntroModel> {
     // update the cloud size as the massNumber changes
     model.particleAtom.protonCountProperty.link( protonCount => this.updateCloudSize( protonCount, 0.65, 10, 20 ) );
 
-    // Create the textual readout for the element name.
-    const elementName = new Text( '', {
-      font: LABEL_FONT,
-      fill: Color.RED,
-      maxWidth: BANConstants.ELEMENT_NAME_MAX_WIDTH
-    } );
-    elementName.centerX = this.doubleArrowButtons.centerX;
-    elementName.top = this.nucleonCountPanel.top;
-    this.addChild( elementName );
+    this.elementName.centerX = this.doubleArrowButtons.centerX;
+    this.elementName.top = this.nucleonCountPanel.top;
 
     // Hook up update listeners.
     Multilink.multilink( [ model.particleAtom.protonCountProperty, model.particleAtom.neutronCountProperty, model.doesNuclideExistBooleanProperty ],
       ( protonCount: number, neutronCount: number, doesNuclideExist: boolean ) =>
-        BANScreenView.updateElementName( elementName, protonCount, neutronCount, doesNuclideExist,
+        BANScreenView.updateElementName( this.elementName, protonCount, neutronCount, doesNuclideExist,
           this.doubleArrowButtons.centerX )
     );
 
@@ -81,6 +70,7 @@ class ChartIntroScreenView extends BANScreenView<ChartIntroModel> {
    * Define a function that will decide where to put nucleons.
    */
   protected override dragEndedListener( nucleon: Particle, atom: ParticleAtom ): void {
+    // TODO: change to the energy level positioning
     const particleCreatorNodeCenter = nucleon.type === ParticleType.PROTON.name.toLowerCase() ?
                                       this.protonsCreatorNode.center : this.neutronsCreatorNode.center;
 

js/common/BANConstants.ts

@@ -9,6 +9,7 @@
 import buildANucleus from '../buildANucleus.js';
 import { Color } from '../../../scenery/js/imports.js';
 import ShredConstants from '../../../shred/js/ShredConstants.js';
+import PhetFont from '../../../scenery-phet/js/PhetFont.js';
 
 const BANConstants = {
 
@@ -47,7 +48,7 @@ const BANConstants = {
   INFO_BUTTON_MAX_HEIGHT: 30,
 
   // font size throughout the first screen (stability strings, legend strings, accordion box titles, etc.)
-  REGULAR_FONT_SIZE: 20,
+  REGULAR_FONT: new PhetFont( 20 ),
 
   DEFAULT_INITIAL_PROTON_COUNT: 0,
   DEFAULT_INITIAL_NEUTRON_COUNT: 0

js/common/view/BANScreenView.ts

@@ -93,6 +93,7 @@ abstract class BANScreenView<M extends BANModel> extends ScreenView {
   protected readonly doubleArrowButtons: Node;
   protected readonly protonArrowButtons: Node;
   protected readonly emptyAtomCircle: Node;
+  protected readonly elementName: Text;
 
   protected constructor( model: M, providedOptions?: BANScreenViewOptions ) {
 
@@ -124,6 +125,14 @@ abstract class BANScreenView<M extends BANModel> extends ScreenView {
     this.nucleonCountPanel.top = this.layoutBounds.minY + BANConstants.SCREEN_VIEW_Y_MARGIN;
     this.addChild( this.nucleonCountPanel );
 
+    // Create the textual readout for the element name.
+    this.elementName = new Text( '', {
+      font: BANConstants.REGULAR_FONT,
+      fill: Color.RED,
+      maxWidth: BANConstants.ELEMENT_NAME_MAX_WIDTH
+    } );
+    this.addChild( this.elementName );
+
     const arrowButtonSpacing = 7; // spacing between the 'up' arrow buttons and 'down' arrow buttons
     const arrowButtonOptions = {
       arrowWidth: 14,
@@ -488,7 +497,6 @@ abstract class BANScreenView<M extends BANModel> extends ScreenView {
       if ( this.model.particleAtom.protonCountProperty.value < BANQueryParameters.protons ) {
         this.addNucleonImmediatelyToAtom( ParticleType.PROTON );
       }
-      // TODO: need to detect if this forms a nuclide that shouldn't exist and then call QueryStringMachine.addWarning here and model.reset()
     } );
   }
 

js/decay/view/AvailableDecaysPanel.ts

@@ -74,7 +74,7 @@ class AvailableDecaysPanel extends Panel {
     // create and add the decays info dialog and button
     const decaysInfoDialog = new Dialog(
       new RichText( BuildANucleusStrings.availableDecaysInfoPanelText, {
-        font: new PhetFont( BANConstants.REGULAR_FONT_SIZE ),
+        font: BANConstants.REGULAR_FONT,
         lineWrap: 400,
         maxWidth: 400
       } ),

js/decay/view/DecayScreenView.ts

@@ -20,7 +20,6 @@ import { Circle, Color, HBox, ManualConstraint, Node, RadialGradient, Text } fro
 import BuildANucleusStrings from '../../BuildANucleusStrings.js';
 import BooleanProperty from '../../../../axon/js/BooleanProperty.js';
 import BANColors from '../../common/BANColors.js';
-import PhetFont from '../../../../scenery-phet/js/PhetFont.js';
 import AtomIdentifier from '../../../../shred/js/AtomIdentifier.js';
 import Vector2 from '../../../../dot/js/Vector2.js';
 import Property from '../../../../axon/js/Property.js';
@@ -38,7 +37,6 @@ import ReturnButton from '../../../../scenery-phet/js/buttons/ReturnButton.js';
 import StringProperty from '../../../../axon/js/StringProperty.js';
 
 // constants
-const LABEL_FONT = new PhetFont( BANConstants.REGULAR_FONT_SIZE );
 const NUCLEON_CAPTURE_RADIUS = 100;
 const NUMBER_OF_PROTONS_IN_ALPHA_PARTICLE = 2;
 const NUMBER_OF_NEUTRONS_IN_ALPHA_PARTICLE = 2;
@@ -85,7 +83,7 @@ class DecayScreenView extends BANScreenView<DecayModel> {
     } );
     this.symbolAccordionBox = new AccordionBox( symbolNode, {
       titleNode: new Text( BuildANucleusStrings.symbol, {
-        font: LABEL_FONT,
+        font: BANConstants.REGULAR_FONT,
         maxWidth: 118
       } ),
       fill: BANColors.panelBackgroundColorProperty,
@@ -200,7 +198,7 @@ class DecayScreenView extends BANScreenView<DecayModel> {
     // create and add the electronCloud checkbox
     const showElectronCloudCheckbox = new Checkbox( this.showElectronCloudBooleanProperty, new HBox( {
       children: [
-        new Text( BuildANucleusStrings.electronCloud, { font: LABEL_FONT, maxWidth: 210 } ),
+        new Text( BuildANucleusStrings.electronCloud, { font: BANConstants.REGULAR_FONT, maxWidth: 210 } ),
 
         // electron cloud icon
         new Circle( {
@@ -218,7 +216,7 @@ class DecayScreenView extends BANScreenView<DecayModel> {
 
     // create and add stability indicator
     this.stabilityIndicator = new Text( '', {
-      font: LABEL_FONT,
+      font: BANConstants.REGULAR_FONT,
       fill: 'black',
       visible: true,
       maxWidth: 225
@@ -255,23 +253,16 @@ class DecayScreenView extends BANScreenView<DecayModel> {
     model.particleAtom.protonCountProperty.link( protonCount => this.updateCloudSize( protonCount, 2, 70, 95 ) );
 
     // TODO: move elementName to BANScreenView bc text node the same, just positioning different
-    // Create the textual readout for the element name.
-    const elementName = new Text( '', {
-      font: LABEL_FONT,
-      fill: Color.RED,
-      maxWidth: BANConstants.ELEMENT_NAME_MAX_WIDTH
-    } );
-    elementName.center = this.stabilityIndicator.center.plusXY( 0, 60 );
-    this.addChild( elementName );
+
+    this.elementName.center = this.stabilityIndicator.center.plusXY( 0, 60 );
+    this.nucleonCountPanel.left = availableDecaysPanel.left;
 
     // Hook up update listeners.
     Multilink.multilink( [ model.particleAtom.protonCountProperty, model.particleAtom.neutronCountProperty, model.doesNuclideExistBooleanProperty ],
       ( protonCount: number, neutronCount: number, doesNuclideExist: boolean ) =>
-        BANScreenView.updateElementName( elementName, protonCount, neutronCount, doesNuclideExist, this.stabilityIndicator.centerX )
+        BANScreenView.updateElementName( this.elementName, protonCount, neutronCount, doesNuclideExist, this.stabilityIndicator.centerX )
     );
 
-    this.nucleonCountPanel.left = availableDecaysPanel.left;
-
     // only show the emptyAtomCircle if less than 2 particles are in the atom. We still want to shown it when there's
     // only one nucleon, and no electron cloud, to accommodate for when the first nucleon is being animated towards the
     // atomNode center. However, if the electronCloud is showing, then only show the emptyAtomCircle when there are zero

js/decay/view/HalfLifeInfoDialog.ts

@@ -21,7 +21,7 @@ import BANConstants from '../../common/BANConstants.js';
 // constants
 const MAX_CONTENT_WIDTH = 600;
 const TITLE_FONT = new PhetFont( 32 );
-const LEGEND_FONT = new PhetFont( BANConstants.REGULAR_FONT_SIZE );
+const LEGEND_FONT = new PhetFont( BANConstants.REGULAR_FONT );
 
 class HalfLifeInfoDialog extends Dialog {