Add state for selected skater, see #385

phetsims · Jan 14, 2025 · 3adb8f8 · 3adb8f8
1 parent 06bc742
commit 3adb8f8
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 11 deletions.
diff --git a/js/common/view/EnergySkateParkControlPanel.ts b/js/common/view/EnergySkateParkControlPanel.ts
@@ -95,12 +95,12 @@ export default class EnergySkateParkControlPanel extends Panel {
 
     let massControls = null;
     if ( options.showMassControls ) {
-      massControls = new EnergySkateParkMassControls( model.skater.massProperty, userControlledPropertySet.massControlledProperty, model.skater.massRange, screenView.skaterNode.skaterImageSetProperty, model.resetEmitter, screenView, tandem.createTandem( 'energySkateParkMassControls' ), options.massControlsOptions );
+      massControls = new EnergySkateParkMassControls( model.skater.massProperty, userControlledPropertySet.massControlledProperty, model.skater.massRange, screenView.skaterNode.selectedSkaterProperty, model.resetEmitter, screenView, tandem.createTandem( 'energySkateParkMassControls' ), options.massControlsOptions );
       children.push( massControls );
     }
 
     if ( options.showSkaterControls ) {
-      const skaterRadioButtonGroup = new SkaterRadioButtonGroup( screenView.skaterNode.skaterImageSetProperty,
+      const skaterRadioButtonGroup = new SkaterRadioButtonGroup( screenView.skaterNode.selectedSkaterProperty,
         tandem.createTandem( 'skaterSetOneControls' ) );
       children.push( skaterRadioButtonGroup );
     }

diff --git a/js/common/view/EnergySkateParkScreenView.ts b/js/common/view/EnergySkateParkScreenView.ts
@@ -517,7 +517,7 @@ export default class EnergySkateParkScreenView extends ScreenView {
 
     // When the model resets, go back to the default image set for the skater.
     this.model.resetEmitter.addListener( () => {
-      this.skaterNode.skaterImageSetProperty.reset();
+      this.skaterNode.selectedSkaterProperty.reset();
     } );
 
     // For debugging the visible bounds

diff --git a/js/common/view/SkaterNode.ts b/js/common/view/SkaterNode.ts
@@ -9,7 +9,9 @@
  */
 
 import BooleanProperty from '../../../../axon/js/BooleanProperty.js';
-import Property from '../../../../axon/js/Property.js';
+import DerivedProperty from '../../../../axon/js/DerivedProperty.js';
+import NumberProperty from '../../../../axon/js/NumberProperty.js';
+import TReadOnlyProperty from '../../../../axon/js/TReadOnlyProperty.js';
 import LinearFunction from '../../../../dot/js/LinearFunction.js';
 import Matrix3 from '../../../../dot/js/Matrix3.js';
 import Vector2 from '../../../../dot/js/Vector2.js';
@@ -24,7 +26,8 @@ import EnergySkateParkScreenView from './EnergySkateParkScreenView.js';
 import SkaterImageSet from './SkaterImageSet.js';
 
 export default class SkaterNode extends Node {
-  public readonly skaterImageSetProperty: Property<SkaterImageSet>;
+  public readonly skaterImageSetProperty: TReadOnlyProperty<SkaterImageSet>;
+  public readonly selectedSkaterProperty: NumberProperty;
   private readonly dragListener: DragListener;
 
   /**
@@ -56,8 +59,13 @@ export default class SkaterNode extends Node {
       tandem: tandem
     } );
 
-    this.skaterImageSetProperty = new Property( SkaterImageSet.SKATER_IMAGE_SETS[ 0 ], {
-      validValues: SkaterImageSet.SKATER_IMAGE_SETS
+    this.selectedSkaterProperty = new NumberProperty( 0, {
+      tandem: tandem.createTandem( 'selectedSkaterProperty' ),
+      validValues: SkaterImageSet.SKATER_IMAGE_SETS.map( ( value, index ) => index )
+    } );
+
+    this.skaterImageSetProperty = new DerivedProperty( [ this.selectedSkaterProperty ], selectedSkater => {
+      return SkaterImageSet.SKATER_IMAGE_SETS[ selectedSkater ];
     } );
 
     // left and right Images for the skater

diff --git a/js/common/view/SkaterRadioButtonGroup.ts b/js/common/view/SkaterRadioButtonGroup.ts
@@ -25,7 +25,7 @@ const BUTTON_SPACING = 5;
 
 export default class SkaterRadioButtonGroup extends Node {
 
-  public constructor( skaterImageSetProperty: Property<SkaterImageSet>, tandem: Tandem ) {
+  public constructor( skaterImageSetProperty: Property<number>, tandem: Tandem ) {
     super();
 
     const buttonOptions = {
@@ -39,11 +39,11 @@ export default class SkaterRadioButtonGroup extends Node {
     };
 
     // Description of the radio buttons
-    const contentArray: { value: SkaterImageSet; node: Node; tandemName: string }[] = [];
+    const contentArray: { value: number; node: Node; tandemName: string }[] = [];
     skaterImageSetProperty.validValues!.forEach( ( skaterImageSet, index ) =>
       contentArray.push( {
-        value: skaterImageSet,
-        node: new Image( skaterImageSet.headshotImageProperty, { scale: 0.5 } ),
+        value: index,
+        node: new Image( SkaterImageSet.SKATER_IMAGE_SETS[ index ].headshotImageProperty, { scale: 0.5 } ),
         tandemName: `skater${index + 1}RadioButton`
       } )
     );