diff --git a/js/common/BAMConstants.js b/js/common/BAMConstants.js index 585adc51..4c5536ab 100644 --- 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 new file mode 100644 index 00000000..f81c7ab7 --- /dev/null +++ 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; \ No newline at end of file diff --git a/js/multiple/MultipleScreen.js b/js/multiple/MultipleScreen.js index b56c27db..7f1a4eec 100644 --- a/js/multiple/MultipleScreen.js +++ b/js/multiple/MultipleScreen.js @@ -6,11 +6,8 @@ * @author Jonathan Olson */ -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 index 2059ea8d..1e28fbdd 100644 --- a/js/playground/PlaygroundScreen.js +++ b/js/playground/PlaygroundScreen.js @@ -6,11 +6,8 @@ * @author Jonathan Olson */ -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'; @@ -18,10 +15,10 @@ 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 index a1ae9408..81a1c8ab 100644 --- a/js/single/SingleScreen.js +++ b/js/single/SingleScreen.js @@ -6,11 +6,8 @@ * @author Jonathan Olson */ -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