Add properties to person and chocolate models, see: #52

js/common/MeanShareAndBalanceConstants.ts

@@ -49,7 +49,11 @@ const MeanShareAndBalanceConstants = {
   MAX_CONTROLS_TEXT_WIDTH: 175,
 
   CHOCOLATE_WIDTH: 150,
-  CHOCOLATE_HEIGHT: 42
+  CHOCOLATE_HEIGHT: 42,
+  PERSON_WIDTH: 50,
+
+  PLATE_CHOCOLATE_CENTER_Y: 150,
+  PEOPLE_CENTER_Y: 500
 
 };
 

js/intro/model/WaterCup.ts

@@ -19,14 +19,13 @@ import optionize, { combineOptions } from '../../../../phet-core/js/optionize.js
 import PickOptional from '../../../../phet-core/js/types/PickOptional.js';
 import Property from '../../../../axon/js/Property.js';
 import BooleanProperty from '../../../../axon/js/BooleanProperty.js';
-import IOType from '../../../../tandem/js/types/IOType.js';
 import meanShareAndBalance from '../../meanShareAndBalance.js';
 import Vector2 from '../../../../dot/js/Vector2.js';
 import Tandem from '../../../../tandem/js/Tandem.js';
 
 type SelfOptions = {
   position: Vector2; // the cups x & y position in the view
-  isActive?: boolean;
+  isActive: boolean;
   waterHeightRange?: Range;
   waterLevel?: number;
   waterLevelPropertyOptions?: PickOptional<NumberPropertyOptions, 'phetioReadOnly'>;
@@ -51,13 +50,10 @@ export default class WaterCup {
 
   public readonly linePlacement: number;
 
-  public static WaterCupModelIO: IOType<WaterCup>;
-
   public constructor( tandem: Tandem, providedOptions: WaterCupModelOptions ) {
 
     const options = optionize<WaterCupModelOptions, StrictOmit<SelfOptions, 'waterLevelPropertyOptions'>, PhetioObjectOptions>()( {
       waterHeightRange: new Range( MeanShareAndBalanceConstants.WATER_LEVEL_RANGE_MIN, MeanShareAndBalanceConstants.WATER_LEVEL_RANGE_MAX ),
-      isActive: false,
       waterLevel: MeanShareAndBalanceConstants.WATER_LEVEL_DEFAULT
     }, providedOptions );
 

js/leveling-out/model/Chocolate.ts

@@ -11,60 +11,34 @@
 
 import NumberProperty from '../../../../axon/js/NumberProperty.js';
 import PickRequired from '../../../../phet-core/js/types/PickRequired.js';
-import PhetioObject, { PhetioObjectOptions } from '../../../../tandem/js/PhetioObject.js';
+import { PhetioObjectOptions } from '../../../../tandem/js/PhetioObject.js';
 import Range from '../../../../dot/js/Range.js';
 import meanShareAndBalance from '../../meanShareAndBalance.js';
 import optionize, { EmptySelfOptions } from '../../../../phet-core/js/optionize.js';
-import IOType from '../../../../tandem/js/types/IOType.js';
-import NumberIO from '../../../../tandem/js/types/NumberIO.js';
+import Vector2 from '../../../../dot/js/Vector2.js';
 
 type SelfOptions = {
-  x: number;
-  y: number;
-};
-
-type StateObject = {
-  x: number;
-  y: number;
+  position: Vector2;
 };
 
 type ChocolateOptions = SelfOptions & PhetioObjectOptions & PickRequired<PhetioObjectOptions, 'tandem'>;
 
-export default class Chocolate extends PhetioObject {
+export default class Chocolate {
 
-  public readonly x: number;
-  public readonly y: number;
+  public readonly position: Vector2;
   public readonly chocolateBarsNumberProperty: NumberProperty;
 
-  public static ChocolateIO: IOType<Chocolate>;
 
   public constructor( providedOptions: ChocolateOptions ) {
-    const options = optionize<ChocolateOptions, EmptySelfOptions, PhetioObjectOptions>()( {
-      // phet-io
-      phetioType: Chocolate.ChocolateIO
-    }, providedOptions );
-    super( options );
+    const options = optionize<ChocolateOptions, EmptySelfOptions, PhetioObjectOptions>()( {}, providedOptions );
+
+    this.position = options.position;
 
-    this.x = providedOptions.x;
-    this.y = providedOptions.y;
     this.chocolateBarsNumberProperty = new NumberProperty( 1, {
       range: new Range( 0, 10 ),
       tandem: options.tandem.createTandem( 'chocolateBarsNumberProperty' )
     } );
   }
 }
 
-Chocolate.ChocolateIO = new IOType<Chocolate>( 'ChocolateIO', {
-  valueType: Chocolate,
-  toStateObject: ( chocolate: Chocolate ) => ( {
-    x: chocolate.x
-  } ),
-  stateToArgsForConstructor: ( stateObject: StateObject ) => {
-    return [ stateObject.x ];
-  },
-  stateSchema: {
-    x: NumberIO
-  }
-} );
-
 meanShareAndBalance.register( 'Chocolate', Chocolate );

js/leveling-out/model/LevelingOutModel.ts

@@ -17,13 +17,16 @@ import MeanShareAndBalanceConstants from '../../common/MeanShareAndBalanceConsta
 import BooleanProperty from '../../../../axon/js/BooleanProperty.js';
 import Chocolate from './Chocolate.js';
 import Person from './Person.js';
+import Vector2 from '../../../../dot/js/Vector2.js';
 
 type SelfOptions = EmptySelfOptions;
 type LevelingOutModelOptions = SelfOptions & PickRequired<MeanShareAndBalanceModelOptions, 'tandem'>;
 
+const MAX_PEOPLE = 7;
+
 export default class LevelingOutModel extends MeanShareAndBalanceModel {
 
-  public readonly numberOfPeopleRange = new Range( 1, 7 );
+  public readonly numberOfPeopleRange = new Range( 1, MAX_PEOPLE );
   public readonly numberOfPeopleProperty: NumberProperty;
   public readonly isMeanAccordionExpandedProperty: BooleanProperty;
 
@@ -51,12 +54,19 @@ export default class LevelingOutModel extends MeanShareAndBalanceModel {
     this.plateChocolateArray = [];
     this.peopleArray = [];
 
-    for ( let i = 0; i < 7; i++ ) {
-      const x = i * 50;
-      const chocolate = new Chocolate( { x: x, y: 150, tandem: options.tandem.createTandem( `plateChocolate${i}` ) } );
+    for ( let i = 0; i < MAX_PEOPLE; i++ ) {
+      const x = i * MeanShareAndBalanceConstants.PERSON_WIDTH;
+      const chocolate = new Chocolate( {
+        position: new Vector2( x, MeanShareAndBalanceConstants.PLATE_CHOCOLATE_CENTER_Y ),
+        tandem: options.tandem.createTandem( `plateChocolate${i}` )
+      } );
       this.plateChocolateArray.push( chocolate );
 
-      const person = new Person();
+      const person = new Person( {
+        position: new Vector2( x, MeanShareAndBalanceConstants.PEOPLE_CENTER_Y ),
+        isActive: i < this.numberOfPeopleProperty.value,
+        tandem: options.tandem.createTandem( `person${i}` )
+      } );
       this.peopleArray.push( person );
     }
   }

js/leveling-out/model/Person.ts

@@ -1,18 +1,47 @@
 // Copyright 2022, University of Colorado Boulder
 
-import meanShareAndBalance from '../../meanShareAndBalance.js';
-
 /**
  * TODO: describe file
  *
  * @author Marla Schulz (PhET Interactive Simulations)
  *
  */
 
+import BooleanProperty from '../../../../axon/js/BooleanProperty.js';
+import Property from '../../../../axon/js/Property.js';
+import Vector2 from '../../../../dot/js/Vector2.js';
+import optionize from '../../../../phet-core/js/optionize.js';
+import PickRequired from '../../../../phet-core/js/types/PickRequired.js';
+import PhetioObject, { PhetioObjectOptions } from '../../../../tandem/js/PhetioObject.js';
+import meanShareAndBalance from '../../meanShareAndBalance.js';
+
+type SelfOptions = {
+  isActive: boolean;
+  position: Vector2;
+};
+
+type PersonOptions = SelfOptions & PickRequired<PhetioObject, 'tandem'>;
+
 export default class Person {
 
-  public constructor() {
-    // TODO
+  // Whether the cup is enabled in view and data calculations
+  public readonly isActiveProperty: Property<boolean>;
+  // The x and y positions for the person in the view.
+  public readonly position: Vector2;
+
+  public constructor( providedOptions?: PersonOptions ) {
+
+    const options = optionize<PersonOptions, SelfOptions, PhetioObjectOptions>()( {}, providedOptions );
+
+    this.isActiveProperty = new BooleanProperty( options.isActive, {
+      // phet-io
+      tandem: options.tandem.createTandem( 'isActiveProperty' ),
+
+      // Takes its value from LevelingOutModel.numberOfPeopleProperty
+      phetioReadOnly: true
+    } );
+
+    this.position = options.position;
   }
 }
 

js/leveling-out/view/ChocolateBarsContainerNode.ts

@@ -11,19 +11,20 @@
 
 import optionize, { EmptySelfOptions } from '../../../../phet-core/js/optionize.js';
 import StrictOmit from '../../../../phet-core/js/types/StrictOmit.js';
-import { Image, Node, NodeOptions } from '../../../../scenery/js/imports.js';
+import { Image, Node, NodeOptions, NodeTranslationOptions } from '../../../../scenery/js/imports.js';
 import meanShareAndBalance from '../../meanShareAndBalance.js';
 import Chocolate from '../model/Chocolate.js';
 import MeanShareAndBalanceConstants from '../../common/MeanShareAndBalanceConstants.js';
 import chocolateBar_png from '../../../images/chocolateBar_png.js';
 
-type ChocolateBarsContainerNodeOptions = StrictOmit<NodeOptions, 'x' | 'y' | 'left' | 'right' | 'top' | 'bottom'>;
+type ChocolateBarsContainerNodeOptions = StrictOmit<NodeOptions, keyof NodeTranslationOptions>;
 
 export default class ChocolateBarsContainerNode extends Node {
   public constructor( chocolateModel: Chocolate, providedOptions?: ChocolateBarsContainerNodeOptions ) {
     const options = optionize<ChocolateBarsContainerNodeOptions, EmptySelfOptions, NodeOptions>()( {
-      x: chocolateModel.x,
-      y: chocolateModel.y
+      x: chocolateModel.position.x,
+      y: chocolateModel.position.y,
+      scale: 0.2
     }, providedOptions );
 
     const chocolateBars = [];

js/leveling-out/view/LevelingOutScreenView.ts

@@ -11,13 +11,11 @@ import { combineOptions, EmptySelfOptions } from '../../../../phet-core/js/optio
 import MeanShareAndBalanceScreenView, { MeanShareAndBalanceScreenViewOptions } from '../../common/view/MeanShareAndBalanceScreenView.js';
 import meanShareAndBalance from '../../meanShareAndBalance.js';
 import LevelingOutModel from '../model/LevelingOutModel.js';
-import { AlignBox, Node } from '../../../../scenery/js/imports.js';
+import { AlignBox } from '../../../../scenery/js/imports.js';
 import MeanShareAndBalanceConstants from '../../common/MeanShareAndBalanceConstants.js';
 import MeanShareAndBalanceColors from '../../common/MeanShareAndBalanceColors.js';
 import meanShareAndBalanceStrings from '../../meanShareAndBalanceStrings.js';
 import ChocolateBarsContainerNode from './ChocolateBarsContainerNode.js';
-import Chocolate from '../model/Chocolate.js';
-import Tandem from '../../../../tandem/js/Tandem.js';
 import LevelingOutControlPanel from './LevelingOutControlPanel.js';
 import Bounds2 from '../../../../dot/js/Bounds2.js';
 import { ScreenViewOptions } from '../../../../joist/js/ScreenView.js';
@@ -38,15 +36,11 @@ export default class LevelingOutScreenView extends MeanShareAndBalanceScreenView
     const controlPanel = new LevelingOutControlPanel( model.isMeanAccordionExpandedProperty, model.numberOfPeopleProperty,
       { minContentWidth: MeanShareAndBalanceConstants.MAX_CONTROLS_TEXT_WIDTH + 25, spacing: 20, tandem: options.tandem.createTandem( 'controlPanel' ) } );
 
-    const peopleNodes = model.peopleArray.map( person => new PersonNode() );
+    const peopleNodes = model.peopleArray.map( person => new PersonNode( person ) );
 
-    const plateLayerNode = new Node( {
-      x: 50,
-      y: 100,
-      children: [ new ChocolateBarsContainerNode( new Chocolate( { x: 50, y: 100, tandem: Tandem.OPT_OUT } ) ) ]
-    } );
+    const plateLayerNodes = model.plateChocolateArray.map( plateChocolate => new ChocolateBarsContainerNode( plateChocolate ) );
 
-    const combinedOptions = combineOptions<ScreenViewOptions>( { children: [ plateLayerNode, ...peopleNodes ] }, options );
+    const combinedOptions = combineOptions<ScreenViewOptions>( { children: [ ...plateLayerNodes, ...peopleNodes ] }, options );
 
     super( model, meanShareAndBalanceStrings.levelingOutQuestionStringProperty, MeanShareAndBalanceColors.levelingOutQuestionBarColorProperty, combinedOptions );
 

js/leveling-out/view/PersonNode.ts

@@ -10,12 +10,16 @@
 import { Node, Path } from '../../../../scenery/js/imports.js';
 import meanShareAndBalance from '../../meanShareAndBalance.js';
 import smileSolidShape from '../../../../sherpa/js/fontawesome-5/smileSolidShape.js';
+import Person from '../model/Person.js';
 
 export default class PersonNode extends Node {
 
-  public constructor() {
+  public constructor( person: Person ) {
     const smiley = new Path( smileSolidShape, { fill: 'black' } );
-    super( { children: [ smiley ] } );
+    super( {
+      children: [ smiley ],
+      scale: 0.2
+    } );
   }
 }
 

js/mean-share-and-balance-tests.ts

@@ -33,7 +33,7 @@ function testApproximatelyEquals( actual: number[], expected: number[], toleranc
 QUnit.test( 'distribute ripple', assert => {
   function testDistribution( waterLevels: number[], waterDelta: number, expectedLevels: number[], message: string ): void {
     const connectedCups = waterLevels.map( ( waterLevel, index ) => {
-      return new WaterCup( Tandem.OPT_OUT, { waterLevel: waterLevel, linePlacement: index, position: position } );
+      return new WaterCup( Tandem.OPT_OUT, { isActive: true, waterLevel: waterLevel, linePlacement: index, position: position } );
     } );
     introModel[ 'distributeWaterRipple' ]( connectedCups, connectedCups[ 2 ], waterDelta );