diff --git a/js/common/view/BeforeAfterNode.js b/js/common/view/BeforeAfterNode.js index ad57a7c..47dc952 100644 --- a/js/common/view/BeforeAfterNode.js +++ b/js/common/view/BeforeAfterNode.js @@ -14,9 +14,7 @@ import Dimension2 from '../../../../dot/js/Dimension2.js'; import merge from '../../../../phet-core/js/merge.js'; import PhetFont from '../../../../scenery-phet/js/PhetFont.js'; -import { LayoutBox } from '../../../../scenery/js/imports.js'; -import { Node } from '../../../../scenery/js/imports.js'; -import { Text } from '../../../../scenery/js/imports.js'; +import { HBox, Node, Text } from '../../../../scenery/js/imports.js'; import reactantsProductsAndLeftovers from '../../reactantsProductsAndLeftovers.js'; import reactantsProductsAndLeftoversStrings from '../../reactantsProductsAndLeftoversStrings.js'; import RPALColors from '../RPALColors.js'; @@ -76,9 +74,8 @@ class BeforeAfterNode extends Node { const arrowNode = new RightArrowNode( { fill: RPALColors.PANEL_FILL, stroke: null, scale: 0.75 } ); // layout of boxes and arrow - const hBox = new LayoutBox( { + const hBox = new HBox( { children: [ this.beforeBox, arrowNode, this.afterBox ], - orientation: 'horizontal', spacing: 10 } ); this.addChild( hBox ); diff --git a/js/dev/DevGameControls.js b/js/dev/DevGameControls.js index fa47fa3..5022941 100644 --- a/js/dev/DevGameControls.js +++ b/js/dev/DevGameControls.js @@ -8,7 +8,7 @@ import merge from '../../../phet-core/js/merge.js'; import PhetFont from '../../../scenery-phet/js/PhetFont.js'; -import { LayoutBox } from '../../../scenery/js/imports.js'; +import { HBox } from '../../../scenery/js/imports.js'; import TextPushButton from '../../../sun/js/buttons/TextPushButton.js'; import reactantsProductsAndLeftovers from '../reactantsProductsAndLeftovers.js'; @@ -19,7 +19,7 @@ const BUTTON_OPTIONS = { textFill: 'white' }; -class DevGameControls extends LayoutBox { +class DevGameControls extends HBox { /** * @param {GameModel} model @@ -28,7 +28,6 @@ class DevGameControls extends LayoutBox { constructor( model, options ) { options = merge( { - orientation: 'horizontal', spacing: 5 }, options ); diff --git a/js/game/GameScreen.js b/js/game/GameScreen.js index 6ac24be..cd52c0a 100644 --- a/js/game/GameScreen.js +++ b/js/game/GameScreen.js @@ -11,10 +11,7 @@ import Screen from '../../../joist/js/Screen.js'; import ScreenIcon from '../../../joist/js/ScreenIcon.js'; import { Shape } from '../../../kite/js/imports.js'; import FaceNode from '../../../scenery-phet/js/FaceNode.js'; -import { LayoutBox } from '../../../scenery/js/imports.js'; -import { Node } from '../../../scenery/js/imports.js'; -import { Path } from '../../../scenery/js/imports.js'; -import { Rectangle } from '../../../scenery/js/imports.js'; +import { HBox, Node, Path, Rectangle, VBox } from '../../../scenery/js/imports.js'; import RPALColors from '../common/RPALColors.js'; import reactantsProductsAndLeftovers from '../reactantsProductsAndLeftovers.js'; import reactantsProductsAndLeftoversStrings from '../reactantsProductsAndLeftoversStrings.js'; @@ -69,16 +66,14 @@ function createIcon() { .lineTo( ARROW_SIZE / 2, -ARROW_SIZE ) .close(), ARROW_OPTIONS ); - const arrowsBox = new LayoutBox( { + const arrowsBox = new VBox( { children: [ upArrowNode, downArrowNode ], - orientation: 'vertical', spacing: 20 } ); // centered in background, scaled to fit - const contentNode = new LayoutBox( { + const contentNode = new HBox( { children: [ arrowsBox, faceNode ], - orientation: 'horizontal', spacing: 25 } ); contentNode.setScaleMagnitude( diff --git a/js/game/view/SettingsNode.js b/js/game/view/SettingsNode.js index 3770d20..30ca55c 100644 --- a/js/game/view/SettingsNode.js +++ b/js/game/view/SettingsNode.js @@ -15,10 +15,7 @@ import ArrowNode from '../../../../scenery-phet/js/ArrowNode.js'; import ResetAllButton from '../../../../scenery-phet/js/buttons/ResetAllButton.js'; import TimerToggleButton from '../../../../scenery-phet/js/buttons/TimerToggleButton.js'; import PhetFont from '../../../../scenery-phet/js/PhetFont.js'; -import { LayoutBox } from '../../../../scenery/js/imports.js'; -import { Node } from '../../../../scenery/js/imports.js'; -import { Rectangle } from '../../../../scenery/js/imports.js'; -import { Text } from '../../../../scenery/js/imports.js'; +import { HBox, Node, Rectangle, Text, VBox } from '../../../../scenery/js/imports.js'; import TextPushButton from '../../../../sun/js/buttons/TextPushButton.js'; import LevelSelectionButton from '../../../../vegas/js/LevelSelectionButton.js'; import ScoreDisplayStars from '../../../../vegas/js/ScoreDisplayStars.js'; @@ -67,10 +64,9 @@ class SettingsNode extends Node { for ( let level = 0; level < model.numberOfLevels; level++ ) { buttons.push( createLevelSelectionButton( level, model, levelIcons[ level ], maxIconWidth, maxIconHeight ) ); } - const buttonsParent = new LayoutBox( { + const buttonsParent = new HBox( { children: buttons, spacing: 40, - orientation: 'horizontal', center: layoutBounds.center } ); @@ -98,9 +94,8 @@ class SettingsNode extends Node { options.children = [ // title and level-selection buttons, centered in space above visibility radio buttons - new LayoutBox( { + new VBox( { children: [ title, buttonsParent ], - orientation: 'vertical', align: 'center', spacing: 40, centerX: layoutBounds.centerX, @@ -168,18 +163,16 @@ function createLevelSelectionButton( level, model, icon, maxIconWidth, maxIconHe */ function createIcon( level, leftNode, rightNode ) { const arrowNode = new ArrowNode( 0, 0, 50, 0, { headHeight: 20, headWidth: 20, tailWidth: 6 } ); - const iconNode = new LayoutBox( { + const iconNode = new HBox( { children: [ leftNode, arrowNode, rightNode ], - orientation: 'horizontal', spacing: 20 } ); const labelNode = new Text( StringUtils.format( reactantsProductsAndLeftoversStrings.pattern_Level_0, level ), { font: new PhetFont( 45 ), maxWidth: iconNode.width } ); - return new LayoutBox( { + return new VBox( { children: [ labelNode, iconNode ], - orientation: 'vertical', spacing: 30 } ); } diff --git a/js/game/view/VisibilityPanel.js b/js/game/view/VisibilityPanel.js index ab71137..6bc2374 100644 --- a/js/game/view/VisibilityPanel.js +++ b/js/game/view/VisibilityPanel.js @@ -10,10 +10,7 @@ import H2ONode from '../../../../nitroglycerin/js/nodes/H2ONode.js'; import merge from '../../../../phet-core/js/merge.js'; import PhetFont from '../../../../scenery-phet/js/PhetFont.js'; -import { LayoutBox } from '../../../../scenery/js/imports.js'; -import { Node } from '../../../../scenery/js/imports.js'; -import { Path } from '../../../../scenery/js/imports.js'; -import { Text } from '../../../../scenery/js/imports.js'; +import { HBox, Node, Path, Text } from '../../../../scenery/js/imports.js'; import eyeSlashSolidShape from '../../../../sherpa/js/fontawesome-5/eyeSlashSolidShape.js'; import eyeSolidShape from '../../../../sherpa/js/fontawesome-5/eyeSolidShape.js'; import AquaRadioButtonGroup from '../../../../sun/js/AquaRadioButtonGroup.js'; @@ -73,9 +70,8 @@ class VisibilityPanel extends Panel { function createShowAllNode() { const eyeNode = new Path( eyeSolidShape, FONT_AWESOME_OPTIONS ); const textNode = new Text( reactantsProductsAndLeftoversStrings.showAll, TEXT_OPTIONS ); - return new LayoutBox( { + return new HBox( { children: [ eyeNode, textNode ], - orientation: 'horizontal', spacing: 12 } ); } @@ -95,9 +91,8 @@ function createHideMoleculesNode() { centerY: eyeNode.bottom } ); const textNode = new Text( reactantsProductsAndLeftoversStrings.hideMolecules, TEXT_OPTIONS ); - return new LayoutBox( { + return new HBox( { children: [ new Node( { children: [ eyeNode, moleculeNode ] } ), textNode ], - orientation: 'horizontal', spacing: 7 } ); } @@ -115,9 +110,8 @@ function createHideNumbersNode() { centerY: eyeNode.bottom } ); const textNode = new Text( reactantsProductsAndLeftoversStrings.hideNumbers, TEXT_OPTIONS ); - return new LayoutBox( { + return new HBox( { children: [ new Node( { children: [ eyeNode, numbersNode ] } ), textNode ], - orientation: 'horizontal', spacing: 5 } ); }