From 7c197dde8d06cdad62c4cc822a1f1a1e17030bfe Mon Sep 17 00:00:00 2001 From: Luisav1 Date: Wed, 30 Nov 2022 12:48:37 -0700 Subject: [PATCH] Add colors to DecayType.ts. Move DecayType.ts to common. Create NuclideChartNode.ts that has decay legend boxes. See https://github.com/phetsims/build-a-nucleus/issues/46. --- js/chart-intro/view/NuclideChartNode.ts | 52 +++++++++++++++++++++++++ js/common/BANColors.ts | 20 ++++++++++ js/{decay => common}/view/DecayType.ts | 16 +++++--- js/decay/model/DecayModel.ts | 2 +- js/decay/view/AvailableDecaysPanel.ts | 2 +- js/decay/view/DecayScreenView.ts | 2 +- 6 files changed, 85 insertions(+), 9 deletions(-) create mode 100644 js/chart-intro/view/NuclideChartNode.ts rename js/{decay => common}/view/DecayType.ts (63%) diff --git a/js/chart-intro/view/NuclideChartNode.ts b/js/chart-intro/view/NuclideChartNode.ts new file mode 100644 index 0000000..71b20d1 --- /dev/null +++ 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; \ No newline at end of file diff --git a/js/common/BANColors.ts b/js/common/BANColors.ts index a5cc901..0e39dc1 100644 --- 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 b/js/common/view/DecayType.ts similarity index 63% rename from js/decay/view/DecayType.ts rename to js/common/view/DecayType.ts index e966922..c0cd6c3 100644 --- a/js/decay/view/DecayType.ts +++ b/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 index a0ab964..71c57b0 100644 --- 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 index eaa5a2f..05ae5fa 100644 --- 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 index c496f1a..d18f040 100644 --- 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';