Add number model preference, see: #40

phetsims · Dec 18, 2024 · 371ad23 · 371ad23
1 parent 738e149
commit 371ad23
Show file tree

Hide file tree

Showing 3 changed files with 71 additions and 7 deletions.
diff --git a/js/common/NumberPairsConstants.ts b/js/common/NumberPairsConstants.ts
@@ -13,6 +13,9 @@ import PhetFont from '../../../scenery-phet/js/PhetFont.js';
 import numberPairs from '../numberPairs.js';
 import Bounds2 from '../../../dot/js/Bounds2.js';
 import ScreenView from '../../../joist/js/ScreenView.js';
+import Property from '../../../axon/js/Property.js';
+import Tandem from '../../../tandem/js/Tandem.js';
+import StringIO from '../../../tandem/js/types/StringIO.js';
 
 const TEN_TOTAL_RANGE = new Range( 0, 10 );
 const TWENTY_TOTAL_RANGE = new Range( 11, 20 );
@@ -51,6 +54,12 @@ const NumberPairsConstants = {
 
   LEFTMOST_BEAD_X: 0.5,
 
+  NUMBER_MODEL_TYPE_PROPERTY: new Property( 'numberBondModel', {
+    tandem: Tandem.PREFERENCES.createTandem( 'numberModelTypeProperty' ),
+    phetioValueType: StringIO,
+    validValues: [ 'numberBondModel', 'barModel' ]
+  } ),
+
   // URL to the {REPO}_all.html file for this simulation.
   ALL_URL: 'https://phet.colorado.edu/sims/html/number-pairs/latest/number-pairs_all.html'
 };

diff --git a/js/common/view/BarModelNode.ts b/js/common/view/BarModelNode.ts
@@ -0,0 +1,22 @@
+// Copyright 2024, University of Colorado Boulder
+
+/**
+ * TODO: describe file
+ *
+ * @author Marla Schulz (PhET Interactive Simulations)
+ *
+ */
+
+import numberPairs from '../../numberPairs.js';
+import { Node } from '../../../../scenery/js/imports.js';
+
+
+export default class BarModelNode extends Node {
+
+  public constructor() {
+
+   super();
+  }
+}
+
+numberPairs.register( 'BarModelNode', BarModelNode );
diff --git a/js/common/view/NumberPairsPreferencesNode.ts b/js/common/view/NumberPairsPreferencesNode.ts
@@ -8,33 +8,66 @@
  */
 
 import optionize from '../../../../phet-core/js/optionize.js';
-import { Node, NodeOptions } from '../../../../scenery/js/imports.js';
+import { Text } from '../../../../scenery/js/imports.js';
 import numberPairs from '../../numberPairs.js';
 import SecondLanguageControl from '../../../../number-suite-common/js/common/view/SecondLanguageControl.js';
 import NumberPairsPreferences from '../model/NumberPairsPreferences.js';
 import numberPairsUtteranceQueue from './numberPairsUtteranceQueue.js';
 import NumberPairsConstants from '../NumberPairsConstants.js';
 import PickRequired from '../../../../phet-core/js/types/PickRequired.js';
+import PreferencesControl from '../../../../joist/js/preferences/PreferencesControl.js';
+import PreferencesDialogConstants from '../../../../joist/js/preferences/PreferencesDialogConstants.js';
+import RectangularRadioButtonGroup from '../../../../sun/js/buttons/RectangularRadioButtonGroup.js';
+import PreferencesPanelContentNode, { PreferencesPanelContentNodeOptions } from '../../../../joist/js/preferences/PreferencesPanelContentNode.js';
+import StrictOmit from '../../../../phet-core/js/types/StrictOmit.js';
+import WithOptional from '../../../../phet-core/js/types/WithOptional.js';
 
 type SelfOptions = {
   secondLanguageControlVisible?: boolean; // should the 'Second Language' control be visible?
 };
 
-export type NumberPairsPreferencesNodeOptions = SelfOptions & PickRequired<NodeOptions, 'tandem'>;
+export type NumberPairsPreferencesNodeOptions = SelfOptions &
+  StrictOmit<PreferencesPanelContentNodeOptions, 'content'> &
+  PickRequired<PreferencesPanelContentNodeOptions, 'tandem'>;
 
-export default class NumberPairsPreferencesNode extends Node {
+export default class NumberPairsPreferencesNode extends PreferencesPanelContentNode {
 
   public constructor( providedOptions: NumberPairsPreferencesNodeOptions ) {
 
-    const options = optionize<NumberPairsPreferencesNodeOptions, SelfOptions, NodeOptions>()( {
+    const options = optionize<NumberPairsPreferencesNodeOptions, SelfOptions, WithOptional<PreferencesPanelContentNodeOptions, 'content'>>()( {
 
       // SelfOptions
       secondLanguageControlVisible: true,
 
-      // NodeOptions
-      isDisposable: false
+      // PreferencesPanelContentNodeOptions
+      isDisposable: false,
+      fill: 'white'
     }, providedOptions );
 
+    const numberModelRadioButtonGroup = new RectangularRadioButtonGroup( NumberPairsConstants.NUMBER_MODEL_TYPE_PROPERTY,
+      [
+        {
+          createNode: () => new Text( 'Number Bond', PreferencesDialogConstants.CONTROL_LABEL_OPTIONS ),
+          value: 'numberBondModel',
+          tandemName: 'numberBondModelRadioButton'
+        },
+        {
+          createNode: () => new Text( 'Bar Model', PreferencesDialogConstants.CONTROL_LABEL_OPTIONS ),
+          value: 'barModel',
+          tandemName: 'barModelRadioButton'
+        }
+      ], {
+        orientation: 'horizontal',
+        tandem: options.tandem.createTandem( 'numberModelRadioButtonGroup' ),
+        isDisposable: false,
+
+        // Hide or show the entire row, not just the radio button
+        phetioVisiblePropertyInstrumented: false
+      } );
+    const numberModelControl = new PreferencesControl( {
+      labelNode: new Text( 'Number Model Type', PreferencesDialogConstants.CONTROL_LABEL_OPTIONS ),
+      controlNode: numberModelRadioButtonGroup
+    } );
     const secondLanguageControl = new SecondLanguageControl(
       NumberPairsPreferences.secondLocaleProperty,
       NumberPairsPreferences.secondVoiceProperty,
@@ -46,7 +79,7 @@ export default class NumberPairsPreferencesNode extends Node {
         tandem: options.tandem.createTandem( 'secondLanguageControl' )
       } );
 
-    options.children = [ secondLanguageControl ];
+    options.content = [ numberModelControl, secondLanguageControl ];
 
     super( options );
   }