Add colors to DecayType.ts. Move DecayType.ts to common. Create Nucli…

…deChartNode.ts that has decay legend boxes. See #46.
phetsims · Nov 30, 2022 · 7c197dd · 7c197dd
1 parent 7442407
commit 7c197dd
Show file tree

Hide file tree

Showing 6 changed files with 85 additions and 9 deletions.
diff --git a/js/chart-intro/view/NuclideChartNode.ts b/js/chart-intro/view/NuclideChartNode.ts
@@ -0,0 +1,52 @@
+// Copyright 2022, University of Colorado Boulder
+
+/**
+ * Node that represents the initial part of the Nuclide chart, up to 10 protons and 12 neutrons.
+ *
+ * @author Luisa Vargas
+ */
+
+import Dimension2 from '../../../../dot/js/Dimension2.js';
+import { HBox, Node, NodeOptions, ProfileColorProperty, Rectangle, Text } from '../../../../scenery/js/imports.js';
+import buildANucleus from '../../buildANucleus.js';
+import BANColors from '../../common/BANColors.js';
+import BuildANucleusStrings from '../../BuildANucleusStrings.js';
+import PhetFont from '../../../../scenery-phet/js/PhetFont.js';
+import DecayType from '../../common/view/DecayType.js';
+
+type NuclideChartNodeOptions = NodeOptions;
+
+// constants
+const LEGEND_FONT = new PhetFont( 16 );
+const LEGEND_KEY_BOX_SIZE = 30;
+
+class NuclideChartNode extends Node {
+
+  public constructor( providedOptions: NuclideChartNodeOptions ) {
+
+    super( providedOptions );
+
+    const createLegendItem = ( decayTypeText: string, decayTypeColor: ProfileColorProperty ): HBox => {
+      return new HBox( {
+        children: [
+          new Rectangle( { rectSize: new Dimension2( LEGEND_KEY_BOX_SIZE, LEGEND_KEY_BOX_SIZE ), fill: decayTypeColor } ),
+          new Text( decayTypeText, { font: LEGEND_FONT } )
+        ],
+        spacing: 10
+        // TODO: add maxWidth
+      } );
+    };
+
+    const decayHBoxes = [];
+    const stableHBox = createLegendItem( BuildANucleusStrings.stable, BANColors.stableColorProperty );
+    decayHBoxes.push( stableHBox );
+
+    DecayType.enumeration.values.forEach( decayType => {
+      decayHBoxes.push( createLegendItem( decayType.label, decayType.colorProperty ) );
+    } );
+
+  }
+}
+
+buildANucleus.register( 'NuclideChartNode', NuclideChartNode );
+export default NuclideChartNode;
diff --git a/js/common/BANColors.ts b/js/common/BANColors.ts
@@ -31,6 +31,26 @@ const BANColors = {
     default: new Color( 53, 182, 74 )
   } ),
 
+  // decay colors
+  protonEmissionColorProperty: new ProfileColorProperty( buildANucleus, 'protonEmissionColor', {
+    default: new Color( 212, 20, 90 )
+  } ),
+  neutronEmissionColorProperty: new ProfileColorProperty( buildANucleus, 'neutronEmissionColor', {
+    default: Color.MAGENTA
+  } ),
+  betaPlusColorProperty: new ProfileColorProperty( buildANucleus, 'betaPlusColor', {
+    default: Color.BLUE
+  } ),
+  betaMinusColorProperty: new ProfileColorProperty( buildANucleus, 'betaMinusColor', {
+    default: Color.CYAN
+  } ),
+  alphaColorProperty: new ProfileColorProperty( buildANucleus, 'alphaColor', {
+    default: Color.GREEN
+  } ),
+  stableColorProperty: new ProfileColorProperty( buildANucleus, 'stableColor', {
+    default: new Color( 27, 20, 100 )
+  } ),
+
   // background color for panels in this sim
   panelBackgroundColorProperty: new ProfileColorProperty( buildANucleus, 'panelBackground', {
     default: new Color( 241, 250, 254 )

diff --git a/js/decay/view/DecayType.ts → js/common/view/DecayType.ts b/js/decay/view/DecayType.ts → js/common/view/DecayType.ts
@@ -10,27 +10,31 @@ import EnumerationValue from '../../../../phet-core/js/EnumerationValue.js';
 import buildANucleus from '../../buildANucleus.js';
 import Enumeration from '../../../../phet-core/js/Enumeration.js';
 import BuildANucleusStrings from '../../BuildANucleusStrings.js';
+import { ProfileColorProperty } from '../../../../scenery/js/imports.js';
+import BANColors from '../BANColors.js';
 
 class DecayType extends EnumerationValue {
 
-  public static ALPHA_DECAY = new DecayType( BuildANucleusStrings.alphaDecay );
+  public static ALPHA_DECAY = new DecayType( BuildANucleusStrings.alphaDecay, BANColors.alphaColorProperty );
 
-  public static BETA_MINUS_DECAY = new DecayType( BuildANucleusStrings.betaMinusDecay );
+  public static BETA_MINUS_DECAY = new DecayType( BuildANucleusStrings.betaMinusDecay, BANColors.betaMinusColorProperty );
 
-  public static BETA_PLUS_DECAY = new DecayType( BuildANucleusStrings.betaPlusDecay );
+  public static BETA_PLUS_DECAY = new DecayType( BuildANucleusStrings.betaPlusDecay, BANColors.betaPlusColorProperty );
 
-  public static PROTON_EMISSION = new DecayType( BuildANucleusStrings.protonEmission );
+  public static PROTON_EMISSION = new DecayType( BuildANucleusStrings.protonEmission, BANColors.protonEmissionColorProperty );
 
-  public static NEUTRON_EMISSION = new DecayType( BuildANucleusStrings.neutronEmission );
+  public static NEUTRON_EMISSION = new DecayType( BuildANucleusStrings.neutronEmission, BANColors.neutronEmissionColorProperty );
 
   public static enumeration = new Enumeration( DecayType );
 
   public readonly label: string;
+  public readonly colorProperty: ProfileColorProperty;
 
-  public constructor( label: string ) {
+  public constructor( label: string, colorProperty: ProfileColorProperty ) {
     super();
 
     this.label = label;
+    this.colorProperty = colorProperty;
 
   }
 }

diff --git a/js/decay/model/DecayModel.ts b/js/decay/model/DecayModel.ts
@@ -13,7 +13,7 @@ import BANModel, { BANModelOptions } from '../../common/model/BANModel.js';
 import AtomIdentifier from '../../../../shred/js/AtomIdentifier.js';
 import BANConstants from '../../common/BANConstants.js';
 import DerivedProperty from '../../../../axon/js/DerivedProperty.js';
-import DecayType from '../view/DecayType.js';
+import DecayType from '../../common/view/DecayType.js';
 import TReadOnlyProperty from '../../../../axon/js/TReadOnlyProperty.js';
 
 // types

diff --git a/js/decay/view/AvailableDecaysPanel.ts b/js/decay/view/AvailableDecaysPanel.ts
@@ -14,7 +14,7 @@ import PhetFont from '../../../../scenery-phet/js/PhetFont.js';
 import ParticleNode from '../../../../shred/js/view/ParticleNode.js';
 import ParticleType from '../../common/view/ParticleType.js';
 import RectangularPushButton from '../../../../sun/js/buttons/RectangularPushButton.js';
-import DecayType from './DecayType.js';
+import DecayType from '../../common/view/DecayType.js';
 import ArrowNode from '../../../../scenery-phet/js/ArrowNode.js';
 import PlusNode from '../../../../scenery-phet/js/PlusNode.js';
 import Dimension2 from '../../../../dot/js/Dimension2.js';

diff --git a/js/decay/view/DecayScreenView.ts b/js/decay/view/DecayScreenView.ts
@@ -31,7 +31,7 @@ import Checkbox from '../../../../sun/js/Checkbox.js';
 import dotRandom from '../../../../dot/js/dotRandom.js';
 import Animation from '../../../../twixt/js/Animation.js';
 import Easing from '../../../../twixt/js/Easing.js';
-import DecayType from './DecayType.js';
+import DecayType from '../../common/view/DecayType.js';
 import Multilink from '../../../../axon/js/Multilink.js';
 import ReturnButton from '../../../../scenery-phet/js/buttons/ReturnButton.js';
 import StringProperty from '../../../../axon/js/StringProperty.js';