Use factory pattern to generate icons. #160

phetsims · Mar 2, 2020 · 91f2d99 · 91f2d99
1 parent 959c679
commit 91f2d99
Show file tree

Hide file tree

Showing 5 changed files with 137 additions and 75 deletions.
diff --git a/js/common/BAMConstants.js b/js/common/BAMConstants.js
@@ -8,6 +8,7 @@ import ScreenView from '../../../joist/js/ScreenView.js';
 import Element from '../../../nitroglycerin/js/Element.js';
 import ModelViewTransform2 from '../../../phetcommon/js/view/ModelViewTransform2.js';
 import Color from '../../../scenery/js/util/Color.js';
+import Property from '../../../axon/js/Property.js';
 import buildAMolecule from '../buildAMolecule.js';
 
 // constants
@@ -53,6 +54,7 @@ const BAMConstants = {
    * Colors
    *----------------------------------------------------------------------------*/
 
+  SCREEN_OPTIONS: { backgroundColorProperty: new Property( new Color( 198, 226, 246 ) ) },
   CANVAS_BACKGROUND_COLOR: new Color( 198, 226, 246 ),      // main play area background
   MOLECULE_COLLECTION_BACKGROUND: new Color( 238, 238, 238 ), // collection area background
   MOLECULE_COLLECTION_BORDER: Color.BLACK,                    // border around the collection area

diff --git a/js/common/view/BAMIconFactory.js b/js/common/view/BAMIconFactory.js
@@ -0,0 +1,123 @@
+// Copyright 2020, University of Colorado Boulder
+
+/**
+ *
+ * @author Denzell Barnett (PhET Interactive Simulations)
+ */
+
+import Bounds2 from '../../../../dot/js/Bounds2.js';
+import Image from '../../../../scenery/js/nodes/Image.js';
+import Rectangle from '../../../../scenery/js/nodes/Rectangle.js';
+import buildAMolecule from '../../buildAMolecule.js';
+import BAMConstants from '../../common/BAMConstants.js';
+import MoleculeList from '../../common/model/MoleculeList.js';
+import Molecule3DNode from '../../common/view/view3d/Molecule3DNode.js';
+import Node from '../../../../scenery/js/nodes/Node.js';
+import ScreenIcon from '../../../../joist/js/ScreenIcon.js';
+
+// Options for screen icons
+const SCREEN_ICON_OPTIONS = {
+  maxIconWidthProportion: 1,
+  maxIconHeightProportion: 1
+};
+
+const BAMIconFactory = {
+
+  /**
+   * Create the home screen and nav-bar icon for the Single screen.
+   * @returns {ScreenIcon}
+   */
+  createSingleScreen() {
+
+    // Iconize Molecule for home screen and nav-bar
+    const wrapperNode = new Rectangle( 0, 0, 548, 373, 0, 0, {
+      fill: BAMConstants.CANVAS_BACKGROUND_COLOR
+    } );
+    const moleculeNode = new Molecule3DNode( MoleculeList.H2O, new Bounds2( 0, 0, 548, 373 ), false );
+    const transformMatrix = Molecule3DNode.initialTransforms[ MoleculeList.H2O.getGeneralFormula() ];
+    if ( transformMatrix ) {
+      moleculeNode.transformMolecule( transformMatrix );
+    }
+    moleculeNode.draw();
+
+    // Create icon from
+    const moleculeIcon = new Image( moleculeNode.canvas.toDataURL(), { scale: 0.85 } );
+    wrapperNode.addChild( moleculeIcon );
+
+    // Adjust the position of the molecule icon.
+    moleculeIcon.center = wrapperNode.center.minusXY( 240, 140 );
+
+    // Return the icon in its wrapper
+    return new ScreenIcon( new Node( {
+      children: [ wrapperNode ]
+    } ), SCREEN_ICON_OPTIONS );
+  },
+
+  /**
+   * Create the home screen and nav-bar icon for the Multiple screen.
+   * @returns {ScreenIcon}
+   */
+  createMultipleScreen() {
+
+    // Iconize first O2 Molecule
+    const moleculeNodeOne = new Molecule3DNode( MoleculeList.O2, new Bounds2( 0, 0, 548, 373 ), false );
+    const transformMatrix = Molecule3DNode.initialTransforms[ MoleculeList.O2.getGeneralFormula() ];
+    if ( transformMatrix ) {
+      moleculeNodeOne.transformMolecule( transformMatrix );
+    }
+    moleculeNodeOne.draw();
+    const moleculeIconOne = new Image( moleculeNodeOne.canvas.toDataURL(), { scale: .50 } );
+
+    // Iconize second O2 molecule
+    const moleculeNodeTwo = new Molecule3DNode( MoleculeList.O2, new Bounds2( 0, 0, 548, 373 ), false );
+    if ( transformMatrix ) {
+      moleculeNodeTwo.transformMolecule( transformMatrix );
+    }
+    moleculeNodeTwo.draw();
+    const moleculeIconTwo = new Image( moleculeNodeTwo.canvas.toDataURL(), { scale: .50 } );
+
+    // Wrapper node to house molecule icons
+    const wrapperNode = new Rectangle( 0, 0, 548, 373, 0, 0, {
+      fill: BAMConstants.CANVAS_BACKGROUND_COLOR
+    } );
+    wrapperNode.addChild( moleculeIconOne );
+    wrapperNode.addChild( moleculeIconTwo );
+
+    // Adjust the position of the molecule icons.
+    moleculeIconOne.center = wrapperNode.center.minusXY( 270, 85 );
+    moleculeIconTwo.center = wrapperNode.center.minusXY( 5, 85 );
+
+    return new ScreenIcon( new Node( {
+      children: [ wrapperNode ]
+    } ), SCREEN_ICON_OPTIONS );
+  },
+
+  /**
+   * Create the home screen and nav-bar icon for the Playground screen.
+   * @returns {ScreenIcon}
+   */
+  createPlaygroundScreen() {
+
+    // Iconize Molecule for home screen and nav-bar
+    const moleculeNode = new Molecule3DNode( MoleculeList.C2H4O2, new Bounds2( 0, 0, 548, 373 ), false );
+    const transformMatrix = Molecule3DNode.initialTransforms[ MoleculeList.C2H4O2.getGeneralFormula() ];
+    if ( transformMatrix ) {
+      moleculeNode.transformMolecule( transformMatrix );
+    }
+    moleculeNode.draw();
+    const moleculeIcon = new Image( moleculeNode.canvas.toDataURL(), { scale: 0.95 } );
+    const wrapperNode = new Rectangle( 0, 0, 548, 373, 0, 0, {
+      fill: BAMConstants.CANVAS_BACKGROUND_COLOR
+    } );
+    wrapperNode.addChild( moleculeIcon );
+    moleculeIcon.center = wrapperNode.center.minusXY( 275, 185 );
+    return new ScreenIcon( new Node( {
+      children: [ wrapperNode ]
+    } ), SCREEN_ICON_OPTIONS );
+  }
+
+};
+
+buildAMolecule.register( 'BAMIconFactory', BAMIconFactory );
+
+export default BAMIconFactory;
diff --git a/js/multiple/MultipleScreen.js b/js/multiple/MultipleScreen.js
@@ -6,11 +6,8 @@
  * @author Jonathan Olson <[email protected]>
  */
 
-import Bounds2 from '../../../dot/js/Bounds2.js';
 import Dimension2 from '../../../dot/js/Dimension2.js';
 import Element from '../../../nitroglycerin/js/Element.js';
-import Image from '../../../scenery/js/nodes/Image.js';
-import Rectangle from '../../../scenery/js/nodes/Rectangle.js';
 import buildAMoleculeStrings from '../build-a-molecule-strings.js';
 import buildAMolecule from '../buildAMolecule.js';
 import BAMConstants from '../common/BAMConstants.js';
@@ -21,44 +18,18 @@ import Kit from '../common/model/Kit.js';
 import KitCollection from '../common/model/KitCollection.js';
 import MoleculeList from '../common/model/MoleculeList.js';
 import BAMScreen from '../common/view/BAMScreen.js';
+import Property from '../../../axon/js/Property.js';
+import BAMIconFactory from '../common/view/BAMIconFactory.js';
 import MoleculeCollectingScreenView from '../common/view/MoleculeCollectingScreenView.js';
-import Molecule3DNode from '../common/view/view3d/Molecule3DNode.js';
 
 const titleMultipleString = buildAMoleculeStrings.title.multiple;
 
 class MultipleScreen extends BAMScreen {
   constructor() {
-
-    // Iconize first O2 Molecule
-    const moleculeNodeOne = new Molecule3DNode( MoleculeList.O2, new Bounds2( 0, 0, 548, 373 ), false );
-    const transformMatrix = Molecule3DNode.initialTransforms[ MoleculeList.O2.getGeneralFormula() ];
-    if ( transformMatrix ) {
-      moleculeNodeOne.transformMolecule( transformMatrix );
-    }
-    moleculeNodeOne.draw();
-    const moleculeIconOne = new Image( moleculeNodeOne.canvas.toDataURL(), { scale: .50 } );
-
-    // Iconize second O2 molecule
-    const moleculeNodeTwo = new Molecule3DNode( MoleculeList.O2, new Bounds2( 0, 0, 548, 373 ), false );
-    if ( transformMatrix ) {
-      moleculeNodeTwo.transformMolecule( transformMatrix );
-    }
-    moleculeNodeTwo.draw();
-    const moleculeIconTwo = new Image( moleculeNodeTwo.canvas.toDataURL(), { scale: .50 } );
-
-    // Wrapper node to house molecule icons
-    const wrapperNode = new Rectangle( 0, 0, 548, 373, {
-      fill: BAMConstants.CANVAS_BACKGROUND_COLOR
-    } );
-    wrapperNode.addChild( moleculeIconOne );
-    wrapperNode.addChild( moleculeIconTwo );
-
-    // Adjust the position of the molecule icons.
-    moleculeIconOne.center = wrapperNode.center.minusXY( 270, 85 );
-    moleculeIconTwo.center = wrapperNode.center.minusXY( 5, 85 );
     const options = {
       name: titleMultipleString,
-      homeScreenIcon: wrapperNode
+      backgroundColorProperty: new Property( BAMConstants.CANVAS_BACKGROUND_COLOR ),
+      homeScreenIcon: BAMIconFactory.createMultipleScreen()
     };
 
     super(

diff --git a/js/playground/PlaygroundScreen.js b/js/playground/PlaygroundScreen.js
@@ -6,22 +6,19 @@
  * @author Jonathan Olson <[email protected]>
  */
 
-import Bounds2 from '../../../dot/js/Bounds2.js';
 import Dimension2 from '../../../dot/js/Dimension2.js';
 import Element from '../../../nitroglycerin/js/Element.js';
-import Image from '../../../scenery/js/nodes/Image.js';
-import Rectangle from '../../../scenery/js/nodes/Rectangle.js';
 import buildAMoleculeStrings from '../build-a-molecule-strings.js';
 import buildAMolecule from '../buildAMolecule.js';
 import BAMConstants from '../common/BAMConstants.js';
 import Bucket from '../common/model/Bucket.js';
 import CollectionLayout from '../common/model/CollectionLayout.js';
 import Kit from '../common/model/Kit.js';
 import KitCollection from '../common/model/KitCollection.js';
-import MoleculeList from '../common/model/MoleculeList.js';
 import BAMScreen from '../common/view/BAMScreen.js';
 import BAMScreenView from '../common/view/BAMScreenView.js';
-import Molecule3DNode from '../common/view/view3d/Molecule3DNode.js';
+import Property from '../../../axon/js/Property.js';
+import BAMIconFactory from '../common/view/BAMIconFactory.js';
 
 const titlePlaygroundString = buildAMoleculeStrings.title.playground;
 
@@ -30,24 +27,10 @@ const BUCKET_DIMENSIONS = new Dimension2( 670, 200 );
 
 class PlaygroundScreen extends BAMScreen {
   constructor() {
-
-    // Iconize Molecule for homescreen and nav-bar
-    const moleculeNode = new Molecule3DNode( MoleculeList.C2H4O2, new Bounds2( 0, 0, 548, 373 ), false );
-    const transformMatrix = Molecule3DNode.initialTransforms[ MoleculeList.C2H4O2.getGeneralFormula() ];
-    if ( transformMatrix ) {
-      moleculeNode.transformMolecule( transformMatrix );
-    }
-    moleculeNode.draw();
-    const moleculeIcon = new Image( moleculeNode.canvas.toDataURL(), { scale: 0.95 } );
-    const wrapperNode = new Rectangle( 0, 0, 548, 373, {
-      fill: BAMConstants.CANVAS_BACKGROUND_COLOR
-    } );
-    wrapperNode.addChild( moleculeIcon );
-    moleculeIcon.center = wrapperNode.center.minusXY( 275, 185 );
-
     const options = {
       name: titlePlaygroundString,
-      homeScreenIcon: wrapperNode
+      backgroundColorProperty: new Property( BAMConstants.CANVAS_BACKGROUND_COLOR ),
+      homeScreenIcon: BAMIconFactory.createPlaygroundScreen()
     };
 
     super(

diff --git a/js/single/SingleScreen.js b/js/single/SingleScreen.js
@@ -6,11 +6,8 @@
  * @author Jonathan Olson <[email protected]>
  */
 
-import Bounds2 from '../../../dot/js/Bounds2.js';
 import Dimension2 from '../../../dot/js/Dimension2.js';
 import Element from '../../../nitroglycerin/js/Element.js';
-import Image from '../../../scenery/js/nodes/Image.js';
-import Rectangle from '../../../scenery/js/nodes/Rectangle.js';
 import buildAMoleculeStrings from '../build-a-molecule-strings.js';
 import buildAMolecule from '../buildAMolecule.js';
 import BAMConstants from '../common/BAMConstants.js';
@@ -20,9 +17,10 @@ import CollectionLayout from '../common/model/CollectionLayout.js';
 import Kit from '../common/model/Kit.js';
 import KitCollection from '../common/model/KitCollection.js';
 import MoleculeList from '../common/model/MoleculeList.js';
+import Property from '../../../axon/js/Property.js';
+import BAMIconFactory from '../common/view/BAMIconFactory.js';
 import BAMScreen from '../common/view/BAMScreen.js';
 import MoleculeCollectingScreenView from '../common/view/MoleculeCollectingScreenView.js';
-import Molecule3DNode from '../common/view/view3d/Molecule3DNode.js';
 
 const titleSingleString = buildAMoleculeStrings.title.single;
 
@@ -32,25 +30,10 @@ class SingleScreen extends BAMScreen {
    */
   constructor() {
 
-    // Iconize Molecule for homescreen and nav-bar
-    const moleculeNode = new Molecule3DNode( MoleculeList.H2O, new Bounds2( 0, 0, 548, 373 ), false );
-    const transformMatrix = Molecule3DNode.initialTransforms[ MoleculeList.H2O.getGeneralFormula() ];
-    if ( transformMatrix ) {
-      moleculeNode.transformMolecule( transformMatrix );
-    }
-    moleculeNode.draw();
-    const moleculeIcon = new Image( moleculeNode.canvas.toDataURL(), { scale: 0.85 } );
-    const wrapperNode = new Rectangle( 0, 0, 548, 373, {
-      fill: BAMConstants.CANVAS_BACKGROUND_COLOR
-    } );
-    wrapperNode.addChild( moleculeIcon );
-
-    // Adjust the position of the molecule icons.
-    moleculeIcon.center = wrapperNode.center.minusXY( 240, 140 );
-
     const options = {
       name: titleSingleString,
-      homeScreenIcon: wrapperNode
+      backgroundColorProperty: new Property( BAMConstants.CANVAS_BACKGROUND_COLOR ),
+      homeScreenIcon: BAMIconFactory.createSingleScreen()
     };
 
     //REVIEW: Formatting could use some changes here