create 'hide boxes' eagerly, #78

phetsims · Mar 3, 2023 · 17a1680 · 17a1680
1 parent 34624b0
commit 17a1680
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 36 deletions.
diff --git a/js/common/view/HideBox.ts b/js/common/view/HideBox.ts
@@ -9,6 +9,7 @@
 
 import Dimension2 from '../../../../dot/js/Dimension2.js';
 import optionize from '../../../../phet-core/js/optionize.js';
+import PickOptional from '../../../../phet-core/js/types/PickOptional.js';
 import { Node, NodeOptions, NodeTranslationOptions, Path, Rectangle } from '../../../../scenery/js/imports.js';
 import eyeSlashSolidShape from '../../../../sherpa/js/fontawesome-5/eyeSlashSolidShape.js';
 import reactantsProductsAndLeftovers from '../../reactantsProductsAndLeftovers.js';
@@ -21,7 +22,7 @@ type SelfOptions = {
   cornerRadius?: number;
 };
 
-type HideBoxOptions = SelfOptions & NodeTranslationOptions;
+type HideBoxOptions = SelfOptions & NodeTranslationOptions & PickOptional<NodeOptions, 'visible'>;
 
 export default class HideBox extends Node {
 

diff --git a/js/common/view/QuantitiesNode.ts b/js/common/view/QuantitiesNode.ts
@@ -65,7 +65,7 @@ export default class QuantitiesNode extends Node {
   private readonly reactantsParent: Node; // reactants, below the 'Before' box
   private readonly productsParent: Node; // products, below the 'After' box
   private readonly leftoversParent: Node; // leftovers, below the 'After' box, to the right of the products
-  private readonly hideNumbersBox?: Node; // optional 'Hide numbers' box, to hide static quantities
+  private readonly hideNumbersBox: Node; // 'Hide numbers' box, to hide static quantities
 
   private readonly disposeQuantitiesNode: () => void;
 
@@ -303,24 +303,22 @@ export default class QuantitiesNode extends Node {
       top: bracketsTop
     } );
 
+    // 'Hide numbers' box on top of the static quantities
+    const hideNumbersBox = new HideBox( {
+      visible: options.hideNumbersBox,
+      boxSize: new Dimension2( options.boxWidth, spinnerHeight ),
+      iconHeight: 0.65 * spinnerHeight,
+      cornerRadius: 3,
+      left: ( options.interactiveBox === BoxType.BEFORE ) ? options.afterBoxXOffset : 0,
+      centerY: spinnerNodes[ 0 ].centerY
+    } );
+
     options.children = [
       reactantsParent, productsParent, leftoversParent,
-      reactantsBracket, productsBracket, leftoversBracket
+      reactantsBracket, productsBracket, leftoversBracket,
+      hideNumbersBox
     ];
 
-    // Optional 'Hide numbers' box on top of the static quantities
-    let hideNumbersBox;
-    if ( options.hideNumbersBox ) {
-      hideNumbersBox = new HideBox( {
-        boxSize: new Dimension2( options.boxWidth, spinnerHeight ),
-        iconHeight: 0.65 * spinnerHeight,
-        cornerRadius: 3,
-        left: ( options.interactiveBox === BoxType.BEFORE ) ? options.afterBoxXOffset : 0,
-        centerY: spinnerNodes[ 0 ].centerY
-      } );
-      options.children.push( hideNumbersBox );
-    }
-
     super( options );
 
     this.reactants = reactants;
@@ -426,9 +424,7 @@ export default class QuantitiesNode extends Node {
    * Changes visibility of the 'Hide numbers' box.
    */
   public setHideNumbersBoxVisible( visible: boolean ): void {
-    if ( this.hideNumbersBox ) {
-      this.hideNumbersBox.visible = visible;
-    }
+    this.hideNumbersBox.visible = visible;
   }
 
   /**

diff --git a/js/game/view/ChallengeNode.ts b/js/game/view/ChallengeNode.ts
@@ -228,17 +228,14 @@ export default class ChallengeNode extends Node {
     // Optional 'Hide molecules' box, on top of the answer box.
     //------------------------------------------------------------------------------------
 
-    let hideMoleculesBox: HideBox | null = null;
-    if ( !challenge.moleculesVisible ) {
-      hideMoleculesBox = new HideBox( {
-        boxSize: options.boxSize,
-        iconHeight: 0.4 * options.boxSize.height,
-        cornerRadius: 3,
-        left: answerBox.left,
-        bottom: answerBox.bottom
-      } );
-      this.addChild( hideMoleculesBox );
-    }
+    const hideMoleculesBox = new HideBox( {
+      boxSize: options.boxSize,
+      iconHeight: 0.4 * options.boxSize.height,
+      cornerRadius: 3,
+      left: answerBox.left,
+      bottom: answerBox.bottom
+    } );
+    this.addChild( hideMoleculesBox );
 
     //------------------------------------------------------------------------------------
     // Dynamic layout
@@ -311,12 +308,9 @@ export default class ChallengeNode extends Node {
       faceNode.visible = faceVisible;
 
       // 'hide' boxes
-      const hideBoxVisible = ( playState !== PlayState.NEXT );
-      if ( hideMoleculesBox ) {
-        hideMoleculesBox.visible = hideBoxVisible;
-        answerBox.visible = !hideBoxVisible; // also hide the answer box, so we don't see its stroke
-      }
-      quantitiesNode.setHideNumbersBoxVisible( hideBoxVisible );
+      hideMoleculesBox.visible = ( playState !== PlayState.NEXT ) && !challenge.moleculesVisible;
+      answerBox.visible = !hideMoleculesBox.visible; // also hide the answer box, so we don't see its stroke
+      quantitiesNode.setHideNumbersBoxVisible( ( playState !== PlayState.NEXT ) && !challenge.numbersVisible );
 
       // switch between spinners and static numbers
       quantitiesNode.setInteractive( PlayState.INTERACTIVE_STATES.includes( playState ) );