diff --git a/js/common/ForcesAndMotionBasicsQueryParameters.js b/js/common/ForcesAndMotionBasicsQueryParameters.js index 54d75222..bcc476fa 100644 --- a/js/common/ForcesAndMotionBasicsQueryParameters.js +++ b/js/common/ForcesAndMotionBasicsQueryParameters.js @@ -11,7 +11,7 @@ define( require => { // modules const forcesAndMotionBasics = require( 'FORCES_AND_MOTION_BASICS/forcesAndMotionBasics' ); - var ForcesAndMotionBasicsQueryParameters = QueryStringMachine.getAll( { + const ForcesAndMotionBasicsQueryParameters = QueryStringMachine.getAll( { // Allow hiding the item toolboxes, see https://github.com/phetsims/forces-and-motion-basics/issues/215 showItemToolboxes: { diff --git a/js/common/view/ForcesAndMotionBasicsIconFactory.js b/js/common/view/ForcesAndMotionBasicsIconFactory.js index b84d5d2a..58e3c928 100644 --- a/js/common/view/ForcesAndMotionBasicsIconFactory.js +++ b/js/common/view/ForcesAndMotionBasicsIconFactory.js @@ -21,11 +21,11 @@ define( require => { /** * Static object, not meant to be instantiated. */ - var ForcesAndMotionBasicsIconFactory = { + const ForcesAndMotionBasicsIconFactory = { speedometerIcon: function( tandem ) { // the 'speed' option requires the text and a speedometer icon - var speedometerIconValueProperty = new Property( 0 ); + const speedometerIconValueProperty = new Property( 0 ); return new GaugeNode( speedometerIconValueProperty, speedString, new Range( 0, MotionConstants.MAX_SPEED ), { radius: 67, scale: 0.2, tandem: tandem.createTandem( 'speedometerIcon' ) } ); } diff --git a/js/common/view/ForcesAndMotionBasicsLayoutBounds.js b/js/common/view/ForcesAndMotionBasicsLayoutBounds.js index 7d176766..5e9ecabb 100644 --- a/js/common/view/ForcesAndMotionBasicsLayoutBounds.js +++ b/js/common/view/ForcesAndMotionBasicsLayoutBounds.js @@ -16,7 +16,7 @@ define( require => { const Bounds2 = require( 'DOT/Bounds2' ); const forcesAndMotionBasics = require( 'FORCES_AND_MOTION_BASICS/forcesAndMotionBasics' ); - var ForcesAndMotionBasicsLayoutBounds = new Bounds2( 0, 0, 981, 604 ); + const ForcesAndMotionBasicsLayoutBounds = new Bounds2( 0, 0, 981, 604 ); forcesAndMotionBasics.register( 'ForcesAndMotionBasicsLayoutBounds', ForcesAndMotionBasicsLayoutBounds ); diff --git a/js/common/view/ReadoutArrow.js b/js/common/view/ReadoutArrow.js index 47cc4112..5ddcbc13 100644 --- a/js/common/view/ReadoutArrow.js +++ b/js/common/view/ReadoutArrow.js @@ -24,8 +24,8 @@ define( require => { const pattern0ValueUnitsNString = require( 'string!FORCES_AND_MOTION_BASICS/pattern.0valueUnitsN' ); // constants - var ARROW_HEAD_WIDTH = 50; - var ARROW_HEAD_HEIGHT = 25; + const ARROW_HEAD_WIDTH = 50; + const ARROW_HEAD_HEIGHT = 25; /** * @param label the text to show for the arrow @@ -39,7 +39,7 @@ define( require => { * @constructor */ function ReadoutArrow( label, fill, tailX, tailY, valueProperty, showValuesProperty, tandem, options ) { - var self = this; + const self = this; //Store fields options = _.extend( { labelPosition: 'top', arrowScale: 1 }, options ); @@ -61,7 +61,7 @@ define( require => { lineWidth: 1, tandem: tandem.createTandem( 'arrowNode' ) }, options ) ); - var fontOptions = { font: new PhetFont( { size: 16, weight: 'bold' } ), maxWidth: 112 }; + const fontOptions = { font: new PhetFont( { size: 16, weight: 'bold' } ), maxWidth: 112 }; this.valueNode = new Text( '110N', _.extend( { tandem: tandem.createTandem( 'valueTextNode' ) }, fontOptions ) ); this.labelNode = new Text( label, _.extend( { tandem: tandem.createTandem( 'labelTextNode' ) }, fontOptions ) ); this.addChild( this.arrowNode ); @@ -71,7 +71,7 @@ define( require => { //Update when the value changes valueProperty.link( function( value ) { self.value = value; - var roundedValue = Util.toFixed( Math.abs( value ), 0 ); + const roundedValue = Util.toFixed( Math.abs( value ), 0 ); self.valueNode.text = StringUtils.format( pattern0ValueUnitsNString, roundedValue ); self.update(); } ); @@ -104,10 +104,10 @@ define( require => { //Update the arrow graphics and text labels update: function() { - var value = this.value * this.options.arrowScale; + const value = this.value * this.options.arrowScale; //Don't show it if it is too small - var hidden = Math.abs( value ) < 1E-6; + const hidden = Math.abs( value ) < 1E-6; this.hidden = hidden; this.arrowNode.visible = !hidden; this.valueNode.visible = !hidden && this.showValuesProperty.value; @@ -115,13 +115,13 @@ define( require => { //Only change the node if visible, for performance if ( !hidden ) { - var tailX = this.tailX; - var tailY = this.tailY; - var tailWidth = ARROW_HEAD_HEIGHT; - var headWidth = ARROW_HEAD_WIDTH; + const tailX = this.tailX; + const tailY = this.tailY; + const tailWidth = ARROW_HEAD_HEIGHT; + const headWidth = ARROW_HEAD_WIDTH; //For short arrows, the head height should be half of the arrow length. See https://github.com/phetsims/scenery-phet/issues/30 - var headHeight = Math.min( Math.abs( value ) / 2, 40 ); + const headHeight = Math.min( Math.abs( value ) / 2, 40 ); this.arrowNode.shape = new ArrowShape( tailX, tailY, tailX + value, tailY, { tailWidth: tailWidth, headWidth: headWidth, headHeight: headHeight } ); @@ -167,7 +167,7 @@ define( require => { this.labelNode.bottom = isFinite( this.arrowNode.centerY ) ? this.arrowNode.centerY - this.labelNode.height * 3 / 2 : 0; if ( this.valueNode.width + 5 > this.arrowNode.width ) { - var spacingOffset = 5; + const spacingOffset = 5; if ( value > 0 ) { this.valueNode.left = this.arrowNode.right + spacingOffset; } diff --git a/js/common/view/SliderKnob.js b/js/common/view/SliderKnob.js index f4c32c36..eacf8d0f 100644 --- a/js/common/view/SliderKnob.js +++ b/js/common/view/SliderKnob.js @@ -32,23 +32,23 @@ define( require => { this.enabledProperty = options.enabledProperty; // different fill colors for when the slider is enabled or disabled - var enabledFillColor = '#2FB0E4'; - var disabledFillColor = 'gray'; - var enabledColorStop = '#B8E4FB'; - var disabledColorStop = 'white'; + const enabledFillColor = '#2FB0E4'; + const disabledFillColor = 'gray'; + const enabledColorStop = '#B8E4FB'; + const disabledColorStop = 'white'; Node.call( this, { tandem: tandem } ); //Add the rounded rectangle background - var scale = 0.8; - var width = 20 * scale; - var height = 50 * scale; - var enabledGradient = new LinearGradient( -width / 2, 0, width / 2, 0 ).addColorStop( 0, enabledFillColor ).addColorStop( 0.5, enabledColorStop ).addColorStop( 1, enabledFillColor ); - var disabledGradient = new LinearGradient( -width / 2, 0, width / 2, 0 ).addColorStop( 0, disabledFillColor ).addColorStop( 0.5, disabledColorStop ).addColorStop( 1, disabledFillColor ); + const scale = 0.8; + const width = 20 * scale; + const height = 50 * scale; + const enabledGradient = new LinearGradient( -width / 2, 0, width / 2, 0 ).addColorStop( 0, enabledFillColor ).addColorStop( 0.5, enabledColorStop ).addColorStop( 1, enabledFillColor ); + const disabledGradient = new LinearGradient( -width / 2, 0, width / 2, 0 ).addColorStop( 0, disabledFillColor ).addColorStop( 0.5, disabledColorStop ).addColorStop( 1, disabledFillColor ); - var rectangle = new Rectangle( -width / 2, 0, width, height, 10 * scale, 10 * scale, { + const rectangle = new Rectangle( -width / 2, 0, width, height, 10 * scale, 10 * scale, { fill: this.enabledProperty.value ? enabledGradient : 'gray', stroke: this.enabledProperty.value ? 'black' : 'gray', lineWidth: 2 @@ -62,8 +62,8 @@ define( require => { } ); //add a grid of grip dots - var dx = width / 5; - var dy = height / 6; + const dx = width / 5; + const dy = height / 6; this.addGripDot( -dx, height / 2 - dy ); this.addGripDot( dx, height / 2 - dy ); this.addGripDot( -dx, height / 2 ); @@ -80,8 +80,8 @@ define( require => { return inherit( Node, SliderKnob, { addGripDot: function( x, y ) { - var radius = 1.8; - var stroke = new LinearGradient( -radius, -radius, radius * 2, radius * 2 ).addColorStop( 0, 'black' ).addColorStop( 0.5, '#56889F' ).addColorStop( 1, 'white' ); + const radius = 1.8; + const stroke = new LinearGradient( -radius, -radius, radius * 2, radius * 2 ).addColorStop( 0, 'black' ).addColorStop( 0.5, '#56889F' ).addColorStop( 1, 'white' ); this.addChild( new Circle( radius, { x: x, y: y, diff --git a/js/forces-and-motion-basics-main.js b/js/forces-and-motion-basics-main.js index 8a30f85e..5746510a 100644 --- a/js/forces-and-motion-basics-main.js +++ b/js/forces-and-motion-basics-main.js @@ -32,9 +32,9 @@ define( require => { const netForceString = require( 'string!FORCES_AND_MOTION_BASICS/netForce' ); // constants - var tandem = Tandem.rootTandem; + const tandem = Tandem.rootTandem; - var simOptions = { + const simOptions = { credits: { leadDesign: 'Ariel Paul, Noah Podolefsky', graphicArts: 'Mariah Hermsmeyer, Sharon Siman-Tov', @@ -47,15 +47,15 @@ define( require => { SimLauncher.launch( function() { - var netForceScreenTandem = tandem.createTandem( 'netForceScreen' ); - var motionScreenTandem = tandem.createTandem( 'motionScreen' ); - var frictionScreenTandem = tandem.createTandem( 'frictionScreen' ); - var accelerationScreenTandem = tandem.createTandem( 'accelerationScreen' ); + const netForceScreenTandem = tandem.createTandem( 'netForceScreen' ); + const motionScreenTandem = tandem.createTandem( 'motionScreen' ); + const frictionScreenTandem = tandem.createTandem( 'frictionScreen' ); + const accelerationScreenTandem = tandem.createTandem( 'accelerationScreen' ); //Provide the screen names as named fields so they can be easily accessed dynamically, for API features //And lookups will still work properly even if the screens are reduced with ?screens=... - var netForceImageNode = new Image( tugIcon, { tandem: netForceScreenTandem.createTandem( 'icon' ) } ); - var netForceScreen = new Screen( + const netForceImageNode = new Image( tugIcon, { tandem: netForceScreenTandem.createTandem( 'icon' ) } ); + const netForceScreen = new Screen( function() {return new NetForceModel( netForceScreenTandem.createTandem( 'model' ) );}, function( model ) {return new NetForceScreenView( model, netForceScreenTandem.createTandem( 'view' ) );}, { name: netForceString, @@ -64,21 +64,21 @@ define( require => { } ); - var motionScreen = new MotionScreen( 'motion', motionScreenTandem, { + const motionScreen = new MotionScreen( 'motion', motionScreenTandem, { name: motionString, homeScreenIcon: new Image( motionIcon, { tandem: motionScreenTandem.createTandem( 'icon' ) } ) } ); - var frictionScreen = new MotionScreen( 'friction', frictionScreenTandem, { + const frictionScreen = new MotionScreen( 'friction', frictionScreenTandem, { name: frictionString, homeScreenIcon: new Image( frictionIcon, { tandem: frictionScreenTandem.createTandem( 'icon' ) } ) } ); - var accelerationScreen = new MotionScreen( 'acceleration', accelerationScreenTandem, { + const accelerationScreen = new MotionScreen( 'acceleration', accelerationScreenTandem, { name: accelerationString, homeScreenIcon: new Image( accelerationIcon, { tandem: accelerationScreenTandem.createTandem( 'icon' ) @@ -86,7 +86,7 @@ define( require => { } ); //Create and start the sim - var sim = new Sim( forcesAndMotionBasicsTitleString, [ + const sim = new Sim( forcesAndMotionBasicsTitleString, [ netForceScreen, motionScreen, frictionScreen, diff --git a/js/motion/MotionConstants.js b/js/motion/MotionConstants.js index 9955f1e2..4a1babdc 100644 --- a/js/motion/MotionConstants.js +++ b/js/motion/MotionConstants.js @@ -10,7 +10,7 @@ define( require => { const forcesAndMotionBasics = require( 'FORCES_AND_MOTION_BASICS/forcesAndMotionBasics' ); - var MotionConstants = { + const MotionConstants = { // The scale mapping between model units (meters) and stage coordinates, How much to translate model // coordinates into view pixels for translating the background ground diff --git a/js/motion/model/Item.js b/js/motion/model/Item.js index e53101cd..15050858 100644 --- a/js/motion/model/Item.js +++ b/js/motion/model/Item.js @@ -42,7 +42,7 @@ define( require => { * @param {boolean} mystery [description] */ function Item( context, name, tandem, image, mass, x, y, imageScale, homeScale, pusherInset, sittingImage, holdingImage, mystery ) { - var self = this; + const self = this; this.name = name; @@ -100,7 +100,7 @@ define( require => { } ); // How much the object grows or shrinks when interacting with it - var minValue = homeScale || 1.0; + const minValue = homeScale || 1.0; this.interactionScaleProperty = new NumberProperty( homeScale || 1.0, { tandem: tandem.createTandem( 'interactionScaleProperty' ), range: new Range( minValue, 1.3 ) @@ -193,13 +193,13 @@ define( require => { } if ( this.animationStateProperty.get().enabled ) { - var destination = new Vector2( this.animationStateProperty.get().x, this.animationStateProperty.get().y ); + const destination = new Vector2( this.animationStateProperty.get().x, this.animationStateProperty.get().y ); //Make sure not to blend outside of 0..1 or it could cause overshooting and oscillation - var blendAmount = Util.clamp( 15 * dt, 0.1, 0.9 ); + const blendAmount = Util.clamp( 15 * dt, 0.1, 0.9 ); this.positionProperty.set( this.positionProperty.get().blend( destination, blendAmount ) ); - var distanceToTarget = this.positionProperty.get().distance( destination ); + const distanceToTarget = this.positionProperty.get().distance( destination ); if ( distanceToTarget < 1 && ( this.interactionScaleProperty.get() === 1.3 || this.interactionScaleProperty.get() === this.homeScale ) ) { //Snap to exact final destination, see #59 diff --git a/js/motion/model/MotionModel.js b/js/motion/model/MotionModel.js index b4d5c3a3..4f0c1733 100644 --- a/js/motion/model/MotionModel.js +++ b/js/motion/model/MotionModel.js @@ -51,13 +51,13 @@ define( require => { //Motion models must be constructed with a screen, which indicates 'motion'|'friction'|'acceleration' assert && assert( screen ); - var self = this; + const self = this; //Constants this.screen = screen; this.skateboard = screen === 'motion'; this.accelerometer = screen === 'acceleration'; - var frictionValue = screen === 'motion' ? 0 : MotionConstants.MAX_FRICTION / 2; + const frictionValue = screen === 'motion' ? 0 : MotionConstants.MAX_FRICTION / 2; this.stack = new ObservableArray( { tandem: tandem.createTandem( 'stackObservableArray' ), phetioType: ObservableArrayIO( ItemIO ) @@ -235,13 +235,13 @@ define( require => { this.previousModelPosition = this.positionProperty.value; // create the items - Initial locations determined empirically - var bucket = new Item( this, 'bucket', tandem.createTandem( 'bucket' ), waterBucketImage, 100, 840, 547 + -45, 0.78, 1.0, 8 ); + const bucket = new Item( this, 'bucket', tandem.createTandem( 'bucket' ), waterBucketImage, 100, 840, 547 + -45, 0.78, 1.0, 8 ); bucket.bucket = true; - var fridge = new Item( this, 'fridge', tandem.createTandem( 'fridge' ), fridgeImage, 200, 23, 437, 0.8, 1.1, 4 ); - var crate1 = new Item( this, 'crate1', tandem.createTandem( 'crate1' ), crateImage, 50, 129, 507, 0.5 ); - var crate2 = new Item( this, 'crate2', tandem.createTandem( 'crate2' ), crateImage, 50, 219, 507, 0.5 ); - var girl = new Item( this, 'girl', tandem.createTandem( 'girl' ), girlStandingImage, 40, 689, 465, 0.6, 1.0, 4.2, girlSittingImage, girlHoldingImage[ 1 ].img ); - var man = new Item( this, 'man', tandem.createTandem( 'man' ), manStandingImage, 80, 750, 428, 0.6, 0.92, 5, manSittingImage, manHoldingImage ); + const fridge = new Item( this, 'fridge', tandem.createTandem( 'fridge' ), fridgeImage, 200, 23, 437, 0.8, 1.1, 4 ); + const crate1 = new Item( this, 'crate1', tandem.createTandem( 'crate1' ), crateImage, 50, 129, 507, 0.5 ); + const crate2 = new Item( this, 'crate2', tandem.createTandem( 'crate2' ), crateImage, 50, 219, 507, 0.5 ); + const girl = new Item( this, 'girl', tandem.createTandem( 'girl' ), girlStandingImage, 40, 689, 465, 0.6, 1.0, 4.2, girlSittingImage, girlHoldingImage[ 1 ].img ); + const man = new Item( this, 'man', tandem.createTandem( 'man' ), manStandingImage, 80, 750, 428, 0.6, 0.92, 5, manSittingImage, manHoldingImage ); this.items = this.accelerometer ? [ fridge, crate1, crate2, girl, man, bucket ] : [ fridge, crate1, crate2, girl, man, @@ -293,9 +293,9 @@ define( require => { * @returns {Array} */ draggingItems: function() { - var draggingItems = []; - for ( var i = 0; i < this.items.length; i++ ) { - var item = this.items[ i ]; + const draggingItems = []; + for ( let i = 0; i < this.items.length; i++ ) { + const item = this.items[ i ]; if ( item.draggingProperty.get() ) { draggingItems.push( item ); } @@ -310,12 +310,12 @@ define( require => { * @param {number} index - index of item in the stack array */ spliceStack: function( index ) { - var item = this.stack.get( index ); + const item = this.stack.get( index ); this.stack.remove( item ); if ( this.stack.length > 0 ) { - var sumHeight = 0; - for ( var i = 0; i < this.stack.length; i++ ) { - var size = this.view.getSize( this.stack.get( i ) ); + let sumHeight = 0; + for ( let i = 0; i < this.stack.length; i++ ) { + const size = this.view.getSize( this.stack.get( i ) ); sumHeight += size.height; this.stack.get( i ).animateTo( this.view.layoutBounds.width / 2 - size.width / 2 + this.stack.get( i ).centeringOffset, ( this.skateboard ? 334 : 360 ) - sumHeight, 'stack' );//TODO: factor out this code for layout, which is duplicated in MotionTab.topOfStack } @@ -331,7 +331,7 @@ define( require => { //When a 4th item is placed on the stack, move the bottom item home and have the stack fall spliceStackBottom: function() { - var bottom = this.spliceStack( 0 ); + const bottom = this.spliceStack( 0 ); bottom.onBoardProperty.set( false ); bottom.animateHome(); }, @@ -357,18 +357,18 @@ define( require => { */ getFrictionForce: function( appliedForce ) { - var frictionForce; + let frictionForce; // Why does g=10.0? See https://github.com/phetsims/forces-and-motion-basics/issues/132 // We decide to keep it as it is, even though 9.8 may be more realistic. - var g = 10.0; + const g = 10.0; - var mass = this.getStackMass(); + const mass = this.getStackMass(); - var frictionForceMagnitude = Math.abs( this.frictionProperty.get() * mass * g ); + const frictionForceMagnitude = Math.abs( this.frictionProperty.get() * mass * g ); //Friction force only applies above this velocity - var velocityThreshold = 1E-12; + const velocityThreshold = 1E-12; //Object is motionless, friction should oppose the applied force if ( Math.abs( this.velocityProperty.get() ) <= velocityThreshold ) { @@ -391,8 +391,8 @@ define( require => { //Compute the mass of the entire stack, for purposes of momentum computation getStackMass: function() { - var mass = 0; - for ( var i = 0; i < this.stack.length; i++ ) { + let mass = 0; + for ( let i = 0; i < this.stack.length; i++ ) { mass += this.stack.get( i ).mass; } return mass; @@ -436,10 +436,10 @@ define( require => { this.timeProperty.set( this.timeProperty.get() + dt ); // update the acceleration values - var mass = this.getStackMass(); + const mass = this.getStackMass(); this.accelerationProperty.set( mass !== 0 ? this.sumOfForcesProperty.get() / mass : 0.0 ); - var newVelocity = this.velocityProperty.get() + this.accelerationProperty.get() * dt; + let newVelocity = this.velocityProperty.get() + this.accelerationProperty.get() * dt; //friction force should not be able to make the object move backwards //Also make sure velocity goes exactly to zero when the pusher is pushing so that the friction force will be correctly computed @@ -469,7 +469,7 @@ define( require => { // if the pusher is very far off screen, stand up immediately // based on width of the background image, determined by visual inspection - var relativePosition = this.getRelativePusherPosition(); + const relativePosition = this.getRelativePusherPosition(); if ( relativePosition > 1600 || relativePosition < -600 ) { this.fallenProperty.set( false ); } @@ -523,7 +523,7 @@ define( require => { } // step all model items so that they are interactive while paused - for ( var i = 0; i < this.items.length; i++ ) { + for ( let i = 0; i < this.items.length; i++ ) { this.items[ i ].step( dt ); } @@ -584,7 +584,7 @@ define( require => { this.stackSizeProperty.reset(); this.playProperty.reset(); - for ( var i = 0; i < this.items.length; i++ ) { + for ( let i = 0; i < this.items.length; i++ ) { // if the item is being dragged we need to cancel the drag in ItemNode if ( !this.items[ i ].draggingProperty.get() ) { this.items[ i ].reset(); @@ -610,15 +610,15 @@ define( require => { * @param {ScreenView} view */ viewInitialized: function( view ) { - var item = this.items[ 1 ]; + const item = this.items[ 1 ]; // only move item to the top of the stack if it is not being dragged if ( !item.draggingProperty.get() ) { this.view = view; item.onBoardProperty.set( true ); - var itemNode = view.itemNodes[ 1 ]; + const itemNode = view.itemNodes[ 1 ]; item.animationStateProperty.set( { enabled: false, x: 0, y: 0, end: null } ); item.interactionScaleProperty.set( 1.3 ); - var scaledWidth = this.view.getSize( item ).width; + const scaledWidth = this.view.getSize( item ).width; item.positionProperty.set( new Vector2( view.layoutBounds.width / 2 - scaledWidth / 2, view.topOfStack - itemNode.height ) ); this.stack.add( item ); } @@ -629,7 +629,7 @@ define( require => { * @returns {{properties: *, stack: Array}} */ getState: function() { - var self = this; + const self = this; return { properties: this.getValues(), stack: self.stack.getArray().map( function( item ) {return item.get().name;} ).join( ',' ) diff --git a/js/motion/view/AccelerometerNode.js b/js/motion/view/AccelerometerNode.js index 84c2194f..e91f7fd4 100644 --- a/js/motion/view/AccelerometerNode.js +++ b/js/motion/view/AccelerometerNode.js @@ -30,36 +30,36 @@ define( require => { Node.call( this, { tandem: tandem } ); - var height = 15; - var barWidth = 170; - var barSideInset = 7; - var gradient = new LinearGradient( 0, 4, 0, height ).addColorStop( 0, 'white' ).addColorStop( 1, 'rgb( 207, 208, 210 )' ); - var background = new Rectangle( 0 - barSideInset, 0, barWidth + barSideInset * 2, height, 10, 10, { fill: gradient } ); + const height = 15; + const barWidth = 170; + const barSideInset = 7; + const gradient = new LinearGradient( 0, 4, 0, height ).addColorStop( 0, 'white' ).addColorStop( 1, 'rgb( 207, 208, 210 )' ); + const background = new Rectangle( 0 - barSideInset, 0, barWidth + barSideInset * 2, height, 10, 10, { fill: gradient } ); this.addChild( background ); //Tweaked to get 10m/s/s to line up with 1st tick. - var scale = 4.22; + const scale = 4.22; //The bar that gets bigger or smaller based on the acceleration. - var bar = new Rectangle( barWidth / 2, 0, 25, height, { fill: new LinearGradient( 0, 5, 0, height ).addColorStop( 0, 'rgb(218,140,180)' ).addColorStop( 1, 'rgb(130,80,100)' ) } ); + const bar = new Rectangle( barWidth / 2, 0, 25, height, { fill: new LinearGradient( 0, 5, 0, height ).addColorStop( 0, 'rgb(218,140,180)' ).addColorStop( 1, 'rgb(130,80,100)' ) } ); accelerationProperty.link( function( acceleration ) { - var scaled = acceleration * scale; + const scaled = acceleration * scale; if ( acceleration > 0 ) { bar.setRect( barWidth / 2, 0, scaled, height ); } else { - var scaledValue = Math.abs( scaled ); + const scaledValue = Math.abs( scaled ); bar.setRect( barWidth / 2 - scaledValue, 0, scaledValue, height ); } } ); this.addChild( bar ); //Show the knob, which just covers the edge of the bar - var knobThickness = 1; - var knob = new Rectangle( barWidth / 2, 0, knobThickness, height, { fill: new LinearGradient( 0, 5, 0, height ).addColorStop( 0, 'rgb(248,194,216)' ).addColorStop( 1, 'rgb(154,105,127)' ) } ); + const knobThickness = 1; + const knob = new Rectangle( barWidth / 2, 0, knobThickness, height, { fill: new LinearGradient( 0, 5, 0, height ).addColorStop( 0, 'rgb(248,194,216)' ).addColorStop( 1, 'rgb(154,105,127)' ) } ); accelerationProperty.link( function( acceleration ) { - var scaled = acceleration * scale; + const scaled = acceleration * scale; knob.setRect( barWidth / 2 + scaled - knobThickness / 2, 0, knobThickness, height ); } ); this.addChild( knob ); @@ -68,9 +68,9 @@ define( require => { this.addChild( new Rectangle( 0 - barSideInset, 0, barWidth + barSideInset * 2, height, 10, 10, { stroke: 'black' } ) ); //Tick marks - var majorTickInset = 6; - var minorTickInset = 7; - var line = Shape.lineSegment; + const majorTickInset = 6; + const minorTickInset = 7; + const line = Shape.lineSegment; this.addTick( new Path( line( 0, majorTickInset, 0, height - majorTickInset ), { stroke: 'black', tandem: tandem.createTandem( 'tick1' ) diff --git a/js/motion/view/AppliedForceSlider.js b/js/motion/view/AppliedForceSlider.js index 536a6fb0..05e4e433 100644 --- a/js/motion/view/AppliedForceSlider.js +++ b/js/motion/view/AppliedForceSlider.js @@ -34,10 +34,10 @@ define( require => { */ function AppliedForceSlider( model, range, tandem, options ) { - var self = this; + const self = this; this.range = range; - var sliderKnob = new SliderKnob( tandem.createTandem( 'sliderKnob' ) ); + const sliderKnob = new SliderKnob( tandem.createTandem( 'sliderKnob' ) ); HSlider.call( this, model.appliedForceProperty, range, _.extend( { trackSize: new Dimension2( 300, 6 ), majorTickLength: 30, @@ -61,7 +61,7 @@ define( require => { // Note: I do not like this method of canceling, it relies on the assumption that the slider will end drag // when thisSlider.enabled is set to false. This solution should be fine until we have general support for // this kind of thing in scenery - var cancelDrag = function() { + const cancelDrag = function() { self.enabled = false; self.enabled = true; }; @@ -99,21 +99,21 @@ define( require => { } ); //Add ticks at regular intervals in 8 divisions - var initialTickValue = range.min; + const initialTickValue = range.min; //Constants and functions for creating the ticks - var numDivisions = 10; //e.g. divide the ruler into 1/8ths - var numTicks = numDivisions + 1; //ticks on the end - var delta = ( range.max - range.min ) / numDivisions; + const numDivisions = 10; //e.g. divide the ruler into 1/8ths + const numTicks = numDivisions + 1; //ticks on the end + const delta = ( range.max - range.min ) / numDivisions; - var isMajor = function( tickIndex ) { return tickIndex % 5 === 0; }; + const isMajor = function( tickIndex ) { return tickIndex % 5 === 0; }; //Generate each of the ticks and add to the parent _.range( numTicks ).forEach( function( i ) { - var location = initialTickValue + i * delta; + const location = initialTickValue + i * delta; if ( isMajor( i ) ) { - var label = new Text( location, { + const label = new Text( location, { font: new PhetFont( 16 ), tandem: tandem.createTandem( 'tick' + i ) } ); diff --git a/js/motion/view/ItemNode.js b/js/motion/view/ItemNode.js index 20962269..fd331cc9 100644 --- a/js/motion/view/ItemNode.js +++ b/js/motion/view/ItemNode.js @@ -25,7 +25,7 @@ define( require => { const pattern0MassUnitsKilogramsString = require( 'string!FORCES_AND_MOTION_BASICS/pattern.0massUnitsKilograms' ); //Workaround for https://github.com/phetsims/scenery/issues/108 - var IDENTITY = Matrix3.scaling( 1, 1 ); + const IDENTITY = Matrix3.scaling( 1, 1 ); /** * Constructor for ItemNode @@ -41,7 +41,7 @@ define( require => { */ function ItemNode( model, motionView, item, normalImage, sittingImage, holdingImage, showMassesProperty, itemToolbox, tandem ) { - var self = this; + const self = this; this.item = item; Node.call( this, { cursor: 'pointer', @@ -55,7 +55,7 @@ define( require => { this.translate( item.positionProperty.get() ); //Create the node for the main graphic - var normalImageNode = new Image( normalImage, { tandem: tandem.createTandem( 'normalImageNode' ) } ); + const normalImageNode = new Image( normalImage, { tandem: tandem.createTandem( 'normalImageNode' ) } ); this.normalImageNode = normalImageNode; // keep track of the sitting image to track its width for the pusher @@ -63,7 +63,7 @@ define( require => { this.sittingImage = new Image( sittingImage, { tandem: tandem.createTandem( 'sittingImageNode' ) } ); //When the model changes, update the image location as well as which image is shown - var updateImage = function() { + const updateImage = function() { // var centerX = normalImageNode.centerX; if ( (typeof holdingImage !== 'undefined') && (item.armsUp() && item.onBoardProperty.get() ) ) { normalImageNode.image = holdingImage; @@ -85,16 +85,16 @@ define( require => { // https://github.com/phetsims/axon/issues/135 _.hasIn( window, 'phet.phetIo.phetioEngine' ) && phet.phetIo.phetioEngine.phetioStateEngine.stateSetEmitter.addListener( updateImage ); - for ( var i = 0; i < model.items.length; i++ ) { + for ( let i = 0; i < model.items.length; i++ ) { model.items[ i ].draggingProperty.link( updateImage ); } model.stack.lengthProperty.link( updateImage ); //When the user drags the object, start - var moveToStack = function() { + const moveToStack = function() { item.onBoardProperty.set( true ); - var imageWidth = item.getCurrentScale() * normalImageNode.width; + const imageWidth = item.getCurrentScale() * normalImageNode.width; item.animateTo( motionView.layoutBounds.width / 2 - imageWidth / 2 + item.centeringOffset, motionView.topOfStack - self.height, 'stack' ); model.stack.add( item ); if ( model.stack.length > 3 ) { @@ -103,15 +103,15 @@ define( require => { }; // called on end drag, update direction of girl or man to match current applied force and velocity of model - var updatePersonDirection = function( person ) { + const updatePersonDirection = function( person ) { // default direction is to the left - var direction = 'left'; + let direction = 'left'; // if girl or man is alread on the stack, direction should match person that is already on the stack - var personInStack; - for ( var i = 0; i < model.stack.length; i++ ) { - var itemInStack = model.stack.get( i ); + let personInStack; + for ( let i = 0; i < model.stack.length; i++ ) { + const itemInStack = model.stack.get( i ); if ( itemInStack === person ) { // skip the person that is currently being dragged @@ -142,7 +142,7 @@ define( require => { person.directionProperty.set( direction ); }; - var dragHandler = new SimpleDragHandler( { + const dragHandler = new SimpleDragHandler( { tandem: tandem.createTandem( 'dragHandler' ), translate: function( options ) { item.positionProperty.set( options.position ); @@ -159,7 +159,7 @@ define( require => { itemToolbox.moveToFront(); item.draggingProperty.set( true ); - var index = model.stack.indexOf( item ); + const index = model.stack.indexOf( item ); if ( index >= 0 ) { model.spliceStack( index ); } @@ -200,7 +200,7 @@ define( require => { } ); //Label for the mass (if it is shown) - var massLabel = new Text( item.mystery ? '?' : StringUtils.format( pattern0MassUnitsKilogramsString, item.mass ), { + const massLabel = new Text( item.mystery ? '?' : StringUtils.format( pattern0MassUnitsKilogramsString, item.mass ), { font: new PhetFont( { size: 15, weight: 'bold' @@ -208,15 +208,15 @@ define( require => { maxWidth: normalImageNode.width / 1.5, tandem: tandem.createTandem( 'massLabel' ) } ); - var roundedRadius = 10; - var roundRect = new Rectangle( 0, 0, massLabel.width + roundedRadius, massLabel.height + roundedRadius, roundedRadius, roundedRadius, { + const roundedRadius = 10; + const roundRect = new Rectangle( 0, 0, massLabel.width + roundedRadius, massLabel.height + roundedRadius, roundedRadius, roundedRadius, { fill: 'white', stroke: 'gray' } ).mutate( { centerX: massLabel.centerX, centerY: massLabel.centerY } ); // the label needs to be scaled back up after the image was scaled down // normalize the maximum width to then restrict the labels for i18n - var labelNode = new Node( { + const labelNode = new Node( { children: [ roundRect, massLabel ], scale: 1.0 / item.imageScaleProperty.get(), tandem: tandem.createTandem( 'labelNode' ) @@ -228,7 +228,7 @@ define( require => { // When the object is scaled or change direction, update the image part Property.multilink( [ item.interactionScaleProperty, item.directionProperty ], function( interactionScale, direction ) { - var scale = item.imageScaleProperty.get() * interactionScale; + const scale = item.imageScaleProperty.get() * interactionScale; self.setScaleMagnitude( scale ); // make sure that labels remain the same size @@ -238,7 +238,7 @@ define( require => { if ( direction === 'right' ) { // store the center so that it can be reapplied after change in scale - var centerX = normalImageNode.centerX; + const centerX = normalImageNode.centerX; normalImageNode.scale( -1, 1 ); @@ -279,7 +279,7 @@ define( require => { getScaledWidth: function() { // if the item has a sitting image, use that image for the width - var scaledWidth; + let scaledWidth; if ( this.sittingImage ) { scaledWidth = this.sittingImage.width * this.item.getCurrentScale(); } diff --git a/js/motion/view/MotionControlPanel.js b/js/motion/view/MotionControlPanel.js index a6a037a6..db9ec1b7 100644 --- a/js/motion/view/MotionControlPanel.js +++ b/js/motion/view/MotionControlPanel.js @@ -47,29 +47,29 @@ define( require => { function MotionControlPanel( model, tandem ) { Node.call( this, { tandem: tandem } ); - var fontSize = 18; - var maxTextWidth = 120; + const fontSize = 18; + const maxTextWidth = 120; /** * Create a label node with options icon * @param {string} text - the label string * @param {Object} [options] */ - var createLabel = function( text, tandemName, options ) { + const createLabel = function( text, tandemName, options ) { options = _.extend( { indent: 0, icon: new Node() }, options ); // create the label for the checkbox - var labelText = new Text( text, { + const labelText = new Text( text, { font: new PhetFont( fontSize ), maxWidth: maxTextWidth, tandem: tandem.createTandem( tandemName ).createTandem( 'labelTextNode' ) // this is a bit of a hack to support backwards tandem api } ); // optional icon needs spacing next to text - var iconSpacer = new HStrut( 0 ); + let iconSpacer = new HStrut( 0 ); if ( options.icon ) { // create a horizontal spacer for the icon iconSpacer = new HStrut( 10 ); @@ -79,7 +79,7 @@ define( require => { }; //Icon for the forces in the control panel - var createArrowIcon = function( phetioID ) { + const createArrowIcon = function( phetioID ) { return new ArrowNode( 0, 0, 40, 0, { headHeight: 20, headWidth: 20, @@ -89,31 +89,31 @@ define( require => { tandem: tandem.createTandem( phetioID ) } ); }; - var speedometerIcon = function() { - var speedometerIconValueProperty = new Property( 0 ); + const speedometerIcon = function() { + const speedometerIconValueProperty = new Property( 0 ); return new GaugeNode( speedometerIconValueProperty, speedString, new Range( 0, MotionConstants.MAX_SPEED ), { radius: 67, scale: 0.2, tandem: tandem.createTandem( 'speedometerIcon' ) } ); }; - var accelerometerIcon = function() { - var accelerometerIconValueProperty = new Property( 5 ); // the acclerometer icon looks best with ~5 m/s^2 filled in + const accelerometerIcon = function() { + const accelerometerIconValueProperty = new Property( 5 ); // the acclerometer icon looks best with ~5 m/s^2 filled in return new AccelerometerNode( accelerometerIconValueProperty, tandem.createTandem( 'accelerometerIcon' ) ).mutate( { scale: 0.3 } ); }; - var createFrictionSlider = function() { + const createFrictionSlider = function() { //Create the friction slider and its labels. // Add invisible symmetric ticks + labels so the slider will be perfectly centered. A better way to do this would be just to line things up based on the track of the slider, // but this makes it work with VBox/HBox - var frictionSlider = new HSlider( model.frictionProperty, new Range( 0, MotionConstants.MAX_FRICTION ), { + const frictionSlider = new HSlider( model.frictionProperty, new Range( 0, MotionConstants.MAX_FRICTION ), { trackSize: new Dimension2( 150, 6 ), thumbNode: new SliderKnob( tandem.createTandem( 'sliderKnob' ) ), majorTickLength: 18, tickLabelSpacing: 3, tandem: tandem.createTandem( 'frictionSlider' ) } ); - var sliderTickOptions = { font: new PhetFont( 15 ), maxWidth: 125 }; - var invisibleSliderTickOptions = _.extend( { visible: false }, sliderTickOptions ); + const sliderTickOptions = { font: new PhetFont( 15 ), maxWidth: 125 }; + const invisibleSliderTickOptions = _.extend( { visible: false }, sliderTickOptions ); frictionSlider.addMajorTick( 0, new Text( noneString, _.extend( { tandem: tandem.createTandem( 'zeroTickTextNode' ) }, sliderTickOptions ) ) ); frictionSlider.addMajorTick( 0, new Text( lotsString, _.extend( { tandem: tandem.createTandem( 'invisibleZeroTickTextNode' ) }, invisibleSliderTickOptions ) ) ); @@ -121,7 +121,7 @@ define( require => { frictionSlider.addMajorTick( MotionConstants.MAX_FRICTION, new Text( lotsString, _.extend( { tandem: tandem.createTandem( 'maxTickTextNode' ) }, sliderTickOptions ) ) ); frictionSlider.addMajorTick( MotionConstants.MAX_FRICTION, new Text( noneString, _.extend( { tandem: tandem.createTandem( 'invisibleMaxTickTextNode' ) }, invisibleSliderTickOptions ) ) ); - var frictionTextNode = new Text( frictionString, { + const frictionTextNode = new Text( frictionString, { font: new PhetFont( { size: fontSize, weight: 'bold' } ), maxWidth: maxTextWidth, tandem: tandem.createTandem( 'frictionTextNode' ) @@ -131,15 +131,15 @@ define( require => { }; // Create controls for the 'motion' screen - var createMotionControls = function() { + const createMotionControls = function() { // container node for checkboxes and an hstrut which makes the panel just a little wider to match the // other screens - var containerNode = new Node( { + const containerNode = new Node( { tandem: tandem.createTandem( 'containerNode' ) } ); - var items = [ + const items = [ { node: createLabel( forceString, 'showForceCheckbox', { icon: createArrowIcon( 'showForceArrowIcon' ) } ), property: model.showForceProperty, @@ -163,12 +163,12 @@ define( require => { ]; // create the checkboxes - var checkboxes = new VerticalCheckboxGroup( items ); + const checkboxes = new VerticalCheckboxGroup( items ); containerNode.addChild( checkboxes ); // create an hStrut to increase the width of the controls to the right - var hStrut = new HStrut( 16, { leftCenter: checkboxes.rightCenter } ); + const hStrut = new HStrut( 16, { leftCenter: checkboxes.rightCenter } ); containerNode.addChild( hStrut ); return containerNode; @@ -176,7 +176,7 @@ define( require => { // if the slider is wider than the group of checkboxes, align the checkboxes to the left of the slider // otherwise, center with the checkboxes - var layoutFrictionSlider = function( checkboxes, frictionSlider ) { + const layoutFrictionSlider = function( checkboxes, frictionSlider ) { if ( frictionSlider.width > checkboxes.width ) { checkboxes.left = frictionSlider.left; } @@ -187,14 +187,14 @@ define( require => { // Create controls for the 'friction' screen, including a set of checkboxes and a slider // The slider is centered under the checkboxes, which are aligned to the left - var createFrictionControls = function() { + const createFrictionControls = function() { // container for all controls - var containerNode = new Node( { + const containerNode = new Node( { tandem: tandem.createTandem( 'containerNode' ) } ); - var items = [ + const items = [ { node: createLabel( forcesString, 'showForceCheckbox', { icon: createArrowIcon( 'showForceArrowIcon' ) } ), property: model.showForceProperty, @@ -223,15 +223,15 @@ define( require => { ]; // create the checkboxes - var checkboxes = new VerticalCheckboxGroup( items ); + const checkboxes = new VerticalCheckboxGroup( items ); containerNode.addChild( checkboxes ); // create a spacer for the checkboxes and the slider - var strut = new VStrut( 12, { centerTop: checkboxes.centerBottom } ); + const strut = new VStrut( 12, { centerTop: checkboxes.centerBottom } ); containerNode.addChild( strut ); // create the slider - var frictionSlider = createFrictionSlider(); + const frictionSlider = createFrictionSlider(); frictionSlider.top = strut.bottom; layoutFrictionSlider( checkboxes, frictionSlider ); @@ -243,14 +243,14 @@ define( require => { // Create controls for the 'acceleration' screen // The slider is centered under the checkboxes, which are aligned to the left - var createAccelerationControls = function() { + const createAccelerationControls = function() { // node containing checkboxes, spacing, and slider - var containerNode = new Node( { + const containerNode = new Node( { tandem: tandem.createTandem( 'containerNode' ) } ); - var items = [ + const items = [ { node: createLabel( forcesString, 'showForceCheckbox', { icon: createArrowIcon( 'showForceArrowIcon' ) } ), property: model.showForceProperty, @@ -283,15 +283,15 @@ define( require => { } ]; - var checkboxes = new VerticalCheckboxGroup( items ); + const checkboxes = new VerticalCheckboxGroup( items ); containerNode.addChild( checkboxes ); // create the spacing strut - var strut = new VStrut( 12, { centerTop: checkboxes.centerBottom } ); + const strut = new VStrut( 12, { centerTop: checkboxes.centerBottom } ); containerNode.addChild( strut ); // add the slider friction slider under the checkboxes - var frictionSlider = createFrictionSlider(); + const frictionSlider = createFrictionSlider(); frictionSlider.top = strut.bottom; layoutFrictionSlider( checkboxes, frictionSlider ); @@ -302,11 +302,11 @@ define( require => { }; // collect contents for the panel - var contents = model.screen === 'motion' ? createMotionControls() : + const contents = model.screen === 'motion' ? createMotionControls() : model.screen === 'friction' ? createFrictionControls() : createAccelerationControls(); - var panelNode = new Panel( contents, { + const panelNode = new Panel( contents, { xMargin: 12, yMargin: 7, fill: '#e3e980', diff --git a/js/motion/view/MotionScreenView.js b/js/motion/view/MotionScreenView.js index 0880546b..32d2c040 100644 --- a/js/motion/view/MotionScreenView.js +++ b/js/motion/view/MotionScreenView.js @@ -43,7 +43,7 @@ define( require => { const WaterBucketNode = require( 'FORCES_AND_MOTION_BASICS/motion/view/WaterBucketNode' ); // constants - var PLAY_PAUSE_BUFFER = 10; // separation between step and reset all button, usedful for i18n + const PLAY_PAUSE_BUFFER = 10; // separation between step and reset all button, usedful for i18n // images const skateboardImage = require( 'image!FORCES_AND_MOTION_BASICS/skateboard.png' ); @@ -75,16 +75,16 @@ define( require => { } ); //Variables for this constructor, for convenience - var self = this; - var width = this.layoutBounds.width; - var height = this.layoutBounds.height; + const self = this; + const width = this.layoutBounds.width; + const height = this.layoutBounds.height; //Constants - var skyHeight = 362; - var groundHeight = height - skyHeight; + const skyHeight = 362; + const groundHeight = height - skyHeight; //Create the static background - var skyGradient = new LinearGradient( 0, 0, 0, skyHeight ).addColorStop( 0, '#02ace4' ).addColorStop( 1, '#cfecfc' ); + const skyGradient = new LinearGradient( 0, 0, 0, skyHeight ).addColorStop( 0, '#02ace4' ).addColorStop( 1, '#cfecfc' ); this.sky = new Rectangle( -width, -skyHeight, width * 3, skyHeight * 2, { fill: skyGradient, pickable: false } ); this.groundNode = new Rectangle( -width, skyHeight, width * 3, groundHeight * 3, { @@ -110,17 +110,17 @@ define( require => { } //Add toolbox backgrounds for the objects - var boxHeight = 180; - var showItemToolboxes = ForcesAndMotionBasicsQueryParameters.showItemToolboxes; - var fill = showItemToolboxes ? '#e7e8e9' : null; - var stroke = showItemToolboxes ? '#000000' : null; - var leftItemToolboxNode = new Rectangle( 10, height - boxHeight - 10, 300, boxHeight, 10, 10, { + const boxHeight = 180; + const showItemToolboxes = ForcesAndMotionBasicsQueryParameters.showItemToolboxes; + const fill = showItemToolboxes ? '#e7e8e9' : null; + const stroke = showItemToolboxes ? '#000000' : null; + const leftItemToolboxNode = new Rectangle( 10, height - boxHeight - 10, 300, boxHeight, 10, 10, { fill: fill, stroke: stroke, lineWidth: 1, tandem: tandem.createTandem( 'leftItemToolboxNode' ) } ); - var rightItemToolboxNode = new Rectangle( width - 10 - 300, height - boxHeight - 10, 300, boxHeight, 10, 10, { + const rightItemToolboxNode = new Rectangle( width - 10 - 300, height - boxHeight - 10, 300, boxHeight, 10, 10, { fill: fill, stroke: stroke, lineWidth: 1, @@ -128,17 +128,17 @@ define( require => { } ); //Create the slider - var disableText = function( node ) { return function( length ) {node.fill = length === 0 ? 'gray' : 'black';}; }; + const disableText = function( node ) { return function( length ) {node.fill = length === 0 ? 'gray' : 'black';}; }; - var maxTextWidth = ( rightItemToolboxNode.left - leftItemToolboxNode.right ) - 10; - var appliedForceSliderTextNode = new Text( appliedForceString, { + const maxTextWidth = ( rightItemToolboxNode.left - leftItemToolboxNode.right ) - 10; + const appliedForceSliderTextNode = new Text( appliedForceString, { font: new PhetFont( 22 ), centerX: width / 2, y: 430, maxWidth: maxTextWidth, tandem: tandem.createTandem( 'appliedForceSliderTextNode' ) } ); - var appliedForceSlider = new AppliedForceSlider( model, new Range( -500, 500 ), + const appliedForceSlider = new AppliedForceSlider( model, new Range( -500, 500 ), tandem.createTandem( 'appliedForceSlider' ), { centerX: width / 2 + 1, y: 555 @@ -150,19 +150,19 @@ define( require => { // The range for the spinner will change depending on whether the stack has exceeded maximum speed. This will // most often be in cases where there is no friction, because the speed will remain at maximum values and we // do not want to allow additional applied force at that time - var spinnerRange = new Range( -500, 500 ); + const spinnerRange = new Range( -500, 500 ); // Do not allow the user to apply a force that would take the object beyond its maximum velocity Property.lazyMultilink( [ model.appliedForceProperty, model.speedClassificationProperty, model.stackSizeProperty ], function( appliedForce, speedClassification, stackSize ) { - var enableRightButtons = ( stackSize > 0 && ( speedClassification !== 'RIGHT_SPEED_EXCEEDED' ) ); + const enableRightButtons = ( stackSize > 0 && ( speedClassification !== 'RIGHT_SPEED_EXCEEDED' ) ); spinnerRange.max = enableRightButtons ? 500 : 0; - var enableLeftButtons = ( stackSize > 0 && ( speedClassification !== 'LEFT_SPEED_EXCEEDED' ) ); + const enableLeftButtons = ( stackSize > 0 && ( speedClassification !== 'LEFT_SPEED_EXCEEDED' ) ); spinnerRange.min = enableLeftButtons ? -500 : 0; } ); - var appliedForceSpinner = new FineCoarseSpinner( model.appliedForceProperty, { + const appliedForceSpinner = new FineCoarseSpinner( model.appliedForceProperty, { numberDisplayOptions: { font: new PhetFont( 22 ), valuePattern: pattern0ValueUnitsNewtonsString, @@ -195,7 +195,7 @@ define( require => { model.stack.lengthProperty.link( function( length ) { appliedForceSlider.enabled = length > 0; } ); //Create the speedometer. Specify the location after construction so we can set the 'top' - var speedometerNode = new SpeedometerNode( model.speedProperty, model.showSpeedProperty, model.showValuesProperty, + const speedometerNode = new SpeedometerNode( model.speedProperty, model.showSpeedProperty, model.showValuesProperty, tandem.createTandem( 'speedometerNode' ), { x: 300, top: 8 @@ -204,15 +204,15 @@ define( require => { this.addChild( speedometerNode ); //Create and add the control panel - var controlPanel = new MotionControlPanel( model, tandem.createTandem( 'controlPanel' ) ); + const controlPanel = new MotionControlPanel( model, tandem.createTandem( 'controlPanel' ) ); this.addChild( controlPanel ); // create the play, pause, and step buttons - var playPauseButton = new PlayPauseButton( model.playProperty, { + const playPauseButton = new PlayPauseButton( model.playProperty, { radius: 18, tandem: tandem.createTandem( 'playPauseButton' ) } ); - var stepForwardButton = new StepForwardButton( { + const stepForwardButton = new StepForwardButton( { isPlayingProperty: model.playProperty, listener: function() { model.manualStep(); }, radius: 18, @@ -220,14 +220,14 @@ define( require => { } ); // Make the Play/Pause button bigger when it is showing the pause button, see #298 - var pauseSizeIncreaseFactor = 1.28; + const pauseSizeIncreaseFactor = 1.28; model.playProperty.lazyLink( function( isPlaying ) { playPauseButton.scale( isPlaying ? ( 1 / pauseSizeIncreaseFactor ) : pauseSizeIncreaseFactor ); } ); // play, step, and reset buttons in an HBox aligned left bottom under the control panel - var playPauseVerticalOffset = 35; - var playPauseStepHBox = new HBox( { + const playPauseVerticalOffset = 35; + const playPauseStepHBox = new HBox( { children: [ playPauseButton, stepForwardButton ], spacing: PLAY_PAUSE_BUFFER, resize: false, @@ -255,11 +255,11 @@ define( require => { //Add the accelerometer, if on the final screen if ( model.accelerometer ) { - var accelerometerNode = new AccelerometerNode( model.accelerationProperty, tandem.createTandem( 'accelerometerNode' ) ); + const accelerometerNode = new AccelerometerNode( model.accelerationProperty, tandem.createTandem( 'accelerometerNode' ) ); // build up the string label for the acceleration - var labelString = StringUtils.format( pattern0Name1ValueUnitsAccelerationString, accelerationString, model.accelerationProperty.value ); - var labelText = new RichText( labelString, { + const labelString = StringUtils.format( pattern0Name1ValueUnitsAccelerationString, accelerationString, model.accelerationProperty.value ); + const labelText = new RichText( labelString, { font: new PhetFont( 18 ), supScale: 0.60, supYOffset: 2, @@ -267,7 +267,7 @@ define( require => { } ); // create the tick labels - var tickLabel = function( label, tick, tandemID ) { + const tickLabel = function( label, tick, tandemID ) { return new Text( label, { pickable: false, font: new PhetFont( 16 ), @@ -276,7 +276,7 @@ define( require => { tandem: tandem.createTandem( 'tickLabelTextNode' + tandemID ) } ); }; - var tickLabels = new Node( { + const tickLabels = new Node( { tandem: tandem.createTandem( 'tickLabels' ), children: [ tickLabel( '-20', accelerometerNode.ticks[ 0 ], 'Negative20' ), @@ -286,7 +286,7 @@ define( require => { } ); // put it all together in a VBox - var accelerometerWithTickLabels = new Node( { + const accelerometerWithTickLabels = new Node( { tandem: tandem.createTandem( 'accelerometerWithTickLabels' ), children: [ labelText, accelerometerNode, tickLabels ], pickable: false, @@ -300,10 +300,10 @@ define( require => { this.addChild( accelerometerWithTickLabels ); // whenever showValues and accleration changes, update the label text - var initialLabelWidth = labelText.width; + const initialLabelWidth = labelText.width; Property.multilink( [ model.showValuesProperty, model.accelerationProperty ], function( showValues, acceleration ) { if ( showValues ) { - var accelerationValue = Util.toFixed( acceleration, 2 ); + const accelerationValue = Util.toFixed( acceleration, 2 ); labelText.setText( StringUtils.format( pattern0Name1ValueUnitsAccelerationString, accelerationString, accelerationValue ) ); // Make sure that the acceleration readout does not shift as the value changes by compensating for the change @@ -319,7 +319,7 @@ define( require => { // Map the items to their correct toolbox, one of left or right, corresponding to the side of the screen that // toolbox is sitting on. - var getItemSide = function( item ) { + const getItemSide = function( item ) { // the fridge and the crates both go in hte left toolbox if ( item.name === 'fridge' || item.name === 'crate1' || item.name === 'crate2' ) { return 'left'; @@ -330,16 +330,16 @@ define( require => { }; //Iterate over the items in the model and create and add nodes for each one - var leftItemLayer = new Node( { tandem: tandem.createTandem( 'leftItemLayer' ) } ); - var rightItemLayer = new Node( { tandem: tandem.createTandem( 'rightItemLayer' ) } ); + const leftItemLayer = new Node( { tandem: tandem.createTandem( 'leftItemLayer' ) } ); + const rightItemLayer = new Node( { tandem: tandem.createTandem( 'rightItemLayer' ) } ); this.itemNodes = []; - for ( var i = 0; i < model.items.length; i++ ) { - var item = model.items[ i ]; - var itemSide = getItemSide( item ); - var toolboxNode = itemSide === 'left' ? leftItemToolboxNode : rightItemToolboxNode; - var itemLayer = itemSide === 'left' ? leftItemLayer : rightItemLayer; - var Constructor = item.bucket ? WaterBucketNode : ItemNode; - var itemNode = new Constructor( model, self, item, + for ( let i = 0; i < model.items.length; i++ ) { + const item = model.items[ i ]; + const itemSide = getItemSide( item ); + const toolboxNode = itemSide === 'left' ? leftItemToolboxNode : rightItemToolboxNode; + const itemLayer = itemSide === 'left' ? leftItemLayer : rightItemLayer; + const Constructor = item.bucket ? WaterBucketNode : ItemNode; + const itemNode = new Constructor( model, self, item, item.image, item.sittingImage || item.image, item.holdingImage || item.image, @@ -357,22 +357,22 @@ define( require => { rightItemToolboxNode.addChild( rightItemLayer ); //Add the force arrows & associated readouts in front of the items - var arrowScale = 0.3; + const arrowScale = 0.3; //Round the forces so that the sum is correct in the display, see https://github.com/phetsims/forces-and-motion-basics/issues/72 and https://github.com/phetsims/forces-and-motion-basics/issues/74 - var roundedAppliedForceProperty = new DerivedProperty( + const roundedAppliedForceProperty = new DerivedProperty( [ model.appliedForceProperty ], function( appliedForce ) { return Util.roundSymmetric( appliedForce ); } ); - var roundedFrictionForceProperty = new DerivedProperty( + const roundedFrictionForceProperty = new DerivedProperty( [ model.frictionForceProperty ], function( frictionForce ) { return Util.roundSymmetric( frictionForce ); } ); //Only update the sum force arrow after both friction and applied force changed, so we don't get partial updates, see https://github.com/phetsims/forces-and-motion-basics/issues/83 - var roundedSumProperty = new NumberProperty( roundedAppliedForceProperty.get() + roundedFrictionForceProperty.get(), { + const roundedSumProperty = new NumberProperty( roundedAppliedForceProperty.get() + roundedFrictionForceProperty.get(), { tandem: tandem.createTandem( 'roundedSumProperty' ), units: 'newtons' } ); @@ -414,7 +414,7 @@ define( require => { // toolboxes and their children should be in front of all above items // contain the toolboxes in a parent node so that we can easily change the z-order of each toolbox. This way // items of the right toolbox will not be layered in front of items of left toolbox items - var toolboxContainer = new Node( { tandem: tandem.createTandem( 'toolboxContainer' ) } ); + const toolboxContainer = new Node( { tandem: tandem.createTandem( 'toolboxContainer' ) } ); toolboxContainer.addChild( leftItemToolboxNode ); toolboxContainer.addChild( rightItemToolboxNode ); this.addChild( toolboxContainer ); @@ -426,18 +426,18 @@ define( require => { this.addChild( this.sumOfForcesText ); //Whichever arrow is smaller should be in front (in z-ordering) - var frictionLargerProperty = new DerivedProperty( [ roundedAppliedForceProperty, roundedFrictionForceProperty ], + const frictionLargerProperty = new DerivedProperty( [ roundedAppliedForceProperty, roundedFrictionForceProperty ], function( roundedAppliedForce, roundedFrictionForce ) { return Math.abs( roundedFrictionForce ) > Math.abs( roundedAppliedForce ); } ); frictionLargerProperty.link( function( frictionLarger ) { - var node = frictionLarger ? self.appliedForceArrow : self.frictionArrow; + const node = frictionLarger ? self.appliedForceArrow : self.frictionArrow; node.moveToFront(); } ); //On the motion screens, when the 'Friction' label overlaps the force vector it should be displaced vertically Property.multilink( [ model.appliedForceProperty, model.frictionForceProperty ], function( appliedForce, frictionForce ) { - var sameDirection = ( appliedForce < 0 && frictionForce < 0 ) || ( appliedForce > 0 && frictionForce > 0 ); + const sameDirection = ( appliedForce < 0 && frictionForce < 0 ) || ( appliedForce > 0 && frictionForce > 0 ); self.frictionArrow.overlapsOther = sameDirection; self.frictionArrow.labelPosition = sameDirection ? 'bottom' : 'side'; @@ -460,8 +460,8 @@ define( require => { //Get the height of the objects in the stack (doesn't include skateboard) get stackHeight() { - var sum = 0; - for ( var i = 0; i < this.model.stack.length; i++ ) { + let sum = 0; + for ( let i = 0; i < this.model.stack.length; i++ ) { sum = sum + this.model.stack.get( i ).view.height; } return sum; @@ -469,14 +469,14 @@ define( require => { //Find the top of the stack, so that a new object can be placed on top get topOfStack() { - var n = this.model.skateboard ? 334 : 360; + const n = this.model.skateboard ? 334 : 360; return n - this.stackHeight; }, //Get the size of an item's image. Dependent on the current scale of the image. getSize: function( item ) { // get the current scale for the element and apply it to the image - var scaledWidth = item.view.sittingImage.width * item.getCurrentScale(); + const scaledWidth = item.view.sittingImage.width * item.getCurrentScale(); return { width: scaledWidth, height: item.view.height }; } } ); diff --git a/js/motion/view/MovingBackgroundNode.js b/js/motion/view/MovingBackgroundNode.js index 81ad9e8e..137760b1 100644 --- a/js/motion/view/MovingBackgroundNode.js +++ b/js/motion/view/MovingBackgroundNode.js @@ -25,7 +25,7 @@ define( require => { const mountainImage = require( 'image!FORCES_AND_MOTION_BASICS/mountains.png' ); // constants - var linear = Util.linear; + const linear = Util.linear; /** * Constructor for MovingBackgroundNode @@ -36,7 +36,7 @@ define( require => { * @constructor */ function MovingBackgroundNode( model, layoutCenterX, tandem ) { - var self = this; + const self = this; this.model = model; Node.call( this, { @@ -45,11 +45,11 @@ define( require => { tandem: tandem } ); - var L = 900; + const L = 900; //Add a background node at the specified X offset (pixels). The distanceScale signifies how quickly it will scroll (mountains are far away so have a lower distanceScale) - var toBackgroundImage = function( offset, image, y, scale, tandemName ) { - var node = new Image( image, { + const toBackgroundImage = function( offset, image, y, scale, tandemName ) { + const node = new Image( image, { scale: scale, x: offset, y: y, @@ -60,12 +60,12 @@ define( require => { return node; }; - var stageWidth = L * 2; + const stageWidth = L * 2; - var mountainY = 311; + const mountainY = 311; //TODO: It would be good to use cssTransforms here but they are a bit buggy - var mountainAndCloudLayer = new Node( { + const mountainAndCloudLayer = new Node( { tandem: tandem.createTandem( 'mountainAndCloudLayer' ), x: layoutCenterX, children: [ @@ -82,17 +82,17 @@ define( require => { //Move the background objects //TODO: support background objects with scale !== 1 - var getLayerUpdater = function( layer, motionScale ) { - var netDelta = 0; - var children = layer.children; + const getLayerUpdater = function( layer, motionScale ) { + let netDelta = 0; + const children = layer.children; return function( position, oldPosition ) { - var delta = -(position - oldPosition) * MotionConstants.POSITION_SCALE / motionScale; + const delta = -(position - oldPosition) * MotionConstants.POSITION_SCALE / motionScale; netDelta += delta; layer.translate( delta, 0 ); - var sign = position > oldPosition ? 1 : -1; - for ( var i = 0; i < children.length; i++ ) { - var child = children[ i ]; + const sign = position > oldPosition ? 1 : -1; + for ( let i = 0; i < children.length; i++ ) { + const child = children[ i ]; // console.log( child.offsetX + netDelta ); //model moving right @@ -124,20 +124,20 @@ define( require => { model.positionProperty.link( getLayerUpdater( mountainAndCloudLayer, 10 ) ); - var tileWidth = brickTileImage.width; + const tileWidth = brickTileImage.width; //Add the ground, offset the pattern so that the it aligns with the brick image - var tilePattern = new Pattern( brickTileImage ); - var ground = new Rectangle( 0, 0, brickTileImage.width * 14, brickTileImage.height, { fill: tilePattern } ); - var mod = ground.width / 14; - var centerX = layoutCenterX - ground.width / 2; + const tilePattern = new Pattern( brickTileImage ); + const ground = new Rectangle( 0, 0, brickTileImage.width * 14, brickTileImage.height, { fill: tilePattern } ); + const mod = ground.width / 14; + const centerX = layoutCenterX - ground.width / 2; //Rendering as a single image instead of a Pattern significantly improves performance on both iPad and Win8/Chrome - var showGround = true; + const showGround = true; if ( showGround ) { ground.toImage( function( image ) { - var groundY = mountainY + 50; - var groundImageNode = new Image( image, { + const groundY = mountainY + 50; + const groundImageNode = new Image( image, { y: groundY, tandem: tandem.createTandem( 'groundImageNode' ) } ); @@ -150,20 +150,20 @@ define( require => { if ( !model.skateboard ) { //Add the gravel - var gravel = new Rectangle( 0, 0, brickTileImage.width * 14, 4, { y: -2 } ); + const gravel = new Rectangle( 0, 0, brickTileImage.width * 14, 4, { y: -2 } ); //Adding the gravel directly to the moving ground makes the performance significantly faster on iPad3 groundImageNode.addChild( gravel ); //Add the ice - var iceOverlay = new Rectangle( -400, groundY, brickTileImage.width * 15, brickTileImage.height, { fill: 'rgba(189,227,249,0.87)' } ); + const iceOverlay = new Rectangle( -400, groundY, brickTileImage.width * 15, brickTileImage.height, { fill: 'rgba(189,227,249,0.87)' } ); self.addChild( iceOverlay ); model.frictionZeroProperty.linkAttribute( iceOverlay, 'visible' ); //make sure gravel gets exactly removed if friction is zero, in case it improves performance. model.frictionNonZeroProperty.linkAttribute( gravel, 'visible' ); - var iceLayer = new Node( { + const iceLayer = new Node( { tandem: tandem.createTandem( 'iceLayer' ), children: [ toBackgroundImage( 0, icicleImage, 0, 0.8, 'iceImageNode1' ), @@ -178,13 +178,13 @@ define( require => { self.lastNumSpecks = 0; - var gravelSource = new Node( { + const gravelSource = new Node( { tandem: tandem.createTandem( 'gravelSource' ) } ); - var numBlack = 0; - var numGray = 0; - var numWhite = 0; + let numBlack = 0; + let numGray = 0; + let numWhite = 0; //Create the gravel for nonzero friction. model.frictionProperty.link( function( newFriction, oldFriction ) { @@ -194,13 +194,13 @@ define( require => { newFriction = Util.roundSymmetric( newFriction / 2 ) * 2; newFriction = newFriction / 100; - var height = 3; - var numSpecks = linear( MotionConstants.MAX_FRICTION * 0.1, MotionConstants.MAX_FRICTION, 0, 400, newFriction ); + const height = 3; + let numSpecks = linear( MotionConstants.MAX_FRICTION * 0.1, MotionConstants.MAX_FRICTION, 0, 400, newFriction ); numSpecks = numSpecks < 0 ? 0 : numSpecks; - var desiredBlack = Util.roundSymmetric( numSpecks / 2 ); - var desiredGray = Util.roundSymmetric( numSpecks / 2 ); - var desiredWhite = Util.roundSymmetric( numSpecks / 10 ); + const desiredBlack = Util.roundSymmetric( numSpecks / 2 ); + const desiredGray = Util.roundSymmetric( numSpecks / 2 ); + const desiredWhite = Util.roundSymmetric( numSpecks / 10 ); if ( desiredBlack === numBlack && desiredGray === numGray && desiredWhite === numWhite ) { return; @@ -221,8 +221,8 @@ define( require => { numWhite++; } - var children; - var i; + let children; + let i; while ( numBlack > desiredBlack ) { children = gravelSource.getChildren(); for ( i = children.length - 1; i >= 0; i-- ) { diff --git a/js/motion/view/PusherNode.js b/js/motion/view/PusherNode.js index 4570ebbf..b5090c6a 100644 --- a/js/motion/view/PusherNode.js +++ b/js/motion/view/PusherNode.js @@ -62,42 +62,42 @@ define( require => { * @constructor */ function PusherNode( model, layoutWidth, tandem ) { - var self = this; - var scale = 0.95; + const self = this; + const scale = 0.95; // @private - if there are no items on the stack, the node is not interactive and the // drag handler will not do anything this.interactive = true; //Create all the images up front, add as children and toggle their visible for performance and reduced garbage collection - var pushingRightNodes = []; - var pushingLeftNodes = []; - var children = []; - var standingUp = new Image( pusherStraightImage, { + const pushingRightNodes = []; + const pushingLeftNodes = []; + const children = []; + const standingUp = new Image( pusherStraightImage, { visible: true, pickable: true, scale: scale, tandem: tandem.createTandem( 'standingUpImageNode' ) } ); - var fallLeft = new Image( pusherFallDownImage, { + const fallLeft = new Image( pusherFallDownImage, { visible: false, pickable: false, scale: scale, tandem: tandem.createTandem( 'fallLeftImage' ) } ); - var fallRight = new Image( pusherFallDownImage, { + const fallRight = new Image( pusherFallDownImage, { visible: false, pickable: false, scale: new Vector2( -scale, scale ), tandem: tandem.createTandem( 'fallRightImage' ) } ); - var visibleNode = standingUp; + let visibleNode = standingUp; children.push( standingUp ); children.push( fallLeft ); children.push( fallRight ); - for ( var i = 0; i <= 30; i++ ) { - var image = i === 0 ? pusherImage0 : + for ( let i = 0; i <= 30; i++ ) { + const image = i === 0 ? pusherImage0 : i === 1 ? pusherImage1 : i === 2 ? pusherImage2 : i === 3 ? pusherImage3 : @@ -129,13 +129,13 @@ define( require => { i === 29 ? pusherImage29 : i === 30 ? pusherImage30 : null; - var rightImageNode = new Image( image, { + const rightImageNode = new Image( image, { visible: false, pickable: false, scale: scale, tandem: tandem.createTandem( 'rightImageNode' + i ) } ); - var leftImageNode = new Image( image, { + const leftImageNode = new Image( image, { visible: false, pickable: false, scale: new Vector2( -scale, scale ), @@ -164,7 +164,7 @@ define( require => { // Update the position when the pusher is not applying force (fallen or standing) function updateZeroForcePosition( x ) { - var pusherY = 362 - visibleNode.height; + const pusherY = 362 - visibleNode.height; visibleNode.translate( x, pusherY - visibleNode.y, true ); } @@ -176,15 +176,15 @@ define( require => { * * @param {string} direction description */ - var resetZeroForcePosition = function( direction ) { - var item = model.stack.get( 0 ); + const resetZeroForcePosition = function( direction ) { + const item = model.stack.get( 0 ); if ( item ) { // get the scaled width of the first image on the stack - var scaledWidth = item.view.getScaledWidth(); + const scaledWidth = item.view.getScaledWidth(); // add a little more space (10) so the pusher isn't exactly touching the stack - var delta = scaledWidth / 2 - item.pusherInsetProperty.get() + 10; + const delta = scaledWidth / 2 - item.pusherInsetProperty.get() + 10; if ( direction === 'right' ) { visibleNode.centerX = layoutWidth / 2 - visibleNode.width / 2 - delta; @@ -204,13 +204,13 @@ define( require => { */ function updateAppliedForcePosition() { assert && assert( model.stack.length > 0 ); - var pusherY = 362 - visibleNode.height; - var item = model.stack.get( 0 ); + const pusherY = 362 - visibleNode.height; + const item = model.stack.get( 0 ); // get the scaled width of the first item in the stack - var scaledWidth = item.view.getScaledWidth(); + const scaledWidth = item.view.getScaledWidth(); - var delta = scaledWidth / 2 - item.pusherInsetProperty.get(); + const delta = scaledWidth / 2 - item.pusherInsetProperty.get(); if ( model.appliedForceProperty.get() > 0 ) { visibleNode.setTranslation( (layoutWidth / 2 - visibleNode.width - delta), pusherY ); } @@ -225,9 +225,9 @@ define( require => { // get new position for the pusher node when he falls so that he falls back from // the item stack when it is moving too quickly // @returns {number} - var getPusherNodeDeltaX = function() { + const getPusherNodeDeltaX = function() { // the change in position for the model - var modelDelta = -( model.positionProperty.get() - model.previousModelPosition ); + const modelDelta = -( model.positionProperty.get() - model.previousModelPosition ); // return, transformed by the view scale return modelDelta * MotionConstants.POSITION_SCALE; @@ -241,20 +241,20 @@ define( require => { * @param {Node} newVisibleNode - visibleNode, should be either falling or standing images of the pusher * @param {string} direction description */ - var pusherLetGo = function( newVisibleNode, direction ) { + const pusherLetGo = function( newVisibleNode, direction ) { // update the visible node and place it in a position dependent on the direction // of falling or the applied force setVisibleNode( newVisibleNode ); resetZeroForcePosition( direction ); // get the translation delta from the transformed model delta and translate - var x = getPusherNodeDeltaX(); + const x = getPusherNodeDeltaX(); updateZeroForcePosition( x ); }; model.fallenProperty.link( function( fallen ) { if ( fallen ) { - var newVisibleNode = model.fallenDirectionProperty.get() === 'left' ? fallLeft : fallRight; + const newVisibleNode = model.fallenDirectionProperty.get() === 'left' ? fallLeft : fallRight; pusherLetGo( newVisibleNode, model.fallenDirectionProperty.get() ); } else { @@ -272,7 +272,7 @@ define( require => { // update visibility and position if pusher is on screen and is still able to push else { - var index = Math.min( 30, Util.roundSymmetric( Math.abs( appliedForce / 500 * 30 ) ) ); + const index = Math.min( 30, Util.roundSymmetric( Math.abs( appliedForce / 500 * 30 ) ) ); if ( appliedForce > 0 ) { setVisibleNode( pushingRightNodes[ index ] ); } @@ -283,7 +283,7 @@ define( require => { } } ); - var initializePusherNode = function() { + const initializePusherNode = function() { // makd sure that the standing node is visible, and place in initial position setVisibleNode( standingUp ); visibleNode.centerX = layoutWidth / 2 + ( model.pusherPositionProperty.get() - model.positionProperty.get() ) * MotionConstants.POSITION_SCALE; @@ -308,7 +308,7 @@ define( require => { //Update the rightImage and position when the model changes model.positionProperty.link( function() { if ( model.appliedForceProperty.get() === 0 || model.fallenProperty.get() ) { - var x = getPusherNodeDeltaX(); + const x = getPusherNodeDeltaX(); // to save processor time, don't update if the pusher is too far off screen if ( Math.abs( x ) < 2000 ) { updateZeroForcePosition( x ); @@ -316,17 +316,17 @@ define( require => { } } ); - var listener = new SimpleDragHandler( { + const listener = new SimpleDragHandler( { tandem: tandem.createTandem( 'dragHandler' ), allowTouchSnag: true, translate: function( options ) { if ( self.interactive ) { - var newAppliedForce = model.appliedForceProperty.get() + options.delta.x; - var clampedAppliedForce = Math.max( -500, Math.min( 500, newAppliedForce ) ); + const newAppliedForce = model.appliedForceProperty.get() + options.delta.x; + const clampedAppliedForce = Math.max( -500, Math.min( 500, newAppliedForce ) ); // the new force should be rounded so that applied force is not // more precise than friction force, see https://github.com/phetsims/forces-and-motion-basics/issues/197 - var roundedForce = Util.roundSymmetric( clampedAppliedForce ); + const roundedForce = Util.roundSymmetric( clampedAppliedForce ); //Only apply a force if the pusher is not fallen, see #48 if ( !model.fallenProperty.get() ) { diff --git a/js/motion/view/SpeedometerNode.js b/js/motion/view/SpeedometerNode.js index ea46356c..aa34fc67 100644 --- a/js/motion/view/SpeedometerNode.js +++ b/js/motion/view/SpeedometerNode.js @@ -41,7 +41,7 @@ define( require => { // mutate with the options after construction so we can set the 'top' Node.call( this ); - var gaugeNode = new ValueGaugeNode( speedProperty, speedString, new Range( 0, MotionConstants.MAX_SPEED ), + const gaugeNode = new ValueGaugeNode( speedProperty, speedString, new Range( 0, MotionConstants.MAX_SPEED ), { radius: 67, tandem: tandem.createTandem( 'gaugeNode' ), diff --git a/js/motion/view/WaterBucketNode.js b/js/motion/view/WaterBucketNode.js index 43c2d80a..c7283746 100644 --- a/js/motion/view/WaterBucketNode.js +++ b/js/motion/view/WaterBucketNode.js @@ -19,7 +19,7 @@ define( require => { const Vector2 = require( 'DOT/Vector2' ); // constants - var linear = Util.linear; + const linear = Util.linear; /** * WaterBucketNode constructor @@ -38,7 +38,7 @@ define( require => { function WaterBucketNode( model, motionView, item, image, imageSitting, imageHolding, showMassesProperty, toolboxNode, tandem ) { this.item = item; ItemNode.call( this, model, motionView, item, image, imageSitting, imageHolding, showMassesProperty, toolboxNode, tandem ); - var waterPathNode = new Path( Shape.lineSegment( new Vector2( 0, 0 ), new Vector2( 0, 18 ) ), { + const waterPathNode = new Path( Shape.lineSegment( new Vector2( 0, 0 ), new Vector2( 0, 18 ) ), { stroke: 'black', fill: 'rgb(9, 125, 159)', lineWidth: 1, @@ -48,25 +48,25 @@ define( require => { waterPathNode.moveToBack(); //Keep track of the history to show a momentum-based "sloshing" effect - var history = []; + const history = []; //Metrics based on original image size of 98 pixels wide. - var padX = 4.5; - var padY = 9; - var s = image.width / 98.0; + const padX = 4.5; + const padY = 9; + const s = image.width / 98.0; - var leftLineX = function( x ) {return linear( 0, 1, ( 1 + padX ) * s, ( 10 + padX ) * s, x );}; - var leftLineY = function( x ) {return linear( 0, 1, ( 9 - padY ) * s, ( 102 - padY ) * s, x );}; + const leftLineX = function( x ) {return linear( 0, 1, ( 1 + padX ) * s, ( 10 + padX ) * s, x );}; + const leftLineY = function( x ) {return linear( 0, 1, ( 9 - padY ) * s, ( 102 - padY ) * s, x );}; - var rightLineX = function( x ) {return linear( 1, 0, ( 87 - padX ) * s, ( 96 - padX ) * s, x );}; - var rightLineY = function( x ) {return linear( 1, 0, ( 102 - padY ) * s, ( 9 - padY ) * s, x );}; + const rightLineX = function( x ) {return linear( 1, 0, ( 87 - padX ) * s, ( 96 - padX ) * s, x );}; + const rightLineY = function( x ) {return linear( 1, 0, ( 102 - padY ) * s, ( 9 - padY ) * s, x );}; - var min = 0.5; //Water level when acceleration = 0 + const min = 0.5; //Water level when acceleration = 0 //When the model steps in time, update the water shape //The delta value is the critical value in determining the water shape. //Compute it separately as a guard against reshaping the water bucket node when the shape hasn't really changed - var deltaProperty = new DerivedProperty( [ model.timeProperty, item.draggingProperty ], function( time, dragging ) { + const deltaProperty = new DerivedProperty( [ model.timeProperty, item.draggingProperty ], function( time, dragging ) { // if the bucket is being dragged, we want delta to be zero, regardless of // whether or not the sim is running @@ -74,17 +74,17 @@ define( require => { return 0; } - var acceleration = model.accelerationProperty.get(); + const acceleration = model.accelerationProperty.get(); history.push( acceleration ); while ( history.length > 7 ) { history.shift();//remove front item } - var sum = 0; - for ( var i = 0; i < history.length; i++ ) { + let sum = 0; + for ( let i = 0; i < history.length; i++ ) { sum += history[ i ]; } - var composite = sum / history.length; + const composite = sum / history.length; return model.isInStack( item ) ? -composite / 50 : 0; } ); @@ -92,7 +92,7 @@ define( require => { //When the shape has really changed, update the water node deltaProperty.link( function( delta ) { - var path = new Shape(); + const path = new Shape(); path.moveTo( leftLineX( min + delta ), leftLineY( min + delta ) ); path.lineTo( leftLineX( 1 ), leftLineY( 1 ) ); path.lineTo( rightLineX( 1 ), rightLineY( 1 ) ); diff --git a/js/netforce/model/Knot.js b/js/netforce/model/Knot.js index e759cda2..4f8aac70 100644 --- a/js/netforce/model/Knot.js +++ b/js/netforce/model/Knot.js @@ -35,7 +35,7 @@ define( require => { tandem: Tandem.required, phetioType: KnotIO }, options ); - var tandem = options.tandem; + const tandem = options.tandem; this.initX = x; this.type = type; diff --git a/js/netforce/model/NetForceModel.js b/js/netforce/model/NetForceModel.js index d75fd8d4..5daa89ba 100644 --- a/js/netforce/model/NetForceModel.js +++ b/js/netforce/model/NetForceModel.js @@ -27,12 +27,12 @@ define( require => { // constants // puller game will extend to +/- this value - when the cart wheel hits this length, the game is over - var GAME_LENGTH = 458; + const GAME_LENGTH = 458; // spacing for the knots - var KNOT_SPACING = 80; - var BLUE_KNOT_OFFSET = 62; - var RED_KNOT_OFFSET = 680; + const KNOT_SPACING = 80; + const BLUE_KNOT_OFFSET = 62; + const RED_KNOT_OFFSET = 680; /** * Constructor for the net force model. @@ -42,7 +42,7 @@ define( require => { */ function NetForceModel( tandem ) { - var self = this; + const self = this; this.startedProperty = new BooleanProperty( false, { tandem: tandem.createTandem( 'startedProperty' ) @@ -120,7 +120,7 @@ define( require => { //Create a knot given a color and index (0-3) function createKnot( color, index, tandem ) { - var xLocation = ( color === 'blue' ? BLUE_KNOT_OFFSET : RED_KNOT_OFFSET ) + index * KNOT_SPACING; + const xLocation = ( color === 'blue' ? BLUE_KNOT_OFFSET : RED_KNOT_OFFSET ) + index * KNOT_SPACING; return new Knot( xLocation, color, BLUE_KNOT_OFFSET, self.getRopeLength(), { tandem: tandem } ); } @@ -139,9 +139,9 @@ define( require => { ]; // create the pullers - var bigPullerY = 473; - var mediumPullerY = 426; - var smallPullerY = 394; + const bigPullerY = 473; + const mediumPullerY = 426; + const smallPullerY = 394; this.pullers = [ new Puller( 208, bigPullerY, 'blue', 'small', 10, tandem.createTandem( 'smallBluePuller1' ) ), @@ -164,7 +164,7 @@ define( require => { self.numberPullersAttachedProperty.set( self.countAttachedPullers() ); } ); puller.droppedEmitter.addListener( function() { - var knot = self.getTargetKnot( puller ); + const knot = self.getTargetKnot( puller ); self.movePullerToKnot( puller, knot ); } ); puller.knotProperty.link( function() { @@ -213,7 +213,7 @@ define( require => { } //Keep track of their location to change the attach/detach thresholds, see NetForceModel.getTargetKnot - var newLocation = knot ? 'knot' : 'home'; + const newLocation = knot ? 'knot' : 'home'; puller.lastPlacementProperty.set( newLocation ); }, @@ -244,14 +244,14 @@ define( require => { */ shiftPuller: function( puller, leftBoundIndex, rightBoundIndex, delta ) { if ( puller.knotProperty.get() ) { - var currentIndex = this.knots.indexOf( puller.knotProperty.get() ); + const currentIndex = this.knots.indexOf( puller.knotProperty.get() ); if ( currentIndex !== leftBoundIndex && currentIndex !== rightBoundIndex ) { - var nextIndex = currentIndex + delta; + const nextIndex = currentIndex + delta; - var currentKnot = this.knots[ currentIndex ]; - var nextKnot = this.knots[ nextIndex ]; + const currentKnot = this.knots[ currentIndex ]; + const nextKnot = this.knots[ nextIndex ]; - var otherPuller = this.getPuller( nextKnot ); + const otherPuller = this.getPuller( nextKnot ); puller.setValues( { position: new Vector2( nextKnot.xProperty.get(), nextKnot.y ), knot: nextKnot } ); otherPuller && otherPuller.setValues( { @@ -264,8 +264,8 @@ define( require => { //Count the number of pullers attached to the rope countAttachedPullers: function() { - var count = 0; - for ( var i = 0; i < this.pullers.length; i++ ) { + let count = 0; + for ( let i = 0; i < this.pullers.length; i++ ) { if ( this.pullers[ i ].knotProperty.get() ) { count++; } @@ -275,11 +275,11 @@ define( require => { //Change knot visibility (halo highlight) when the pullers are dragged updateVisibleKnots: function() { - var self = this; + const self = this; this.knots.forEach( function( knot ) { knot.visibleProperty.set( false ); } ); this.pullers.forEach( function( puller ) { if ( puller.draggingProperty.get() ) { - var knot = self.getTargetKnot( puller ); + const knot = self.getTargetKnot( puller ); if ( knot ) { knot.visibleProperty.set( true ); } @@ -293,7 +293,7 @@ define( require => { * @param {Knot} knot */ getPuller: function( knot ) { - var find = _.find( this.pullers, function( puller ) {return puller.knotProperty.get() === knot;} ); + const find = _.find( this.pullers, function( puller ) {return puller.knotProperty.get() === knot;} ); return typeof( find ) !== 'undefined' ? find : null; }, @@ -307,7 +307,7 @@ define( require => { // the blue pullers face to the right, so add a small correction so the distance feels more 'natural' when // placing the blue pullers - var dx = puller.type === 'red' ? 0 : -40; + const dx = puller.type === 'red' ? 0 : -40; return function( knot ) { return Math.sqrt( Math.pow( knot.xProperty.get() - puller.positionProperty.get().x + dx, 2 ) + Math.pow( knot.y - puller.positionProperty.get().y, 2 ) ); }; }, @@ -318,8 +318,8 @@ define( require => { * @returns {Knot} */ getClosestOpenKnot: function( puller ) { - var self = this; - var filter = this.knots.filter( function( knot ) { + const self = this; + const filter = this.knots.filter( function( knot ) { return knot.type === puller.type && self.getPuller( knot ) === null; } ); return _.minBy( filter, this.getKnotPullerDistance( puller ) ); @@ -332,8 +332,8 @@ define( require => { * @returns {Knot} */ getClosestOpenKnotFromCart: function( puller ) { - var idx = puller.type === 'red' ? 4 : 3; - var delta = puller.type === 'red' ? 1 : -1; + let idx = puller.type === 'red' ? 4 : 3; + const delta = puller.type === 'red' ? 1 : -1; while ( this.getPuller( this.knots[ idx ] ) !== null ) { idx += delta; } @@ -346,11 +346,11 @@ define( require => { * @returns {Knot} */ getTargetKnot: function( puller ) { - var target = this.getClosestOpenKnot( puller ); - var distanceToTarget = this.getKnotPullerDistance( puller )( target ); + const target = this.getClosestOpenKnot( puller ); + const distanceToTarget = this.getKnotPullerDistance( puller )( target ); //Only accept a target knot if the puller's head is close enough to the knot - var threshold = puller.lastPlacementProperty.get() === 'home' ? 370 : 300; + const threshold = puller.lastPlacementProperty.get() === 'home' ? 370 : 300; return distanceToTarget < 220 && puller.positionProperty.get().y < threshold ? target : null; }, @@ -427,14 +427,14 @@ define( require => { this.durationProperty.set( this.durationProperty.get() + dt ); // Make the simulation run about as fast as the Java version - var newV = this.cart.vProperty.get() + this.getNetForce() * dt * 0.003; + const newV = this.cart.vProperty.get() + this.getNetForce() * dt * 0.003; this.speedProperty.set( Math.abs( newV ) ); // calculate new position from velocity - var newX = this.cart.xProperty.get() + newV * dt * 60.0; + const newX = this.cart.xProperty.get() + newV * dt * 60.0; //If the cart made it to the end, then stop and signify completion - var gameLength = GAME_LENGTH - this.cart.widthToWheel; + const gameLength = GAME_LENGTH - this.cart.widthToWheel; if ( newX > gameLength || newX < -gameLength ) { this.runningProperty.set( false ); this.stateProperty.set( 'completed' ); @@ -443,7 +443,7 @@ define( require => { this.speedProperty.set( 0 ); // set cart and pullers back the to max position - var maxLength = newX > gameLength ? gameLength : -gameLength; + const maxLength = newX > gameLength ? gameLength : -gameLength; this.updateCartAndPullers( this.speedProperty.get(), maxLength ); } else { @@ -515,19 +515,19 @@ define( require => { * @returns {Knot} */ getClosestOpenKnotInDirection: function( puller, delta ) { - var self = this; - var isInRightDirection = function( sourceKnot, destinationKnot, delta ) { + const self = this; + const isInRightDirection = function( sourceKnot, destinationKnot, delta ) { assert && assert( delta < 0 || delta > 0 ); return delta < 0 ? destinationKnot.xProperty.get() < sourceKnot.xProperty.get() : delta > 0 ? destinationKnot.xProperty.get() > sourceKnot.xProperty.get() : 'error'; }; - var filter = this.knots.filter( function( knot ) { + const filter = this.knots.filter( function( knot ) { return knot.type === puller.type && self.getPuller( knot ) === null && isInRightDirection( puller.knotProperty.get(), knot, delta ); } ); - var result = _.minBy( filter, this.getKnotPullerDistance( puller ) ); + let result = _.minBy( filter, this.getKnotPullerDistance( puller ) ); if ( result === Infinity || result === -Infinity ) { result = null; } @@ -544,19 +544,19 @@ define( require => { * @param {number} delta */ getNextOpenKnotInDirection: function( sourceKnot, puller, delta ) { - var self = this; - var isInRightDirection = function( destinationKnot, delta ) { + const self = this; + const isInRightDirection = function( destinationKnot, delta ) { assert && assert( delta < 0 || delta > 0 ); return delta < 0 ? destinationKnot.xProperty.get() < sourceKnot.xProperty.get() : delta > 0 ? destinationKnot.xProperty.get() > sourceKnot.xProperty.get() : 'error'; }; - var filter = this.knots.filter( function( knot ) { + const filter = this.knots.filter( function( knot ) { return knot.type === puller.type && self.getPuller( knot ) === null && isInRightDirection( knot, delta ); } ); - var result = _.minBy( filter, function( knot ) { + let result = _.minBy( filter, function( knot ) { return Math.abs( sourceKnot.xProperty.get() - knot.xProperty.get() ); } ); @@ -586,7 +586,7 @@ define( require => { * @param {number} delta */ movePullerToAdjacentOpenKnot: function( puller, delta ) { - var closestOpenKnot = this.getClosestOpenKnotInDirection( puller, delta ); + const closestOpenKnot = this.getClosestOpenKnotInDirection( puller, delta ); if ( closestOpenKnot ) { this.movePullerToKnot( puller, closestOpenKnot ); } diff --git a/js/netforce/model/Puller.js b/js/netforce/model/Puller.js index 232ab0df..7d832fe3 100644 --- a/js/netforce/model/Puller.js +++ b/js/netforce/model/Puller.js @@ -39,7 +39,7 @@ define( require => { this.pullerTandem = tandem; options = _.extend( { standOffsetX: 0, other: '' }, options ); - var self = this; + const self = this; this.dragOffsetX = dragOffsetX; this.standOffsetX = options.standOffsetX; @@ -82,7 +82,7 @@ define( require => { this.other = options.other; //Move with the knot - var updatePosition = function( knotX ) { + const updatePosition = function( knotX ) { self.positionProperty.set( new Vector2( knotX, self.positionProperty.get().y ) ); }; diff --git a/js/netforce/view/CartNode.js b/js/netforce/view/CartNode.js index 0a10cc6f..1c0d7f9e 100644 --- a/js/netforce/view/CartNode.js +++ b/js/netforce/view/CartNode.js @@ -42,8 +42,8 @@ define( require => { this.xPosition = this.cart.xProperty.get(); // add a speedometer to the cart - var speedRange = new Range( 0, 6 ); // speed range of the cart in m/s - var speedometerNode = new GaugeNode( speedProperty, speedString, speedRange, { + const speedRange = new Range( 0, 6 ); // speed range of the cart in m/s + const speedometerNode = new GaugeNode( speedProperty, speedString, speedRange, { centerX: this.centerX, centerY: this.height / 2, radius: this.width * 0.25, diff --git a/js/netforce/view/CartStopperNode.js b/js/netforce/view/CartStopperNode.js index 9bae88ca..029e29fc 100644 --- a/js/netforce/view/CartStopperNode.js +++ b/js/netforce/view/CartStopperNode.js @@ -17,7 +17,7 @@ define( require => { const Shape = require( 'KITE/Shape' ); // constants - var DIRECTIONS = [ 'left', 'right' ]; + const DIRECTIONS = [ 'left', 'right' ]; /** * @constructor @@ -29,7 +29,7 @@ define( require => { fill: 'grey' }, options ); - var stopperShape = new Shape().moveTo( 0, 0 ).lineTo( bottomWidth, 0 ).lineTo( topWidth, -height ).lineTo( 0, -height ); + const stopperShape = new Shape().moveTo( 0, 0 ).lineTo( bottomWidth, 0 ).lineTo( topWidth, -height ).lineTo( 0, -height ); Path.call( this, stopperShape ); // flip around the y axis diff --git a/js/netforce/view/FlagNode.js b/js/netforce/view/FlagNode.js index f79fac90..ef7ea791 100644 --- a/js/netforce/view/FlagNode.js +++ b/js/netforce/view/FlagNode.js @@ -31,13 +31,13 @@ define( require => { * @constructor */ function FlagNode( model, centerX, top, tandem ) { - var self = this; + const self = this; this.model = model; Node.call( this, { tandem: tandem } ); - var textNode = new Text( model.cart.xProperty.get() < 0 ? blueWinsString : redWinsString, { + const textNode = new Text( model.cart.xProperty.get() < 0 ? blueWinsString : redWinsString, { tandem: tandem.createTandem( 'textNode' ), font: new PhetFont( 24 ), fill: 'white' @@ -56,7 +56,7 @@ define( require => { } this.addChild( textNode ); - var update = this.updateFlagShape.bind( this ); + const update = this.updateFlagShape.bind( this ); // listeners that will dispose the flag node when model is reset or cart is returned - // these must also be disposed @@ -86,11 +86,11 @@ define( require => { //Update the flag shape, copied from the Java version updateFlagShape: function() { - var shape = new Shape(); - var maxX = 220; - var maxY = 55; - var dy = ( 7 * Math.sin( this.model.timeProperty.get() * 6 ) ); - var dx = ( 2 * Math.sin( this.model.timeProperty.get() * 5 ) ) + 10; + const shape = new Shape(); + const maxX = 220; + const maxY = 55; + const dy = ( 7 * Math.sin( this.model.timeProperty.get() * 6 ) ); + const dx = ( 2 * Math.sin( this.model.timeProperty.get() * 5 ) ) + 10; shape.moveTo( 0, 0 ); shape.cubicCurveTo( maxX / 3 + dx, 25 + dy, 2 * maxX / 3 + dx, -25 - dy, maxX + dx, dy / 2 ); shape.lineTo( maxX + dx, maxY + dy / 2 ); diff --git a/js/netforce/view/GoPauseButton.js b/js/netforce/view/GoPauseButton.js index 0fae875c..0c2237e3 100644 --- a/js/netforce/view/GoPauseButton.js +++ b/js/netforce/view/GoPauseButton.js @@ -42,8 +42,8 @@ define( require => { * @returns {Rectangle} */ function wrap( node, padX, padY, nodes ) { - var maxWidth = -1; - var maxHeight = -1; + let maxWidth = -1; + let maxHeight = -1; nodes.forEach( function( n ) { if ( n.width > maxWidth ) { maxWidth = n.width; @@ -73,57 +73,57 @@ define( require => { options = _.extend( { top: 400 }, options ); - var padX = 15; - var padY = 10; - var goTextNode = new Text( goString, { + const padX = 15; + const padY = 10; + const goTextNode = new Text( goString, { font: new PhetFont( 42 ), tandem: tandem.createTandem( 'goTextNode' ) } ); - var pauseTextNode = new Text( pauseString, { + const pauseTextNode = new Text( pauseString, { font: new PhetFont( 30 ), tandem: tandem.createTandem( 'pauseTextNode' ) } ); // boolean function to determine if the go button should be enabled based on model state. - var isGoButtonEnabled = function() { + const isGoButtonEnabled = function() { return model.stateProperty.get() !== 'completed' && ( model.numberPullersAttachedProperty.get() > 0 || model.runningProperty.get() ); }; // When the go button is pressed, indicate which pullers are on which knots and what the net force is. - var goButtonPressedEmitter = new Emitter( { + const goButtonPressedEmitter = new Emitter( { tandem: tandem.createTandem( 'goButtonPressedEmitter' ), parameters: [ { name: 'netForce', phetioType: NumberIO }, { name: 'knotJSON', phetioType: StringIO } ] } ); - var goListener = function() { + const goListener = function() { goButtonPressedEmitter.emit( model.netForceProperty.get(), JSON.stringify( model.getKnotDescription() ) ); model.runningProperty.set( true ); }; - var goButton = new RoundPushButton( { + const goButton = new RoundPushButton( { content: wrap( goTextNode, padX, padY, [ goTextNode, pauseTextNode ] ), baseColor: '#94b830', listener: goListener, tandem: tandem.createTandem( 'goButton' ) } );//green - var pauseListener = function() { + const pauseListener = function() { model.runningProperty.set( false ); }; - var pauseButton = new RoundPushButton( { + const pauseButton = new RoundPushButton( { content: wrap( pauseTextNode, padX, padY, [ goTextNode, pauseTextNode ] ), baseColor: '#df1a22', listener: pauseListener, tandem: tandem.createTandem( 'pauseButton' ) } );//red - var showGoButtonProperty = new DerivedProperty( [ model.runningProperty ], function( running ) { return !running; } ); + const showGoButtonProperty = new DerivedProperty( [ model.runningProperty ], function( running ) { return !running; } ); BooleanToggleNode.call( this, goButton, pauseButton, showGoButtonProperty, options ); //Show the go/pause button if any pullers are attached or if the cart got started moving, and if it hasn't already finished a match, see #61 Property.multilink( [ model.runningProperty, model.stateProperty, model.numberPullersAttachedProperty ], function() { - var enabled = isGoButtonEnabled(); + const enabled = isGoButtonEnabled(); goButton.enabled = enabled; pauseButton.enabled = enabled; } ); diff --git a/js/netforce/view/NetForceControlPanel.js b/js/netforce/view/NetForceControlPanel.js index 6e644945..26e47cba 100644 --- a/js/netforce/view/NetForceControlPanel.js +++ b/js/netforce/view/NetForceControlPanel.js @@ -26,7 +26,7 @@ define( require => { const valuesString = require( 'string!FORCES_AND_MOTION_BASICS/values' ); // constants - var BUTTON_PADDING = 7; // placement padding for the reset all button and the mute button + const BUTTON_PADDING = 7; // placement padding for the reset all button and the mute button // strings const speedString = require( 'string!FORCES_AND_MOTION_BASICS/speed' ); @@ -43,18 +43,18 @@ define( require => { options = _.extend( { tandem: tandem }, options ); Node.call( this, options ); - var fontOptions = { font: new PhetFont( 18 ), maxWidth: 230 }; + const fontOptions = { font: new PhetFont( 18 ), maxWidth: 230 }; // the content for "show speed" is a label with an icon - var speedometerIcon = ForcesAndMotionBasicsIconFactory.speedometerIcon( tandem.createTandem( 'speedometerIcon' ) ); - var showSpeedTextNode = new Text( speedString, _.extend( { tandem: tandem.createTandem( 'showSpeedTextNode' ) }, fontOptions ) ); - var showSpeedContent = new HBox( { + const speedometerIcon = ForcesAndMotionBasicsIconFactory.speedometerIcon( tandem.createTandem( 'speedometerIcon' ) ); + const showSpeedTextNode = new Text( speedString, _.extend( { tandem: tandem.createTandem( 'showSpeedTextNode' ) }, fontOptions ) ); + const showSpeedContent = new HBox( { children: [ showSpeedTextNode, speedometerIcon ], tandem: tandem.createTandem( 'showSpeedContent' ), spacing: 10 } ); - var verticalCheckboxGroupTandem = tandem.createTandem( 'verticalCheckboxGroup' ); + const verticalCheckboxGroupTandem = tandem.createTandem( 'verticalCheckboxGroup' ); this.verticalCheckboxGroup = new VerticalCheckboxGroup( [ { node: new Text( sumOfForcesString, _.extend( { tandem: tandem.createTandem( 'showSumOfForcesTextNode' ) }, fontOptions ) ), property: model.showSumOfForcesProperty, @@ -70,7 +70,7 @@ define( require => { } ], { tandem: verticalCheckboxGroupTandem } ); - var checkboxPanel = new Panel( this.verticalCheckboxGroup, { + const checkboxPanel = new Panel( this.verticalCheckboxGroup, { xMargin: 10, yMargin: 10, fill: '#e3e980', @@ -89,7 +89,7 @@ define( require => { } ); this.addChild( this.resetAllButton ); - var soundToggleButton = new SoundToggleButton( model.volumeOnProperty, { + const soundToggleButton = new SoundToggleButton( model.volumeOnProperty, { padX: 19, padY: 19, centerY: this.resetAllButton.centerY, diff --git a/js/netforce/view/NetForceScreenView.js b/js/netforce/view/NetForceScreenView.js index eccdbd89..6b515ab0 100644 --- a/js/netforce/view/NetForceScreenView.js +++ b/js/netforce/view/NetForceScreenView.js @@ -60,10 +60,10 @@ define( require => { const golfClapSound = require( 'sound!FORCES_AND_MOTION_BASICS/golf-clap.mp3' ); // constants - var STOPPER_TOP_WIDTH = 11; - var STOPPER_BOTTOM_WIDTH = 30; - var STOPPER_HEIGHT = 24; - var SUM_ARROW_TAIL_Y = 127; + const STOPPER_TOP_WIDTH = 11; + const STOPPER_BOTTOM_WIDTH = 30; + const STOPPER_HEIGHT = 24; + const SUM_ARROW_TAIL_Y = 127; /** * @param {NetForceModel} model @@ -71,7 +71,7 @@ define( require => { * @constructor */ function NetForceScreenView( model, tandem ) { - var self = this; + const self = this; ScreenView.call( this, { layoutBounds: ForcesAndMotionBasicsLayoutBounds, @@ -79,15 +79,15 @@ define( require => { } ); //Fit to the window and render the initial scene - var width = this.layoutBounds.width; - var height = this.layoutBounds.height; + const width = this.layoutBounds.width; + const height = this.layoutBounds.height; this.model = model; //Create the sky and ground. Allow the sky and ground to go off the screen in case the window is larger than the sim aspect ratio - var skyHeight = 376; - var grassY = 368; - var groundHeight = height - skyHeight; + const skyHeight = 376; + const grassY = 368; + const groundHeight = height - skyHeight; this.addChild( new Rectangle( -width, -skyHeight, width * 3, skyHeight * 2, { fill: new LinearGradient( 0, 0, 0, skyHeight ).addColorStop( 0, '#02ace4' ).addColorStop( 1, '#cfecfc' ) } ) ); @@ -115,7 +115,7 @@ define( require => { this.cartNode = new CartNode( model.cart, model.speedProperty, model.showSpeedProperty, tandem.createTandem( 'cartNode' ) ); //Black caret below the cart - var layoutCenterX = this.layoutBounds.width / 2; + const layoutCenterX = this.layoutBounds.width / 2; this.addChild( new Path( new Shape().moveTo( -10, 10 ).lineTo( 0, 0 ).lineTo( 10, 10 ), { stroke: '#000000', lineWidth: 3, @@ -124,9 +124,9 @@ define( require => { tandem: tandem.createTandem( 'caretPathNode' ) } ) ); - var cursorWidth = 18; + const cursorWidth = 18; - var cursorPathNode = new Path( new Shape().moveTo( 0, 0 ).lineTo( cursorWidth, 0 ).lineTo( cursorWidth / 2, cursorWidth / 10 * 8 ).close(), { + const cursorPathNode = new Path( new Shape().moveTo( 0, 0 ).lineTo( cursorWidth, 0 ).lineTo( cursorWidth / 2, cursorWidth / 10 * 8 ).close(), { fill: 'blue', stroke: 'black', lineWidth: 1, @@ -134,12 +134,12 @@ define( require => { } ); // cart stoppers that seem to stop cart motion - var stopperY = grassY + 5; // a little lower than the grass because the grass includes some sky blue - var rightStopper = new CartStopperNode( STOPPER_TOP_WIDTH, STOPPER_BOTTOM_WIDTH, STOPPER_HEIGHT, tandem.createTandem( 'rightStopper' ), { + const stopperY = grassY + 5; // a little lower than the grass because the grass includes some sky blue + const rightStopper = new CartStopperNode( STOPPER_TOP_WIDTH, STOPPER_BOTTOM_WIDTH, STOPPER_HEIGHT, tandem.createTandem( 'rightStopper' ), { left: layoutCenterX + NetForceModel.GAME_LENGTH, y: stopperY } ); - var leftStopper = new CartStopperNode( STOPPER_TOP_WIDTH, STOPPER_BOTTOM_WIDTH, STOPPER_HEIGHT, tandem.createTandem( 'leftStopper' ), { + const leftStopper = new CartStopperNode( STOPPER_TOP_WIDTH, STOPPER_BOTTOM_WIDTH, STOPPER_HEIGHT, tandem.createTandem( 'leftStopper' ), { direction: 'right', right: layoutCenterX - NetForceModel.GAME_LENGTH, y: stopperY @@ -156,8 +156,8 @@ define( require => { this.addChild( this.ropeNode ); // create the toolboxes that hold the puller children - var leftToolbox = new PullerToolboxNode( model, this, 25, 'left', 0, 0, 3, 'blue' ); - var rightToolbox = new PullerToolboxNode( model, this, 630, 'right', model.pullers.length - 1, 4, model.pullers.length - 1, 'red' ); + const leftToolbox = new PullerToolboxNode( model, this, 25, 'left', 0, 0, 3, 'blue' ); + const rightToolbox = new PullerToolboxNode( model, this, 630, 'right', model.pullers.length - 1, 4, model.pullers.length - 1, 'red' ); this.addChild( leftToolbox ); this.addChild( rightToolbox ); @@ -168,7 +168,7 @@ define( require => { } ) ); //Create the arrow nodes - var opacity = 0.8; + const opacity = 0.8; this.sumArrow = new ReadoutArrow( sumOfForcesString, '#7dc673', layoutCenterX, SUM_ARROW_TAIL_Y, this.model.netForceProperty, this.model.showValuesProperty, tandem.createTandem( 'sumArrow' ), { lineDash: [ 10, 5 ], labelPosition: 'top', opacity: opacity @@ -199,9 +199,9 @@ define( require => { this.addChild( this.cartNode ); //Lookup a puller image given a puller instance and whether they are leaning or not. - var getPullerImage = function( puller, leaning ) { - var type = puller.type; - var size = puller.size; + const getPullerImage = function( puller, leaning ) { + const type = puller.type; + const size = puller.size; //todo: compress with more ternary? return type === 'blue' && size === 'large' && !leaning ? pullFigureLargeBlue0Image : @@ -220,26 +220,26 @@ define( require => { }; // get the associated toolbox for the puller - var getPullerToolbox = function( puller ) { + const getPullerToolbox = function( puller ) { return puller.type === 'red' ? rightToolbox : leftToolbox; }; - var leftPullerLayer = new Node( { + const leftPullerLayer = new Node( { tandem: tandem.createTandem( 'leftPullerLayer' ) } ); - var rightPullerLayer = new Node( { + const rightPullerLayer = new Node( { tandem: tandem.createTandem( 'rightPullerLayer' ) } ); this.pullerNodes = []; this.model.pullers.forEach( function( puller ) { - var pullerNode = new PullerNode( puller, self.model, + const pullerNode = new PullerNode( puller, self.model, getPullerImage( puller, false ), getPullerImage( puller, true ), getPullerToolbox( puller ), tandem.createTandem( puller.pullerTandem.name ) ); - var pullerLayer = pullerNode.puller.type === 'blue' ? leftPullerLayer : rightPullerLayer; + const pullerLayer = pullerNode.puller.type === 'blue' ? leftPullerLayer : rightPullerLayer; pullerLayer.addChild( pullerNode ); self.pullerNodes.push( pullerNode ); } ); @@ -249,8 +249,8 @@ define( require => { //Add the go button, but only if there is a puller attached // i18n - ensure that the go, pause, and return buttons will fit in between the puller toolboxes - var maxWidth = ( rightToolbox.left - leftToolbox.right ) / 2; - var goPauseButton = new GoPauseButton( this.model, this.layoutBounds.width, tandem.createTandem( 'goPauseButton' ), { + const maxWidth = ( rightToolbox.left - leftToolbox.right ) / 2; + const goPauseButton = new GoPauseButton( this.model, this.layoutBounds.width, tandem.createTandem( 'goPauseButton' ), { maxWidth: maxWidth, tandem: tandem.createTandem( 'goPauseButton' ) } ); @@ -275,7 +275,7 @@ define( require => { } ); this.addChild( this.controlPanel ); - var lastFlagNode = null; + let lastFlagNode = null; // Show the flag node when pulling is complete Property.multilink( [ model.stateProperty, model.cart.xProperty ], function( state, x ) { @@ -287,7 +287,7 @@ define( require => { } } ); - var golfClap = new Sound( golfClapSound ); + const golfClap = new Sound( golfClapSound ); //Play audio golf clap when game completed model.stateProperty.link( function( state ) { diff --git a/js/netforce/view/PullerNode.js b/js/netforce/view/PullerNode.js index c7fed726..dd111e93 100644 --- a/js/netforce/view/PullerNode.js +++ b/js/netforce/view/PullerNode.js @@ -29,12 +29,12 @@ define( require => { */ function PullerNode( puller, model, image, pullImage, pullerToolboxNode, tandem, options ) { this.puller = puller; - var self = this; + const self = this; this.puller.node = this; //Wire up so node can be looked up by model element. this.standImage = image; // @private this.pullImage = pullImage; // @private - var x = puller.positionProperty.get().x; - var y = puller.positionProperty.get().y; + const x = puller.positionProperty.get().x; + const y = puller.positionProperty.get().y; Image.call( this, this.standImage, { tandem: tandem, @@ -66,13 +66,13 @@ define( require => { self.updateLocation( puller, model ); } ); - var dragHandler = new SimpleDragHandler( { + const dragHandler = new SimpleDragHandler( { tandem: tandem.createTandem( 'dragHandler' ), allowTouchSnag: true, start: function( event ) { // check to see if a puller is knotted - if it is, store the knot - var knot = puller.knotProperty.get(); + const knot = puller.knotProperty.get(); // disconnect the puller from the knot and update the image puller.disconnect(); @@ -132,7 +132,7 @@ define( require => { * @param {Knot} knot - the last knot that the puller was holding on to */ updateLocationKnotted: function( puller, model, knot ) { - var blueOffset = this.puller.type === 'blue' ? -60 : 0; + const blueOffset = this.puller.type === 'blue' ? -60 : 0; puller.positionProperty.set( new Vector2( knot.xProperty.get() + blueOffset, knot.y - this.height + 90 ) ); }, @@ -143,8 +143,8 @@ define( require => { * @param {NetForceModel} model */ updateImage: function( puller, model ) { - var knotted = puller.knotProperty.get(); - var pulling = model.startedProperty.get() && knotted && model.stateProperty.get() !== 'completed'; + const knotted = puller.knotProperty.get(); + const pulling = model.startedProperty.get() && knotted && model.stateProperty.get() !== 'completed'; this.image = pulling ? this.pullImage : this.standImage; }, @@ -155,11 +155,11 @@ define( require => { * @param {NetForceModel} model */ updateLocation: function( puller, model ) { - var knotted = puller.knotProperty.get(); - var pulling = model.startedProperty.get() && knotted && model.stateProperty.get() !== 'completed'; + const knotted = puller.knotProperty.get(); + const pulling = model.startedProperty.get() && knotted && model.stateProperty.get() !== 'completed'; if ( knotted ) { - var pullingOffset = pulling ? -puller.dragOffsetX : puller.standOffsetX; - var blueOffset = this.puller.type === 'blue' ? -60 + 10 : 0; + const pullingOffset = pulling ? -puller.dragOffsetX : puller.standOffsetX; + const blueOffset = this.puller.type === 'blue' ? -60 + 10 : 0; this.setTranslation( puller.knotProperty.get().xProperty.get() + pullingOffset + blueOffset, puller.knotProperty.get().y - this.height + 90 ); } else { diff --git a/js/netforce/view/PullerToolboxNode.js b/js/netforce/view/PullerToolboxNode.js index 6e246e6f..29e8ac9e 100644 --- a/js/netforce/view/PullerToolboxNode.js +++ b/js/netforce/view/PullerToolboxNode.js @@ -14,8 +14,8 @@ define( require => { const Rectangle = require( 'SCENERY/nodes/Rectangle' ); // constants - var defaultStroke = 'black'; - var defaultLineWidth = 1; + const defaultStroke = 'black'; + const defaultLineWidth = 1; /** * Create toolbox backgrounds for the pullers @@ -31,17 +31,17 @@ define( require => { function PullerToolboxNode( model, netForceScreenView, x, side, activePullerIndex, minIndex, maxIndex, highlightColor ) { this.highlightColor = highlightColor; this.uniqueId = side + '-pullerToolbox'; - var toolboxHeight = 216; + const toolboxHeight = 216; - var toolboxOptions = { + const toolboxOptions = { fill: '#e7e8e9', stroke: defaultStroke, lineWidth: defaultLineWidth }; - var toolboxY = netForceScreenView.layoutBounds.height - toolboxHeight - 4; - var toolboxWidth = 324; - var toolboxArcWidth = 10; + const toolboxY = netForceScreenView.layoutBounds.height - toolboxHeight - 4; + const toolboxWidth = 324; + const toolboxArcWidth = 10; Rectangle.call( this, x, toolboxY, toolboxWidth, toolboxHeight, toolboxArcWidth, toolboxArcWidth, toolboxOptions ); } diff --git a/js/netforce/view/ReturnButton.js b/js/netforce/view/ReturnButton.js index f8d922e1..4b14cec2 100644 --- a/js/netforce/view/ReturnButton.js +++ b/js/netforce/view/ReturnButton.js @@ -26,7 +26,7 @@ define( require => { function ReturnButton( model, tandem, options ) { // TODO: this method bound the model. Why? - var returnCart = function() { + const returnCart = function() { model.returnCart(); }; TextPushButton.call( this, returnString, {