adjusted some of the touch areas for easier use, see #100

phetsims · Jun 9, 2017 · 38fb20a · 38fb20a
1 parent bc5ae0b
commit 38fb20a
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 10 deletions.
diff --git a/js/common/EESharedConstants.js b/js/common/EESharedConstants.js
@@ -57,7 +57,9 @@ define( function( require ) {
     COIN_TERM_TYPE_TO_TEXT_MAP: COIN_TERM_TYPE_TO_TEXT_MAP,
 
     // misc
-    RESET_BUTTON_RADIUS: 24
+    RESET_ALL_BUTTON_RADIUS: 24,
+    RESET_ALL_BUTTON_TOUCH_AREA_DILATION: 10,
+
   };
 
   expressionExchange.register( 'EESharedConstants', EESharedConstants );

diff --git a/js/common/view/ExpressionExplorationScreenView.js b/js/common/view/ExpressionExplorationScreenView.js
@@ -55,6 +55,8 @@ define( function( require ) {
   var ACCORDION_BOX_BUTTON_Y_MARGIN = 4;
   var ACCORDION_BOX_CORNER_RADIUS = 7;
   var ACCORDION_BOX_CONTENT_X_MARGIN = 15;
+  var ACCORDION_BOX_BUTTON_TOUCH_AREA_DILATION_X = 15;
+  var ACCORDION_BOX_BUTTON_TOUCH_AREA_DILATION_Y = 15;
   var CHECK_BOX_FONT = new PhetFont( { size: 16 } );
   var CHECK_BOX_VERTICAL_SPACING = 6;
   var INSET = 10; // inset from edges of layout bounds, in screen coords
@@ -130,7 +132,9 @@ define( function( require ) {
       buttonYMargin: ACCORDION_BOX_BUTTON_Y_MARGIN,
       contentXMargin: 30, // empirically determined
       minWidth: leftSideBoxWidth,
-      maxWidth: leftSideBoxWidth
+      maxWidth: leftSideBoxWidth,
+      buttonTouchAreaXDilation: ACCORDION_BOX_BUTTON_TOUCH_AREA_DILATION_X,
+      buttonTouchAreaYDilation: ACCORDION_BOX_BUTTON_TOUCH_AREA_DILATION_Y
     } );
     this.addChild( totalValueAccordionBox );
 
@@ -167,7 +171,9 @@ define( function( require ) {
       buttonXMargin: ACCORDION_BOX_BUTTON_X_MARGIN,
       buttonYMargin: ACCORDION_BOX_BUTTON_Y_MARGIN,
       minWidth: leftSideBoxWidth,
-      maxWidth: leftSideBoxWidth
+      maxWidth: leftSideBoxWidth,
+      buttonTouchAreaXDilation: ACCORDION_BOX_BUTTON_TOUCH_AREA_DILATION_X,
+      buttonTouchAreaYDilation: ACCORDION_BOX_BUTTON_TOUCH_AREA_DILATION_Y
     } );
     variableValuesAccordionBox.expandedProperty.value = false; // initially closed
     this.addChild( variableValuesAccordionBox );
@@ -232,7 +238,9 @@ define( function( require ) {
       buttonYMargin: ACCORDION_BOX_BUTTON_Y_MARGIN,
       contentXMargin: ACCORDION_BOX_CONTENT_X_MARGIN,
       minWidth: collectionDisplayWidth + 2 * ACCORDION_BOX_BUTTON_X_MARGIN,
-      maxWidth: collectionDisplayWidth + 2 * ACCORDION_BOX_BUTTON_X_MARGIN
+      maxWidth: collectionDisplayWidth + 2 * ACCORDION_BOX_BUTTON_X_MARGIN,
+      buttonTouchAreaXDilation: ACCORDION_BOX_BUTTON_TOUCH_AREA_DILATION_X,
+      buttonTouchAreaYDilation: ACCORDION_BOX_BUTTON_TOUCH_AREA_DILATION_Y
     } );
     this.addChild( myCollectionAccordionBox );
 
@@ -305,8 +313,8 @@ define( function( require ) {
       },
       right: this.layoutBounds.maxX - 10,
       bottom: this.layoutBounds.maxY - 10,
-      touchAreaDilation: 10,
-      radius: EESharedConstants.RESET_BUTTON_RADIUS
+      radius: EESharedConstants.RESET_ALL_BUTTON_RADIUS,
+      touchAreaDilation: EESharedConstants.RESET_ALL_BUTTON_TOUCH_AREA_DILATION
     } );
     this.addChild( resetAllButton );
 

diff --git a/js/game/view/EEGameLevelView.js b/js/game/view/EEGameLevelView.js
@@ -34,6 +34,9 @@ define( function( require ) {
   // strings
   var levelNumberPatternString = require( 'string!EXPRESSION_EXCHANGE/levelNumberPattern' );
 
+  // constants
+  var BUTTON_XY_TOUCH_DILATION = 4;
+
   /**
    * @param {EEGameModel} gameModel - main model for the game
    * @param {EEGameLevel} levelModel - model for the level depicted by this view object
@@ -86,7 +89,9 @@ define( function( require ) {
     var backButton = new BackButton( {
       left: screenLayoutBounds.left + 30,
       top: screenLayoutBounds.top + 30,
-      listener: gameModel.returnToLevelSelection.bind( gameModel )
+      listener: gameModel.returnToLevelSelection.bind( gameModel ),
+      touchAreaXDilation: BUTTON_XY_TOUCH_DILATION,
+      touchAreaYDilation: BUTTON_XY_TOUCH_DILATION
     } );
     middleLayer.addChild( backButton );
 
@@ -98,7 +103,9 @@ define( function( require ) {
       yMargin: 7,
       listener: function() { levelModel.refresh(); },
       left: backButton.left,
-      top: backButton.bottom + 8
+      top: backButton.bottom + 8,
+      touchAreaXDilation: BUTTON_XY_TOUCH_DILATION,
+      touchAreaYDilation: BUTTON_XY_TOUCH_DILATION
     } );
     middleLayer.addChild( refreshButton );
 

diff --git a/js/game/view/LevelSelectionNode.js b/js/game/view/LevelSelectionNode.js
@@ -99,8 +99,8 @@ define( function( require ) {
     // Reset button.
     var resetButton = new ResetAllButton( {
       listener: resetFunction,
-      radius: EESharedConstants.RESET_BUTTON_RADIUS,
-      touchAreaDilation: 7
+      radius: EESharedConstants.RESET_ALL_BUTTON_RADIUS,
+      touchAreaDilation: EESharedConstants.RESET_ALL_BUTTON_TOUCH_AREA_DILATION
     } );
     this.addChild( resetButton );