diff --git a/js/basics/EEBasicsScreen.js b/js/basics/EEBasicsScreen.js index a7427bf7..e01c1724 100644 --- a/js/basics/EEBasicsScreen.js +++ b/js/basics/EEBasicsScreen.js @@ -27,7 +27,7 @@ define( require => { */ function EEBasicsScreen() { - var options = { + const options = { name: basicsString, backgroundColorProperty: new Property( EESharedConstants.NON_GAME_SCREENS_BACKGROUND_COLOR ), homeScreenIcon: new EEBasicsIconNode() diff --git a/js/basics/view/EEBasicsIconNode.js b/js/basics/view/EEBasicsIconNode.js index 42af65e4..66020fae 100644 --- a/js/basics/view/EEBasicsIconNode.js +++ b/js/basics/view/EEBasicsIconNode.js @@ -21,9 +21,9 @@ define( require => { const Text = require( 'SCENERY/nodes/Text' ); // constants - var ICON_SIZE = Screen.MINIMUM_HOME_SCREEN_ICON_SIZE; - var BACKGROUND_COLOR = EESharedConstants.NON_GAME_SCREENS_BACKGROUND_COLOR; - var TEXT_FONT = new PhetFont( 84 ); + const ICON_SIZE = Screen.MINIMUM_HOME_SCREEN_ICON_SIZE; + const BACKGROUND_COLOR = EESharedConstants.NON_GAME_SCREENS_BACKGROUND_COLOR; + const TEXT_FONT = new PhetFont( 84 ); /** * @constructor @@ -34,7 +34,7 @@ define( require => { Rectangle.call( this, 0, 0, ICON_SIZE.width, ICON_SIZE.height, { fill: BACKGROUND_COLOR } ); // add the nodes - var coin1 = CoinNodeFactory.createImageNode( CoinTermTypeID.X, ICON_SIZE.height * 0.15, true ); + const coin1 = CoinNodeFactory.createImageNode( CoinTermTypeID.X, ICON_SIZE.height * 0.15, true ); coin1.centerX = ICON_SIZE.width * 0.35; coin1.centerY = ICON_SIZE.height / 2; this.addChild( coin1 ); @@ -45,7 +45,7 @@ define( require => { centerY: coin1.centerY } ) ); - var coin2 = CoinNodeFactory.createImageNode( CoinTermTypeID.Y, ICON_SIZE.height * 0.15, true ); + const coin2 = CoinNodeFactory.createImageNode( CoinTermTypeID.Y, ICON_SIZE.height * 0.15, true ); coin2.centerX = ICON_SIZE.width * 0.75; coin2.centerY = ICON_SIZE.height / 2; this.addChild( coin2 ); diff --git a/js/common/EEQueryParameters.js b/js/common/EEQueryParameters.js index b230d898..80659003 100644 --- a/js/common/EEQueryParameters.js +++ b/js/common/EEQueryParameters.js @@ -11,7 +11,7 @@ define( require => { // modules const expressionExchange = require( 'EXPRESSION_EXCHANGE/expressionExchange' ); - var EEQueryParameters = QueryStringMachine.getAll( { + const EEQueryParameters = QueryStringMachine.getAll( { // control whether expression width is always adjusted or whether it sometimes remains constant adjustExpressionWidth: { type: 'flag' }, diff --git a/js/common/EESharedConstants.js b/js/common/EESharedConstants.js index ace0a14d..d903b5df 100644 --- a/js/common/EESharedConstants.js +++ b/js/common/EESharedConstants.js @@ -13,7 +13,7 @@ define( require => { const Dimension2 = require( 'DOT/Dimension2' ); const expressionExchange = require( 'EXPRESSION_EXCHANGE/expressionExchange' ); - var EESharedConstants = { + const EESharedConstants = { LAYOUT_BOUNDS: new Bounds2( 0, 0, 1024, 618 ), // at the time of this writing this is the same as the default diff --git a/js/common/enum/AllowedRepresentations.js b/js/common/enum/AllowedRepresentations.js index 2e5ccfbf..60869aca 100644 --- a/js/common/enum/AllowedRepresentations.js +++ b/js/common/enum/AllowedRepresentations.js @@ -11,7 +11,7 @@ define( require => { // modules const expressionExchange = require( 'EXPRESSION_EXCHANGE/expressionExchange' ); - var AllowedRepresentations = { + const AllowedRepresentations = { COINS_ONLY: 'COINS_ONLY', VARIABLES_ONLY: 'VARIABLES_ONLY', COINS_AND_VARIABLES: 'COINS_AND_VARIABLES' diff --git a/js/common/enum/CoinTermCreatorSetID.js b/js/common/enum/CoinTermCreatorSetID.js index a6265ab9..92375dc5 100644 --- a/js/common/enum/CoinTermCreatorSetID.js +++ b/js/common/enum/CoinTermCreatorSetID.js @@ -11,7 +11,7 @@ define( require => { // modules const expressionExchange = require( 'EXPRESSION_EXCHANGE/expressionExchange' ); - var CoinTermCreatorSetID = { + const CoinTermCreatorSetID = { BASICS: 'BASICS', EXPLORE: 'EXPLORE', VARIABLES: 'VARIABLES' diff --git a/js/common/enum/CoinTermTypeID.js b/js/common/enum/CoinTermTypeID.js index 17a39a44..76f59f77 100644 --- a/js/common/enum/CoinTermTypeID.js +++ b/js/common/enum/CoinTermTypeID.js @@ -10,7 +10,7 @@ define( require => { // modules const expressionExchange = require( 'EXPRESSION_EXCHANGE/expressionExchange' ); - var CoinTermTypeID = { + const CoinTermTypeID = { X: 'X', Y: 'Y', Z: 'Z', diff --git a/js/common/enum/ViewMode.js b/js/common/enum/ViewMode.js index d433230d..390c576d 100644 --- a/js/common/enum/ViewMode.js +++ b/js/common/enum/ViewMode.js @@ -11,7 +11,7 @@ define( require => { // modules const expressionExchange = require( 'EXPRESSION_EXCHANGE/expressionExchange' ); - var ViewMode = { + const ViewMode = { COINS: 'COINS', VARIABLES: 'VARIABLES' }; diff --git a/js/common/model/CoinTerm.js b/js/common/model/CoinTerm.js index 06d01379..055d99b5 100644 --- a/js/common/model/CoinTerm.js +++ b/js/common/model/CoinTerm.js @@ -24,14 +24,14 @@ define( require => { const Vector2Property = require( 'DOT/Vector2Property' ); // constants - var COIN_TERM_FADE_TIME = 0.75; // in seconds - var CLOSE_ENOUGH_TO_HOME = 1E-6; // distance at which a coin term is considered to have returned to origin - var CARD_PRE_FADE_TIME = 0.25; // time before card starts to fade after user grabs it, in seconds - var CARD_FADE_TIME = 0.5; // time for a card to fade out - var MAX_ANIMATION_TIME = 1; // max time for an animation to complete + const COIN_TERM_FADE_TIME = 0.75; // in seconds + const CLOSE_ENOUGH_TO_HOME = 1E-6; // distance at which a coin term is considered to have returned to origin + const CARD_PRE_FADE_TIME = 0.25; // time before card starts to fade after user grabs it, in seconds + const CARD_FADE_TIME = 0.5; // time for a card to fade out + const MAX_ANIMATION_TIME = 1; // max time for an animation to complete // class var for creating unique IDs - var creationCount = 0; + let creationCount = 0; /** * @param {Property.} valueProperty - value of the coin term wrapped in a property @@ -44,7 +44,7 @@ define( require => { */ function CoinTerm( valueProperty, coinRadius, termText, termValueTextProperty, typeID, options ) { - var self = this; + const self = this; this.id = 'CT-' + ( ++creationCount ); // @public (read-only) - unique ID useful for debugging options = _.extend( { @@ -215,14 +215,14 @@ define( require => { step: function( dt ) { // if there is an animation in progress, step it - var animation = this.inProgressAnimationProperty.get(); + const animation = this.inProgressAnimationProperty.get(); if ( animation ) { animation.timeSoFar += dt; if ( animation.timeSoFar < animation.totalDuration ) { // not there yet - take a step towards the destination - var proportionCompleted = animation.timeSoFar / animation.totalDuration; - var easingProportion = Easing.CUBIC_IN_OUT.value( proportionCompleted ); + const proportionCompleted = animation.timeSoFar / animation.totalDuration; + const easingProportion = Easing.CUBIC_IN_OUT.value( proportionCompleted ); this.positionProperty.set( animation.startPosition.plus( animation.travelVector.withMagnitude( animation.travelVector.magnitude * easingProportion ) @@ -279,7 +279,7 @@ define( require => { */ travelToDestination: function( destination ) { this.destinationProperty.set( destination ); - var currentPosition = this.positionProperty.get(); + const currentPosition = this.positionProperty.get(); if ( currentPosition.equals( destination ) ) { // The coin terms is already at the destination, no animation is required, but emit a notification in case the @@ -289,7 +289,7 @@ define( require => { else { // calculate the time needed to get to the destination - var animationDuration = Math.min( + const animationDuration = Math.min( this.positionProperty.get().distance( destination ) / EESharedConstants.COIN_TERM_MOVEMENT_SPEED, MAX_ANIMATION_TIME ); @@ -355,12 +355,12 @@ define( require => { */ absorb: function( coinTermToAbsorb, doPartialCancellation ) { assert && assert( this.typeID === coinTermToAbsorb.typeID, 'can\'t combine coin terms of different types' ); - var self = this; + const self = this; this.totalCountProperty.value += coinTermToAbsorb.totalCountProperty.value; if ( doPartialCancellation ) { coinTermToAbsorb.composition.forEach( function( minDecomposableValue ) { - var index = self.composition.indexOf( -1 * minDecomposableValue ); + const index = self.composition.indexOf( -1 * minDecomposableValue ); if ( index > -1 ) { // cancel this value from the composition of the receiving coin term self.composition.splice( index, 1 ); @@ -384,11 +384,11 @@ define( require => { * @public */ extractConstituentCoinTerms: function() { - var extractedCoinTerms = []; + const extractedCoinTerms = []; // create a coin term to reflect each one from which this one is composed - for ( var i = 1; i < this.composition.length; i++ ) { - var extractedCoinTerm = new CoinTerm( + for ( let i = 1; i < this.composition.length; i++ ) { + const extractedCoinTerm = new CoinTerm( this.valueProperty, this.coinRadius, this.termText, @@ -443,7 +443,7 @@ define( require => { * @public */ getViewBounds: function() { - var position = this.positionProperty.get(); + const position = this.positionProperty.get(); return this.localViewBoundsProperty.get().shifted( position.x, position.y ); }, diff --git a/js/common/model/CoinTermFactory.js b/js/common/model/CoinTermFactory.js index 9424b70e..0e3949d0 100644 --- a/js/common/model/CoinTermFactory.js +++ b/js/common/model/CoinTermFactory.js @@ -20,8 +20,8 @@ define( require => { const Property = require( 'AXON/Property' ); // constants - var CONSTANT_ONE_VALUE_PROPERTY = new Property( 1 ); - var CONSTANT_ONE_TEXT_VALUE_PROPERTY = new Property( '1' ); + const CONSTANT_ONE_VALUE_PROPERTY = new Property( 1 ); + const CONSTANT_ONE_TEXT_VALUE_PROPERTY = new Property( '1' ); /** * @param {number} xValueProperty @@ -125,10 +125,10 @@ define( require => { */ createCoinTerm: function( typeID, options ) { - var valueProperty; - var coinRadius; - var termText; - var termValueTextProperty; + let valueProperty; + let coinRadius; + let termText; + let termValueTextProperty; // set up the various values and properties based on the specified type ID switch( typeID ) { diff --git a/js/common/model/Expression.js b/js/common/model/Expression.js index 30ef53cd..c964d7c6 100644 --- a/js/common/model/Expression.js +++ b/js/common/model/Expression.js @@ -24,14 +24,14 @@ define( require => { const Vector2Property = require( 'DOT/Vector2Property' ); // constants - var INTER_COIN_TERM_SPACING = 30; // in model units, empirically determined - var X_MARGIN = 14; // margin for coin terms, empirically determined - var Y_MARGIN = 12; // margin for coin terms, empirically determined - var ANIMATION_SPEED = 400; // in model units (which are basically screen coordinates) per second - var MAX_ANIMATION_TIME = 1; // seconds + const INTER_COIN_TERM_SPACING = 30; // in model units, empirically determined + const X_MARGIN = 14; // margin for coin terms, empirically determined + const Y_MARGIN = 12; // margin for coin terms, empirically determined + const ANIMATION_SPEED = 400; // in model units (which are basically screen coordinates) per second + const MAX_ANIMATION_TIME = 1; // seconds // class var for creating unique IDs - var creationCount = 0; + let creationCount = 0; /** * @param {CoinTerm} anchorCoinTerm @@ -41,7 +41,7 @@ define( require => { */ function Expression( anchorCoinTerm, floatingCoinTerm, simplifyNegativesProperty ) { - var self = this; + const self = this; this.id = 'EX-' + (++creationCount); //------------------------------------------------------------------------ @@ -214,28 +214,28 @@ define( require => { */ step: function( dt ) { - var self = this; + const self = this; // If needed, adjust the size of the expression and the positions of the contained coin terms. This is done here // in the step function so that it is only done a max of once per animation frame rather than redoing it for each // coin term whose bounds change. if ( this.resizeNeeded ) { - var animateUpdateMotion = !this.userControlledProperty.get() && !this.inProgressAnimationProperty.get(); + const animateUpdateMotion = !this.userControlledProperty.get() && !this.inProgressAnimationProperty.get(); this.updateSizeAndCoinTermPositions( animateUpdateMotion ); this.resizeNeeded = false; } // determine the needed height and which hints should be active - var tallestCoinTermHeight = 0; + let tallestCoinTermHeight = 0; this.coinTerms.forEach( function( residentCoinTerm ) { tallestCoinTermHeight = Math.max( tallestCoinTermHeight, residentCoinTerm.localViewBoundsProperty.get().height ); } ); - var rightHintActive = false; - var rightHintMaxCoinWidth = 0; - var leftHintActive = false; - var leftHintMaxCoinWidth = 0; + let rightHintActive = false; + let rightHintMaxCoinWidth = 0; + let leftHintActive = false; + let leftHintMaxCoinWidth = 0; this.hoveringCoinTerms.forEach( function( hoveringCoinTerm ) { - var hctRelativeViewBounds = hoveringCoinTerm.localViewBoundsProperty.get(); + const hctRelativeViewBounds = hoveringCoinTerm.localViewBoundsProperty.get(); tallestCoinTermHeight = Math.max( tallestCoinTermHeight, hctRelativeViewBounds.height ); if ( hoveringCoinTerm.positionProperty.get().x > self.upperLeftCornerProperty.get().x + self.widthProperty.get() / 2 ) { @@ -267,7 +267,7 @@ define( require => { this.combineHaloActiveProperty.set( this.hoveringExpressions.length > 0 ); // update the overall height of the expression if needed - var neededHeight = tallestCoinTermHeight + 2 * Y_MARGIN; + const neededHeight = tallestCoinTermHeight + 2 * Y_MARGIN; if ( this.heightProperty.get() !== neededHeight ) { this.upperLeftCornerProperty.set( this.upperLeftCornerProperty.get().minusXY( 0, @@ -279,17 +279,17 @@ define( require => { // Do any motion animation. This is done last because the animation can sometimes cause the expression to be // removed from the model (such as when it joins another expression), and this can cause the prior steps to fail. - var animation = this.inProgressAnimationProperty.get(); + const animation = this.inProgressAnimationProperty.get(); if ( animation ) { animation.timeSoFar += dt; if ( animation.timeSoFar < animation.totalDuration ) { // not there yet - take a step towards the destination - var easingProportion = Easing.CUBIC_IN_OUT.value( animation.timeSoFar / animation.totalDuration ); - var nextPosition = animation.startPosition.plus( + const easingProportion = Easing.CUBIC_IN_OUT.value( animation.timeSoFar / animation.totalDuration ); + const nextPosition = animation.startPosition.plus( animation.travelVector.withMagnitude( animation.travelVector.magnitude * easingProportion ) ); - var deltaPosition = nextPosition.minus( this.upperLeftCornerProperty.get() ); + const deltaPosition = nextPosition.minus( this.upperLeftCornerProperty.get() ); this.translate( deltaPosition ); } else { @@ -314,8 +314,8 @@ define( require => { * @param {Bounds2} [boundsToSet] - optional bounds to set if caller wants to avoid an allocation */ getBounds: function( boundsToSet ) { - var bounds = boundsToSet || new Bounds2( 0, 0, 1, 1 ); - var upperLeftCorner = this.upperLeftCornerProperty.get(); + const bounds = boundsToSet || new Bounds2( 0, 0, 1, 1 ); + const upperLeftCorner = this.upperLeftCornerProperty.get(); bounds.setMinMax( upperLeftCorner.x, upperLeftCorner.y, @@ -345,23 +345,23 @@ define( require => { updateSizeAndCoinTermPositions: function( animate ) { // keep track of original size so we know when to fire event about layout changes - var originalWidth = this.widthProperty.get(); - var originalHeight = this.heightProperty.get(); - var coinTermsMoved = false; + const originalWidth = this.widthProperty.get(); + const originalHeight = this.heightProperty.get(); + let coinTermsMoved = false; // get an array of the coin terms sorted from left to right - var coinTermsLeftToRight = this.getCoinTermsLeftToRight(); + const coinTermsLeftToRight = this.getCoinTermsLeftToRight(); - var middleCoinTermIndex = Math.floor( ( coinTermsLeftToRight.length - 1 ) / 2 ); - var xPos; - var yPos = coinTermsLeftToRight[ middleCoinTermIndex ].destinationProperty.get().y; - var scaledCoinTermSpacing = INTER_COIN_TERM_SPACING * this.scaleProperty.get(); + const middleCoinTermIndex = Math.floor( ( coinTermsLeftToRight.length - 1 ) / 2 ); + let xPos; + const yPos = coinTermsLeftToRight[ middleCoinTermIndex ].destinationProperty.get().y; + const scaledCoinTermSpacing = INTER_COIN_TERM_SPACING * this.scaleProperty.get(); // adjust the positions of coin terms to the right of the middle for ( var i = middleCoinTermIndex + 1; i < coinTermsLeftToRight.length; i++ ) { // adjust the position of this coin term to be the correct distance from its neighbor to the left - var leftNeighbor = coinTermsLeftToRight[ i - 1 ]; + const leftNeighbor = coinTermsLeftToRight[ i - 1 ]; xPos = leftNeighbor.destinationProperty.get().x + leftNeighbor.localViewBoundsProperty.get().maxX + scaledCoinTermSpacing - coinTermsLeftToRight[ i ].localViewBoundsProperty.get().minX; if ( coinTermsLeftToRight[ i ].destinationProperty.get().x !== xPos ) { @@ -373,7 +373,7 @@ define( require => { // adjust the positions of coin terms to the left of the middle for ( i = middleCoinTermIndex - 1; i >= 0; i-- ) { // adjust the position of this coin term to be the correct distance from its neighbor to the right - var rightNeighbor = coinTermsLeftToRight[ i + 1 ]; + const rightNeighbor = coinTermsLeftToRight[ i + 1 ]; xPos = rightNeighbor.destinationProperty.get().x + rightNeighbor.localViewBoundsProperty.get().minX - scaledCoinTermSpacing - coinTermsLeftToRight[ i ].localViewBoundsProperty.get().maxX; if ( coinTermsLeftToRight[ i ].positionProperty.get().x !== xPos ) { @@ -383,15 +383,15 @@ define( require => { } // adjust the size and position of this expression - var maxHeight = 0; - var totalWidth = 0; + let maxHeight = 0; + let totalWidth = 0; coinTermsLeftToRight.forEach( function( coinTerm ) { - var relativeViewBounds = coinTerm.localViewBoundsProperty.get(); + const relativeViewBounds = coinTerm.localViewBoundsProperty.get(); maxHeight = relativeViewBounds.height > maxHeight ? relativeViewBounds.height : maxHeight; totalWidth += relativeViewBounds.width; } ); - var scaledXMargin = X_MARGIN * this.scaleProperty.get(); - var scaledYMargin = Y_MARGIN * this.scaleProperty.get(); + const scaledXMargin = X_MARGIN * this.scaleProperty.get(); + const scaledYMargin = Y_MARGIN * this.scaleProperty.get(); this.upperLeftCornerProperty.set( new Vector2( coinTermsLeftToRight[ 0 ].destinationProperty.get().x + coinTermsLeftToRight[ 0 ].localViewBoundsProperty.get().minX - scaledXMargin, @@ -420,8 +420,8 @@ define( require => { this.coinTerms.push( coinTerm ); - var coinTermRelativeViewBounds = coinTerm.localViewBoundsProperty.get(); - var coinTermPosition = coinTerm.positionProperty.get(); + const coinTermRelativeViewBounds = coinTerm.localViewBoundsProperty.get(); + const coinTermPosition = coinTerm.positionProperty.get(); if ( this.coinTerms.length === 1 ) { @@ -436,12 +436,12 @@ define( require => { else { // adjust the expression's width to accommodate the new coin term - var originalWidth = this.widthProperty.get(); + const originalWidth = this.widthProperty.get(); this.widthProperty.set( this.widthProperty.get() + INTER_COIN_TERM_SPACING + coinTermRelativeViewBounds.width ); - var upperLeftCorner = this.upperLeftCornerProperty.get(); + const upperLeftCorner = this.upperLeftCornerProperty.get(); // figure out where the coin term should go - var xDestination; + let xDestination; if ( coinTermPosition.x > upperLeftCorner.x + originalWidth / 2 ) { // add to the right side xDestination = upperLeftCorner.x + this.widthProperty.get() - X_MARGIN - coinTermRelativeViewBounds.maxX; @@ -454,7 +454,7 @@ define( require => { xDestination = this.upperLeftCornerProperty.get().x + X_MARGIN - coinTermRelativeViewBounds.minX; } - var destination = new Vector2( + const destination = new Vector2( xDestination, this.upperLeftCornerProperty.get().y + this.heightProperty.get() / 2 ); @@ -488,7 +488,7 @@ define( require => { coinTerm.localViewBoundsProperty.lazyLink( this.setResizeNeededFlagBound ); // add a listener to update whether minus sign is shown when negative when the user moves this coin term - var userControlledListener = this.updateCoinTermShowMinusSignFlag.bind( this ); + const userControlledListener = this.updateCoinTermShowMinusSignFlag.bind( this ); assert && assert( !this.mapCoinTermsToUCListeners[ coinTerm.id ], 'key should not yet exist in map' ); this.mapCoinTermsToUCListeners[ coinTerm.id ] = userControlledListener; coinTerm.userControlledProperty.link( userControlledListener ); @@ -537,10 +537,10 @@ define( require => { */ removeAllCoinTerms: function() { - var self = this; + const self = this; // make a copy of the coin terms and sort them in left to right order - var coinTermsLeftToRight = this.getCoinTermsLeftToRight(); + const coinTermsLeftToRight = this.getCoinTermsLeftToRight(); // remove them from this expression coinTermsLeftToRight.forEach( function( coinTerm ) { @@ -562,14 +562,14 @@ define( require => { assert && assert( this.containsCoinTerm( coinTerm ), 'coin term is not part of this expression, can\'t be reintegrated' ); // get an array of the coin terms sorted from left to right - var coinTermsLeftToRight = this.getCoinTermsLeftToRight(); + const coinTermsLeftToRight = this.getCoinTermsLeftToRight(); // update coin term minus sign flags this.updateCoinTermShowMinusSignFlag(); // set the position of each coin term based on its order - var leftEdge = this.upperLeftCornerProperty.get().x + X_MARGIN; - var centerY = this.upperLeftCornerProperty.get().y + this.heightProperty.get() / 2; + let leftEdge = this.upperLeftCornerProperty.get().x + X_MARGIN; + const centerY = this.upperLeftCornerProperty.get().y + this.heightProperty.get() / 2; coinTermsLeftToRight.forEach( function( orderedCoinTerm ) { orderedCoinTerm.travelToDestination( new Vector2( leftEdge - orderedCoinTerm.localViewBoundsProperty.get().minX, @@ -587,14 +587,14 @@ define( require => { * @private */ updateCoinTermShowMinusSignFlag: function() { - var self = this; - var coinTermsLeftToRight = self.getCoinTermsLeftToRight(); - var oneOrMoreChanged = false; + const self = this; + const coinTermsLeftToRight = self.getCoinTermsLeftToRight(); + let oneOrMoreChanged = false; coinTermsLeftToRight.forEach( function( residentCoinTerm, index ) { // The minus sign is suppressed if subtraction is being shown, the coin term is not user controlled, and the // coin term is not the first one in the expression so that subtraction expressions will look correct. - var showMinusSignWhenNegative = !( self.simplifyNegativesProperty.value && index > 0 ) || + const showMinusSignWhenNegative = !( self.simplifyNegativesProperty.value && index > 0 ) || residentCoinTerm.userControlledProperty.get(); if ( showMinusSignWhenNegative !== residentCoinTerm.showMinusSignWhenNegativeProperty.get() ) { @@ -630,8 +630,8 @@ define( require => { * @public */ travelToDestination: function( upperLeftCornerDestination ) { - var self = this; - var animationDuration = Math.min( + const self = this; + const animationDuration = Math.min( self.upperLeftCornerProperty.get().distance( upperLeftCornerDestination ) / ANIMATION_SPEED, MAX_ANIMATION_TIME ); @@ -675,12 +675,12 @@ define( require => { * @public */ getCoinTermJoinZoneOverlap: function( coinTerm ) { - var coinTermBounds = coinTerm.getViewBounds(); - var xOverlap = Math.max( + const coinTermBounds = coinTerm.getViewBounds(); + const xOverlap = Math.max( 0, Math.min( coinTermBounds.maxX, this.joinZone.maxX ) - Math.max( coinTermBounds.minX, this.joinZone.minX ) ); - var yOverlap = Math.max( + const yOverlap = Math.max( 0, Math.min( coinTermBounds.maxY, this.joinZone.maxY ) - Math.max( coinTermBounds.minY, this.joinZone.minY ) ); @@ -694,13 +694,13 @@ define( require => { * @public */ getOverlap: function( otherEntity ) { - var otherExpressionBounds = otherEntity.getBounds(); - var thisExpressionBounds = this.getBounds(); - var xOverlap = Math.max( + const otherExpressionBounds = otherEntity.getBounds(); + const thisExpressionBounds = this.getBounds(); + const xOverlap = Math.max( 0, Math.min( otherExpressionBounds.maxX, thisExpressionBounds.maxX ) - Math.max( otherExpressionBounds.minX, thisExpressionBounds.minX ) ); - var yOverlap = Math.max( + const yOverlap = Math.max( 0, Math.min( otherExpressionBounds.maxY, thisExpressionBounds.maxY ) - Math.max( otherExpressionBounds.minY, thisExpressionBounds.minY ) ); @@ -736,7 +736,7 @@ define( require => { * @public */ removeHoveringCoinTerm: function( coinTerm ) { - var index = this.hoveringCoinTerms.indexOf( coinTerm ); + const index = this.hoveringCoinTerms.indexOf( coinTerm ); if ( index !== -1 ) { this.hoveringCoinTerms.splice( index, 1 ); coinTerm.breakApartAllowedProperty.set( true ); @@ -773,7 +773,7 @@ define( require => { * @public */ removeHoveringExpression: function( expression ) { - var index = this.hoveringExpressions.indexOf( expression ); + const index = this.hoveringExpressions.indexOf( expression ); if ( index !== -1 ) { this.hoveringExpressions.splice( index, 1 ); } diff --git a/js/common/model/ExpressionManipulationModel.js b/js/common/model/ExpressionManipulationModel.js index 912d4562..663b7dc6 100644 --- a/js/common/model/ExpressionManipulationModel.js +++ b/js/common/model/ExpressionManipulationModel.js @@ -27,12 +27,12 @@ define( require => { const ViewMode = require( 'EXPRESSION_EXCHANGE/common/enum/ViewMode' ); // constants - var BREAK_APART_SPACING = 10; - var RETRIEVED_COIN_TERMS_X_SPACING = 100; - var RETRIEVED_COIN_TERMS_Y_SPACING = 60; - var RETRIEVED_COIN_TERM_FIRST_POSITION = new Vector2( 250, 50 ); // upper left, doesn't overlap with control panels - var NUM_RETRIEVED_COIN_TERM_COLUMNS = 6; - var MIN_RETRIEVAL_PLACEMENT_DISTANCE = 30; // empirically determined + const BREAK_APART_SPACING = 10; + const RETRIEVED_COIN_TERMS_X_SPACING = 100; + const RETRIEVED_COIN_TERMS_Y_SPACING = 60; + const RETRIEVED_COIN_TERM_FIRST_POSITION = new Vector2( 250, 50 ); // upper left, doesn't overlap with control panels + const NUM_RETRIEVED_COIN_TERM_COLUMNS = 6; + const MIN_RETRIEVAL_PLACEMENT_DISTANCE = 30; // empirically determined /** * @constructor @@ -53,7 +53,7 @@ define( require => { }, options ); - var initialViewMode = options.allowedRepresentations === AllowedRepresentations.VARIABLES_ONLY ? + const initialViewMode = options.allowedRepresentations === AllowedRepresentations.VARIABLES_ONLY ? ViewMode.VARIABLES : ViewMode.COINS; // @public {Property.} @@ -78,7 +78,7 @@ define( require => { // @public {Property.} this.simplifyNegativesProperty = new Property( options.simplifyNegativesDefault ); - var self = this; + const self = this; // @public (read-only) {CoinTermFactory} - factory used to create coin terms this.coinTermFactory = new CoinTermFactory( this.xTermValueProperty, this.yTermValueProperty, this.zTermValueProperty ); @@ -116,7 +116,7 @@ define( require => { * counts if they exist. */ this.coinTermCounts = {}; - var countObjectsPerCoinTermType = EESharedConstants.MAX_NON_DECOMPOSABLE_AMOUNT * 2 + 1; + const countObjectsPerCoinTermType = EESharedConstants.MAX_NON_DECOMPOSABLE_AMOUNT * 2 + 1; _.keys( CoinTermTypeID ).forEach( function( coinTermType ) { self.coinTermCounts[ coinTermType ] = new Array( countObjectsPerCoinTermType ); _.times( countObjectsPerCoinTermType, function( index ) { @@ -144,7 +144,7 @@ define( require => { Property.multilink( [ this.xTermValueProperty, this.yTermValueProperty, this.zTermValueProperty, this.coinTerms.lengthProperty ], function() { - var total = 0; + let total = 0; self.coinTerms.forEach( function( coinTerm ) { total += coinTerm.valueProperty.value * coinTerm.totalCountProperty.get(); } ); @@ -170,9 +170,9 @@ define( require => { */ step: function( dt ) { - var self = this; - var userControlledCoinTerms; - var coinTermsWithHalos = []; + const self = this; + let userControlledCoinTerms; + const coinTermsWithHalos = []; // step all the coin terms this.coinTerms.forEach( function( coinTerm ) { coinTerm.step( dt ); } ); @@ -189,21 +189,21 @@ define( require => { } ); // get a list of user controlled expressions, max of one on mouse based systems, any number on touch devices - var userControlledExpressions = _.filter( this.expressions.getArray(), function( expression ) { + const userControlledExpressions = _.filter( this.expressions.getArray(), function( expression ) { return expression.userControlledProperty.get(); } ); - var collectionAreasWhoseHalosShouldBeActive = []; + const collectionAreasWhoseHalosShouldBeActive = []; // Update hints for expressions and collection areas. userControlledExpressions.forEach( function( userControlledExpression ) { - var expressionIsOverCreatorBox = userControlledExpression.getBounds().intersectsBounds( self.creatorBoxBounds ); - var mostOverlappingCollectionArea = self.getMostOverlappingCollectionAreaForExpression( userControlledExpression ); - var mostOverlappingExpression = self.getExpressionMostOverlappingWithExpression( userControlledExpression ); - var mostOverlappingCoinTerm = self.getFreeCoinTermMostOverlappingWithExpression( userControlledExpression ); - var expressionOverWhichThisExpressionIsHovering = null; - var coinTermOverWhichThisExpressionIsHovering = null; + const expressionIsOverCreatorBox = userControlledExpression.getBounds().intersectsBounds( self.creatorBoxBounds ); + const mostOverlappingCollectionArea = self.getMostOverlappingCollectionAreaForExpression( userControlledExpression ); + const mostOverlappingExpression = self.getExpressionMostOverlappingWithExpression( userControlledExpression ); + const mostOverlappingCoinTerm = self.getFreeCoinTermMostOverlappingWithExpression( userControlledExpression ); + let expressionOverWhichThisExpressionIsHovering = null; + let coinTermOverWhichThisExpressionIsHovering = null; if ( expressionIsOverCreatorBox ) { // The expression is at least partially over the creator box, which takes precedence over everything else, @@ -252,15 +252,15 @@ define( require => { // check each user-controlled coin term to see if it's in a position to combine with an expression or another // coin term - var neededExpressionHints = []; + const neededExpressionHints = []; userControlledCoinTerms.forEach( function( userControlledCoinTerm ) { - var coinTermIsOverCreatorBox = userControlledCoinTerm.getViewBounds().intersectsBounds( self.creatorBoxBounds ); - var mostOverlappingCollectionArea = self.getMostOverlappingCollectionAreaForCoinTerm( userControlledCoinTerm ); - var mostOverlappingExpression = self.getExpressionMostOverlappingWithCoinTerm( userControlledCoinTerm ); - var mostOverlappingLikeCoinTerm = self.getMostOverlappingLikeCoinTerm( userControlledCoinTerm ); - var joinableFreeCoinTerm = self.checkForJoinableFreeCoinTerm( userControlledCoinTerm ); - var expressionOverWhichCoinTermIsHovering = null; + const coinTermIsOverCreatorBox = userControlledCoinTerm.getViewBounds().intersectsBounds( self.creatorBoxBounds ); + const mostOverlappingCollectionArea = self.getMostOverlappingCollectionAreaForCoinTerm( userControlledCoinTerm ); + const mostOverlappingExpression = self.getExpressionMostOverlappingWithCoinTerm( userControlledCoinTerm ); + const mostOverlappingLikeCoinTerm = self.getMostOverlappingLikeCoinTerm( userControlledCoinTerm ); + const joinableFreeCoinTerm = self.checkForJoinableFreeCoinTerm( userControlledCoinTerm ); + let expressionOverWhichCoinTermIsHovering = null; if ( coinTermIsOverCreatorBox ) { // The coin term is over the creator box, which takes precedence over everything else, so don't activate any @@ -303,7 +303,7 @@ define( require => { // remove any expression hints that are no longer needed this.expressionHints.forEach( function( existingExpressionHint ) { - var matchFound = false; + let matchFound = false; neededExpressionHints.forEach( function( neededExpressionHint ) { if ( neededExpressionHint.equals( existingExpressionHint ) ) { matchFound = true; @@ -316,7 +316,7 @@ define( require => { // add any needed expression hints that are not yet on the list neededExpressionHints.forEach( function( neededExpressionHint ) { - var matchFound = false; + let matchFound = false; self.expressionHints.forEach( function( existingExpressionHint ) { if ( existingExpressionHint.equals( neededExpressionHint ) ) { matchFound = true; @@ -359,7 +359,7 @@ define( require => { // check for overlap between coins that can combine userControlledCoinTerms.forEach( function( userControlledCoinTerm ) { - var overlappingCoinTerm = self.getOverlappingLikeCoinTermWithinExpression( + const overlappingCoinTerm = self.getOverlappingLikeCoinTermWithinExpression( userControlledCoinTerm, self.expressionBeingEditedProperty.get() ); @@ -421,10 +421,10 @@ define( require => { // Calculate the corresponding index into the data structure - this is necessary in order to support negative // minimum decomposition values, e.g. -3X. - var countPropertyIndex = minimumDecomposition + EESharedConstants.MAX_NON_DECOMPOSABLE_AMOUNT; + const countPropertyIndex = minimumDecomposition + EESharedConstants.MAX_NON_DECOMPOSABLE_AMOUNT; // get the property or, if specified, create it - var coinTermCountProperty = this.coinTermCounts[ coinTermTypeID ][ countPropertyIndex ].countProperty; + let coinTermCountProperty = this.coinTermCounts[ coinTermTypeID ][ countPropertyIndex ].countProperty; if ( coinTermCountProperty === null && createIfUndefined ) { // the requested count property does not yet exist - create and add it @@ -441,7 +441,7 @@ define( require => { */ stopEditingExpression: function() { - var expressionBeingEdited = this.expressionBeingEditedProperty.get(); + const expressionBeingEdited = this.expressionBeingEditedProperty.get(); expressionBeingEdited.inEditModeProperty.set( false ); // Handle the special cases where one or zero coin terms remain after combining terms, which is no longer @@ -456,7 +456,7 @@ define( require => { // @private - update the count properties for the specified coin term type updateCoinTermCounts: function( coinTermTypeID ) { - var self = this; + const self = this; // zero the non-property version of the counts this.coinTermCounts[ coinTermTypeID ].forEach( function( countObject ) { @@ -482,8 +482,8 @@ define( require => { // @public - remove the specified expression removeExpression: function( expression ) { - var self = this; - var coinTermsToRemove = expression.removeAllCoinTerms(); + const self = this; + const coinTermsToRemove = expression.removeAllCoinTerms(); coinTermsToRemove.forEach( function( coinTerm ) { self.removeCoinTerm( coinTerm, true ); } ); @@ -504,8 +504,8 @@ define( require => { * @private */ getExpressionMostOverlappingWithCoinTerm: function( coinTerm ) { - var maxOverlap = 0; - var mostOverlappingExpression = null; + let maxOverlap = 0; + let mostOverlappingExpression = null; // check each expression against the coin term to see which has max overlap this.expressions.forEach( function( expression ) { @@ -530,8 +530,8 @@ define( require => { * @private */ getFreeCoinTermMostOverlappingWithExpression: function( expression ) { - var maxOverlap = 0; - var mostOverlappingFreeCoinTerm = null; + let maxOverlap = 0; + let mostOverlappingFreeCoinTerm = null; this.coinTerms.forEach( function( coinTerm ) { @@ -555,8 +555,8 @@ define( require => { * @private */ getExpressionMostOverlappingWithExpression: function( thisExpression ) { - var maxOverlap = 0; - var mostOverlappingExpression = null; + let maxOverlap = 0; + let mostOverlappingExpression = null; // test each other expression for eligibility and overlap this.expressions.forEach( function( thatExpression ) { @@ -579,15 +579,15 @@ define( require => { * @private */ getNextOpenRetrievalSpot: function() { - var location = new Vector2( 0, 0 ); - var row = 0; - var column = 0; - var openLocationFound = false; + const location = new Vector2( 0, 0 ); + let row = 0; + let column = 0; + let openLocationFound = false; while ( !openLocationFound ) { location.x = RETRIEVED_COIN_TERM_FIRST_POSITION.x + column * RETRIEVED_COIN_TERMS_X_SPACING; location.y = RETRIEVED_COIN_TERM_FIRST_POSITION.y + row * RETRIEVED_COIN_TERMS_Y_SPACING; - var closeCoinTerm = false; - for ( var i = 0; i < this.coinTerms.length; i++ ) { + let closeCoinTerm = false; + for ( let i = 0; i < this.coinTerms.length; i++ ) { if ( this.coinTerms.get( i ).destinationProperty.get().distance( location ) < MIN_RETRIEVAL_PLACEMENT_DISTANCE ) { closeCoinTerm = true; break; @@ -617,17 +617,17 @@ define( require => { getOpenExpressionPlacementLocation: function( expression ) { // variables that controls the search grid, empirically determined - var minX = 170; - var minY = 30; - var xPos = minX; - var yPos = minY; - var xIncrement = 30; - var yIncrement = 30; + const minX = 170; + const minY = 30; + let xPos = minX; + let yPos = minY; + const xIncrement = 30; + const yIncrement = 30; // variables used in the loop to test if a position is available - var position = new Vector2( xPos, minY ); - var openPositionFound = false; - var proposedBounds = new Bounds2( 0, 0, 0, 0 ); + const position = new Vector2( xPos, minY ); + let openPositionFound = false; + const proposedBounds = new Bounds2( 0, 0, 0, 0 ); // loop, searching for open positions while ( this.retrievalBounds.containsPoint( position ) && !openPositionFound ) { @@ -640,8 +640,8 @@ define( require => { yPos + expression.heightProperty.get() ); - var overlapFound = false; - for ( var i = 0; i < this.expressions.length && !overlapFound; i++ ) { + let overlapFound = false; + for ( let i = 0; i < this.expressions.length && !overlapFound; i++ ) { if ( this.expressions.get( i ).getBounds().intersectsBounds( proposedBounds ) ) { overlapFound = true; } @@ -687,8 +687,8 @@ define( require => { * @private */ getMostOverlappingCollectionAreaForExpression: function( expression ) { - var maxOverlap = 0; - var mostOverlappingCollectionArea = null; + let maxOverlap = 0; + let mostOverlappingCollectionArea = null; this.collectionAreas.forEach( function( collectionArea ) { if ( expression.getOverlap( collectionArea ) > maxOverlap ) { mostOverlappingCollectionArea = collectionArea; @@ -704,20 +704,20 @@ define( require => { * @private */ getMostOverlappingCollectionAreaForCoinTerm: function( coinTerm ) { - var maxOverlap = 0; - var mostOverlappingCollectionArea = null; + let maxOverlap = 0; + let mostOverlappingCollectionArea = null; this.collectionAreas.forEach( function( collectionArea ) { - var coinTermBounds = coinTerm.getViewBounds(); - var collectionAreaBounds = collectionArea.bounds; - var xOverlap = Math.max( + const coinTermBounds = coinTerm.getViewBounds(); + const collectionAreaBounds = collectionArea.bounds; + const xOverlap = Math.max( 0, Math.min( coinTermBounds.maxX, collectionAreaBounds.maxX ) - Math.max( coinTermBounds.minX, collectionAreaBounds.minX ) ); - var yOverlap = Math.max( + const yOverlap = Math.max( 0, Math.min( coinTermBounds.maxY, collectionAreaBounds.maxY ) - Math.max( coinTermBounds.minY, collectionAreaBounds.minY ) ); - var totalOverlap = xOverlap * yOverlap; + const totalOverlap = xOverlap * yOverlap; if ( totalOverlap > maxOverlap ) { maxOverlap = totalOverlap; mostOverlappingCollectionArea = collectionArea; @@ -733,7 +733,7 @@ define( require => { */ coinTermAddedListener: function( addedCoinTerm ) { - var self = this; + const self = this; // Add a listener that will potentially combine this coin term with expressions or other coin terms based on // where it is released. @@ -743,12 +743,12 @@ define( require => { // Set a bunch of variables related to the current state of this coin term. It's not really necessary to set // them all every time, but it avoids a deeply nested if-else structure. - var releasedOverCreatorBox = addedCoinTerm.getViewBounds().intersectsBounds( self.creatorBoxBounds ); - var expressionBeingEdited = self.expressionBeingEditedProperty.get(); - var mostOverlappingCollectionArea = self.getMostOverlappingCollectionAreaForCoinTerm( addedCoinTerm ); - var mostOverlappingExpression = self.getExpressionMostOverlappingWithCoinTerm( addedCoinTerm ); - var mostOverlappingLikeCoinTerm = self.getMostOverlappingLikeCoinTerm( addedCoinTerm ); - var joinableFreeCoinTerm = self.checkForJoinableFreeCoinTerm( addedCoinTerm ); + const releasedOverCreatorBox = addedCoinTerm.getViewBounds().intersectsBounds( self.creatorBoxBounds ); + const expressionBeingEdited = self.expressionBeingEditedProperty.get(); + const mostOverlappingCollectionArea = self.getMostOverlappingCollectionAreaForCoinTerm( addedCoinTerm ); + const mostOverlappingExpression = self.getExpressionMostOverlappingWithCoinTerm( addedCoinTerm ); + const mostOverlappingLikeCoinTerm = self.getMostOverlappingLikeCoinTerm( addedCoinTerm ); + const joinableFreeCoinTerm = self.checkForJoinableFreeCoinTerm( addedCoinTerm ); if ( expressionBeingEdited && expressionBeingEdited.coinTerms.contains( addedCoinTerm ) ) { @@ -756,7 +756,7 @@ define( require => { // expression or combined with another coin term in the expression. // determine if the coin term was dropped while overlapping a coin term of the same type - var overlappingLikeCoinTerm = self.getOverlappingLikeCoinTermWithinExpression( + const overlappingLikeCoinTerm = self.getOverlappingLikeCoinTermWithinExpression( addedCoinTerm, expressionBeingEdited ); @@ -811,7 +811,7 @@ define( require => { else if ( joinableFreeCoinTerm ) { // The coin term was released in a place where it could join another free coin term. - var expressionHintToRemove; + let expressionHintToRemove; self.expressionHints.forEach( function( expressionHint ) { if ( expressionHint.containsCoinTerm( addedCoinTerm ) && expressionHint.containsCoinTerm( joinableFreeCoinTerm ) ) { expressionHintToRemove = expressionHint; @@ -840,9 +840,9 @@ define( require => { // bail if the coin term can't be decomposed return; } - var extractedCoinTerms = addedCoinTerm.extractConstituentCoinTerms(); - var relativeViewBounds = addedCoinTerm.localViewBoundsProperty.get(); - var pointToDistributeAround = addedCoinTerm.destinationProperty.get(); + const extractedCoinTerms = addedCoinTerm.extractConstituentCoinTerms(); + const relativeViewBounds = addedCoinTerm.localViewBoundsProperty.get(); + let pointToDistributeAround = addedCoinTerm.destinationProperty.get(); // If the total combined coin count was even, shift the distribution point a bit so that the coins end up being // distributed around the centerX position. @@ -862,11 +862,11 @@ define( require => { } // add the extracted coin terms to the model - var interCoinTermDistance = relativeViewBounds.width + BREAK_APART_SPACING; - var nextLeftX = pointToDistributeAround.x - interCoinTermDistance; - var nextRightX = pointToDistributeAround.x + interCoinTermDistance; + const interCoinTermDistance = relativeViewBounds.width + BREAK_APART_SPACING; + let nextLeftX = pointToDistributeAround.x - interCoinTermDistance; + let nextRightX = pointToDistributeAround.x + interCoinTermDistance; extractedCoinTerms.forEach( function( extractedCoinTerm, index ) { - var destination; + let destination; self.addCoinTerm( extractedCoinTerm ); if ( index % 2 === 0 ) { destination = new Vector2( nextRightX, pointToDistributeAround.y ); @@ -934,7 +934,7 @@ define( require => { * @private */ expressionAddedListener: function( addedExpression ) { - var self = this; + const self = this; // add a listener for when the expression is released, which may cause it to be combined with another expression function expressionUserControlledListener( userControlled ) { @@ -943,10 +943,10 @@ define( require => { // Set a bunch of variables related to the current state of this expression. It's not really necessary to set // them all every time, but it avoids a deeply nested if-else structure. - var releasedOverCreatorBox = addedExpression.getBounds().intersectsBounds( self.creatorBoxBounds ); - var mostOverlappingCollectionArea = self.getMostOverlappingCollectionAreaForExpression( addedExpression ); - var mostOverlappingExpression = self.getExpressionMostOverlappingWithExpression( addedExpression ); - var numOverlappingCoinTerms = addedExpression.hoveringCoinTerms.length; + const releasedOverCreatorBox = addedExpression.getBounds().intersectsBounds( self.creatorBoxBounds ); + const mostOverlappingCollectionArea = self.getMostOverlappingCollectionAreaForExpression( addedExpression ); + const mostOverlappingExpression = self.getExpressionMostOverlappingWithExpression( addedExpression ); + const numOverlappingCoinTerms = addedExpression.hoveringCoinTerms.length; // state checking assert && assert( @@ -973,7 +973,7 @@ define( require => { mostOverlappingExpression.removeHoveringExpression( addedExpression ); // send the combining expression to the right side of receiving expression - var destinationForCombine = mostOverlappingExpression.getUpperRightCorner(); + const destinationForCombine = mostOverlappingExpression.getUpperRightCorner(); addedExpression.travelToDestination( destinationForCombine ); // Listen for when the expression is in place and, when it is, transfer its coin terms to the receiving @@ -984,7 +984,7 @@ define( require => { if ( mostOverlappingExpression.getUpperRightCorner().equals( destinationForCombine ) && self.expressions.contains( mostOverlappingExpression ) ) { - var coinTermsToBeMoved = addedExpression.removeAllCoinTerms(); + const coinTermsToBeMoved = addedExpression.removeAllCoinTerms(); self.expressions.remove( addedExpression ); coinTermsToBeMoved.forEach( function( coinTerm ) { phet.log && phet.log( 'moving ' + coinTerm.id + @@ -1007,7 +1007,7 @@ define( require => { else if ( numOverlappingCoinTerms === 1 ) { // the expression was released over a free coin term, so have that free coin term join the expression - var coinTermToAddToExpression = addedExpression.hoveringCoinTerms[ 0 ]; + const coinTermToAddToExpression = addedExpression.hoveringCoinTerms[ 0 ]; coinTermToAddToExpression.expressionProperty.set( addedExpression ); // prevents interaction during animation if ( addedExpression.rightHintActiveProperty.get() ) { @@ -1049,10 +1049,10 @@ define( require => { function expressionBreakApartListener() { // keep a reference to the center for when we spread out the coin terms - var expressionCenterX = addedExpression.getBounds().centerX; + const expressionCenterX = addedExpression.getBounds().centerX; // remove the coin terms from the expression and the expression from the model - var newlyFreedCoinTerms = addedExpression.removeAllCoinTerms(); + const newlyFreedCoinTerms = addedExpression.removeAllCoinTerms(); self.expressions.remove( addedExpression ); // spread the released coin terms out horizontally @@ -1060,8 +1060,8 @@ define( require => { newlyFreedCoinTerms.forEach( function( newlyFreedCoinTerm ) { // calculate a destination that will cause the coin terms to spread out from the expression center - var horizontalDistanceFromExpressionCenter = newlyFreedCoinTerm.positionProperty.get().x - expressionCenterX; - var coinTermDestination = new Vector2( + const horizontalDistanceFromExpressionCenter = newlyFreedCoinTerm.positionProperty.get().x - expressionCenterX; + let coinTermDestination = new Vector2( newlyFreedCoinTerm.positionProperty.get().x + horizontalDistanceFromExpressionCenter * 0.15, // spread factor empirically determined newlyFreedCoinTerm.positionProperty.get().y ); @@ -1140,7 +1140,7 @@ define( require => { // Make the combine zone wider, but vertically shorter, than the actual bounds, as this gives the most desirable // behavior. The multiplier for the height was empirically determined. - var extendedTargetCoinTermBounds = coinTermA.getViewBounds().dilatedXY( + const extendedTargetCoinTermBounds = coinTermA.getViewBounds().dilatedXY( coinTermA.localViewBoundsProperty.get().width, -coinTermA.localViewBoundsProperty.get().height * 0.25 ); @@ -1155,7 +1155,7 @@ define( require => { * @public */ isCoinTermInExpression: function( coinTerm ) { - for ( var i = 0; i < this.expressions.length; i++ ) { + for ( let i = 0; i < this.expressions.length; i++ ) { if ( this.expressions.get( i ).containsCoinTerm( coinTerm ) ) { return true; } @@ -1173,8 +1173,8 @@ define( require => { */ checkForJoinableFreeCoinTerm: function( thisCoinTerm ) { - var joinableFreeCoinTerm = null; - var self = this; + let joinableFreeCoinTerm = null; + const self = this; this.coinTerms.forEach( function( thatCoinTerm ) { @@ -1206,7 +1206,7 @@ define( require => { * @private */ getCoinOverlapAmount: function( coinTermA, coinTermB ) { - var distanceBetweenCenters = coinTermA.positionProperty.get().distance( coinTermB.positionProperty.get() ); + const distanceBetweenCenters = coinTermA.positionProperty.get().distance( coinTermB.positionProperty.get() ); return Math.max( ( coinTermA.coinRadius + coinTermB.coinRadius ) - distanceBetweenCenters, 0 ); }, @@ -1217,10 +1217,10 @@ define( require => { * @returns {number} amount of overlap, which is essentially an area value in view coordinates */ getViewBoundsOverlapAmount: function( coinTermA, coinTermB ) { - var overlap = 0; + let overlap = 0; if ( coinTermA.getViewBounds().intersectsBounds( coinTermB.getViewBounds() ) ) { - var intersection = coinTermA.getViewBounds().intersection( coinTermB.getViewBounds() ); + const intersection = coinTermA.getViewBounds().intersection( coinTermB.getViewBounds() ); overlap = intersection.width * intersection.height; } return overlap; @@ -1235,9 +1235,9 @@ define( require => { */ getMostOverlappingLikeCoinTerm: function( thisCoinTerm ) { assert && assert( this.coinTerms.contains( thisCoinTerm ), 'overlap requested for something that is not in model' ); - var self = this; - var mostOverlappingLikeCoinTerm = null; - var maxOverlapAmount = 0; + const self = this; + let mostOverlappingLikeCoinTerm = null; + let maxOverlapAmount = 0; this.coinTerms.forEach( function( thatCoinTerm ) { @@ -1245,7 +1245,7 @@ define( require => { if ( thatCoinTerm.isEligibleToCombineWith( thisCoinTerm ) && !self.isCoinTermInExpression( thatCoinTerm ) ) { // calculate and compare the relative overlap amounts, done a bit differently in the different view modes - var overlapAmount; + let overlapAmount; if ( self.viewModeProperty.get() === ViewMode.COINS ) { overlapAmount = self.getCoinOverlapAmount( thisCoinTerm, thatCoinTerm ); } @@ -1270,12 +1270,12 @@ define( require => { */ getOverlappingLikeCoinTermWithinExpression: function( coinTerm, expression ) { - var overlappingCoinTerm = null; + let overlappingCoinTerm = null; - for ( var i = 0; i < expression.coinTerms.length; i++ ) { - var potentiallyOverlappingCoinTerm = expression.coinTerms.get( i ); + for ( let i = 0; i < expression.coinTerms.length; i++ ) { + const potentiallyOverlappingCoinTerm = expression.coinTerms.get( i ); if ( potentiallyOverlappingCoinTerm.isEligibleToCombineWith( coinTerm ) ) { - var overlapAmount = 0; + let overlapAmount = 0; if ( this.viewModeProperty.get() === ViewMode.COINS ) { overlapAmount = this.getCoinOverlapAmount( coinTerm, potentiallyOverlappingCoinTerm ); } @@ -1307,8 +1307,8 @@ define( require => { * @public */ isAnythingUserControlled: function() { - var somethingIsUserControlled = false; - var i; + let somethingIsUserControlled = false; + let i; for ( i = 0; i < this.coinTerms.length && !somethingIsUserControlled; i++ ) { if ( this.coinTerms.get( i ).userControlledProperty.get() ) { somethingIsUserControlled = true; diff --git a/js/common/view/AbstractCoinTermNode.js b/js/common/view/AbstractCoinTermNode.js index 511a1d9e..e43af9ca 100644 --- a/js/common/view/AbstractCoinTermNode.js +++ b/js/common/view/AbstractCoinTermNode.js @@ -23,8 +23,8 @@ define( require => { const Vector2 = require( 'DOT/Vector2' ); // constants - var BACKGROUND_CORNER_ROUNDING = 5; - var TOUCH_DRAG_Y_OFFSET = -30; // empirically determined + const BACKGROUND_CORNER_ROUNDING = 5; + const TOUCH_DRAG_Y_OFFSET = -30; // empirically determined /** * @param {CoinTerm} coinTerm - model of a coin term @@ -39,7 +39,7 @@ define( require => { breakApartButtonMode: 'normal' // valid values are 'normal' and 'inverted' }, options ); - var self = this; + const self = this; Node.call( this, { pickable: true, cursor: 'pointer' } ); // @public (read-only) {CoinTerm} @@ -66,7 +66,7 @@ define( require => { this.breakApartButtonMode = options.breakApartButtonMode; // add a listener that will adjust opacity as existence strength changes - var existenceStrengthListener = this.handleExistenceStrengthChanged.bind( this ); + const existenceStrengthListener = this.handleExistenceStrengthChanged.bind( this ); coinTerm.existenceStrengthProperty.link( existenceStrengthListener ); // @private {function} - timer callback will be used to hide the break apart button if user doesn't use it @@ -86,11 +86,11 @@ define( require => { coinTerm.positionProperty.link( handlePositionChanged ); // add a listener for updating the break apart button state based on the user controlled state of this coin term - var userControlledListener = this.handleUserControlledChanged.bind( this ); + const userControlledListener = this.handleUserControlledChanged.bind( this ); coinTerm.userControlledProperty.lazyLink( userControlledListener ); // add a listener to handle changes to the 'break apart allowed' state - var breakApartAllowedListener = this.handleBreakApartAllowedChanged.bind( this ); + const breakApartAllowedListener = this.handleBreakApartAllowedChanged.bind( this ); coinTerm.breakApartAllowedProperty.link( breakApartAllowedListener ); // add a drag handler if specified @@ -106,17 +106,17 @@ define( require => { } ); // add a listener that will pop this node to the front when another coin term is combined with it - var totalCountListener = this.handleCombinedCountChanged.bind( this ); + const totalCountListener = this.handleCombinedCountChanged.bind( this ); coinTerm.totalCountProperty.link( totalCountListener ); // function to update the pickability as the states change function updatePickability() { - var expression = coinTerm.expressionProperty.get(); + const expression = coinTerm.expressionProperty.get(); self.pickable = ( expression === null || expression.inEditModeProperty.get() ) && !coinTerm.inProgressAnimationProperty.get() && !coinTerm.collectedProperty.get(); } // update the pickability of this node - var pickabilityUpdaterMultilink = Property.multilink( + const pickabilityUpdaterMultilink = Property.multilink( [ coinTerm.expressionProperty, coinTerm.inProgressAnimationProperty, coinTerm.collectedProperty ], updatePickability ); @@ -184,7 +184,7 @@ define( require => { * @private */ startHideButtonTimer: function() { - var self = this; + const self = this; this.clearHideButtonTimer(); // just in case one is already running this.hideButtonTimer = timer.setTimeout( function() { self.hideBreakApartButton(); @@ -337,11 +337,11 @@ define( require => { */ addDragHandler: function( dragBounds ) { - var self = this; + const self = this; // create a position property and link it to the coin term, necessary because coin term has both position and // destination properties, both of which must be set when dragging occurs - var coinTermPositionAndDestination = new Property( this.coinTerm.positionProperty.get() ); + const coinTermPositionAndDestination = new Property( this.coinTerm.positionProperty.get() ); coinTermPositionAndDestination.lazyLink( function( positionAndDestination ) { self.coinTerm.setPositionAndDestination( positionAndDestination ); } ); @@ -363,8 +363,8 @@ define( require => { // offset things a little in touch mode for better visibility while dragging if ( event.pointer instanceof Touch ) { - var position = self.globalToParentPoint( event.pointer.point ); - var adjustedPosition = position.plusXY( 0, TOUCH_DRAG_Y_OFFSET ); + const position = self.globalToParentPoint( event.pointer.point ); + const adjustedPosition = position.plusXY( 0, TOUCH_DRAG_Y_OFFSET ); if ( dragBounds.containsPoint( adjustedPosition ) ) { coinTermPositionAndDestination.set( adjustedPosition ); } diff --git a/js/common/view/BreakApartButton.js b/js/common/view/BreakApartButton.js index 6dc98ec8..b35e33f9 100644 --- a/js/common/view/BreakApartButton.js +++ b/js/common/view/BreakApartButton.js @@ -15,10 +15,10 @@ define( require => { const RectangularPushButton = require( 'SUN/buttons/RectangularPushButton' ); // constants - var MARGIN = 3.5; - var ICON_SCALE = 0.35; - var BLACK_SCISSORS_ICON = createIconNode( 'black' ); - var YELLOW_SCISSORS_ICON = createIconNode( 'yellow' ); + const MARGIN = 3.5; + const ICON_SCALE = 0.35; + const BLACK_SCISSORS_ICON = createIconNode( 'black' ); + const YELLOW_SCISSORS_ICON = createIconNode( 'yellow' ); /** * @constructor @@ -33,8 +33,8 @@ define( require => { // verify options are valid assert && assert( options.mode === 'normal' || options.mode === 'inverted', 'invalid mode option' ); - var icon = options.mode === 'normal' ? BLACK_SCISSORS_ICON : YELLOW_SCISSORS_ICON; - var iconNode = new Node( { children: [ icon ] } ); + const icon = options.mode === 'normal' ? BLACK_SCISSORS_ICON : YELLOW_SCISSORS_ICON; + const iconNode = new Node( { children: [ icon ] } ); // the following options can't be overridden, and are set here and then passed to the parent type below _.extend( options, { diff --git a/js/common/view/CoinNodeFactory.js b/js/common/view/CoinNodeFactory.js index 6016a74a..83ef0fe6 100644 --- a/js/common/view/CoinNodeFactory.js +++ b/js/common/view/CoinNodeFactory.js @@ -20,7 +20,7 @@ define( require => { const Vector2 = require( 'DOT/Vector2' ); // images - use mipmaps normally, but use regular images when memory needs to be conserved - var useMipmaps = !platform.mobileSafari; + const useMipmaps = !platform.mobileSafari; let coinXBackImage; let coinXFrontImage; @@ -71,11 +71,11 @@ define( require => { } // constants - var COIN_EDGE_DARKENING_AMOUNT = 0.25; - var COIN_EDGE_STROKE = 0.5; + const COIN_EDGE_DARKENING_AMOUNT = 0.25; + const COIN_EDGE_STROKE = 0.5; // maps for coin images (front and back) - var coinFrontImages = {}; + const coinFrontImages = {}; coinFrontImages[ CoinTermTypeID.X ] = coinXFrontImage; coinFrontImages[ CoinTermTypeID.Y ] = coinYFrontImage; coinFrontImages[ CoinTermTypeID.Z ] = coinZFrontImage; @@ -83,7 +83,7 @@ define( require => { coinFrontImages[ CoinTermTypeID.X_SQUARED ] = coinXSquaredFrontImage; coinFrontImages[ CoinTermTypeID.Y_SQUARED ] = coinYSquaredFrontImage; coinFrontImages[ CoinTermTypeID.X_SQUARED_TIMES_Y_SQUARED ] = coinXSquaredYSquaredFrontImage; - var coinBackImages = {}; + const coinBackImages = {}; coinBackImages[ CoinTermTypeID.X ] = coinXBackImage; coinBackImages[ CoinTermTypeID.Y ] = coinYBackImage; coinBackImages[ CoinTermTypeID.Z ] = coinZBackImage; @@ -95,7 +95,7 @@ define( require => { // convenience function for drawing round coin shapes function createRoundCoinIcon( outerCircleRadius, outerCircleColor, innerCircleRadius, innerCircleColor ) { - var outerCircle = new Circle( outerCircleRadius, { + const outerCircle = new Circle( outerCircleRadius, { fill: outerCircleColor, stroke: outerCircleColor.colorUtilsDarker( COIN_EDGE_DARKENING_AMOUNT ), lineWidth: COIN_EDGE_STROKE @@ -115,8 +115,8 @@ define( require => { // convenience function for drawing hexagonal coin shapes function createHexagonalCoinIcon( outerMaxRadius, outerCircleColor, innerCircleRadius, innerCircleColor ) { - var outerShape = new Shape(); - var vector = Vector2.createPolar( outerMaxRadius, Math.PI * -0.25 ); // angle empirically determined to match coin image + const outerShape = new Shape(); + const vector = Vector2.createPolar( outerMaxRadius, Math.PI * -0.25 ); // angle empirically determined to match coin image outerShape.moveToPoint( vector ); _.times( 6, function() { @@ -125,7 +125,7 @@ define( require => { } ); outerShape.close(); - var hexagonalCoinNode = new Path( outerShape, { + const hexagonalCoinNode = new Path( outerShape, { fill: outerCircleColor, stroke: outerCircleColor.colorUtilsDarker( COIN_EDGE_DARKENING_AMOUNT ), lineWidth: COIN_EDGE_STROKE @@ -146,7 +146,7 @@ define( require => { * static factory object used to create nodes that represent coins * @public */ - var CoinNodeFactory = { + const CoinNodeFactory = { /** * function to create a node that can be used to represents the front of the provided coin type @@ -158,8 +158,8 @@ define( require => { */ createImageNode: function( coinTermTypeID, radius, isFront ) { - var imageMap = isFront ? coinFrontImages : coinBackImages; - var imageNode = new Image( imageMap[ coinTermTypeID ] ); + const imageMap = isFront ? coinFrontImages : coinBackImages; + const imageNode = new Image( imageMap[ coinTermTypeID ] ); // scale so that the image node has the specified radius imageNode.scale( radius * 2 / imageNode.width ); @@ -177,7 +177,7 @@ define( require => { createIconNode: function( coinTermTypeID, radius, options ) { options = options || {}; - var iconNode = null; + let iconNode = null; switch( coinTermTypeID ) { diff --git a/js/common/view/CoinTermCreatorBox.js b/js/common/view/CoinTermCreatorBox.js index a9895e54..3a3bf160 100644 --- a/js/common/view/CoinTermCreatorBox.js +++ b/js/common/view/CoinTermCreatorBox.js @@ -64,7 +64,7 @@ define( require => { else { // everything will fit on one page, so use a panel instead of a carousel - var coinTermCreatorHBox = new HBox( { + const coinTermCreatorHBox = new HBox( { children: creatorNodes, spacing: options.itemSpacing, align: options.align, diff --git a/js/common/view/CoinTermCreatorBoxFactory.js b/js/common/view/CoinTermCreatorBoxFactory.js index 7f068653..9151e0a5 100644 --- a/js/common/view/CoinTermCreatorBoxFactory.js +++ b/js/common/view/CoinTermCreatorBoxFactory.js @@ -23,10 +23,10 @@ define( require => { const Property = require( 'AXON/Property' ); // constants - var CREATION_LIMIT_FOR_EXPLORE_SCREENS = 8; + const CREATION_LIMIT_FOR_EXPLORE_SCREENS = 8; // descriptors for the coin term creator sets used in the explore screens - var EXPLORE_SCREEN_COIN_TERM_CREATOR_SET_DESCRIPTORS = {}; + const EXPLORE_SCREEN_COIN_TERM_CREATOR_SET_DESCRIPTORS = {}; EXPLORE_SCREEN_COIN_TERM_CREATOR_SET_DESCRIPTORS[ CoinTermCreatorSetID.BASICS ] = [ { typeID: CoinTermTypeID.X, initialCount: 1 }, { typeID: CoinTermTypeID.Y, initialCount: 1 }, @@ -67,8 +67,8 @@ define( require => { // Create a property that will control number of coin terms shown in this creator node. For the explore screens, // only one is even shown, and the property goes to zero when the max number of this type have been added to the // model. - var numberToShowProperty = new Property( 1 ); - var instanceCount = model.getCoinTermCountProperty( + const numberToShowProperty = new Property( 1 ); + const instanceCount = model.getCoinTermCountProperty( typeID, createdCoinTermInitialCount > 0 ? 1 : -1, true @@ -105,13 +105,13 @@ define( require => { // Create a property that will control number of coin terms shown in this creator node. For the game screen, // multiple creator nodes are shown in a staggered arrangement. - var numberToShowProperty = new DerivedProperty( + const numberToShowProperty = new DerivedProperty( [ model.getCoinTermCountProperty( typeID, createdCoinTermInitialCount, true ) ], function( instanceCount ) { return numInstancesAllowed - instanceCount; } ); // create the "creator node" for the specified coin term type - var coinTermCreatorNode = new CoinTermCreatorNode( + const coinTermCreatorNode = new CoinTermCreatorNode( model, view, typeID, @@ -141,7 +141,7 @@ define( require => { * and dragging * @public */ - var CoinTermCreatorBoxFactory = { + const CoinTermCreatorBoxFactory = { /** * @@ -159,7 +159,7 @@ define( require => { }, options ); // create the list of creator nodes from the descriptor list - var creatorNodes = []; + const creatorNodes = []; EXPLORE_SCREEN_COIN_TERM_CREATOR_SET_DESCRIPTORS[ creatorSetID ].forEach( function( descriptor ) { creatorNodes.push( makeExploreScreenCreatorNode( descriptor.typeID, @@ -187,7 +187,7 @@ define( require => { }, options ); // create the list of creator nodes from the descriptor list - var creatorNodes = []; + const creatorNodes = []; challengeDescriptor.carouselContents.forEach( function( descriptor ) { creatorNodes.push( makeGameScreenCreatorNode( descriptor.typeID, diff --git a/js/common/view/CoinTermCreatorNode.js b/js/common/view/CoinTermCreatorNode.js index 9295f37b..8c4c88e1 100644 --- a/js/common/view/CoinTermCreatorNode.js +++ b/js/common/view/CoinTermCreatorNode.js @@ -25,7 +25,7 @@ define( require => { const Vector2 = require( 'DOT/Vector2' ); // constants - var STAGGER_OFFSET = 3; // in screen coordinates, empirically determined for optimal look + const STAGGER_OFFSET = 3; // in screen coordinates, empirically determined for optimal look /** * @param {ExpressionManipulationModel} expressionManipulationModel - model where coin terms are to be added @@ -64,7 +64,7 @@ define( require => { }, options ); Node.call( this, { cursor: 'pointer' } ); - var self = this; + const self = this; // @public (read-only) {number} - initial count of the coin term created by this creator node, a.k.a. the coefficient this.createdCoinTermInitialCount = options.createdCoinTermInitialCount; @@ -73,15 +73,15 @@ define( require => { this.disposeEmitter = new Emitter(); // @public (read-only) // add the individual coin term node(s) - var coinTermNodes = []; + const coinTermNodes = []; _.times( options.maxNumberShown, function( index ) { - var coinTermNode; - var coinTermNodeOptions = { + let coinTermNode; + const coinTermNodeOptions = { addDragHandler: false, x: index * STAGGER_OFFSET, y: index * STAGGER_OFFSET }; - var dummyCoinTerm = coinTermCreatorFunction( typeID, { + const dummyCoinTerm = coinTermCreatorFunction( typeID, { initialPosition: Vector2.ZERO, initialCount: options.createdCoinTermInitialCount, initiallyOnCard: options.onCard @@ -145,14 +145,14 @@ define( require => { // Determine the origin position of the new element based on where the creator node is. This is done so that // the position to which this element will return when it is "put away" will match the position of this creator // node. - var originPosition = expressionManipulationView.globalToLocalPoint( self.localToGlobalPoint( Vector2.ZERO ) ); + const originPosition = expressionManipulationView.globalToLocalPoint( self.localToGlobalPoint( Vector2.ZERO ) ); // Determine the initial position where this element should move to after it's created based on the location of // the pointer event. - var initialPosition = expressionManipulationView.globalToLocalPoint( event.pointer.point ); + const initialPosition = expressionManipulationView.globalToLocalPoint( event.pointer.point ); // create and add the new coin term to the model, which result in a node being created in the view - var createdCoinTerm = coinTermCreatorFunction( typeID, { + const createdCoinTerm = coinTermCreatorFunction( typeID, { initialPosition: originPosition, initialCount: options.createdCoinTermInitialCount, decomposable: options.createdCoinTermDecomposable, @@ -162,7 +162,7 @@ define( require => { expressionManipulationModel.addCoinTerm( createdCoinTerm ); // get the view node that should have appeared in the view so that events can be forwarded to its drag handler - var createdCoinTermView = expressionManipulationView.getViewForCoinTerm( createdCoinTerm ); + const createdCoinTermView = expressionManipulationView.getViewForCoinTerm( createdCoinTerm ); assert && assert( createdCoinTermView, 'unable to find coin term view' ); if ( createdCoinTermView ) { diff --git a/js/common/view/CoinTermHaloNode.js b/js/common/view/CoinTermHaloNode.js index f5e01b2e..eee618f7 100644 --- a/js/common/view/CoinTermHaloNode.js +++ b/js/common/view/CoinTermHaloNode.js @@ -20,10 +20,10 @@ define( require => { const ViewMode = require( 'EXPRESSION_EXCHANGE/common/enum/ViewMode' ); // constants - var COIN_HALO_COLOR = 'rgba( 255, 255, 0, 0.8 )'; - var COIN_HALO_EDGE_COLOR = 'rgba( 255, 255, 0, 0 )'; - var TERM_HALO_COLOR_CENTER = 'yellow'; - var TERM_HALO_EDGE_COLOR = 'rgba( 255, 255, 0, 0 )'; + const COIN_HALO_COLOR = 'rgba( 255, 255, 0, 0.8 )'; + const COIN_HALO_EDGE_COLOR = 'rgba( 255, 255, 0, 0 )'; + const TERM_HALO_COLOR_CENTER = 'yellow'; + const TERM_HALO_EDGE_COLOR = 'rgba( 255, 255, 0, 0 )'; /** * @param {CoinTerm} coinTerm - model of a coin term @@ -31,11 +31,11 @@ define( require => { * @constructor */ function CoinTermHaloNode( coinTerm, viewModeProperty ) { - var self = this; + const self = this; Node.call( this, { pickable: true, cursor: 'pointer' } ); // add the coin halo - var coinHalo = new Circle( coinTerm.coinRadius, { + const coinHalo = new Circle( coinTerm.coinRadius, { stroke: new RadialGradient( 0, 0, coinTerm.coinRadius, 0, 0, coinTerm.coinRadius * 1.5 ). addColorStop( 0, COIN_HALO_COLOR ). addColorStop( 1, COIN_HALO_EDGE_COLOR ), @@ -44,14 +44,14 @@ define( require => { this.addChild( coinHalo ); // control coin halo visibility - var coinHaloVisibleProperty = new DerivedProperty( [ viewModeProperty, coinTerm.combineHaloActiveProperty ], + const coinHaloVisibleProperty = new DerivedProperty( [ viewModeProperty, coinTerm.combineHaloActiveProperty ], function( viewMode, combineHaloActive ) { return ( viewMode === ViewMode.COINS ) && combineHaloActive; } ); - var coinHaloVisibilityObserver = coinHaloVisibleProperty.linkAttribute( coinHalo, 'visible' ); + const coinHaloVisibilityObserver = coinHaloVisibleProperty.linkAttribute( coinHalo, 'visible' ); // add the term halo - var termHalo = new Circle( EESharedConstants.TERM_COMBINE_DISTANCE, { + const termHalo = new Circle( EESharedConstants.TERM_COMBINE_DISTANCE, { fill: new RadialGradient( 0, 0, 0, 0, 0, EESharedConstants.TERM_COMBINE_DISTANCE ). addColorStop( 0, TERM_HALO_COLOR_CENTER ). addColorStop( 0.5, TERM_HALO_COLOR_CENTER ). @@ -60,7 +60,7 @@ define( require => { this.addChild( termHalo ); // control term halo visibility - var termHaloVisibleMultilink = Property.multilink( + const termHaloVisibleMultilink = Property.multilink( [ viewModeProperty, coinTerm.combineHaloActiveProperty ], function( viewMode, combineHaloActive ) { termHalo.visible = viewMode === ViewMode.VARIABLES && combineHaloActive; diff --git a/js/common/view/CoinTermIconNode.js b/js/common/view/CoinTermIconNode.js index 50ab361f..550326cd 100644 --- a/js/common/view/CoinTermIconNode.js +++ b/js/common/view/CoinTermIconNode.js @@ -23,11 +23,11 @@ define( require => { const ViewMode = require( 'EXPRESSION_EXCHANGE/common/enum/ViewMode' ); // constants - var COIN_VALUE_FONT = new PhetFont( { size: 12, weight: 'bold' } ); - var VARIABLE_FONT = new MathSymbolFont( 18 ); - var CONSTANT_FONT = new PhetFont( 18 ); - var COIN_SCALING_FACTOR = 0.4; // empirically determined to yield coin icons of the desired size - var MAX_TERM_WIDTH_PROPORTION = 1.75; // limits how wide text can be relative to coin, empirically determined + const COIN_VALUE_FONT = new PhetFont( { size: 12, weight: 'bold' } ); + const VARIABLE_FONT = new MathSymbolFont( 18 ); + const CONSTANT_FONT = new PhetFont( 18 ); + const COIN_SCALING_FACTOR = 0.4; // empirically determined to yield coin icons of the desired size + const MAX_TERM_WIDTH_PROPORTION = 1.75; // limits how wide text can be relative to coin, empirically determined /** * @param {CoinTerm} coinTerm - model of a coin @@ -42,7 +42,7 @@ define( require => { Node.call( this ); // add the node that represents the icon - var coinIconNode = CoinNodeFactory.createIconNode( coinTerm.typeID, coinTerm.coinRadius * COIN_SCALING_FACTOR ); + const coinIconNode = CoinNodeFactory.createIconNode( coinTerm.typeID, coinTerm.coinRadius * COIN_SCALING_FACTOR ); this.addChild( coinIconNode ); // control coin icon visibility @@ -51,10 +51,10 @@ define( require => { } ); // convenience variable for positioning the textual labels created below - var coinCenter = coinIconNode.center; + const coinCenter = coinIconNode.center; // add the coin value text - var coinValueText = new Text( coinTerm.valueProperty.value, { font: COIN_VALUE_FONT, center: coinCenter } ); + const coinValueText = new Text( coinTerm.valueProperty.value, { font: COIN_VALUE_FONT, center: coinCenter } ); this.addChild( coinValueText ); // control the coin value text visibility @@ -63,10 +63,10 @@ define( require => { } ); // determine the max width of the textual components - var maxTextWidth = coinIconNode.width * MAX_TERM_WIDTH_PROPORTION; + const maxTextWidth = coinIconNode.width * MAX_TERM_WIDTH_PROPORTION; // add the 'term' text, e.g. xy - var termText = new RichText( coinTerm.termText, { + const termText = new RichText( coinTerm.termText, { font: coinTerm.isConstant ? CONSTANT_FONT : VARIABLE_FONT, maxWidth: maxTextWidth } ); @@ -77,7 +77,7 @@ define( require => { this.addChild( termText ); // control the term text visibility - var termTextVisibleProperty = new DerivedProperty( + const termTextVisibleProperty = new DerivedProperty( [ viewModeProperty, showVariableValuesProperty ], function( viewMode, showVariableValues ) { return ( viewMode === ViewMode.VARIABLES && !showVariableValues ); @@ -86,7 +86,7 @@ define( require => { termTextVisibleProperty.linkAttribute( termText, 'visible' ); // Add the text that includes the variable values. This can change, so it starts off blank. - var termWithVariableValuesText = new RichText( ' ', { + const termWithVariableValuesText = new RichText( ' ', { font: coinTerm.isConstant ? CONSTANT_FONT : VARIABLE_FONT, maxWidth: maxTextWidth } ); @@ -94,8 +94,8 @@ define( require => { // update the variable text when it changes, which is triggered by changes to the underlying variable values coinTerm.termValueTextProperty.link( function() { - var termValueText = coinTerm.termValueTextProperty.value; - var sign = coinTerm.totalCountProperty.get() > 0 ? '' : MathSymbols.UNARY_MINUS; + const termValueText = coinTerm.termValueTextProperty.value; + const sign = coinTerm.totalCountProperty.get() > 0 ? '' : MathSymbols.UNARY_MINUS; termWithVariableValuesText.text = sign + termValueText; termWithVariableValuesText.center = coinCenter; } ); diff --git a/js/common/view/CollectionDisplayNode.js b/js/common/view/CollectionDisplayNode.js index daff3971..1773a287 100644 --- a/js/common/view/CollectionDisplayNode.js +++ b/js/common/view/CollectionDisplayNode.js @@ -14,12 +14,12 @@ define( require => { const Node = require( 'SCENERY/nodes/Node' ); // constants - var DEFAULT_WIDTH = 200; // empirically determined - var MAX_COIN_TERMS_PER_ROW = 4; - var MAX_COINS_TERMS_PER_TYPE = 8; - var COIN_CENTER_INSET = 12; // empirically determined - var SAME_TYPE_VERTICAL_SPACING = 2; - var DIFFERENT_TYPE_VERTICAL_SPACING = 8; + const DEFAULT_WIDTH = 200; // empirically determined + const MAX_COIN_TERMS_PER_ROW = 4; + const MAX_COINS_TERMS_PER_TYPE = 8; + const COIN_CENTER_INSET = 12; // empirically determined + const SAME_TYPE_VERTICAL_SPACING = 2; + const DIFFERENT_TYPE_VERTICAL_SPACING = 8; /** * @param {ExpressionManipulationModel} model @@ -39,14 +39,14 @@ define( require => { }, options ); Node.call( this ); - var self = this; + const self = this; // number of sections in which the icons will appear - var numberOfDisplaySections = options.showNegatives ? displayList.length * 2 : displayList.length; + const numberOfDisplaySections = options.showNegatives ? displayList.length * 2 : displayList.length; // variables used in the loop that creates the icons shown in the display - var bottomOfPreviousRow; - var coinTermTypeID = null; + let bottomOfPreviousRow; + let coinTermTypeID = null; // add icon display sections in the order in which they are listed _.times( numberOfDisplaySections, function( displaySectionIndex ) { @@ -59,7 +59,7 @@ define( require => { } // create a single instance of the icon - var coinTermIcon = new CoinTermIconNode( + const coinTermIcon = new CoinTermIconNode( model.coinTermFactory.createCoinTerm( coinTermTypeID, { // set initial count to +1 or -1 based on whether this icon is meant to display positive or negative values initialCount: options.showNegatives && displaySectionIndex % 2 === 1 ? -1 : 1 @@ -74,12 +74,12 @@ define( require => { } // calculate the values used to position the coin term nodes - var interCoinTermHorizontalSpacing = ( options.width - ( 2 * COIN_CENTER_INSET ) ) / ( MAX_COIN_TERMS_PER_ROW - 1 ); + const interCoinTermHorizontalSpacing = ( options.width - ( 2 * COIN_CENTER_INSET ) ) / ( MAX_COIN_TERMS_PER_ROW - 1 ); // wrap the icon in separate nodes so that it can appear in multiple places, and set the position of each - var wrappedIconNodes = []; - for ( var j = 0; j < MAX_COINS_TERMS_PER_TYPE / MAX_COIN_TERMS_PER_ROW; j++ ) { - for ( var k = 0; k < MAX_COIN_TERMS_PER_ROW; k++ ) { + const wrappedIconNodes = []; + for ( let j = 0; j < MAX_COINS_TERMS_PER_TYPE / MAX_COIN_TERMS_PER_ROW; j++ ) { + for ( let k = 0; k < MAX_COIN_TERMS_PER_ROW; k++ ) { var wrappedIconNode = new Node( { children: [ coinTermIcon ], centerX: COIN_CENTER_INSET + k * interCoinTermHorizontalSpacing, diff --git a/js/common/view/ConstantCoinTermNode.js b/js/common/view/ConstantCoinTermNode.js index 7088a58d..7229e9e1 100644 --- a/js/common/view/ConstantCoinTermNode.js +++ b/js/common/view/ConstantCoinTermNode.js @@ -18,15 +18,15 @@ define( require => { const ViewMode = require( 'EXPRESSION_EXCHANGE/common/enum/ViewMode' ); // constants - var VALUE_FONT = new PhetFont( { size: 34 } ); - var MIN_RELATIVE_BOUNDS_WIDTH = 45; // empirically determined to be similar to variable coin term widths + const VALUE_FONT = new PhetFont( { size: 34 } ); + const MIN_RELATIVE_BOUNDS_WIDTH = 45; // empirically determined to be similar to variable coin term widths // The following constants control how the pointer areas (mouse and touch) are set up for the textual representation // of the coin term. These are empirically determined such that they are easy for users to grab but the don't // protrude from expressions. - var POINTER_AREA_X_DILATION_AMOUNT = 15; // in screen coords - var POINTER_AREA_Y_DILATION_AMOUNT = 8; // in screen coords, less than X amt to avoid protruding out of expression - var POINTER_AREA_DOWN_SHIFT = 3; // in screen coords + const POINTER_AREA_X_DILATION_AMOUNT = 15; // in screen coords + const POINTER_AREA_Y_DILATION_AMOUNT = 8; // in screen coords, less than X amt to avoid protruding out of expression + const POINTER_AREA_DOWN_SHIFT = 3; // in screen coords /** * @param {CoinTerm} constantCoinTerm - model of a coin @@ -38,7 +38,7 @@ define( require => { assert && assert( constantCoinTerm.isConstant, 'must use a constant coin term with this node' ); - var self = this; + const self = this; AbstractCoinTermNode.call( this, constantCoinTerm, options ); // As of this writing, constant coin terms are never used on a screen where a coin is shown. There is no @@ -52,18 +52,18 @@ define( require => { viewModeProperty.link( handleViewModeChanged ); // add the value text - var valueText = new Text( '', { font: VALUE_FONT } ); + const valueText = new Text( '', { font: VALUE_FONT } ); this.coinAndTextRootNode.addChild( valueText ); // helper function to take the view bounds information and communicate it to the model function updateBoundsInModel() { // make the bounds relative to (0,0), which is where the center of this node is maintained - var relativeVisibleBounds = self.coinAndTextRootNode.visibleLocalBounds; + let relativeVisibleBounds = self.coinAndTextRootNode.visibleLocalBounds; // In order to be consistent with the behavior of the variable coin terms, the bounds need to be a minimum width, // see https://github.com/phetsims/expression-exchange/issues/10. - var minBoundsWidth = MIN_RELATIVE_BOUNDS_WIDTH * constantCoinTerm.scaleProperty.get(); + const minBoundsWidth = MIN_RELATIVE_BOUNDS_WIDTH * constantCoinTerm.scaleProperty.get(); if ( relativeVisibleBounds.width < minBoundsWidth ) { relativeVisibleBounds = relativeVisibleBounds.dilatedX( ( minBoundsWidth - relativeVisibleBounds.width ) / 2 ); } @@ -75,7 +75,7 @@ define( require => { } // update the representation when model properties that affect it change - var updateRepresentationMultilink = Property.multilink( + const updateRepresentationMultilink = Property.multilink( [ constantCoinTerm.totalCountProperty, constantCoinTerm.showMinusSignWhenNegativeProperty, diff --git a/js/common/view/EditExpressionButton.js b/js/common/view/EditExpressionButton.js index 7f8b987a..cc3ce30b 100644 --- a/js/common/view/EditExpressionButton.js +++ b/js/common/view/EditExpressionButton.js @@ -14,7 +14,7 @@ define( require => { const RectangularPushButton = require( 'SUN/buttons/RectangularPushButton' ); // constants - var ICON = new FontAwesomeNode( 'exchange', { scale: 0.35 } ); // scale empirically determined + const ICON = new FontAwesomeNode( 'exchange', { scale: 0.35 } ); // scale empirically determined /** * @constructor @@ -23,7 +23,7 @@ define( require => { options = _.extend( {}, options ); - var iconNode = new Node( { children: [ ICON ] } ); + const iconNode = new Node( { children: [ ICON ] } ); // the following options can't be overridden options = _.extend( options, { diff --git a/js/common/view/ExpressionExplorationScreenView.js b/js/common/view/ExpressionExplorationScreenView.js index bdd4e905..cbd5d416 100644 --- a/js/common/view/ExpressionExplorationScreenView.js +++ b/js/common/view/ExpressionExplorationScreenView.js @@ -50,20 +50,20 @@ define( require => { const switchCoinImage = require( 'mipmap!EXPRESSION_EXCHANGE/switch-coin.png' ); // constants - var ACCORDION_BOX_TITLE_FONT = new PhetFont( { size: 16, weight: 'bold' } ); - var ACCORDION_BOX_BUTTON_X_MARGIN = 6; - 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 - var FLOATING_PANEL_INSET = 10; - var SWITCH_COIN_WIDTH = 30; // in view coordinates, empirically determined - var NARROW_COLLECTION_DISPLAY_WIDTH = 150; // in view coordinates, empirically determined - var WIDE_COLLECTION_DISPLAY_WIDTH = 180; // in view coordinates, empirically determined + const ACCORDION_BOX_TITLE_FONT = new PhetFont( { size: 16, weight: 'bold' } ); + const ACCORDION_BOX_BUTTON_X_MARGIN = 6; + const ACCORDION_BOX_BUTTON_Y_MARGIN = 4; + const ACCORDION_BOX_CORNER_RADIUS = 7; + const ACCORDION_BOX_CONTENT_X_MARGIN = 15; + const ACCORDION_BOX_BUTTON_TOUCH_AREA_DILATION_X = 15; + const ACCORDION_BOX_BUTTON_TOUCH_AREA_DILATION_Y = 15; + const CHECK_BOX_FONT = new PhetFont( { size: 16 } ); + const CHECK_BOX_VERTICAL_SPACING = 6; + const INSET = 10; // inset from edges of layout bounds, in screen coords + const FLOATING_PANEL_INSET = 10; + const SWITCH_COIN_WIDTH = 30; // in view coordinates, empirically determined + const NARROW_COLLECTION_DISPLAY_WIDTH = 150; // in view coordinates, empirically determined + const WIDE_COLLECTION_DISPLAY_WIDTH = 180; // in view coordinates, empirically determined /** * @param {ExpressionManipulationModel} model @@ -78,10 +78,10 @@ define( require => { model.setRetrievalBounds( this.layoutBounds ); // create the view element where coin terms and expressions will be manipulated, but don't add it yet - var expressionManipulationView = new ExpressionManipulationView( model, this.visibleBoundsProperty ); + const expressionManipulationView = new ExpressionManipulationView( model, this.visibleBoundsProperty ); // create the box with the coin term creator nodes - var coinTermCreatorBox = CoinTermCreatorBoxFactory.createExploreScreenCreatorBox( + const coinTermCreatorBox = CoinTermCreatorBoxFactory.createExploreScreenCreatorBox( coinTermCreatorSetID, model, expressionManipulationView, @@ -93,15 +93,15 @@ define( require => { model.creatorBoxBounds = coinTermCreatorBox.bounds; // max size of the boxes on the left side, multiplier empirically determined to look good - var leftSideBoxWidth = this.layoutBounds.width * 0.15; + const leftSideBoxWidth = this.layoutBounds.width * 0.15; // create the readout that will display the total accumulated value, use max length string initially - var totalValueText = new Text( + const totalValueText = new Text( StringUtils.fillIn( numberCentsPatternString, { number: 9999 } ), { font: new PhetFont( { size: 14 } ) } ); - var totalValueReadoutWidth = Math.min( totalValueText.width + 20, leftSideBoxWidth * 0.8 ); - var totalValueReadout = new Panel( totalValueText, { + const totalValueReadoutWidth = Math.min( totalValueText.width + 20, leftSideBoxWidth * 0.8 ); + const totalValueReadout = new Panel( totalValueText, { fill: 'white', stroke: 'black', cornerRadius: 5, @@ -123,7 +123,7 @@ define( require => { ); // add accordion box that will contain the total value readout - var totalValueAccordionBox = new AccordionBox( totalValueReadout, { + const totalValueAccordionBox = new AccordionBox( totalValueReadout, { titleNode: new Text( totalString, { font: ACCORDION_BOX_TITLE_FONT, maxWidth: leftSideBoxWidth * 0.7 } ), fill: EESharedConstants.CONTROL_PANEL_BACKGROUND_COLOR, left: INSET, @@ -142,7 +142,7 @@ define( require => { this.addChild( totalValueAccordionBox ); // create the control that will allow the user to manipulate variable values - var variableValueControl; + let variableValueControl; if ( coinTermCreatorSetID === CoinTermCreatorSetID.VARIABLES ) { // the variable value control is slightly different for the advanced screen @@ -164,7 +164,7 @@ define( require => { } // add the variable value control to an accordion box, and add the accordion box to the view - var variableValuesAccordionBox = new AccordionBox( variableValueControl, { + const variableValuesAccordionBox = new AccordionBox( variableValueControl, { titleNode: new Text( variablesString, { font: ACCORDION_BOX_TITLE_FONT, maxWidth: leftSideBoxWidth * 0.65 } ), fill: EESharedConstants.CONTROL_PANEL_BACKGROUND_COLOR, contentYMargin: 20, @@ -191,11 +191,11 @@ define( require => { // if both representations are allowed, add the switch for switching between coin and term view if ( model.allowedRepresentations === AllowedRepresentations.COINS_AND_VARIABLES ) { - var coinImageNode = new Image( switchCoinImage, { minWidth: SWITCH_COIN_WIDTH, maxWidth: SWITCH_COIN_WIDTH } ); + const coinImageNode = new Image( switchCoinImage, { minWidth: SWITCH_COIN_WIDTH, maxWidth: SWITCH_COIN_WIDTH } ); coinImageNode.touchArea = coinImageNode.localBounds.dilatedXY( 15, 20 ).shiftedX( -10 ); // enclose the variable text in a node so that its vertical position can be accurately set - var variableIconNode = new Node( { + const variableIconNode = new Node( { children: [ new VStrut( coinImageNode.bounds.height ), new Text( 'x', { @@ -224,18 +224,18 @@ define( require => { ) ); } - var collectionDisplayWidth = coinTermCreatorSetID === CoinTermCreatorSetID.EXPLORE ? + const collectionDisplayWidth = coinTermCreatorSetID === CoinTermCreatorSetID.EXPLORE ? WIDE_COLLECTION_DISPLAY_WIDTH : NARROW_COLLECTION_DISPLAY_WIDTH; // create the "My Collection" display element - var myCollectionDisplay = new CollectionDisplayNode( model, coinTermCreatorBox.coinTermTypeList, { + const myCollectionDisplay = new CollectionDisplayNode( model, coinTermCreatorBox.coinTermTypeList, { width: collectionDisplayWidth, showNegatives: coinTermCreatorBox.negativeTermsPresent } ); // add accordion box that will contain the collection display - var myCollectionAccordionBox = new AccordionBox( myCollectionDisplay, { + const myCollectionAccordionBox = new AccordionBox( myCollectionDisplay, { titleNode: new Text( myCollectionString, { font: ACCORDION_BOX_TITLE_FONT, maxWidth: collectionDisplayWidth * 0.90 @@ -257,10 +257,10 @@ define( require => { this.addChild( myCollectionAccordionBox ); // max size of checkbox text, multiplier empirically determined - var checkboxTitleMaxWidth = myCollectionAccordionBox.width * 0.8; + const checkboxTitleMaxWidth = myCollectionAccordionBox.width * 0.8; // add the checkbox that controls visibility of coin values - var showCoinValuesCheckbox = new Checkbox( + const showCoinValuesCheckbox = new Checkbox( new Text( coinValuesString, { font: CHECK_BOX_FONT, maxWidth: checkboxTitleMaxWidth } ), model.showCoinValuesProperty, { @@ -272,7 +272,7 @@ define( require => { this.addChild( showCoinValuesCheckbox ); // add the checkbox that controls visibility of variable values - var showVariableValuesCheckbox = new Checkbox( + const showVariableValuesCheckbox = new Checkbox( new Text( variableValuesString, { font: CHECK_BOX_FONT, maxWidth: checkboxTitleMaxWidth } ), model.showVariableValuesProperty, { @@ -290,7 +290,7 @@ define( require => { } ); // add the checkbox that controls whether all coefficients (including 1) are shown - var showAllCoefficientsCheckbox = new Checkbox( + const showAllCoefficientsCheckbox = new Checkbox( new Text( allCoefficientsString, { font: CHECK_BOX_FONT, maxWidth: checkboxTitleMaxWidth } ), model.showAllCoefficientsProperty, { @@ -316,7 +316,7 @@ define( require => { } // add the 'Reset All' button - var resetAllButton = new ResetAllButton( { + const resetAllButton = new ResetAllButton( { listener: function() { model.reset(); coinTermCreatorBox.reset(); diff --git a/js/common/view/ExpressionHintNode.js b/js/common/view/ExpressionHintNode.js index c3356c73..98bf1487 100644 --- a/js/common/view/ExpressionHintNode.js +++ b/js/common/view/ExpressionHintNode.js @@ -20,10 +20,10 @@ define( require => { const Shape = require( 'KITE/Shape' ); // constants - var HINT_BACKGROUND_COLOR = EESharedConstants.EXPRESSION_BACKGROUND_COLOR; - var INSET = 10; // in screen coordinates - var NUM_ZIG_ZAGS = 5; - var ZIG_ZAG_AMPLITUDE = 2; + const HINT_BACKGROUND_COLOR = EESharedConstants.EXPRESSION_BACKGROUND_COLOR; + const INSET = 10; // in screen coordinates + const NUM_ZIG_ZAGS = 5; + const ZIG_ZAG_AMPLITUDE = 2; /** * @param {ExpressionHint} expressionHint - model of an expression hint @@ -31,9 +31,9 @@ define( require => { */ function ExpressionHintNode( expressionHint ) { Node.call( this, { pickable: false } ); - var self = this; + const self = this; - var boundsUpdateMultilink = Property.multilink( + const boundsUpdateMultilink = Property.multilink( [ expressionHint.anchorCoinTerm.localViewBoundsProperty, expressionHint.movingCoinTerm.localViewBoundsProperty @@ -41,22 +41,22 @@ define( require => { function() { // convenience vars - var anchorCTBounds = expressionHint.anchorCoinTerm.localViewBoundsProperty.get(); - var movingCTBounds = expressionHint.movingCoinTerm.localViewBoundsProperty.get(); + const anchorCTBounds = expressionHint.anchorCoinTerm.localViewBoundsProperty.get(); + const movingCTBounds = expressionHint.movingCoinTerm.localViewBoundsProperty.get(); // clear out any previous hint self.removeAllChildren(); // the hint can be on the left or right side of the 'anchor coin', depending upon where the moving coin term is - var anchorCoinTermOnLeft = expressionHint.movingCoinTerm.positionProperty.get().x > + const anchorCoinTermOnLeft = expressionHint.movingCoinTerm.positionProperty.get().x > expressionHint.anchorCoinTerm.positionProperty.get().x; // calculate size and position for each half of the hint - var height = Math.max( anchorCTBounds.height, movingCTBounds.height ) + 2 * INSET; - var top = expressionHint.anchorCoinTerm.positionProperty.get().y - height / 2; - var leftHalfWidth; - var rightHalfWidth; - var leftHalfCenterX; + const height = Math.max( anchorCTBounds.height, movingCTBounds.height ) + 2 * INSET; + const top = expressionHint.anchorCoinTerm.positionProperty.get().y - height / 2; + let leftHalfWidth; + let rightHalfWidth; + let leftHalfCenterX; if ( anchorCoinTermOnLeft ) { leftHalfWidth = anchorCTBounds.width + 2 * INSET; rightHalfWidth = movingCTBounds.width + 2 * INSET; @@ -70,7 +70,7 @@ define( require => { } // draw rectangle on three sides with zig-zag line on remaining side - var leftHalfShape = new Shape() + const leftHalfShape = new Shape() .moveTo( leftHalfWidth, 0 ) .lineTo( 0, 0 ) .lineTo( 0, height ) @@ -78,7 +78,7 @@ define( require => { leftHalfShape.zigZagTo( leftHalfWidth, 0, ZIG_ZAG_AMPLITUDE, NUM_ZIG_ZAGS, false ); leftHalfShape.close(); - var leftHalf = new Path( leftHalfShape, { + const leftHalf = new Path( leftHalfShape, { fill: HINT_BACKGROUND_COLOR, centerX: leftHalfCenterX, top: top @@ -86,7 +86,7 @@ define( require => { self.addChild( leftHalf ); // draw rectangle on three sides with zig-zag line on remaining side - var rightHalfShape = new Shape() + const rightHalfShape = new Shape() .moveTo( 0, 0 ) .lineTo( rightHalfWidth, 0 ) .lineTo( rightHalfWidth, height ) diff --git a/js/common/view/ExpressionManipulationView.js b/js/common/view/ExpressionManipulationView.js index 0e8f5565..29bef2df 100644 --- a/js/common/view/ExpressionManipulationView.js +++ b/js/common/view/ExpressionManipulationView.js @@ -32,7 +32,7 @@ define( require => { */ function ExpressionManipulationView( model, visibleBoundsProperty, options ) { - var self = this; + const self = this; options = _.extend( { coinTermBreakApartButtonMode: 'normal' // passed through to the coin terms }, options ); @@ -45,25 +45,25 @@ define( require => { } ); // add the node that will act as the layer where the expression backgrounds and expression hints will come and go - var expressionLayer = new Node(); + const expressionLayer = new Node(); this.addChild( expressionLayer ); // add the node that will act as the layer where the coin term halos will come and go - var coinHaloLayer = new Node(); + const coinHaloLayer = new Node(); this.addChild( coinHaloLayer ); // add the node that will act as the layer where the coin terms will come and go - var coinTermLayer = new Node(); + const coinTermLayer = new Node(); this.coinTermLayer = coinTermLayer; // @private, used by a method this.addChild( coinTermLayer ); // add the node that will act as the layer where the expression overlays will come and go - var expressionOverlayLayer = new Node(); + const expressionOverlayLayer = new Node(); this.addChild( expressionOverlayLayer ); // add the buttons for ejecting expressions from the collection area, must be above the expressions in the z-order model.collectionAreas.forEach( function( collectionArea ) { - var undoButton = new UndoButton( { + const undoButton = new UndoButton( { listener: function() { collectionArea.ejectCollectedItem(); }, leftTop: collectionArea.bounds.leftTop } ); @@ -79,8 +79,8 @@ define( require => { } ); // add the node that will act as the barrier to interaction with other expressions when editing an expression - var barrierRectangleBounds = null; - var barrierRectanglePath = new Path( null, { + let barrierRectangleBounds = null; + const barrierRectanglePath = new Path( null, { fill: 'rgba( 100, 100, 100, 0.5 )', visible: false, // initially invisible, will become visible when editing an expression cursor: 'pointer' @@ -88,7 +88,7 @@ define( require => { this.addChild( barrierRectanglePath ); // add a listener to the barrier rectangle that will exit the expression editing mode when clicked upon - var barrierRectangleArmedForRemoval = false; + let barrierRectangleArmedForRemoval = false; barrierRectanglePath.addInputListener( { down: function() { @@ -107,9 +107,9 @@ define( require => { // define a function that will update the shape of the barrier rectangle function updateBarrierRectangle() { - var barrierRectangleShape = Shape.bounds( barrierRectangleBounds ); + const barrierRectangleShape = Shape.bounds( barrierRectangleBounds ); if ( model.expressionBeingEditedProperty.get() ) { - var barrierRectangleHoleBounds = model.expressionBeingEditedProperty.get().getBounds(); + const barrierRectangleHoleBounds = model.expressionBeingEditedProperty.get().getBounds(); // note - must travel counterclockwise to create a hole barrierRectangleShape.moveTo( barrierRectangleHoleBounds.minX, barrierRectangleHoleBounds.minY ); barrierRectangleShape.lineTo( barrierRectangleHoleBounds.minX, barrierRectangleHoleBounds.maxY ); @@ -129,7 +129,7 @@ define( require => { } ); // show the barrier rectangle when an expression is being edited - var updateHoleMultilink = null; + let updateHoleMultilink = null; model.expressionBeingEditedProperty.link( function( currentExpressionBeingEdited, previousExpressionBeingEdited ) { // if there is an expression being edited, the barrier rectangle should be visible @@ -162,7 +162,7 @@ define( require => { model.coinTerms.addItemAddedListener( function( addedCoinTerm ) { // add the appropriate representation for the coin term - var coinTermNode; + let coinTermNode; if ( addedCoinTerm.isConstant ) { coinTermNode = new ConstantCoinTermNode( addedCoinTerm, @@ -192,7 +192,7 @@ define( require => { coinTermLayer.addChild( coinTermNode ); // add the coin halo - var coinTermHaloNode = new CoinTermHaloNode( addedCoinTerm, model.viewModeProperty ); + const coinTermHaloNode = new CoinTermHaloNode( addedCoinTerm, model.viewModeProperty ); coinHaloLayer.addChild( coinTermHaloNode ); // set up a listener to remove the nodes when the corresponding coin is removed from the model @@ -210,10 +210,10 @@ define( require => { // add and remove expressions and expression overlays as they come and go model.expressions.addItemAddedListener( function( addedExpression ) { - var expressionNode = new ExpressionNode( addedExpression, model.simplifyNegativesProperty ); + const expressionNode = new ExpressionNode( addedExpression, model.simplifyNegativesProperty ); expressionLayer.addChild( expressionNode ); - var expressionOverlayNode = new ExpressionOverlayNode( addedExpression, visibleBoundsProperty.get() ); + const expressionOverlayNode = new ExpressionOverlayNode( addedExpression, visibleBoundsProperty.get() ); expressionOverlayLayer.addChild( expressionOverlayNode ); // set up a listener to remove these nodes when the corresponding expression is removed from the model @@ -231,7 +231,7 @@ define( require => { // add and remove expression hints as they come and go model.expressionHints.addItemAddedListener( function( addedExpressionHint ) { - var expressionHintNode = new ExpressionHintNode( addedExpressionHint, model.viewModeProperty ); + const expressionHintNode = new ExpressionHintNode( addedExpressionHint, model.viewModeProperty ); expressionLayer.addChild( expressionHintNode ); // set up a listener to remove the hint node when the corresponding hint is removed from the model @@ -256,7 +256,7 @@ define( require => { * @public */ getViewForCoinTerm: function( coinTerm ) { - var coinTermView = _.find( this.coinTermLayer.children, function( coinTermNode ) { + const coinTermView = _.find( this.coinTermLayer.children, function( coinTermNode ) { return coinTermNode.coinTerm === coinTerm; } ); return coinTermView; diff --git a/js/common/view/ExpressionNode.js b/js/common/view/ExpressionNode.js index d4f66b4a..22485c5d 100644 --- a/js/common/view/ExpressionNode.js +++ b/js/common/view/ExpressionNode.js @@ -26,13 +26,13 @@ define( require => { const Text = require( 'SCENERY/nodes/Text' ); // constants - var BACKGROUND_COLOR = EESharedConstants.EXPRESSION_BACKGROUND_COLOR; - var NUM_ZIG_ZAGS = 5; - var ZIG_ZAG_AMPLITUDE = 2; // in screen coordinates, empirically determined - var HINT_OFFSET = 3; // in screen coordinates, empirically determined - var LEFT_HINT_TRANSLATION = Matrix3.translation( -HINT_OFFSET, 0 ); - var RIGHT_HINT_TRANSLATION = Matrix3.translation( HINT_OFFSET, 0 ); - var OPERATOR_FONT = new PhetFont( 32 ); + const BACKGROUND_COLOR = EESharedConstants.EXPRESSION_BACKGROUND_COLOR; + const NUM_ZIG_ZAGS = 5; + const ZIG_ZAG_AMPLITUDE = 2; // in screen coordinates, empirically determined + const HINT_OFFSET = 3; // in screen coordinates, empirically determined + const LEFT_HINT_TRANSLATION = Matrix3.translation( -HINT_OFFSET, 0 ); + const RIGHT_HINT_TRANSLATION = Matrix3.translation( HINT_OFFSET, 0 ); + const OPERATOR_FONT = new PhetFont( 32 ); /** * @param {Expression} expression - model of an expression @@ -42,21 +42,21 @@ define( require => { function ExpressionNode( expression, simplifyNegativesProperty ) { Node.call( this, { pickable: false } ); - var self = this; + const self = this; // shape and path used to define and display the background - var backgroundPath = new Path( null, { fill: BACKGROUND_COLOR, lineWidth: 5 } ); + const backgroundPath = new Path( null, { fill: BACKGROUND_COLOR, lineWidth: 5 } ); this.addChild( backgroundPath ); // left and right 'hints' that are used to indicate to the user that a coin term can be added - var leftHintNode = new Path( null, { fill: BACKGROUND_COLOR } ); + const leftHintNode = new Path( null, { fill: BACKGROUND_COLOR } ); this.addChild( leftHintNode ); - var rightHintNode = new Path( null, { fill: BACKGROUND_COLOR } ); + const rightHintNode = new Path( null, { fill: BACKGROUND_COLOR } ); this.addChild( rightHintNode ); // layer where the plus and/or minus symbols go - var operatorsLayer = new Node(); + const operatorsLayer = new Node(); this.addChild( operatorsLayer ); // function to update the background and the plus/minus symbols @@ -67,15 +67,15 @@ define( require => { if ( expression.coinTerms.length > 0 ) { - var coinTermsLeftToRight = expression.coinTerms.getArray().slice().sort( function( ct1, ct2 ) { + const coinTermsLeftToRight = expression.coinTerms.getArray().slice().sort( function( ct1, ct2 ) { return ct1.destinationProperty.get().x - ct2.destinationProperty.get().x; } ); - var backgroundShape = new Shape(); + const backgroundShape = new Shape(); backgroundShape.moveTo( 0, 0 ); backgroundShape.lineTo( expression.widthProperty.get(), 0 ); - var expressionWidth = expression.widthProperty.get(); - var expressionHeight = expression.heightProperty.get(); + const expressionWidth = expression.widthProperty.get(); + const expressionHeight = expression.heightProperty.get(); // if the hint is active, the edge is zig zagged if ( expression.rightHintActiveProperty.get() ) { @@ -100,7 +100,7 @@ define( require => { backgroundPath.shape = backgroundShape; // add the operators - for ( var i = 0; i < coinTermsLeftToRight.length - 1; i++ ) { + for ( let i = 0; i < coinTermsLeftToRight.length - 1; i++ ) { // determine whether to show a plus sign or a minus sign var symbolText; @@ -113,7 +113,7 @@ define( require => { } // add the operator - var operator = new Text( symbolText, { + const operator = new Text( symbolText, { font: OPERATOR_FONT, scale: expression.scaleProperty.get(), centerX: ( coinTermsLeftToRight[ i ].destinationProperty.get().x + @@ -141,7 +141,7 @@ define( require => { } ); // update the shape when hint states of the expression change - var updateBackgroundAndSymbolsMultilink = Property.multilink( + const updateBackgroundAndSymbolsMultilink = Property.multilink( [ expression.leftHintActiveProperty, expression.rightHintActiveProperty, simplifyNegativesProperty ], updateBackgroundAndSymbols ); @@ -154,8 +154,8 @@ define( require => { expression.upperLeftCornerProperty.link( updatePosition ); // update the visibility of the left and right hints - var leftHintHandle = expression.leftHintActiveProperty.linkAttribute( leftHintNode, 'visible' ); - var rightHintHandle = expression.rightHintActiveProperty.linkAttribute( rightHintNode, 'visible' ); + const leftHintHandle = expression.leftHintActiveProperty.linkAttribute( leftHintNode, 'visible' ); + const rightHintHandle = expression.rightHintActiveProperty.linkAttribute( rightHintNode, 'visible' ); // turn the halo on and off based on the associated property function activateCombineHint( combineHintActive ) { @@ -165,10 +165,10 @@ define( require => { expression.combineHaloActiveProperty.link( activateCombineHint ); // update the shape of the left hint - var leftHintMultilink = Property.multilink( + const leftHintMultilink = Property.multilink( [ expression.heightProperty, expression.widthProperty, expression.leftHintWidthProperty ], function( expressionHeight, expressionWidth, hintWidth ) { - var leftHintShape = new Shape() + let leftHintShape = new Shape() .moveTo( -hintWidth, 0 ) .lineTo( 0, 0 ); leftHintShape.zigZagTo( 0, expressionHeight, ZIG_ZAG_AMPLITUDE, NUM_ZIG_ZAGS, false ); @@ -181,10 +181,10 @@ define( require => { ); // update the shape of the right hint - var rightHintMultilink = Property.multilink( + const rightHintMultilink = Property.multilink( [ expression.heightProperty, expression.widthProperty, expression.rightHintWidthProperty ], function( expressionHeight, expressionWidth, hintWidth ) { - var rightHintShape = new Shape().moveTo( expressionWidth, 0 ); + let rightHintShape = new Shape().moveTo( expressionWidth, 0 ); rightHintShape.zigZagTo( expressionWidth, expressionHeight, ZIG_ZAG_AMPLITUDE, NUM_ZIG_ZAGS, false ); rightHintShape .lineTo( expressionWidth + hintWidth, expressionHeight ) diff --git a/js/common/view/ExpressionOverlayNode.js b/js/common/view/ExpressionOverlayNode.js index 76eaf973..1f923e56 100644 --- a/js/common/view/ExpressionOverlayNode.js +++ b/js/common/view/ExpressionOverlayNode.js @@ -25,8 +25,8 @@ define( require => { const Vector2 = require( 'DOT/Vector2' ); // constants - var MIN_EXPRESSION_IN_BOUNDS_WIDTH = 70; // in screen coords, min horizontal amount of expression that must stay in bounds - var BUTTON_SPACING = 11; // in screen coordinates + const MIN_EXPRESSION_IN_BOUNDS_WIDTH = 70; // in screen coords, min horizontal amount of expression that must stay in bounds + const BUTTON_SPACING = 11; // in screen coordinates /** * @param {Expression} expression - model of an expression @@ -36,14 +36,14 @@ define( require => { function ExpressionOverlayNode( expression, layoutBounds ) { Node.call( this, { pickable: true, cursor: 'pointer' } ); - var self = this; + const self = this; // shape and path for the overlay - var expressionShapeNode = new Path( null, { fill: 'transparent' } ); // essentially invisible + const expressionShapeNode = new Path( null, { fill: 'transparent' } ); // essentially invisible this.addChild( expressionShapeNode ); // update the shape if the height or width change - var updateShapeMultilink = Property.multilink( + const updateShapeMultilink = Property.multilink( [ expression.widthProperty, expression.heightProperty ], function() { expressionShapeNode.shape = new Shape.rect( 0, 0, expression.widthProperty.get(), expression.heightProperty.get() ); @@ -51,7 +51,7 @@ define( require => { ); // update the expression's position as this node moves - var translationLinkHandle = expression.upperLeftCornerProperty.linkAttribute( this, 'translation' ); + const translationLinkHandle = expression.upperLeftCornerProperty.linkAttribute( this, 'translation' ); // become invisible if the expression goes into edit mode so that the user can interact with the coin terms within function updateVisibility( inEditMode ) { @@ -65,22 +65,22 @@ define( require => { this.addChild( this.popUpButtonsNode ); // add the button used to break apart the expression - var breakApartButton = new BreakApartButton(); + const breakApartButton = new BreakApartButton(); this.popUpButtonsNode.addChild( breakApartButton ); // adjust the touch area for the break apart button so that is is easy to touch but doesn't overlap other button - var breakApartButtonTouchArea = breakApartButton.localBounds.copy(); + const breakApartButtonTouchArea = breakApartButton.localBounds.copy(); breakApartButtonTouchArea.minX = breakApartButtonTouchArea.minX - breakApartButton.width; breakApartButtonTouchArea.maxX = breakApartButtonTouchArea.maxX + BUTTON_SPACING * 0.3; breakApartButtonTouchArea.minY = breakApartButtonTouchArea.minY - breakApartButton.height; breakApartButton.touchArea = breakApartButtonTouchArea; // add the button used to put the expression into edit mode - var editExpressionButton = new EditExpressionButton( { left: breakApartButton.right + BUTTON_SPACING } ); + const editExpressionButton = new EditExpressionButton( { left: breakApartButton.right + BUTTON_SPACING } ); this.popUpButtonsNode.addChild( editExpressionButton ); // adjust the touch area for the edit button so that is is easy to touch but doesn't overlap other button - var editExpressionButtonTouchArea = editExpressionButton.localBounds.copy(); + const editExpressionButtonTouchArea = editExpressionButton.localBounds.copy(); editExpressionButtonTouchArea.minX = editExpressionButtonTouchArea.minX - BUTTON_SPACING * 0.3; editExpressionButtonTouchArea.maxX = editExpressionButtonTouchArea.maxX + editExpressionButton.width; editExpressionButtonTouchArea.minY = editExpressionButtonTouchArea.minY - editExpressionButton.height; @@ -121,11 +121,11 @@ define( require => { } ); // pre-allocated vectors, used for calculating allowable locations for the expression - var unboundedUpperLeftCornerPosition = new Vector2( 0, 0 ); - var boundedUpperLeftCornerPosition = new Vector2( 0, 0 ); + const unboundedUpperLeftCornerPosition = new Vector2( 0, 0 ); + const boundedUpperLeftCornerPosition = new Vector2( 0, 0 ); // add the handler that will allow the expression to be dragged and will hide and show the buttons - var dragHandler = new SimpleDragHandler( { + const dragHandler = new SimpleDragHandler( { allowTouchSnag: true, @@ -165,7 +165,7 @@ define( require => { } } } ); - var dragHandlerAttached = false; + let dragHandlerAttached = false; // Helper function that adds the drag handler when we want this expression to be draggable and removes it when we // don't. This is done instead of setting pickability because we need to prevent interaction with the coin terms @@ -183,7 +183,7 @@ define( require => { } } - var updateDragHandlerAttachmentMultilink = Property.multilink( + const updateDragHandlerAttachmentMultilink = Property.multilink( [ expression.inProgressAnimationProperty, expression.collectedProperty ], updateDragHandlerAttachmentState ); @@ -241,7 +241,7 @@ define( require => { }, startHideButtonsTimer: function() { - var self = this; + const self = this; this.clearHideButtonsTimer(); // just in case one is already running this.hideButtonsTimerCallback = timer.setTimeout( function() { self.hidePopUpButtons(); diff --git a/js/common/view/LeftRightNumberSpinner.js b/js/common/view/LeftRightNumberSpinner.js index 9255fff4..44da0d4a 100644 --- a/js/common/view/LeftRightNumberSpinner.js +++ b/js/common/view/LeftRightNumberSpinner.js @@ -23,11 +23,11 @@ define( require => { const Text = require( 'SCENERY/nodes/Text' ); // constants - var READOUT_FONT = new PhetFont( 16 ); - var VARIABLE_FONT = new MathSymbolFont( 24 ); - var EQUALS_SIGN_FONT = new PhetFont( 22 ); // because the equals sign in MathSymbolFont looked bad - var DEFAULT_MIN_VALUE = -10; - var DEFAULT_MAX_VALUE = 10; + const READOUT_FONT = new PhetFont( 16 ); + const VARIABLE_FONT = new MathSymbolFont( 24 ); + const EQUALS_SIGN_FONT = new PhetFont( 22 ); // because the equals sign in MathSymbolFont looked bad + const DEFAULT_MIN_VALUE = -10; + const DEFAULT_MAX_VALUE = 10; /** * @param {Property.} variableValueProperty - property that wraps the values that will be manipulated @@ -44,7 +44,7 @@ define( require => { }, options ); // create and add the readout - var numberSpinner = new NumberSpinner( variableValueProperty, new Property( new Range( options.minValue, options.maxValue ) ), { + const numberSpinner = new NumberSpinner( variableValueProperty, new Property( new Range( options.minValue, options.maxValue ) ), { arrowsPosition: 'leftRight', font: READOUT_FONT, backgroundStroke: 'black', diff --git a/js/common/view/ShowSubtractionIcon.js b/js/common/view/ShowSubtractionIcon.js index 99995f52..46090469 100644 --- a/js/common/view/ShowSubtractionIcon.js +++ b/js/common/view/ShowSubtractionIcon.js @@ -19,9 +19,9 @@ define( require => { const Text = require( 'SCENERY/nodes/Text' ); // constants - var MATH_FONT = new MathSymbolFont( { size: 21, weight: 'bold' } ); - var RECTANGLE_BACKGROUND_COLOR = 'rgba( 255, 255, 255, 0.6 )'; - var RECT_CORNER_RADIUS = 6; + const MATH_FONT = new MathSymbolFont( { size: 21, weight: 'bold' } ); + const RECTANGLE_BACKGROUND_COLOR = 'rgba( 255, 255, 255, 0.6 )'; + const RECT_CORNER_RADIUS = 6; /** * @constructor @@ -32,11 +32,11 @@ define( require => { Node.call( this ); // add a rectangle with the first portion of the text - var firstTextWithBackground = new TextWidthBackground( '+ ' + MathSymbols.UNARY_MINUS + 'x' ); + const firstTextWithBackground = new TextWidthBackground( '+ ' + MathSymbols.UNARY_MINUS + 'x' ); this.addChild( firstTextWithBackground ); // add the arrow - var arrow = new ArrowNode( 0, 0, 15, 0, { + const arrow = new ArrowNode( 0, 0, 15, 0, { left: firstTextWithBackground.right + 5, centerY: firstTextWithBackground.height / 2, stroke: null, @@ -59,7 +59,7 @@ define( require => { function TextWidthBackground( text, options ) { // create the textual node - var textNode = new Text( text, { font: MATH_FONT } ); + const textNode = new Text( text, { font: MATH_FONT } ); // create the background, which is a rounded rectangle (the width and height multipliers were empirically determined) Rectangle.call( this, 0, 0, textNode.width * 1.4, textNode.height * 1.1, { diff --git a/js/common/view/VariableCoinTermNode.js b/js/common/view/VariableCoinTermNode.js index 5c01a6f1..e6c06e59 100644 --- a/js/common/view/VariableCoinTermNode.js +++ b/js/common/view/VariableCoinTermNode.js @@ -27,20 +27,20 @@ define( require => { const ViewMode = require( 'EXPRESSION_EXCHANGE/common/enum/ViewMode' ); // constants - var COEFFICIENT_FONT = new PhetFont( { size: 34 } ); - var COEFFICIENT_X_SPACING = 3; // in screen coords - var SUPERSCRIPT_SCALE = 0.65; - var VALUE_FONT = new PhetFont( { size: 30 } ); - var VARIABLE_FONT = new MathSymbolFont( 36 ); - var COIN_FLIP_TIME = 0.5; // in seconds - var MIN_SCALE_FOR_FLIP = 0.05; + const COEFFICIENT_FONT = new PhetFont( { size: 34 } ); + const COEFFICIENT_X_SPACING = 3; // in screen coords + const SUPERSCRIPT_SCALE = 0.65; + const VALUE_FONT = new PhetFont( { size: 30 } ); + const VARIABLE_FONT = new MathSymbolFont( 36 ); + const COIN_FLIP_TIME = 0.5; // in seconds + const MIN_SCALE_FOR_FLIP = 0.05; // The following constants control how the pointer areas (mouse and touch) are set up for the textual representation // of the coin term. These are empirically determined such that they are easy for users to grab but the don't // protrude from expressions. - var POINTER_AREA_X_DILATION_AMOUNT = 15; // in screen coords - var POINTER_AREA_Y_DILATION_AMOUNT = 8; // in screen coords, less than X amt to avoid protruding out of expression - var POINTER_AREA_DOWN_SHIFT = 3; // in screen coords + const POINTER_AREA_X_DILATION_AMOUNT = 15; // in screen coords + const POINTER_AREA_Y_DILATION_AMOUNT = 8; // in screen coords, less than X amt to avoid protruding out of expression + const POINTER_AREA_DOWN_SHIFT = 3; // in screen coords /** * @param {CoinTerm} coinTerm - model of a coin @@ -79,7 +79,7 @@ define( require => { this.coinAndTextRootNode.addChild( this.boundsRect ); // @private {Image} - add the images for the front and back of the coin - var coinImageNodes = []; + const coinImageNodes = []; this.coinFrontImageNode = CoinNodeFactory.createImageNode( coinTerm.typeID, coinTerm.coinRadius, true ); coinImageNodes.push( this.coinFrontImageNode ); if ( options.supportShowValues ) { @@ -128,7 +128,7 @@ define( require => { this.activeFlipAnimation = null; // if anything about the coin term's values changes or any of the display mode, the representation needs to be updated - var updateRepresentationMultilink = Property.multilink( + const updateRepresentationMultilink = Property.multilink( [ viewModeProperty, showAllCoefficientsProperty, @@ -175,16 +175,16 @@ define( require => { updateBoundsInModel: function() { // make the bounds relative to the coin term's position, which corresponds to the center of the coin - var relativeVisibleBounds = this.coinAndTextRootNode.visibleLocalBounds; + let relativeVisibleBounds = this.coinAndTextRootNode.visibleLocalBounds; // Expressions are kept the same width whether the view mode is set to coins or variables, but it is possible to // override this behavior using a query parameter. This behavior is being retained in case we ever want to // experiment with it in the future. See https://github.com/phetsims/expression-exchange/issues/10 if ( !EEQueryParameters.adjustExpressionWidth ) { - var termWithVariableValuesTextWidth = this.termWithVariableValuesText ? this.termWithVariableValuesText.width : 0; + const termWithVariableValuesTextWidth = this.termWithVariableValuesText ? this.termWithVariableValuesText.width : 0; - var width = Math.max( this.coinImagesNode.width, this.termText.width, termWithVariableValuesTextWidth ); + let width = Math.max( this.coinImagesNode.width, this.termText.width, termWithVariableValuesTextWidth ); if ( this.coefficientText.visible || Math.abs( this.coinTerm.totalCountProperty.get() ) > 1 ) { width += this.coefficientText.width + COEFFICIENT_X_SPACING; @@ -207,14 +207,14 @@ define( require => { updateRepresentation: function( viewMode, showAllCoefficients, showVariableValues ) { // convenience vars - var textBaseline = AbstractCoinTermNode.TEXT_BASELINE_Y_OFFSET; - var scale = this.coinTerm.scaleProperty.get(); // for convenience + const textBaseline = AbstractCoinTermNode.TEXT_BASELINE_Y_OFFSET; + const scale = this.coinTerm.scaleProperty.get(); // for convenience // control front coin image visibility this.coinImagesNode.visible = viewMode === ViewMode.COINS; // adjust the size of the coin term images - var desiredCoinImageWidth = this.coinTerm.coinRadius * 2 * scale; + const desiredCoinImageWidth = this.coinTerm.coinRadius * 2 * scale; if ( Math.abs( this.coinImagesNode.width - desiredCoinImageWidth ) > 1E-4 ) { this.coinImagesNode.setScaleMagnitude( 1 ); this.coinImagesNode.setScaleMagnitude( desiredCoinImageWidth / this.coinImagesNode.width ); @@ -229,7 +229,7 @@ define( require => { } // determine if the coefficient is visible, since this will be used several times below - var coefficientVisible = Math.abs( this.coinTerm.totalCountProperty.get() ) !== 1 || showAllCoefficients; + const coefficientVisible = Math.abs( this.coinTerm.totalCountProperty.get() ) !== 1 || showAllCoefficients; // update the term text, which only changes if it switches from positive to negative this.termText.setScaleMagnitude( scale ); @@ -250,7 +250,7 @@ define( require => { this.termText.visible = viewMode === ViewMode.VARIABLES && !showVariableValues; // term value text, which shows the variable values and operators such as exponents - var termValueText = this.coinTerm.termValueTextProperty.value; + let termValueText = this.coinTerm.termValueTextProperty.value; if ( this.coinTerm.totalCountProperty.get() === -1 && !showAllCoefficients && this.coinTerm.showMinusSignWhenNegativeProperty.get() ) { // prepend a minus sign @@ -292,7 +292,7 @@ define( require => { } // update the card background - var targetCardHeight = viewMode === ViewMode.COINS ? + const targetCardHeight = viewMode === ViewMode.COINS ? AbstractCoinTermNode.BACKGROUND_CARD_HEIGHT_COIN_MODE : AbstractCoinTermNode.BACKGROUND_CARD_HEIGHT_TEXT_MODE; this.cardLikeBackground.setRectBounds( this.coinAndTextRootNode.visibleLocalBounds.dilatedXY( @@ -318,14 +318,14 @@ define( require => { */ updateCoinFlipAnimations: function( showCoinValues ) { - var self = this; + const self = this; if ( this.viewModeProperty.get() === ViewMode.COINS ) { if ( this.activeFlipAnimation ) { this.activeFlipAnimation.stop(); } - var targetFlipState = showCoinValues ? 1 : 0; + const targetFlipState = showCoinValues ? 1 : 0; if ( self.flipStateProperty.get() !== targetFlipState ) { @@ -363,9 +363,9 @@ define( require => { // Use the y scale as the 'full scale' value. This assumes that the two images are the same size, that they are // equal in width and height when unscaled, and that the Y dimension is not being scaled. - var fullScale = this.coinFrontImageNode.getScaleVector().y; + const fullScale = this.coinFrontImageNode.getScaleVector().y; - var centerX = this.coinTerm.coinRadius; + const centerX = this.coinTerm.coinRadius; // set the width of the front image this.coinFrontImageNode.setScaleMagnitude( diff --git a/js/common/view/VariableValueControl.js b/js/common/view/VariableValueControl.js index 82a111b3..da4f4159 100644 --- a/js/common/view/VariableValueControl.js +++ b/js/common/view/VariableValueControl.js @@ -28,12 +28,12 @@ define( require => { }, options ); // convenience vars to make the code below more readable - var xValueProperty = options.xTermValueProperty; - var yValueProperty = options.yTermValueProperty; - var zValueProperty = options.zTermValueProperty; + const xValueProperty = options.xTermValueProperty; + const yValueProperty = options.yTermValueProperty; + const zValueProperty = options.zTermValueProperty; // button that will be used to restore the default values - var restoreDefaultsButton = new ResetButton( { + const restoreDefaultsButton = new ResetButton( { baseColor: '#f5f5f5', arrowColor: 'black', radius: 16, @@ -58,8 +58,8 @@ define( require => { zValueProperty && zValueProperty.link( updateRestoreButtonEnabledState ); // create the tweaker controls - var controls = []; - var tweakerOptions = { minValue: options.minValue, maxValue: options.maxValue }; + const controls = []; + const tweakerOptions = { minValue: options.minValue, maxValue: options.maxValue }; xValueProperty && controls.push( new LeftRightNumberSpinner( xValueProperty, 'x', diff --git a/js/explore/EEExploreScreen.js b/js/explore/EEExploreScreen.js index 8cf3bf99..8558985b 100644 --- a/js/explore/EEExploreScreen.js +++ b/js/explore/EEExploreScreen.js @@ -27,7 +27,7 @@ define( require => { */ function EEExploreScreen() { - var options = { + const options = { name: exploreString, backgroundColorProperty: new Property( EESharedConstants.NON_GAME_SCREENS_BACKGROUND_COLOR ), homeScreenIcon: new EEExploreIconNode() diff --git a/js/explore/view/EEExploreIconNode.js b/js/explore/view/EEExploreIconNode.js index 58f5e445..674bcca0 100644 --- a/js/explore/view/EEExploreIconNode.js +++ b/js/explore/view/EEExploreIconNode.js @@ -21,11 +21,11 @@ define( require => { const Text = require( 'SCENERY/nodes/Text' ); // constants - var ICON_SIZE = Screen.MINIMUM_HOME_SCREEN_ICON_SIZE; - var FONT_SIZE = 84; - var NORMAL_FONT = new PhetFont( { size: FONT_SIZE } ); - var ITALIC_FONT = new MathSymbolFont( FONT_SIZE ); - var BACKGROUND_COLOR = EESharedConstants.NON_GAME_SCREENS_BACKGROUND_COLOR; + const ICON_SIZE = Screen.MINIMUM_HOME_SCREEN_ICON_SIZE; + const FONT_SIZE = 84; + const NORMAL_FONT = new PhetFont( { size: FONT_SIZE } ); + const ITALIC_FONT = new MathSymbolFont( FONT_SIZE ); + const BACKGROUND_COLOR = EESharedConstants.NON_GAME_SCREENS_BACKGROUND_COLOR; /** * @constructor @@ -36,7 +36,7 @@ define( require => { Rectangle.call( this, 0, 0, ICON_SIZE.width, ICON_SIZE.height, { fill: BACKGROUND_COLOR } ); // add the nodes - var equationNode = new Node(); + const equationNode = new Node(); equationNode.addChild( new Text( '2', { font: NORMAL_FONT } ) ); equationNode.addChild( new Text( '(4)', { font: ITALIC_FONT, left: equationNode.width } ) ); equationNode.addChild( new Text( MathSymbols.PLUS, { font: NORMAL_FONT, left: equationNode.width + 25 } ) ); diff --git a/js/expression-exchange-main.js b/js/expression-exchange-main.js index 839db415..6178b847 100644 --- a/js/expression-exchange-main.js +++ b/js/expression-exchange-main.js @@ -20,7 +20,7 @@ define( require => { const expressionExchangeTitleString = require( 'string!EXPRESSION_EXCHANGE/expression-exchange.title' ); // credits - var simOptions = { + const simOptions = { credits: { leadDesign: 'Amanda McGarry', softwareDevelopment: 'John Blanco', @@ -33,7 +33,7 @@ define( require => { // launch the sim SimLauncher.launch( function() { - var sim = new Sim( + const sim = new Sim( expressionExchangeTitleString, [ new EEBasicsScreen(), diff --git a/js/game/EEGameScreen.js b/js/game/EEGameScreen.js index 8e21ec86..940b0b75 100644 --- a/js/game/EEGameScreen.js +++ b/js/game/EEGameScreen.js @@ -26,7 +26,7 @@ define( require => { */ function EEGameScreen() { - var options = { + const options = { name: gameString, backgroundColorProperty: new Property( EESharedConstants.GAME_SCREEN_BACKGROUND_COLOR ), homeScreenIcon: new EEGameIconNode() diff --git a/js/game/model/EEChallengeDescriptors.js b/js/game/model/EEChallengeDescriptors.js index c9c8eb31..e8281546 100644 --- a/js/game/model/EEChallengeDescriptors.js +++ b/js/game/model/EEChallengeDescriptors.js @@ -16,7 +16,7 @@ define( require => { // The challenge set, organized as a 2D array where the first dimension is level, the second is challenge number. // The challenge descriptions are organized as a set of expressions that the user should construct and collect and // a description of the contents of the coin term box. - var challengeSets = [ + const challengeSets = [ // level 1 challenges [ @@ -556,7 +556,7 @@ define( require => { /** * static object with methods for accessing the challenge descriptors defined above */ - var EEChallengeDescriptors = { + const EEChallengeDescriptors = { /** * get a challenge descriptor for the specified level @@ -574,7 +574,7 @@ define( require => { * @public */ shuffleChallenges: function() { - for ( var i = 0; i < challengeSets.length; i++ ) { + for ( let i = 0; i < challengeSets.length; i++ ) { challengeSets[ i ] = phet.joist.random.shuffle( challengeSets[ i ] ); } }, diff --git a/js/game/model/EECollectionArea.js b/js/game/model/EECollectionArea.js index 1752515c..37be2f0d 100644 --- a/js/game/model/EECollectionArea.js +++ b/js/game/model/EECollectionArea.js @@ -18,7 +18,7 @@ define( require => { const Vector2 = require( 'DOT/Vector2' ); // constants - var REJECTED_ITEM_DISTANCE = 20; // empirically determined + const REJECTED_ITEM_DISTANCE = 20; // empirically determined /** * @param {number} x @@ -69,10 +69,10 @@ define( require => { assert && assert( this.expressionDescriptionProperty.get(), 'no expression description for collection area' ); // bounds used for positioning of the expression - var expressionBounds; + let expressionBounds; // results of the attempt to collect this expression - var collected; + let collected; if ( this.isEmpty() && this.expressionDescriptionProperty.get().expressionMatches( expression ) ) { @@ -115,10 +115,10 @@ define( require => { assert && assert( this.expressionDescriptionProperty.get(), 'no expression description for collection area' ); // get bounds for positioning of the coin term - var coinTermViewBounds = coinTerm.getViewBounds(); + const coinTermViewBounds = coinTerm.getViewBounds(); // results of the attempt to collect this expression - var collected; + let collected; if ( this.isEmpty() && this.expressionDescriptionProperty.get().coinTermMatches( coinTerm ) ) { @@ -154,9 +154,9 @@ define( require => { * @public */ ejectCollectedItem: function() { - var collectedItem = this.collectedItemProperty.get(); - var collectedItemBounds; - var yDestination; + const collectedItem = this.collectedItemProperty.get(); + let collectedItemBounds; + let yDestination; // the item's collected state must be updated first, since this can sometimes cause its bounds to change collectedItem.collectedProperty.set( false ); diff --git a/js/game/model/EEGameLevel.js b/js/game/model/EEGameLevel.js index a70ef6bc..0364c67f 100644 --- a/js/game/model/EEGameLevel.js +++ b/js/game/model/EEGameLevel.js @@ -20,10 +20,10 @@ define( require => { const ViewMode = require( 'EXPRESSION_EXCHANGE/common/enum/ViewMode' ); // constants - var EXPRESSION_COLLECTION_AREA_X_OFFSET = 750; - var EXPRESSION_COLLECTION_AREA_INITIAL_Y_OFFSET = 50; - var EXPRESSION_COLLECTION_AREA_Y_SPACING = 60; - var NUM_EXPRESSION_COLLECTION_AREAS = 3; + const EXPRESSION_COLLECTION_AREA_X_OFFSET = 750; + const EXPRESSION_COLLECTION_AREA_INITIAL_Y_OFFSET = 50; + const EXPRESSION_COLLECTION_AREA_Y_SPACING = 60; + const NUM_EXPRESSION_COLLECTION_AREAS = 3; /** * @param {number} levelNumber @@ -43,7 +43,7 @@ define( require => { simplifyNegativesDefault: true } ); - var self = this; + const self = this; this.levelNumber = levelNumber; // @public (read-only) {number} this.currentChallengeNumber = 0; // {number} @private @@ -75,7 +75,7 @@ define( require => { // helper function to update the score when items are collected or un-collected function updateScore() { - var score = 0; + let score = 0; self.collectionAreas.forEach( function( collectionArea ) { if ( !collectionArea.isEmpty() ) { score++; @@ -85,14 +85,14 @@ define( require => { } // create a property that indicate whether undo of collection areas should be allowed - var undoAllowedProperty = new DerivedProperty( [ this.scoreProperty ], function( score ) { + const undoAllowedProperty = new DerivedProperty( [ this.scoreProperty ], function( score ) { return score < NUM_EXPRESSION_COLLECTION_AREAS; } ); // initialize the collection areas - var collectionAreaYPos = EXPRESSION_COLLECTION_AREA_INITIAL_Y_OFFSET; + let collectionAreaYPos = EXPRESSION_COLLECTION_AREA_INITIAL_Y_OFFSET; _.times( NUM_EXPRESSION_COLLECTION_AREAS, function() { - var collectionArea = new EECollectionArea( + const collectionArea = new EECollectionArea( EXPRESSION_COLLECTION_AREA_X_OFFSET, collectionAreaYPos, allowedRepresentations === AllowedRepresentations.COINS_ONLY ? ViewMode.COINS : ViewMode.VARIABLES, diff --git a/js/game/model/EEGameModel.js b/js/game/model/EEGameModel.js index 2aafd853..9a0ee259 100644 --- a/js/game/model/EEGameModel.js +++ b/js/game/model/EEGameModel.js @@ -18,17 +18,17 @@ define( require => { const Property = require( 'AXON/Property' ); // constants - var NUMBER_OF_LEVELS = EEQueryParameters.minimalGameLevels ? 2 : 8; - var CHALLENGES_PER_LEVEL = 3; - var POINTS_PER_CHALLENGE = 1; - var MAX_SCORE_PER_LEVEL = CHALLENGES_PER_LEVEL * POINTS_PER_CHALLENGE; + const NUMBER_OF_LEVELS = EEQueryParameters.minimalGameLevels ? 2 : 8; + const CHALLENGES_PER_LEVEL = 3; + const POINTS_PER_CHALLENGE = 1; + const MAX_SCORE_PER_LEVEL = CHALLENGES_PER_LEVEL * POINTS_PER_CHALLENGE; /** * @constructor */ function EEGameModel() { - var self = this; + const self = this; //------------------------------------------------------------------------ // properties @@ -54,7 +54,7 @@ define( require => { // @public (read-only) {Array.} - models for each of the game levels this.gameLevels = []; _.times( NUMBER_OF_LEVELS, function( level ) { - var gameLevel = new EEGameLevel( + const gameLevel = new EEGameLevel( level, level < 3 ? AllowedRepresentations.COINS_ONLY : AllowedRepresentations.VARIABLES_ONLY ); diff --git a/js/game/model/ExpressionDescription.js b/js/game/model/ExpressionDescription.js index e7f2dd54..8520c728 100644 --- a/js/game/model/ExpressionDescription.js +++ b/js/game/model/ExpressionDescription.js @@ -26,7 +26,7 @@ define( require => { this.expressionString = expressionString; // remove all spaces from the expression - var noWhitespaceExpressionString = expressionString.replace( /\s/g, '' ); + const noWhitespaceExpressionString = expressionString.replace( /\s/g, '' ); // @public (read-only) {Array.} - Description of the expression as an ordered set of terms that contain the // coefficient and the coin term ID @@ -48,9 +48,9 @@ define( require => { * @returns {Array.} */ function interpretExpression( expressionString, currentIndex ) { - var terms = []; - var termExtractionResult = null; - var subExpressionInterpretationResult = null; + let terms = []; + let termExtractionResult = null; + let subExpressionInterpretationResult = null; while ( currentIndex < expressionString.length ) { termExtractionResult = extractTerm( expressionString, currentIndex ); currentIndex = termExtractionResult.newIndex; @@ -82,7 +82,7 @@ define( require => { subExpressionInterpretationResult = interpretExpression( expressionString, currentIndex ); // the previously extracted term is now used to multiply the extracted expression (distributive property) - var multipliedSubExpression = _.map( subExpressionInterpretationResult.terms, function( term ) { + const multipliedSubExpression = _.map( subExpressionInterpretationResult.terms, function( term ) { return term.times( termExtractionResult.term ); } ); @@ -90,7 +90,7 @@ define( require => { multipliedSubExpression.forEach( function( multipliedSubExpressionTerm ) { // extract terms from the term array that match this one - there should be zero or one, no more - var matchingTermsArray = _.filter( terms, function( term ) { + const matchingTermsArray = _.filter( terms, function( term ) { return term.coinTermTypeID === multipliedSubExpressionTerm.coinTermTypeID; } ); @@ -98,7 +98,7 @@ define( require => { assert && assert( matchingTermsArray.length <= 1, 'error - terms array was not properly reduced' ); if ( matchingTermsArray.length === 1 ) { - var matchingTerm = matchingTermsArray[ 0 ]; + const matchingTerm = matchingTermsArray[ 0 ]; matchingTerm.coefficient += multipliedSubExpressionTerm.coefficient; if ( matchingTerm.coefficient === 0 ) { @@ -125,7 +125,7 @@ define( require => { }; } - var stringToTermTypeMap = { + const stringToTermTypeMap = { '': CoinTermTypeID.CONSTANT, 'x^2*y2': CoinTermTypeID.X_SQUARED_TIMES_Y_SQUARED, 'x^2': CoinTermTypeID.X_SQUARED, @@ -146,7 +146,7 @@ define( require => { function extractTerm( expressionString, index ) { // handle the sign in front of the coefficient, if present - var signMultiplier = 1; + let signMultiplier = 1; if ( expressionString[ index ] === '-' ) { signMultiplier = -1; index++; @@ -155,7 +155,7 @@ define( require => { index++; } - var coefficientString = ''; + let coefficientString = ''; // pull out any numbers, and note that this assumes only integers are used as coefficients while ( !isNaN( parseInt( expressionString.charAt( index ), 10 ) ) ) { @@ -163,14 +163,14 @@ define( require => { } // determine the numerical value of the coefficient - var coefficient = ( coefficientString.length > 0 ? parseInt( coefficientString, 10 ) : 1 ) * signMultiplier; + const coefficient = ( coefficientString.length > 0 ? parseInt( coefficientString, 10 ) : 1 ) * signMultiplier; // determine where the term ends within the expression string - var nextPlusSignIndex = expressionString.indexOf( '+', index ); - var nextMinusSignIndex = expressionString.indexOf( '-', index ); - var nextOpenParenIndex = expressionString.indexOf( '(', index ); - var nextCloseParenIndex = expressionString.indexOf( ')', index ); - var termEndIndex = Math.min( + const nextPlusSignIndex = expressionString.indexOf( '+', index ); + const nextMinusSignIndex = expressionString.indexOf( '-', index ); + const nextOpenParenIndex = expressionString.indexOf( '(', index ); + const nextCloseParenIndex = expressionString.indexOf( ')', index ); + const termEndIndex = Math.min( nextPlusSignIndex > 0 ? nextPlusSignIndex : Number.POSITIVE_INFINITY, nextMinusSignIndex > 0 ? nextMinusSignIndex : Number.POSITIVE_INFINITY, nextOpenParenIndex > 0 ? nextOpenParenIndex : Number.POSITIVE_INFINITY, @@ -179,10 +179,10 @@ define( require => { ); // extract the string that represents the term - var termString = expressionString.substring( index, termEndIndex ).toLowerCase(); + const termString = expressionString.substring( index, termEndIndex ).toLowerCase(); // get the coin term type - var coinTermTypeID = stringToTermTypeMap[ termString ]; + const coinTermTypeID = stringToTermTypeMap[ termString ]; return { term: new Term( coefficient, coinTermTypeID ), @@ -204,7 +204,7 @@ define( require => { // count the totals of the coin term types in the provided expression - var expressionCoinTermCounts = {}; // maps coin term types (CoinTermTypeID) to numbers of each in the expression + const expressionCoinTermCounts = {}; // maps coin term types (CoinTermTypeID) to numbers of each in the expression expression.coinTerms.forEach( function( coinTerm ) { if ( expressionCoinTermCounts[ coinTerm.typeID ] ) { expressionCoinTermCounts[ coinTerm.typeID ] += coinTerm.totalCountProperty.get(); @@ -221,7 +221,7 @@ define( require => { } } ); - var expressionCoinTermCountKeys = Object.keys( expressionCoinTermCounts ); + const expressionCoinTermCountKeys = Object.keys( expressionCoinTermCounts ); // Does the expression have the same number of coin term types as the description? if ( this.terms.length !== expressionCoinTermCountKeys.length ) { @@ -229,9 +229,9 @@ define( require => { } // Do the counts match? Note that this assumes the expression description is reduced. - for ( var i = 0; i < this.terms.length; i++ ) { - var termDescriptor = this.terms[ i ]; - var expressionCount = expressionCoinTermCounts[ termDescriptor.coinTermTypeID ]; + for ( let i = 0; i < this.terms.length; i++ ) { + const termDescriptor = this.terms[ i ]; + const expressionCount = expressionCoinTermCounts[ termDescriptor.coinTermTypeID ]; if ( !expressionCount || expressionCount !== termDescriptor.coefficient ) { return false; } diff --git a/js/game/model/Term.js b/js/game/model/Term.js index 71fe11b1..717fd94b 100644 --- a/js/game/model/Term.js +++ b/js/game/model/Term.js @@ -38,7 +38,7 @@ define( require => { * @public */ times: function( term ) { - var result = new Term( this.coefficient * term.coefficient, null ); + const result = new Term( this.coefficient * term.coefficient, null ); if ( this.coinTermTypeID === CoinTermTypeID.CONSTANT ) { result.coinTermTypeID = term.coinTermTypeID; } diff --git a/js/game/view/EECollectionAreaNode.js b/js/game/view/EECollectionAreaNode.js index 123718cb..d35a7ca2 100644 --- a/js/game/view/EECollectionAreaNode.js +++ b/js/game/view/EECollectionAreaNode.js @@ -14,18 +14,18 @@ define( require => { const Rectangle = require( 'SCENERY/nodes/Rectangle' ); // constants - var CORNER_RADIUS = 4; + const CORNER_RADIUS = 4; /** * @param {EECollectionArea} collectionArea * @constructor */ function EECollectionAreaNode( collectionArea ) { - var self = this; + const self = this; Node.call( this ); // create the 'halo' that will turn on as a hint that the user can drop something into the collection area - var halo = Rectangle.bounds( collectionArea.bounds, { + const halo = Rectangle.bounds( collectionArea.bounds, { lineWidth: 9, stroke: '#66FF33', cornerRadius: CORNER_RADIUS @@ -36,7 +36,7 @@ define( require => { collectionArea.haloActiveProperty.linkAttribute( halo, 'visible' ); // create the basic rectangular background - var collectionAreaRectangle = Rectangle.bounds( collectionArea.bounds, { + const collectionAreaRectangle = Rectangle.bounds( collectionArea.bounds, { fill: 'white', stroke: 'black', cornerRadius: CORNER_RADIUS @@ -44,7 +44,7 @@ define( require => { this.addChild( collectionAreaRectangle ); // add the expression description representation, which will update if the expression description changes - var expressionDescriptionNode = null; + let expressionDescriptionNode = null; collectionArea.expressionDescriptionProperty.link( function( expressionDescription ) { // remove the previous expression description node, if present diff --git a/js/game/view/EEGameIconNode.js b/js/game/view/EEGameIconNode.js index 8ef880fd..af33fd32 100644 --- a/js/game/view/EEGameIconNode.js +++ b/js/game/view/EEGameIconNode.js @@ -24,11 +24,11 @@ define( require => { const Text = require( 'SCENERY/nodes/Text' ); // constants - var BACKGROUND_COLOR = EESharedConstants.GAME_SCREEN_BACKGROUND_COLOR; - var ICON_SIZE = Screen.MINIMUM_HOME_SCREEN_ICON_SIZE; - var COIN_SPACING = ICON_SIZE.width * 0.02; // empirically determined - var TEXT_FONT = new PhetFont( 50 ); - var PLUS_SIGN_X_MARGIN = 10; + const BACKGROUND_COLOR = EESharedConstants.GAME_SCREEN_BACKGROUND_COLOR; + const ICON_SIZE = Screen.MINIMUM_HOME_SCREEN_ICON_SIZE; + const COIN_SPACING = ICON_SIZE.width * 0.02; // empirically determined + const TEXT_FONT = new PhetFont( 50 ); + const PLUS_SIGN_X_MARGIN = 10; /** * @constructor @@ -39,7 +39,7 @@ define( require => { Rectangle.call( this, 0, 0, ICON_SIZE.width, ICON_SIZE.height, { fill: BACKGROUND_COLOR } ); // created a rounded rectangle that looks like a card - var cardBackground = new Rectangle( 0, 0, ICON_SIZE.width / 2, ICON_SIZE.height / 2, { + const cardBackground = new Rectangle( 0, 0, ICON_SIZE.width / 2, ICON_SIZE.height / 2, { x: ICON_SIZE.width * 0.1, y: ICON_SIZE.height * 0.1, fill: 'white', @@ -51,8 +51,8 @@ define( require => { this.addChild( cardBackground ); // create a "coin equation" that includes coins and numbers - var coinRadius = ICON_SIZE.width * 0.04; // empirically determined - var coinEquation = new HBox( { + const coinRadius = ICON_SIZE.width * 0.04; // empirically determined + const coinEquation = new HBox( { children: [ new Text( '2', { font: TEXT_FONT } ), CoinNodeFactory.createIconNode( CoinTermTypeID.X, coinRadius ), @@ -70,8 +70,8 @@ define( require => { cardBackground.addChild( coinEquation ); // create and add coins next to the card - var topCoinRowCenterY = cardBackground.top + cardBackground.height * 0.3; - var secondCoinRowCenterY = cardBackground.top + cardBackground.height * 0.7; + const topCoinRowCenterY = cardBackground.top + cardBackground.height * 0.3; + const secondCoinRowCenterY = cardBackground.top + cardBackground.height * 0.7; this.addChild( CoinNodeFactory.createIconNode( CoinTermTypeID.X, coinRadius, { left: cardBackground.right + COIN_SPACING, centerY: topCoinRowCenterY diff --git a/js/game/view/EEGameLevelIconFactory.js b/js/game/view/EEGameLevelIconFactory.js index 158c94d1..f404c12b 100644 --- a/js/game/view/EEGameLevelIconFactory.js +++ b/js/game/view/EEGameLevelIconFactory.js @@ -18,12 +18,12 @@ define( require => { const Text = require( 'SCENERY/nodes/Text' ); // constants - var CARD_CORNER_ROUNDING = 4; - var NUMBER_LABEL_FONT = new PhetFont( 26 ); // size empirically determined - var CARD_STAGGER_OFFSET = 1.5; // empirically determined, same in x and y directions - var ICON_WIDTH = 40; - var CARD_ICON_HEIGHT = 40; - var COIN_RADIUS = 20; // empirically determined + const CARD_CORNER_ROUNDING = 4; + const NUMBER_LABEL_FONT = new PhetFont( 26 ); // size empirically determined + const CARD_STAGGER_OFFSET = 1.5; // empirically determined, same in x and y directions + const ICON_WIDTH = 40; + const CARD_ICON_HEIGHT = 40; + const COIN_RADIUS = 20; // empirically determined /** * helper function for creating coin-image-based icons @@ -34,10 +34,10 @@ define( require => { function createCoinIcon( coinTermTypeID, value ) { // create the coin image node - var imageNode = CoinNodeFactory.createImageNode( coinTermTypeID, COIN_RADIUS, false ); + const imageNode = CoinNodeFactory.createImageNode( coinTermTypeID, COIN_RADIUS, false ); // add the label - var label = new Text( value, { + const label = new Text( value, { font: NUMBER_LABEL_FONT, centerX: imageNode.width / 2, centerY: imageNode.height / 2 @@ -53,10 +53,10 @@ define( require => { * @returns {Node} */ function createCardStackIcon( numberOnStack, numberOfAdditionalCards ) { - var rootNode = new Node(); - var cardWidth = ICON_WIDTH - numberOfAdditionalCards * CARD_STAGGER_OFFSET; - var cardHeight = CARD_ICON_HEIGHT - numberOfAdditionalCards * CARD_STAGGER_OFFSET; - var cards = []; + const rootNode = new Node(); + const cardWidth = ICON_WIDTH - numberOfAdditionalCards * CARD_STAGGER_OFFSET; + const cardHeight = CARD_ICON_HEIGHT - numberOfAdditionalCards * CARD_STAGGER_OFFSET; + const cards = []; // create the blank cards _.times( numberOfAdditionalCards + 1, function( cardNumber ) { @@ -88,7 +88,7 @@ define( require => { * static factory object used to create nodes that represent coins * @public */ - var EEGameLevelIconFactory = { + const EEGameLevelIconFactory = { /** * function to create a node for the specified game level @@ -98,7 +98,7 @@ define( require => { */ createIcon: function( gameLevel ) { - var icon; + let icon; switch( gameLevel ) { diff --git a/js/game/view/EEGameLevelView.js b/js/game/view/EEGameLevelView.js index a2cd2bcc..b7aef972 100644 --- a/js/game/view/EEGameLevelView.js +++ b/js/game/view/EEGameLevelView.js @@ -33,7 +33,7 @@ define( require => { const levelNumberPatternString = require( 'string!EXPRESSION_EXCHANGE/levelNumberPattern' ); // constants - var BUTTON_XY_TOUCH_DILATION = 4; + const BUTTON_XY_TOUCH_DILATION = 4; /** * @param {EEGameModel} gameModel - main model for the game @@ -45,7 +45,7 @@ define( require => { */ function EEGameLevelView( gameModel, levelModel, screenLayoutBounds, visibleBoundsProperty, gameAudioPlayer ) { - var self = this; + const self = this; Node.call( this ); @@ -56,28 +56,28 @@ define( require => { this.inViewportProperty = new Property( false ); // add an invisible background rectangle so that bounds are correct, this is needed for animation of game level views - var background = new Rectangle( screenLayoutBounds, { + const background = new Rectangle( screenLayoutBounds, { stroke: 'transparent' // increase opacity to make the outline visible if desired (for debugging) } ); this.addChild( background ); // layer where everything else should appear - var middleLayer = new Node(); + const middleLayer = new Node(); this.addChild( middleLayer ); // layer where the coin term nodes live - var coinTermLayer = new Node(); + const coinTermLayer = new Node(); this.addChild( coinTermLayer ); // layer where the dialog-ish nodes are shown - var notificationsLayer = new Node(); + const notificationsLayer = new Node(); this.addChild( notificationsLayer ); // set the bounds for coin term retrieval in the model levelModel.setRetrievalBounds( screenLayoutBounds ); // add the level label - var title = new Text( + const title = new Text( StringUtils.fillIn( levelNumberPatternString, { levelNumber: ( levelModel.levelNumber + 1 ) } ), { font: new PhetFont( 20 ), @@ -88,7 +88,7 @@ define( require => { middleLayer.addChild( title ); // add the back button - var backButton = new BackButton( { + const backButton = new BackButton( { left: screenLayoutBounds.left + 30, top: screenLayoutBounds.top + 30, listener: gameModel.returnToLevelSelection.bind( gameModel ), @@ -98,7 +98,7 @@ define( require => { middleLayer.addChild( backButton ); // add the refresh button - var refreshButton = new RefreshButton( { + const refreshButton = new RefreshButton( { iconScale: 0.7, xMargin: 9, yMargin: 7, @@ -111,7 +111,7 @@ define( require => { middleLayer.addChild( refreshButton ); // create the expression manipulation view - var expressionManipulationView = new ExpressionManipulationView( + const expressionManipulationView = new ExpressionManipulationView( levelModel, visibleBoundsProperty, { coinTermBreakApartButtonMode: 'inverted' } @@ -119,7 +119,7 @@ define( require => { coinTermLayer.addChild( expressionManipulationView ); // add the coin term creator box - var coinTermCreatorBox = null; + let coinTermCreatorBox = null; levelModel.currentChallengeProperty.link( function( currentChallenge ) { if ( coinTermCreatorBox ) { middleLayer.removeChild( coinTermCreatorBox ); @@ -138,8 +138,8 @@ define( require => { } ); // add the checkbox that allows expressions with negative values to be simplified - var boundsOfLowestCollectionArea = _.last( levelModel.collectionAreas ).bounds; - var showSubtractionCheckbox = new Checkbox( + const boundsOfLowestCollectionArea = _.last( levelModel.collectionAreas ).bounds; + const showSubtractionCheckbox = new Checkbox( new ShowSubtractionIcon(), levelModel.simplifyNegativesProperty, { @@ -154,7 +154,7 @@ define( require => { levelModel.currentChallengeProperty.link( function( currentChallenge ) { // determine whether negative values are present in this challenge - var negativesExist = false; + let negativesExist = false; currentChallenge.carouselContents.forEach( function( carouselContent ) { if ( carouselContent.minimumDecomposition < 0 ) { negativesExist = true; @@ -200,7 +200,7 @@ define( require => { // define a property that tracks whether the 'next level' node should be visible. This is done as a separate // view-only property because the logic that decides whether to show it is somewhat complex. - var showNextLevelNodeProperty = new Property( false ); + const showNextLevelNodeProperty = new Property( false ); // show the "next level" node when this level becomes completed levelModel.completedSinceLastClearProperty.link( function( currentlyCompleted ) { diff --git a/js/game/view/EEGameScreenView.js b/js/game/view/EEGameScreenView.js index 8eedc9d3..7acdd0ce 100644 --- a/js/game/view/EEGameScreenView.js +++ b/js/game/view/EEGameScreenView.js @@ -22,7 +22,7 @@ define( require => { const ScreenView = require( 'JOIST/ScreenView' ); // constants - var SCREEN_CHANGE_TIME = 1; // seconds + const SCREEN_CHANGE_TIME = 1; // seconds /** * @param {EEGameLevel} gameModel @@ -30,29 +30,29 @@ define( require => { */ function EEGameScreenView( gameModel ) { - var self = this; + const self = this; ScreenView.call( this, { layoutBounds: EESharedConstants.LAYOUT_BOUNDS } ); // @private {EEGameModel} this.gameModel = gameModel; // create the sound player for the game sounds - var gameAudioPlayer = new GameAudioPlayer(); + const gameAudioPlayer = new GameAudioPlayer(); // consolidate the level scores into an array for the level selection node - var levelScoreProperties = []; + const levelScoreProperties = []; gameModel.gameLevels.forEach( function( gameLevelModel ) { levelScoreProperties.push( gameLevelModel.scoreProperty ); } ); // create the icons used on the level selection buttons - var levelSelectionItemNodeIcons = []; + const levelSelectionItemNodeIcons = []; _.times( EEGameModel.NUMBER_OF_LEVELS, function( level ) { levelSelectionItemNodeIcons.push( EEGameLevelIconFactory.createIcon( level ) ); } ); // add the node that allows the user to choose a game level to play - var levelSelectionNode = new LevelSelectionNode( + const levelSelectionNode = new LevelSelectionNode( function( level ) { gameModel.selectLevel( level ); }, function() { gameModel.reset(); }, levelSelectionItemNodeIcons, @@ -66,12 +66,12 @@ define( require => { this.addChild( levelSelectionNode ); // currently displayed level or level selection node - var nodeInViewport = levelSelectionNode; + let nodeInViewport = levelSelectionNode; // create the game level views and add them to the main game play node this.gameLevelViews = []; gameModel.gameLevels.forEach( function( levelModel ) { - var gameLevelView = new EEGameLevelView( + const gameLevelView = new EEGameLevelView( gameModel, levelModel, self.layoutBounds, @@ -86,11 +86,11 @@ define( require => { // hook up the animations for moving between level selection and game play gameModel.currentLevelProperty.lazyLink( function( newLevel, oldLevel ) { - var slideDistance = self.visibleBoundsProperty.get().width; - var incomingViewNode = newLevel === null ? levelSelectionNode : self.gameLevelViews[ newLevel.levelNumber ]; - var outgoingViewNode = oldLevel === null ? levelSelectionNode : self.gameLevelViews[ oldLevel.levelNumber ]; - var outgoingNodeDestinationX; - var incomingNodeStartX; + const slideDistance = self.visibleBoundsProperty.get().width; + const incomingViewNode = newLevel === null ? levelSelectionNode : self.gameLevelViews[ newLevel.levelNumber ]; + const outgoingViewNode = oldLevel === null ? levelSelectionNode : self.gameLevelViews[ oldLevel.levelNumber ]; + let outgoingNodeDestinationX; + let incomingNodeStartX; // prevent interaction during animation incomingViewNode.pickable = false; @@ -111,7 +111,7 @@ define( require => { } // move out the old node - var moveOutAnimation = new Animation( { + const moveOutAnimation = new Animation( { duration: SCREEN_CHANGE_TIME, easing: Easing.CUBIC_IN_OUT, setValue: function( newXPosition ) { @@ -129,7 +129,7 @@ define( require => { moveOutAnimation.start(); // move in the new node - var moveInAnimation = new Animation( { + const moveInAnimation = new Animation( { duration: SCREEN_CHANGE_TIME, easing: Easing.CUBIC_IN_OUT, setValue: function( newXPosition ) { @@ -160,7 +160,7 @@ define( require => { * @public */ step: function( dt ) { - var currentLevel = this.gameModel.currentLevelProperty.get(); + const currentLevel = this.gameModel.currentLevelProperty.get(); if ( currentLevel !== null ) { this.gameLevelViews[ currentLevel.levelNumber ].step( dt ); } diff --git a/js/game/view/EERewardNode.js b/js/game/view/EERewardNode.js index 3dce2679..0524245e 100644 --- a/js/game/view/EERewardNode.js +++ b/js/game/view/EERewardNode.js @@ -20,19 +20,19 @@ define( require => { const Text = require( 'SCENERY/nodes/Text' ); // constants - var NUMBER_OF_NODES = 60; - var FACE_DIAMETER = 50; - var COIN_RADIUS = 22; - var STAR_OUTER_RADIUS = 20; - var STAR_INNER_RADIUS = STAR_OUTER_RADIUS / 2; - var VARIABLE_FONT = new MathSymbolFont( 36 ); + const NUMBER_OF_NODES = 60; + const FACE_DIAMETER = 50; + const COIN_RADIUS = 22; + const STAR_OUTER_RADIUS = 20; + const STAR_INNER_RADIUS = STAR_OUTER_RADIUS / 2; + const VARIABLE_FONT = new MathSymbolFont( 36 ); /** * @constructor */ function EERewardNode() { - var nodes = []; + const nodes = []; // add nodes that look like smiley faces, stars, and variables nodes.push( new FaceNode( FACE_DIAMETER ) ); diff --git a/js/game/view/ExpressionDescriptionNode.js b/js/game/view/ExpressionDescriptionNode.js index 494ced0b..5b597c8d 100644 --- a/js/game/view/ExpressionDescriptionNode.js +++ b/js/game/view/ExpressionDescriptionNode.js @@ -23,12 +23,12 @@ define( require => { const ViewMode = require( 'EXPRESSION_EXCHANGE/common/enum/ViewMode' ); // constants - var COIN_ICON_RADIUS = 10; - var COIN_EXPRESSION_FONT = new PhetFont( 22 ); - var EXPRESSION_FONT_FOR_NON_VARIABLE = new PhetFont( 22 ); - var EXPRESSION_FONT_FOR_VARIABLES = new MathSymbolFont( 24 ); - var SUP_SCALE = 0.65; // empirically determined to look good on the most platforms - var SUB_SUP_OPTIONS = { font: EXPRESSION_FONT_FOR_VARIABLES, supScale: SUP_SCALE }; + const COIN_ICON_RADIUS = 10; + const COIN_EXPRESSION_FONT = new PhetFont( 22 ); + const EXPRESSION_FONT_FOR_NON_VARIABLE = new PhetFont( 22 ); + const EXPRESSION_FONT_FOR_VARIABLES = new MathSymbolFont( 24 ); + const SUP_SCALE = 0.65; // empirically determined to look good on the most platforms + const SUB_SUP_OPTIONS = { font: EXPRESSION_FONT_FOR_VARIABLES, supScale: SUP_SCALE }; /** * @param {ExpressionDescription} expressionDescription @@ -39,7 +39,7 @@ define( require => { function ExpressionDescriptionNode( expressionDescription, viewMode, options ) { HBox.call( this, { align: 'bottom' } ); - var self = this; + const self = this; if ( viewMode === ViewMode.COINS ) { @@ -49,12 +49,12 @@ define( require => { // add coefficient if needed if ( expressionTerm.coefficient > 1 ) { - var coefficientNode = new Text( expressionTerm.coefficient, { font: COIN_EXPRESSION_FONT } ); + const coefficientNode = new Text( expressionTerm.coefficient, { font: COIN_EXPRESSION_FONT } ); self.addChild( coefficientNode ); } // add coin icon - var coinIconNode = CoinNodeFactory.createIconNode( + const coinIconNode = CoinNodeFactory.createIconNode( expressionTerm.coinTermTypeID, COIN_ICON_RADIUS ); @@ -62,7 +62,7 @@ define( require => { // add plus symbol if not at end of expression if ( index < expressionDescription.terms.length - 1 ) { - var plusSign = new Text( ' ' + MathSymbols.PLUS + ' ', { font: COIN_EXPRESSION_FONT } ); + const plusSign = new Text( ' ' + MathSymbols.PLUS + ' ', { font: COIN_EXPRESSION_FONT } ); self.addChild( plusSign ); } @@ -74,10 +74,10 @@ define( require => { // Go through the expression string, turning the various pieces into nodes. The 'terms' field of the expression // description can't be used here because it is the returned version of the expression. - var expressionStringIndex = 0; + let expressionStringIndex = 0; while ( expressionStringIndex < expressionDescription.expressionString.length ) { - var expressionFragmentInfo = createExpressionFragment( + const expressionFragmentInfo = createExpressionFragment( expressionDescription.expressionString, expressionStringIndex ); @@ -99,11 +99,11 @@ define( require => { function createVariableExpressionFragment( expressionString, startIndex ) { // error checking - var firstChar = expressionString.charAt( startIndex ); + const firstChar = expressionString.charAt( startIndex ); assert && assert( firstChar === 'x' || firstChar === 'y' || firstChar === 'z', 'unexpected first char of string' ); - var node = null; - var charsUsed = 0; + let node = null; + let charsUsed = 0; // identify the expression to be created based on a finite set of those supported if ( expressionString.indexOf( 'x^2', startIndex ) === startIndex ) { @@ -149,8 +149,8 @@ define( require => { } function createNonVariableExpressionFragment( expressionString, startIndex ) { - var fragmentString = ''; - var index = startIndex; + let fragmentString = ''; + let index = startIndex; while ( expressionString.charAt( index ) !== 'x' && expressionString.charAt( index ) !== 'y' && expressionString.charAt( index ) !== 'z' && @@ -176,8 +176,8 @@ define( require => { */ function createExpressionFragment( expressionString, index ) { - var expressionFragment; - var nextChar = expressionString.charAt( index ); + let expressionFragment; + const nextChar = expressionString.charAt( index ); if ( nextChar === 'x' || nextChar === 'y' || nextChar === 'z' ) { expressionFragment = createVariableExpressionFragment( expressionString, index ); } diff --git a/js/game/view/LevelSelectionNode.js b/js/game/view/LevelSelectionNode.js index c852b1c2..3579643c 100644 --- a/js/game/view/LevelSelectionNode.js +++ b/js/game/view/LevelSelectionNode.js @@ -61,7 +61,7 @@ define( require => { ); // title - var title = new Text( options.titleString, { font: new PhetFont( 30 ), maxWidth: options.maxTitleWidth } ); + const title = new Text( options.titleString, { font: new PhetFont( 30 ), maxWidth: options.maxTitleWidth } ); this.addChild( title ); // add the buttons @@ -69,8 +69,8 @@ define( require => { return function() { startLevelFunction( level ); }; } - var buttons = new Array( options.numLevels ); - for ( var i = 0; i < options.numLevels; i++ ) { + const buttons = new Array( options.numLevels ); + for ( let i = 0; i < options.numLevels; i++ ) { buttons[ i ] = new LevelSelectionButton( iconNodes[ i ], scores[ i ], @@ -88,22 +88,22 @@ define( require => { } // Reset button. - var resetButton = new ResetAllButton( { + const resetButton = new ResetAllButton( { listener: resetFunction, radius: EESharedConstants.RESET_ALL_BUTTON_RADIUS } ); this.addChild( resetButton ); // Layout - var numColumns = options.numLevels / options.numButtonRows; - var buttonSpacingX = buttons[ 0 ].width * 1.2; // Note: Assumes all buttons are the same size. - var buttonSpacingY = buttons[ 0 ].height * 1.2; // Note: Assumes all buttons are the same size. - var initialLayoutBounds = options.layoutBoundsProperty.get(); - var firstButtonOrigin = new Vector2( initialLayoutBounds.width / 2 - (numColumns - 1) * buttonSpacingX / 2, + const numColumns = options.numLevels / options.numButtonRows; + const buttonSpacingX = buttons[ 0 ].width * 1.2; // Note: Assumes all buttons are the same size. + const buttonSpacingY = buttons[ 0 ].height * 1.2; // Note: Assumes all buttons are the same size. + const initialLayoutBounds = options.layoutBoundsProperty.get(); + const firstButtonOrigin = new Vector2( initialLayoutBounds.width / 2 - (numColumns - 1) * buttonSpacingX / 2, initialLayoutBounds.height * 0.5 - ((options.numButtonRows - 1) * buttonSpacingY) / 2 ); - for ( var row = 0; row < options.numButtonRows; row++ ) { - for ( var col = 0; col < numColumns; col++ ) { - var buttonIndex = row * numColumns + col; + for ( let row = 0; row < options.numButtonRows; row++ ) { + for ( let col = 0; col < numColumns; col++ ) { + const buttonIndex = row * numColumns + col; buttons[ buttonIndex ].centerX = firstButtonOrigin.x + col * buttonSpacingX; buttons[ buttonIndex ].centerY = firstButtonOrigin.y + row * buttonSpacingY; } diff --git a/js/game/view/NextLevelNode.js b/js/game/view/NextLevelNode.js index 8ac8396e..e9961059 100644 --- a/js/game/view/NextLevelNode.js +++ b/js/game/view/NextLevelNode.js @@ -13,7 +13,7 @@ define( require => { const Text = require( 'SCENERY/nodes/Text' ); // constants - var FACE_DIAMETER = 150; // empirically determined + const FACE_DIAMETER = 150; // empirically determined // strings const nextString = require( 'string!EXPRESSION_EXCHANGE/next' ); @@ -27,10 +27,10 @@ define( require => { Node.call( this ); // add the smiley face - var faceNode = new FaceNode( FACE_DIAMETER ); + const faceNode = new FaceNode( FACE_DIAMETER ); this.addChild( faceNode ); - var button = new RectangularPushButton( { + const button = new RectangularPushButton( { content: new Text( nextString, { font: new PhetFont( 30 ) } ), centerX: faceNode.centerX, top: faceNode.bottom + 10, diff --git a/js/game/view/UndoButton.js b/js/game/view/UndoButton.js index 5a66e3e8..a32d8f9a 100644 --- a/js/game/view/UndoButton.js +++ b/js/game/view/UndoButton.js @@ -17,8 +17,8 @@ define( require => { const Shape = require( 'KITE/Shape' ); // constants - var MARGIN = 5; - var ICON_HEIGHT = 17; // empirically determined, controls size of icon + const MARGIN = 5; + const ICON_HEIGHT = 17; // empirically determined, controls size of icon /** * @constructor @@ -37,7 +37,7 @@ define( require => { assert && assert( !options.content, 'content should not be specified for this button' ); // create the shape for the undo arrow - var undoArrowShape = new Shape() + const undoArrowShape = new Shape() .moveTo( 0, 0 ) .lineTo( 0, ICON_HEIGHT ) .lineTo( ICON_HEIGHT, ICON_HEIGHT ) diff --git a/js/negatives/EENegativesScreen.js b/js/negatives/EENegativesScreen.js index 5f86dfb3..7ca9329b 100644 --- a/js/negatives/EENegativesScreen.js +++ b/js/negatives/EENegativesScreen.js @@ -28,7 +28,7 @@ define( require => { */ function EENegativesScreen() { - var options = { + const options = { name: negativesString, backgroundColorProperty: new Property( EESharedConstants.NON_GAME_SCREENS_BACKGROUND_COLOR ), homeScreenIcon: new EENegativesIconNode() diff --git a/js/negatives/view/EENegativesIconNode.js b/js/negatives/view/EENegativesIconNode.js index 9b930bc8..445ee928 100644 --- a/js/negatives/view/EENegativesIconNode.js +++ b/js/negatives/view/EENegativesIconNode.js @@ -22,11 +22,11 @@ define( require => { const Text = require( 'SCENERY/nodes/Text' ); // constants - var ICON_SIZE = Screen.MINIMUM_HOME_SCREEN_ICON_SIZE; - var BACKGROUND_COLOR = EESharedConstants.NON_GAME_SCREENS_BACKGROUND_COLOR; - var FONT_SIZE = 100; - var MATH_FONT = new MathSymbolFont( FONT_SIZE ); - var TEXT_FONT = new PhetFont( FONT_SIZE ); + const ICON_SIZE = Screen.MINIMUM_HOME_SCREEN_ICON_SIZE; + const BACKGROUND_COLOR = EESharedConstants.NON_GAME_SCREENS_BACKGROUND_COLOR; + const FONT_SIZE = 100; + const MATH_FONT = new MathSymbolFont( FONT_SIZE ); + const TEXT_FONT = new PhetFont( FONT_SIZE ); /** * @constructor @@ -37,7 +37,7 @@ define( require => { Rectangle.call( this, 0, 0, ICON_SIZE.width, ICON_SIZE.height, { fill: BACKGROUND_COLOR } ); // create and add the equation node - var equationNode = new HBox( { + const equationNode = new HBox( { children: [ new Text( '3', { font: TEXT_FONT } ), new RichText( 'x2', { font: MATH_FONT, supScale: 0.5 } ),