Copy files from make-a-ten and modify to start ones accordion box, see …

…#2

js/common/NumberPlayConstants.js

@@ -9,6 +9,7 @@ define( require => {
   'use strict';
 
   // modules
+  const Dimension2 = require( 'DOT/Dimension2' );
   const numberPlay = require( 'NUMBER_PLAY/numberPlay' );
   const PhetFont = require( 'SCENERY_PHET/PhetFont' );
 
@@ -67,7 +68,10 @@ define( require => {
     ORANGE_BACKGROUND: 'rgb( 255, 218, 176 )',
     PURPLE_BACKGROUND: 'rgb( 254, 202, 255 )',
     BLUE_BACKGROUND: 'rgb( 190, 232, 255 )',
-    BUCKET_BASE_COLOR: 'rgb( 100, 101, 162 )'
+    BUCKET_BASE_COLOR: 'rgb( 100, 101, 162 )',
+
+    // misc TODO: when base classes exist, move bucket specs there
+    BUCKET_SIZE: new Dimension2( 100, 50 ) // in screen coordinates
   };
 
   return numberPlay.register( 'NumberPlayConstants', NumberPlayConstants );

js/common/model/NumberPlayModel.js

@@ -11,6 +11,7 @@ define( require => {
   // modules
   const numberPlay = require( 'NUMBER_PLAY/numberPlay' );
   const NumberPlayPlayArea = require( 'NUMBER_PLAY/common/model/NumberPlayPlayArea' );
+  const OnesPlayArea = require( 'NUMBER_PLAY/common/model/OnesPlayArea' );
   const NumberProperty = require( 'AXON/NumberProperty' );
   const Range = require( 'DOT/Range' );
 
@@ -27,15 +28,27 @@ define( require => {
         range: new Range( 0, highestCount )
       } );
 
+      // @public (read-only) - the model for managing the play area in the OnesAccordionBox
+      this.onesPlayArea = new OnesPlayArea( this.currentNumberProperty );
+
       // @public (read-only) - the model for managing the play area in the ObjectsAccordionBox
       this.objectsPlayArea = new NumberPlayPlayArea( this.currentNumberProperty );
     }
 
+    /**
+     * Steps the model.
+     * @param {number} dt
+     */
+    step( dt ) {
+      this.onesPlayArea.step();
+    }
+
     /**
      * Resets the model.
      * @public
      */
     reset() {
+      this.onesPlayArea.reset();
       this.currentNumberProperty.reset();
       this.objectsPlayArea.reset();
     }

js/common/model/NumberPlayPlayArea.js

@@ -22,7 +22,7 @@ define( require => {
   const Vector2 = require( 'DOT/Vector2' );
 
   // constants
-  const BUCKET_SIZE = new Dimension2( 100, 50 ); // in screen coordinates
+  const BUCKET_SIZE = NumberPlayConstants.BUCKET_SIZE;
   const ANIMATION_SPEED = 200; // in screen coordinates per second
   const MAX_ANIMATION_TIME = 1; // in seconds
 
@@ -73,6 +73,7 @@ define( require => {
 
       // if the current number changes, add or remove playObjects from the play area
       currentNumberProperty.link( ( currentNumber, previousNumber ) => {
+        console.log( currentNumber, previousNumber );
         if ( currentNumber < this.playObjectsInPlayArea.lengthProperty.value ) {
           assert && assert( currentNumber < previousNumber );
 

js/common/model/OnesPlayArea.js

@@ -0,0 +1,155 @@
+// Copyright 2015-2019, University of Colorado Boulder
+
+/**
+ * Model for the Explore screen in Make a Ten. Includes the total, cues, and adding in initial numbers. This file was
+ * copied from make-a-ten/common/model/MakeATenCommonModel.js and make-a-ten/explore/model/MakeATenExploreModel.js and
+ * then modified by @chrisklus to be used in number-play.
+ *
+ * @author Sharfudeen Ashraf
+ * @author Chris Klusendorf (PhET Interactive Simulations)
+ */
+define( require => {
+  'use strict';
+
+  // modules
+  const Bucket = require( 'PHETCOMMON/model/Bucket' );
+  const numberPlay = require( 'NUMBER_PLAY/numberPlay' );
+  const NumberPlayConstants = require( 'NUMBER_PLAY/common/NumberPlayConstants' );
+  const ObservableArray = require( 'AXON/ObservableArray' );
+
+  class OnesPlayArea {
+
+    /**
+     * @param {NumberProperty} currentNumberProperty
+     */
+    constructor( currentNumberProperty ) {
+
+      // @public (read-only)
+      this.bucket = new Bucket( {
+        baseColor: NumberPlayConstants.BUCKET_BASE_COLOR,
+        size: NumberPlayConstants.BUCKET_SIZE
+      } );
+
+      // @public {NumberProperty} - The total sum of the current numbers
+      this.sumProperty = currentNumberProperty;
+
+      // @public {ObservableArray.<PaperNumber>} - Numbers in play that can be interacted with.
+      this.paperNumbers = new ObservableArray();
+
+      // @private {Function} - To be called when we need to recalculate the total
+      const calculateTotalListener = this.calculateTotal.bind( this );
+
+      this.paperNumbers.lengthProperty.link( calculateTotalListener );
+
+      // Listen to number changes of paper numbers
+      this.paperNumbers.addItemAddedListener( paperNumber => {
+        paperNumber.numberValueProperty.link( calculateTotalListener );
+      } );
+      this.paperNumbers.addItemRemovedListener( paperNumber => {
+        paperNumber.numberValueProperty.unlink( calculateTotalListener );
+      } );
+    }
+
+    /**
+     * @param {number} dt
+     */
+    step( dt ) {
+
+      // Cap large dt values, which can occur when the tab containing
+      // the sim had been hidden and then re-shown
+      dt = Math.min( 0.1, dt );
+
+      for ( let i = 0; i < this.paperNumbers.length; i++ ) {
+        this.paperNumbers.get( i ).step( dt );
+      }
+
+      // Animate fading if necessary
+      // this.splitCue.step( dt );
+    }
+
+    /**
+     * Updates the total sum of the paper numbers.
+     * @private
+     */
+    calculateTotal() {
+      let total = 0;
+      this.paperNumbers.forEach( function( paperNumber ) {
+        total += paperNumber.numberValueProperty.value;
+      } );
+      this.sumProperty.value = total;
+    }
+
+    /**
+     * Given two paper numbers, combine them (set one's value to the sum of their previous values, and remove the
+     * other).
+     *
+     * @param {Bounds2} availableModelBounds - Constrain the location to be inside these bounds
+     * @param {PaperNumber} draggedPaperNumber
+     * @param {PaperNumber} dropTargetNumber
+     */
+    collapseNumberModels( availableModelBounds, draggedPaperNumber, dropTargetNumber ) {
+      const dropTargetNumberValue = dropTargetNumber.numberValueProperty.value;
+      const draggedNumberValue = draggedPaperNumber.numberValueProperty.value;
+      const newValue = dropTargetNumberValue + draggedNumberValue;
+
+      let numberToRemove;
+      let numberToChange;
+
+      // See https://github.com/phetsims/make-a-ten/issues/260
+      if ( draggedPaperNumber.digitLength === dropTargetNumber.digitLength ) {
+        numberToRemove = draggedPaperNumber;
+        numberToChange = dropTargetNumber;
+      }
+      else {
+        // The larger number gets changed, the smaller one gets removed.
+        const droppingOnLarger = dropTargetNumberValue > draggedNumberValue;
+        numberToRemove = droppingOnLarger ? draggedPaperNumber : dropTargetNumber;
+        numberToChange = droppingOnLarger ? dropTargetNumber : draggedPaperNumber;
+      }
+
+      // Apply changes
+      this.removePaperNumber( numberToRemove );
+      numberToChange.changeNumber( newValue );
+      numberToChange.setConstrainedDestination( availableModelBounds, numberToChange.positionProperty.value, false );
+    }
+
+    /**
+     * Add a PaperNumber to the model
+     * @public
+     *
+     * @param {PaperNumber} paperNumber
+     */
+    addPaperNumber( paperNumber ) {
+      this.paperNumbers.push( paperNumber );
+    }
+
+    /**
+     * Remove a PaperNumber from the model
+     * @public
+     *
+     * @param {PaperNumber} paperNumber
+     */
+    removePaperNumber( paperNumber ) {
+      this.paperNumbers.remove( paperNumber );
+    }
+
+    /**
+     * Remove all PaperNumbers from the model.
+     * @public
+     *
+     * @param {PaperNumber} paperNumber
+     */
+    removeAllPaperNumbers() {
+      this.paperNumbers.clear();
+    }
+
+    /**
+     * @override
+     */
+    reset() {
+      this.removeAllPaperNumbers();
+    }
+  }
+
+  return numberPlay.register( 'OnesPlayArea', OnesPlayArea );
+} );

js/common/view/NumberPlayScreenView.js

@@ -119,7 +119,7 @@ define( require => {
 
       // create and add the OnesAccordionBox
       const onesAccordionBox = new OnesAccordionBox(
-        model.currentNumberProperty,
+        model.onesPlayArea,
         config.lowerAccordionBoxHeight, merge( {
           expandedProperty: this.onesAccordionBoxExpandedProperty
         }, config.onesAccordionBoxConfig ) );

js/common/view/OnesAccordionBox.js

@@ -11,32 +11,64 @@ define( require => {
 
   // modules
   const AccordionBox = require( 'SUN/AccordionBox' );
+  const Bounds2 = require( 'DOT/Bounds2' );
   const merge = require( 'PHET_CORE/merge' );
+  const ModelViewTransform2 = require( 'PHETCOMMON/view/ModelViewTransform2' );
   const numberPlay = require( 'NUMBER_PLAY/numberPlay' );
   const NumberPlayConstants = require( 'NUMBER_PLAY/common/NumberPlayConstants' );
+  const OnesPlayAreaNode = require( 'NUMBER_PLAY/common/view/OnesPlayAreaNode' );
   const Rectangle = require( 'SCENERY/nodes/Rectangle' );
   const Text = require( 'SCENERY/nodes/Text' );
+  const Vector2 = require( 'DOT/Vector2' );
 
   // strings
   const onesString = require( 'string!NUMBER_PLAY/ones' );
 
   class OnesAccordionBox extends AccordionBox {
 
     /**
-     * @param {NumberProperty} currentNumberProperty
+     * @param {OnesPlayArea} onesPlayArea
      * @param {number} height - the height of this accordion box
      * @param {Object} [options]
      */
-    constructor( currentNumberProperty, height, options ) {
+    constructor( onesPlayArea, height, config ) {
 
-      options = merge( {
+      config = merge( {
         titleNode: new Text( onesString, { font: NumberPlayConstants.ACCORDION_BOX_TITLE_FONT } ),
-        fill: NumberPlayConstants.PURPLE_BACKGROUND
-      }, NumberPlayConstants.ACCORDION_BOX_OPTIONS, options );
+        fill: NumberPlayConstants.PURPLE_BACKGROUND,
 
-      const contentNode = new Rectangle( { rectHeight: height } );
+        contentWidth: null, // {number} @required
+      }, NumberPlayConstants.ACCORDION_BOX_OPTIONS, config );
 
-      super( contentNode, options );
+      assert && assert( config.contentWidth, `contentWidth is required: ${config.contentWidth}`);
+
+      const contentNode = new Rectangle( {
+        rectHeight: height,
+        rectWidth: config.contentWidth
+      } );
+
+      const playAreaMarginY = 15;
+      const playAreaViewBounds = new Bounds2(
+        contentNode.left,
+        contentNode.top,
+        contentNode.right,
+        contentNode.bottom - playAreaMarginY
+      );
+
+      const translateMVT = ModelViewTransform2.createSinglePointScaleInvertedYMapping(
+        Vector2.ZERO,
+        new Vector2( playAreaViewBounds.centerX, playAreaViewBounds.bottom ),
+        1
+      );
+
+      const onesPlayAreaNode = new OnesPlayAreaNode(
+        onesPlayArea,
+        playAreaViewBounds.dilatedX( -10 ),
+        translateMVT
+      );
+      contentNode.addChild( onesPlayAreaNode );
+
+      super( contentNode, config );
     }
   }