Create and add periodic table and isotope symbol panel. See #46.

js/nuclide-chart-intro/view/NuclideChartIntroScreenView.ts

@@ -26,6 +26,7 @@ import ParticleView from '../../../../shred/js/view/ParticleView.js';
 import LinearFunction from '../../../../dot/js/LinearFunction.js';
 import StringUtils from '../../../../phetcommon/js/util/StringUtils.js';
 import Multilink from '../../../../axon/js/Multilink.js';
+import PeriodicTableAndIsotopeSymbol from './PeriodicTableAndIsotopeSymbol.js';
 
 // constants
 const LABEL_FONT = new PhetFont( BANConstants.REGULAR_FONT_SIZE );
@@ -120,6 +121,12 @@ class NuclideChartIntroScreenView extends BANScreenView<NuclideChartIntroModel>
           this.doubleArrowButtons.centerX )
     );
 
+    // create and add the periodic table and symbol
+    const periodicTableAndIsotopeSymbol = new PeriodicTableAndIsotopeSymbol( model.particleAtom );
+    this.addChild( periodicTableAndIsotopeSymbol );
+    periodicTableAndIsotopeSymbol.top = this.nucleonCountPanel.top;
+    periodicTableAndIsotopeSymbol.right = this.resetAllButton.right;
+
     // create and add the dashed empty circle at the center
     const lineWidth = 1;
     const emptyAtomCircle = new Circle( {
@@ -148,7 +155,7 @@ class NuclideChartIntroScreenView extends BANScreenView<NuclideChartIntroModel>
     this.atomNode.center = emptyAtomCircle.center;
     this.addChild( this.atomNode );
 
-    this.nucleonCountPanel.left = this.protonArrowButtons.left;
+    this.nucleonCountPanel.left = this.layoutBounds.left + 20;
 
     // Add the nucleonLayers
     this.nucleonLayers = [];

js/nuclide-chart-intro/view/PeriodicTableAndIsotopeSymbol.ts

@@ -0,0 +1,61 @@
+// Copyright 2022, University of Colorado Boulder
+
+import Panel from '../../../../sun/js/Panel.js';
+import buildANucleus from '../../buildANucleus.js';
+import PeriodicTableNode from '../../../../shred/js/view/PeriodicTableNode.js';
+import ParticleAtom from '../../../../shred/js/model/ParticleAtom.js';
+import { Rectangle } from '../../../../scenery/js/imports.js';
+import BANColors from '../../common/BANColors.js';
+import SymbolNode from '../../../../shred/js/view/SymbolNode.js';
+import BANConstants from '../../common/BANConstants.js';
+
+/**
+ * A node that presents a periodic table and an enlarged and dynamic isotope symbol above the table.
+ *
+ * @author Luisa Vargas
+ */
+
+class PeriodicTableAndIsotopeSymbol extends Panel {
+
+  public constructor( particleAtom: ParticleAtom ) {
+
+    const panelContents = new Rectangle( 0, 0, 150, 100 ); // empirically determined
+
+    const options = {
+
+      // options for the panel
+      fill: BANColors.panelBackgroundColorProperty,
+      xMargin: 10,
+      stroke: BANConstants.PANEL_STROKE,
+      cornerRadius: BANConstants.PANEL_CORNER_RADIUS
+    };
+
+    // Create and add the periodic table.
+    const periodicTable = new PeriodicTableNode( particleAtom, {
+      interactiveMax: 0,
+      disabledCellColor: 'white',
+      selectedCellColor: BANColors.halfLifeColorProperty,
+      cellDimension: 22.5
+    } );
+    panelContents.addChild( periodicTable );
+
+    // create and add the symbol node in an accordion box
+    const symbolNode = new SymbolNode( particleAtom.protonCountProperty, particleAtom.massNumberProperty, {
+      scale: 0.17
+    } );
+    panelContents.addChild( symbolNode );
+
+    // Do the layout.  This positions the symbol to fit into the top portion
+    // of the table.  The periodic table is 18 cells wide, and this needs
+    // to be centered over the 8th column to be in the right place.
+    symbolNode.centerX = ( 7.5 / 18 ) * periodicTable.width;
+    symbolNode.top = 0;
+    periodicTable.top = symbolNode.bottom - ( periodicTable.height / 7 * 2.5 );
+    periodicTable.left = 0;
+
+    super( panelContents, options );
+  }
+}
+
+buildANucleus.register( 'PeriodicTableAndIsotopeSymbol', PeriodicTableAndIsotopeSymbol );
+export default PeriodicTableAndIsotopeSymbol;