Make full chart dialog its own class. Fix dialog button color. See #78.

build-a-nucleus-strings_en.json

@@ -190,5 +190,8 @@
   },
   "fullChartHere": {
     "value": "full chart here"
+  },
+  "fullNuclideChart": {
+    "value": "Full Nuclide Chart"
   }
 }

js/BuildANucleusStrings.ts

@@ -77,6 +77,7 @@ type StringsType = {
   'magicNumbersStringProperty': LocalizedStringProperty;
   'fullChartInfoPanelTextPatternStringProperty': LocalizedStringProperty;
   'fullChartHereStringProperty': LocalizedStringProperty;
+  'fullNuclideChartStringProperty': LocalizedStringProperty;
 };
 
 const BuildANucleusStrings = getStringModule( 'BUILD_A_NUCLEUS' ) as StringsType;

js/chart-intro/view/ChartIntroScreenView.ts

@@ -8,14 +8,14 @@
 
 import buildANucleus from '../../buildANucleus.js';
 import ChartIntroModel, { SelectedChartType } from '../model/ChartIntroModel.js';
-import optionize, { combineOptions, EmptySelfOptions } from '../../../../phet-core/js/optionize.js';
+import optionize, { EmptySelfOptions } from '../../../../phet-core/js/optionize.js';
 import BANScreenView, { BANScreenViewOptions, BetaDecayReturnValues, EmitAlphaParticleValues } from '../../common/view/BANScreenView.js';
 import Particle from '../../../../shred/js/model/Particle.js';
 import ParticleAtom from '../../../../shred/js/model/ParticleAtom.js';
 import Multilink from '../../../../axon/js/Multilink.js';
 import PeriodicTableAndIsotopeSymbol from './PeriodicTableAndIsotopeSymbol.js';
 import BuildANucleusStrings from '../../BuildANucleusStrings.js';
-import { allowLinksProperty, Color, Image, Line, Node, Rectangle, RichText, RichTextOptions, Text, VBox } from '../../../../scenery/js/imports.js';
+import { Line, Node, Rectangle, RichText, Text } from '../../../../scenery/js/imports.js';
 import BANConstants from '../../common/BANConstants.js';
 import ArrowNode from '../../../../scenery-phet/js/ArrowNode.js';
 import BANColors from '../../common/BANColors.js';
@@ -34,10 +34,7 @@ import DecayType from '../../common/model/DecayType.js';
 import Checkbox from '../../../../sun/js/Checkbox.js';
 import BooleanProperty from '../../../../axon/js/BooleanProperty.js';
 import InfoButton from '../../../../scenery-phet/js/buttons/InfoButton.js';
-import Dialog from '../../../../sun/js/Dialog.js';
-import DerivedStringProperty from '../../../../axon/js/DerivedStringProperty.js';
-import StringUtils from '../../../../phetcommon/js/util/StringUtils.js';
-import fullNuclideChart_png from '../../../images/fullNuclideChart_png.js';
+import FullChartDialog from './FullChartDialog.js';
 
 // types
 export type NuclideChartIntroScreenViewOptions = BANScreenViewOptions;
@@ -212,38 +209,9 @@ class ChartIntroScreenView extends BANScreenView<ChartIntroModel> {
     showMagicNumbersCheckbox.top = nuclideChartAccordionBox.bottom + CHART_VERTICAL_MARGINS;
     this.addChild( showMagicNumbersCheckbox );
 
-    // If links are allowed, use hyperlinks. Otherwise, just output the URL. This doesn't need to be internationalized.
-    const linkText = 'https://energyeducation.ca/simulations/nuclear/nuclidechart.html';
-    const stringProperty = new DerivedStringProperty( [
-      allowLinksProperty,
-      BuildANucleusStrings.fullChartInfoPanelTextPatternStringProperty,
-      BuildANucleusStrings.fullChartHereStringProperty
-    ], ( allowLinks, fullChartInfoText, fullChartHereText ) => {
-      return allowLinks ?
-             StringUtils.fillIn( fullChartInfoText, { link: `<a href="{{url}}">${fullChartHereText}</a>` } ) :
-             StringUtils.fillIn( fullChartInfoText, { link: linkText } );
-    } );
-
-    const fullChartImage = new Image( fullNuclideChart_png );
-    const fullChartInfoText = new RichText( stringProperty, combineOptions<RichTextOptions>( {
-      links: { url: linkText } // RichText must fill in URL for link
-    }, BANConstants.INFO_DIALOG_TEXT_OPTIONS ) );
-    fullChartImage.setMaxWidth( fullChartInfoText.width );
-    const fullChartImageBorderRectangle = Rectangle.bounds( fullChartImage.bounds.dilated( 5 ), { stroke: Color.BLACK } );
-
-    // create and add the full chart info dialog and button
-    const fullChartInfoDialog = new Dialog(
-      new VBox( {
-        children: [
-          fullChartInfoText,
-          new Node( { children: [ fullChartImage, fullChartImageBorderRectangle ] } )
-        ],
-        spacing: 10
-      } ),
-      BANConstants.INFO_DIALOG_OPTIONS
-    );
+    const fullChartDialog = new FullChartDialog();
     const fullChartInfoButton = new InfoButton( {
-      listener: () => fullChartInfoDialog.show(),
+      listener: () => fullChartDialog.show(),
       maxHeight: BANConstants.INFO_BUTTON_MAX_HEIGHT,
       baseColor: BANColors.regularInfoButtonColorProperty
     } );

js/chart-intro/view/FullChartDialog.ts

@@ -0,0 +1,57 @@
+// Copyright 2023, University of Colorado Boulder
+
+/**
+ * Node that contains the information Dialog on the full chart and a link to the full chart.
+ * @author Luisa Vargas
+ */
+
+import Dialog, { DialogOptions } from '../../../../sun/js/Dialog.js';
+import buildANucleus from '../../buildANucleus.js';
+import { allowLinksProperty, Color, Image, Node, Rectangle, RichText, RichTextOptions, VBox, Text } from '../../../../scenery/js/imports.js';
+import fullNuclideChart_png from '../../../images/fullNuclideChart_png.js';
+import { combineOptions } from '../../../../phet-core/js/optionize.js';
+import BANConstants from '../../common/BANConstants.js';
+import DerivedStringProperty from '../../../../axon/js/DerivedStringProperty.js';
+import BuildANucleusStrings from '../../BuildANucleusStrings.js';
+import StringUtils from '../../../../phetcommon/js/util/StringUtils.js';
+
+class FullChartDialog extends Dialog {
+
+  public constructor() {
+
+    // If links are allowed, use hyperlinks. Otherwise, just output the URL. This doesn't need to be internationalized.
+    const linkText = 'https://energyeducation.ca/simulations/nuclear/nuclidechart.html';
+    const stringProperty = new DerivedStringProperty( [
+      allowLinksProperty,
+      BuildANucleusStrings.fullChartInfoPanelTextPatternStringProperty,
+      BuildANucleusStrings.fullChartHereStringProperty
+    ], ( allowLinks, fullChartInfoText, fullChartHereText ) => {
+      return allowLinks ?
+             StringUtils.fillIn( fullChartInfoText, { link: `<a href="{{url}}">${fullChartHereText}</a>` } ) :
+             StringUtils.fillIn( fullChartInfoText, { link: linkText } );
+    } );
+
+    const fullChartImage = new Image( fullNuclideChart_png );
+    const fullChartInfoText = new RichText( stringProperty, combineOptions<RichTextOptions>( {
+      links: { url: linkText } // RichText must fill in URL for link
+    }, BANConstants.INFO_DIALOG_TEXT_OPTIONS ) );
+    fullChartImage.setMaxWidth( fullChartInfoText.width );
+    const fullChartImageBorderRectangle = Rectangle.bounds( fullChartImage.bounds.dilated( 5 ), { stroke: Color.BLACK } );
+
+    // create and add the full chart info dialog and button
+    super( new VBox( {
+        children: [
+          fullChartInfoText,
+          new Node( { children: [ fullChartImage, fullChartImageBorderRectangle ] } )
+        ],
+        spacing: 10
+      } ),
+      combineOptions<DialogOptions>( {
+        title: new Text( BuildANucleusStrings.fullNuclideChartStringProperty, { font: BANConstants.TITLE_FONT } )
+      }, BANConstants.INFO_DIALOG_OPTIONS )
+    );
+  }
+}
+
+buildANucleus.register( 'FullChartDialog', FullChartDialog );
+export default FullChartDialog;

js/common/BANColors.ts

@@ -153,7 +153,7 @@ const BANColors = {
   } ),
 
   regularInfoButtonColorProperty: new ProfileColorProperty( buildANucleus, 'regularInfoButtonColor', {
-    default: new Color( 400, 400, 400 )
+    default: new Color( 255, 255, 255 )
   } )
 };
 

js/common/BANConstants.ts

@@ -59,6 +59,9 @@ const BANConstants = {
   // font size of the legend text in the accordion box and the 'most likely decay' string
   LEGEND_FONT: new PhetFont( 12 ),
 
+  // font size of the info dialog title's
+  TITLE_FONT: new PhetFont( 32 ),
+
   DEFAULT_INITIAL_PROTON_COUNT: 0,
   DEFAULT_INITIAL_NEUTRON_COUNT: 0,
 

js/decay/view/HalfLifeInfoDialog.ts

@@ -10,7 +10,6 @@
 import Dialog from '../../../../sun/js/Dialog.js';
 import buildANucleus from '../../buildANucleus.js';
 import { Font, GridBox, HBox, Node, Rectangle, Text, VBox } from '../../../../scenery/js/imports.js';
-import PhetFont from '../../../../scenery-phet/js/PhetFont.js';
 import BuildANucleusStrings from '../../BuildANucleusStrings.js';
 import BANColors from '../../common/BANColors.js';
 import HalfLifeNumberLineNode from './HalfLifeNumberLineNode.js';
@@ -20,7 +19,6 @@ import BANConstants from '../../common/BANConstants.js';
 
 // constants
 const MAX_CONTENT_WIDTH = 600;
-const TITLE_FONT = new PhetFont( 32 );
 const LEGEND_FONT = BANConstants.REGULAR_FONT;
 
 class HalfLifeInfoDialog extends Dialog {
@@ -138,7 +136,7 @@ class HalfLifeInfoDialog extends Dialog {
     }
 
     const titleNode = new Text( BuildANucleusStrings.halfLifeTimescaleStringProperty, {
-      font: TITLE_FONT,
+      font: BANConstants.TITLE_FONT,
       maxWidth: 0.75 * MAX_CONTENT_WIDTH
     } );