Create chocolate bar container, see: #57

js/leveling-out/model/Chocolate.ts

@@ -2,14 +2,15 @@
 
 
 /**
- * TODO
+ * The model for the chocolate each person or plate has.
+ * The amount of chocolate bars is tracked through chocolateBarsNumberProperty
  *
  * @author Marla Schulz (PhET Interactive Simulations)
  * @author Sam Reid (PhET Interactive Simulations)
  */
 
 import NumberProperty from '../../../../axon/js/NumberProperty.js';
-import PickRequired from '../../../../phet-core/js/types/PickRequired.js';
+//import PickRequired from '../../../../phet-core/js/types/PickRequired.js';
 import PhetioObject, { PhetioObjectOptions } from '../../../../tandem/js/PhetioObject.js';
 import Range from '../../../../dot/js/Range.js';
 import meanShareAndBalance from '../../meanShareAndBalance.js';
@@ -19,20 +20,21 @@ type SelfOptions = {
   y: number;
 }
 
-type ChocolateOptions = SelfOptions & PhetioObjectOptions & PickRequired<PhetioObjectOptions, 'tandem'>
+type ChocolateOptions = SelfOptions & PhetioObjectOptions;
+  //& PickRequired<PhetioObjectOptions, 'tandem'>
 
 export default class Chocolate extends PhetioObject {
 
   public readonly x: number;
   public readonly y: number;
-  public readonly chocolateBarNumberProperty: NumberProperty;
+  public readonly chocolateBarsNumberProperty: NumberProperty;
 
   public constructor( providedOptions: ChocolateOptions ) {
     super( providedOptions );
 
     this.x = providedOptions.x;
     this.y = providedOptions.y;
-    this.chocolateBarNumberProperty = new NumberProperty( 1, { range: new Range( 0, 10 ) } );
+    this.chocolateBarsNumberProperty = new NumberProperty( 1, { range: new Range( 0, 10 ) } );
 
   }
 }

js/leveling-out/view/ChocolateBarsContainerNode.ts

@@ -0,0 +1,41 @@
+// Copyright 2022, University of Colorado Boulder
+
+/**
+ * TODO
+ *
+ * @author Marla Schulz (PhET Interactive Simulations)
+ * @author Sam Reid (PhET Interactive Simulations)
+ */
+
+
+import optionize from '../../../../phet-core/js/optionize.js';
+import EmptyObjectType from '../../../../phet-core/js/types/EmptyObjectType.js';
+import StrictOmit from '../../../../phet-core/js/types/StrictOmit.js';
+import { Node, NodeOptions } from '../../../../scenery/js/imports.js';
+import meanShareAndBalance from '../../meanShareAndBalance.js';
+import Chocolate from '../model/Chocolate.js';
+import ChocolateBarRectangle from './ChocolateBarRectangle.js';
+import MeanShareAndBalanceConstants from '../../common/MeanShareAndBalanceConstants.js';
+
+type ChocolateBarsContainerNodeOptions = StrictOmit<NodeOptions, 'x' | 'y' | 'left' | 'right' | 'top' | 'bottom'>
+
+export default class ChocolateBarsContainerNode extends Node {
+  public constructor( chocolateModel: Chocolate, providedOptions?: ChocolateBarsContainerNodeOptions ) {
+    const options = optionize<ChocolateBarsContainerNodeOptions, EmptyObjectType, NodeOptions>()( {
+      x: chocolateModel.x,
+      y: chocolateModel.y
+    }, providedOptions );
+
+    const chocolateBars = [];
+    for ( let i = 0; i < chocolateModel.chocolateBarsNumberProperty.value; i++ ) {
+      const chocolateBar = new ChocolateBarRectangle();
+      chocolateBar.y = ( MeanShareAndBalanceConstants.CHOCOLATE_HEIGHT + 5 ) * i;
+      chocolateBars.push( chocolateBar );
+    }
+
+    options.children = chocolateBars;
+    super( options );
+  }
+}
+
+meanShareAndBalance.register( 'ChocolateBarsContainerNode', ChocolateBarsContainerNode );

js/leveling-out/view/LevelingOutScreenView.ts

@@ -18,7 +18,8 @@ import NumberSpinner from '../../../../sun/js/NumberSpinner.js';
 import Property from '../../../../axon/js/Property.js';
 import MeanShareAndBalanceConstants from '../../common/MeanShareAndBalanceConstants.js';
 import MeanShareAndBalanceColors from '../../common/MeanShareAndBalanceColors.js';
-import ChocolateBarRectangle from './ChocolateBarRectangle.js';
+import ChocolateBarsContainerNode from './ChocolateBarsContainerNode.js';
+import Chocolate from '../model/Chocolate.js';
 
 type SelfOptions = EmptyObjectType;
 
@@ -52,13 +53,15 @@ export default class LevelingOutScreenView extends MeanShareAndBalanceScreenView
         tandem: options.tandem.createTandem( 'numberOfPeopleNumberSpinner' )
       } );
 
-    const chocolateBar = new ChocolateBarRectangle();
+    const chocolateModel = new Chocolate( { x: 200, y: 200 } );
+
+    const chocolateBarContainer = new ChocolateBarsContainerNode( chocolateModel );
 
 
     this.controlsVBox.addChild( meanAccordionBox );
     this.numberSpinnerVBox.addChild( numberOfPeopleText );
     this.numberSpinnerVBox.addChild( numberOfPeopleNumberSpinner );
-    this.addChild( chocolateBar );
+    this.addChild( chocolateBarContainer );
   }
 
 }