From caa95957ee804ff6c45da4aef19a4a305bd5f8eb Mon Sep 17 00:00:00 2001 From: zepumph Date: Thu, 19 Sep 2019 14:25:06 -0800 Subject: [PATCH] var -> const using eslint auto fix, https://github.com/phetsims/tasks/issues/1012 --- js/fraction-comparison-main.js | 4 +- js/intro/model/FractionModel.js | 2 +- js/intro/model/IntroModel.js | 2 +- js/intro/view/CompareSeparateButton.js | 34 ++++++------ js/intro/view/ComparisonRegion.js | 4 +- js/intro/view/FractionNode.js | 22 ++++---- js/intro/view/HorizontalBarContainerNode.js | 42 +++++++-------- js/intro/view/IntroView.js | 40 +++++++------- js/intro/view/NodeDragHandler.js | 10 ++-- js/intro/view/NumberLineNode.js | 60 ++++++++++----------- js/intro/view/RepresentationPanel.js | 4 +- 11 files changed, 112 insertions(+), 112 deletions(-) diff --git a/js/fraction-comparison-main.js b/js/fraction-comparison-main.js index 221e90a..9b4b203 100644 --- a/js/fraction-comparison-main.js +++ b/js/fraction-comparison-main.js @@ -15,7 +15,7 @@ define( require => { // strings const fractionComparisonTitleString = require( 'string!FRACTION_COMPARISON/fraction-comparison.title' ); - var simOptions = { + const simOptions = { credits: { leadDesign: 'Karina K. R. Hensberry', softwareDevelopment: 'Sam Reid', @@ -25,7 +25,7 @@ define( require => { }; SimLauncher.launch( function() { - var sim = new Sim( fractionComparisonTitleString, [ new IntroScreen() ], simOptions ); + const sim = new Sim( fractionComparisonTitleString, [ new IntroScreen() ], simOptions ); sim.start(); } ); } ); \ No newline at end of file diff --git a/js/intro/model/FractionModel.js b/js/intro/model/FractionModel.js index 7391cf1..c0e4ee1 100644 --- a/js/intro/model/FractionModel.js +++ b/js/intro/model/FractionModel.js @@ -17,7 +17,7 @@ define( require => { const StringProperty = require( 'AXON/StringProperty' ); // constants - var VALID_STATE_VALUES = [ 'start', 'dragging', 'compare' ]; + const VALID_STATE_VALUES = [ 'start', 'dragging', 'compare' ]; /** * @constructor diff --git a/js/intro/model/IntroModel.js b/js/intro/model/IntroModel.js index cda7af2..f2a91a2 100644 --- a/js/intro/model/IntroModel.js +++ b/js/intro/model/IntroModel.js @@ -17,7 +17,7 @@ define( require => { const StringProperty = require( 'AXON/StringProperty' ); // constants - var VALID_REPRESENTATION_VALUES = [ + const VALID_REPRESENTATION_VALUES = [ 'horizontal-bar', 'vertical-bar', 'circle', diff --git a/js/intro/view/CompareSeparateButton.js b/js/intro/view/CompareSeparateButton.js index c9c814d..4c47083 100644 --- a/js/intro/view/CompareSeparateButton.js +++ b/js/intro/view/CompareSeparateButton.js @@ -31,32 +31,32 @@ define( require => { function CompareSeparateButton( compareButtonPressed, separateButtonPressed, compareBothProperty, options ) { Node.call( this ); options = options || {}; - var xTip = 20; - var yTip = 8; - var xControl = 12; - var yControl = -5; + const xTip = 20; + const yTip = 8; + const xControl = 12; + const yControl = -5; - var rightCurve = new Path( new Shape().moveTo( 0, 0 ).quadraticCurveTo( -xControl, yControl, -xTip, yTip ), { stroke: 'black', lineWidth: 3 } ); - var leftCurve = new Path( new Shape().moveTo( 0, 0 ).quadraticCurveTo( xControl, yControl, xTip, yTip ), { stroke: 'black', lineWidth: 3 } ); + const rightCurve = new Path( new Shape().moveTo( 0, 0 ).quadraticCurveTo( -xControl, yControl, -xTip, yTip ), { stroke: 'black', lineWidth: 3 } ); + const leftCurve = new Path( new Shape().moveTo( 0, 0 ).quadraticCurveTo( xControl, yControl, xTip, yTip ), { stroke: 'black', lineWidth: 3 } ); - var compareIcon = new HBox( { + const compareIcon = new HBox( { spacing: 5, children: [ new Node( { children: [ leftCurve, createArrowhead( Math.PI / 3, new Vector2( xTip, yTip ) ) ] } ), new Node( { children: [ rightCurve, createArrowhead( Math.PI - Math.PI / 3, new Vector2( -xTip, yTip ) ) ] } ) ] } ); - var separateIcon = new HBox( { + const separateIcon = new HBox( { spacing: 5, children: [ new Node( { children: [ leftCurve, createArrowhead( Math.PI / 3 + Math.PI * 0.5, new Vector2( 0, 0 ) ) ] } ), new Node( { children: [ rightCurve, createArrowhead( Math.PI - Math.PI / 3 - Math.PI / 2, new Vector2( 0, 0 ) ) ] } ) ] } ); - var maxWidth = Math.max( compareIcon.width, separateIcon.width ); - var maxHeight = Math.max( compareIcon.height, separateIcon.height ); + const maxWidth = Math.max( compareIcon.width, separateIcon.width ); + const maxHeight = Math.max( compareIcon.height, separateIcon.height ); - var compareButton = new RectangularPushButton( { + const compareButton = new RectangularPushButton( { content: new Rectangle( 0, 0, maxWidth, maxHeight, { children: [ compareIcon.mutate( { centerX: maxWidth / 2, centerY: maxHeight / 2 } ) ] } ), @@ -65,7 +65,7 @@ define( require => { listener: compareButtonPressed } ); - var separateButton = new RectangularPushButton( { + const separateButton = new RectangularPushButton( { content: new Rectangle( 0, 0, maxWidth, maxHeight, { children: [ separateIcon.mutate( { centerX: maxWidth / 2, centerY: maxHeight / 2 } ) ] } ), @@ -92,11 +92,11 @@ define( require => { * @returns {Path} */ var createArrowhead = function( angle, tail ) { - var headWidth = 10; - var headHeight = 10; - var directionUnitVector = Vector2.createPolar( 1, angle ); - var orthogonalUnitVector = directionUnitVector.perpendicular; - var tip = directionUnitVector.times( headHeight ).plus( tail ); + const headWidth = 10; + const headHeight = 10; + const directionUnitVector = Vector2.createPolar( 1, angle ); + const orthogonalUnitVector = directionUnitVector.perpendicular; + const tip = directionUnitVector.times( headHeight ).plus( tail ); return new Path( new Shape().moveToPoint( tail ). lineToPoint( tail.plus( orthogonalUnitVector.times( headWidth / 2 ) ) ). lineToPoint( tip ). diff --git a/js/intro/view/ComparisonRegion.js b/js/intro/view/ComparisonRegion.js index dadff19..f7e7cc9 100644 --- a/js/intro/view/ComparisonRegion.js +++ b/js/intro/view/ComparisonRegion.js @@ -24,7 +24,7 @@ define( require => { * @constructor */ function ComparisonRegion( compareButtonPressed, separateButtonPressed, compareBothProperty, eitherCompareProperty, options ) { - var comparisonRegionLength = 220; + const comparisonRegionLength = 220; Rectangle.call( this, 0, 0, comparisonRegionLength, comparisonRegionLength, 10, 10, { lineStroke: 1, fill: 'white' } ); this.addChild( new CompareSeparateButton( compareButtonPressed, separateButtonPressed, compareBothProperty, { @@ -32,7 +32,7 @@ define( require => { bottom: this.bottom - 5 } ) ); - var target = new Rectangle( 0, 0, 180, 100, { stroke: 'red', lineWidth: 1, lineDash: [ 6, 5 ], centerX: this.bounds.centerX, top: 59 } ); + const target = new Rectangle( 0, 0, 180, 100, { stroke: 'red', lineWidth: 1, lineDash: [ 6, 5 ], centerX: this.bounds.centerX, top: 59 } ); this.addChild( target ); //Only show the target region if both shapes are not in the compare region diff --git a/js/intro/view/FractionNode.js b/js/intro/view/FractionNode.js index 1e77f20..b9b37be 100644 --- a/js/intro/view/FractionNode.js +++ b/js/intro/view/FractionNode.js @@ -37,10 +37,10 @@ define( require => { }, options ); Node.call( this ); - var font = new PhetFont( { size: 84 } ); - var numeratorNode = new Text( numeratorProperty.get(), { font: font, fill: options.fill } ); + const font = new PhetFont( { size: 84 } ); + const numeratorNode = new Text( numeratorProperty.get(), { font: font, fill: options.fill } ); - var line = new Line( 0, 0, 80, 0, { lineWidth: 4, stroke: options.fill } ); + const line = new Line( 0, 0, 80, 0, { lineWidth: 4, stroke: options.fill } ); this.addChild( line ); numeratorProperty.link( function( value ) { @@ -48,7 +48,7 @@ define( require => { numeratorNode.centerX = line.centerX; } ); - var denominatorNode = new Text( denominatorProperty.get(), { font: font, fill: options.fill } ); + const denominatorNode = new Text( denominatorProperty.get(), { font: font, fill: options.fill } ); denominatorProperty.link( function( value ) { denominatorNode.text = value + ''; denominatorNode.centerX = line.centerX; @@ -61,23 +61,23 @@ define( require => { this.addChild( denominatorNode ); if ( options.interactive ) { - var numeratorUpEnabledProperty = new DerivedProperty( + const numeratorUpEnabledProperty = new DerivedProperty( [ numeratorProperty, denominatorProperty ], function( numerator, denominator ) { return numerator < denominator; } ); - var numeratorDownEnabledProperty = new DerivedProperty( + const numeratorDownEnabledProperty = new DerivedProperty( [ numeratorProperty ], function( numerator ) { return numerator > 0; } ); - var denominatorUpEnabledProperty = new DerivedProperty( + const denominatorUpEnabledProperty = new DerivedProperty( [ denominatorProperty ], function( denominator ) { return denominator < 10;} ); - var denominatorDownEnabledProperty = new DerivedProperty( + const denominatorDownEnabledProperty = new DerivedProperty( [ numeratorProperty, denominatorProperty ], function( numerator, denominator ) { return denominator > 1 && numerator < denominator;} ); - var numeratorSpinner = new UpDownSpinner( numeratorProperty, numeratorUpEnabledProperty, numeratorDownEnabledProperty ); - var denominatorSpinner = new UpDownSpinner( denominatorProperty, denominatorUpEnabledProperty, denominatorDownEnabledProperty ); + const numeratorSpinner = new UpDownSpinner( numeratorProperty, numeratorUpEnabledProperty, numeratorDownEnabledProperty ); + const denominatorSpinner = new UpDownSpinner( denominatorProperty, denominatorUpEnabledProperty, denominatorDownEnabledProperty ); - var spinners = new VBox( { + const spinners = new VBox( { spacing: 20, children: [ numeratorSpinner, denominatorSpinner ], left: line.bounds.maxX + 5, diff --git a/js/intro/view/HorizontalBarContainerNode.js b/js/intro/view/HorizontalBarContainerNode.js index f3f569e..d948466 100644 --- a/js/intro/view/HorizontalBarContainerNode.js +++ b/js/intro/view/HorizontalBarContainerNode.js @@ -41,8 +41,8 @@ define( require => { startPositionFunction, comparePositionFunction, options ) { - var fractionProperty = fractionModel.fractionProperty; - var self = this; + const fractionProperty = fractionModel.fractionProperty; + const self = this; this.stateProperty = stateProperty; this.animatingProperty = animatingProperty; @@ -50,7 +50,7 @@ define( require => { options = _.extend( { cursor: 'pointer' }, options ); Node.call( this ); - var border = new Rectangle( 0, 0, 180, 100, { stroke: 'black', lineWidth: 1 } ); + const border = new Rectangle( 0, 0, 180, 100, { stroke: 'black', lineWidth: 1 } ); this.addChild( border ); this.contents = new Rectangle( 0, 0, fractionProperty.get() * 180, 100, { @@ -65,12 +65,12 @@ define( require => { this.addChild( this.contents ); //Solid lines to show pieces - var pieceDivisions = new Node(); + const pieceDivisions = new Node(); Property.multilink( [ fractionModel.numeratorProperty, fractionModel.denominatorProperty ], function( numerator, denominator ) { - var children = []; - for ( var i = 1; i < numerator; i++ ) { - var x = i * 180 / denominator; + const children = []; + for ( let i = 1; i < numerator; i++ ) { + const x = i * 180 / denominator; children.push( new Line( x, 0, x, 100, { stroke: 'black', lineWidth: 1 } ) ); } pieceDivisions.children = children; @@ -79,10 +79,10 @@ define( require => { this.addChild( pieceDivisions ); //Dotted lines to show user-selected divisions - var divisionsNode = new Node(); + const divisionsNode = new Node(); divisionsProperty.link( function( divisions ) { - var children = []; - for ( var i = 1; i < divisions; i++ ) { + const children = []; + for ( let i = 1; i < divisions; i++ ) { children.push( new Line( i * 180 / divisions, 0, i * 180 / divisions, 100, { stroke: 'gray', lineDash: [ 5, 4 ], @@ -117,9 +117,9 @@ define( require => { }, endDrag: function() { //Move to the start position or compare position, whichever is closer. - var center = self.center; - var distToStart = self.startPosition.distance( center ); - var distToCompare = self.comparePosition.distance( center ); + const center = self.center; + const distToStart = self.startPosition.distance( center ); + const distToCompare = self.comparePosition.distance( center ); if ( distToStart < distToCompare ) { self.animateToStart(); @@ -140,9 +140,9 @@ define( require => { */ animateToComparison: function() { this.animatingProperty.value = true; - var self = this; - var positionProperty = new Property( this.center ); - var animation = new Animation( { + const self = this; + const positionProperty = new Property( this.center ); + const animation = new Animation( { duration: 0.5, targets: [ { property: positionProperty, @@ -150,7 +150,7 @@ define( require => { to: this.comparePosition } ] } ); - var listener = function( position ) { + const listener = function( position ) { self.center = position; }; positionProperty.link( listener ); @@ -167,9 +167,9 @@ define( require => { */ animateToStart: function() { this.animatingProperty.value = true; - var self = this; - var positionProperty = new Property( this.center ); - var animation = new Animation( { + const self = this; + const positionProperty = new Property( this.center ); + const animation = new Animation( { duration: 0.5, targets: [ { property: positionProperty, @@ -177,7 +177,7 @@ define( require => { to: this.startPosition } ] } ); - var listener = function( position ) { + const listener = function( position ) { self.center = position; }; positionProperty.link( listener ); diff --git a/js/intro/view/IntroView.js b/js/intro/view/IntroView.js index 1e99481..576f281 100644 --- a/js/intro/view/IntroView.js +++ b/js/intro/view/IntroView.js @@ -32,17 +32,17 @@ define( require => { */ function IntroView( model ) { - var self = this; + const self = this; ScreenView.call( this, { layoutBounds: new Bounds2( 0, 0, 768, 504 ) } ); //Representation panel at the bottom center - var representationPanel = new RepresentationPanel( model.representationProperty, { + const representationPanel = new RepresentationPanel( model.representationProperty, { bottom: this.layoutBounds.maxY - 5, centerX: this.layoutBounds.centerX } ); this.addChild( representationPanel ); - var numberLineNode = new NumberLineNode( model.leftFractionModel, model.rightFractionModel, model.numberLineVisibleProperty, + const numberLineNode = new NumberLineNode( model.leftFractionModel, model.rightFractionModel, model.numberLineVisibleProperty, { centerX: this.layoutBounds.centerX, bottom: representationPanel.top - 70 } ); this.addChild( numberLineNode ); @@ -63,32 +63,32 @@ define( require => { //To make it possible to drag pieces from the left over pieces in the right, we cannot just make subtrees for the left and right views //So model the pieces individually - var distanceFromSideToFraction = 50; - var leftFractionNode = new FractionNode( model.leftFractionModel.numeratorProperty, + const distanceFromSideToFraction = 50; + const leftFractionNode = new FractionNode( model.leftFractionModel.numeratorProperty, model.leftFractionModel.denominatorProperty, { left: distanceFromSideToFraction, bottom: representationPanel.bounds.minY } ); this.addChild( leftFractionNode ); - var rightFractionNode = new FractionNode( model.rightFractionModel.numeratorProperty, + const rightFractionNode = new FractionNode( model.rightFractionModel.numeratorProperty, model.rightFractionModel.denominatorProperty, { right: this.layoutBounds.maxX - distanceFromSideToFraction, bottom: representationPanel.bounds.minY } ); this.addChild( rightFractionNode ); - var compareButtonPressed = function() { + const compareButtonPressed = function() { leftHorizontalBarContainerNode.animateToComparison(); rightHorizontalBarContainerNode.animateToComparison(); }; - var separateButtonPressed = function() { + const separateButtonPressed = function() { leftHorizontalBarContainerNode.animateToStart(); rightHorizontalBarContainerNode.animateToStart(); }; - var comparisonRegion = new ComparisonRegion( compareButtonPressed, separateButtonPressed, model.bothCompareProperty, model.eitherCompareProperty, { + const comparisonRegion = new ComparisonRegion( compareButtonPressed, separateButtonPressed, model.bothCompareProperty, model.eitherCompareProperty, { top: 10, centerX: this.layoutBounds.centerX } ); @@ -122,7 +122,7 @@ define( require => { } ); //Show the shadows right behind the originals, and don't let the shadows be moved - var leftHorizontalBarContainerNodeShadow = new HorizontalBarContainerNode( + const leftHorizontalBarContainerNodeShadow = new HorizontalBarContainerNode( model.leftFractionModel, '#61c9e4', model.leftFractionModel.stateProperty, @@ -135,7 +135,7 @@ define( require => { return new Vector2( self.layoutBounds.centerX, comparisonRegion.bounds.centerY ); } ); - var rightHorizontalBarContainerNodeShadow = new HorizontalBarContainerNode( + const rightHorizontalBarContainerNodeShadow = new HorizontalBarContainerNode( model.rightFractionModel, '#dc528d', model.rightFractionModel.stateProperty, @@ -155,8 +155,8 @@ define( require => { this.addChild( rightHorizontalBarContainerNode ); //The dotted line to show if the "underneath" (z-order) value is too small to see. - var lineWidth = 3; - var leftDottedLineContainerNode = new Rectangle( 0, 0, 180, 100, { + const lineWidth = 3; + const leftDottedLineContainerNode = new Rectangle( 0, 0, 180, 100, { stroke: '#61c9e4', lineWidth: lineWidth, lineDash: [ 11, 7 ] @@ -168,34 +168,34 @@ define( require => { leftDottedLineContainerNode.left = leftHorizontalBarContainerNode.comparePosition.x - leftHorizontalBarContainerNode.width / 2 - 1; leftDottedLineContainerNode.centerY = leftHorizontalBarContainerNode.comparePosition.y; - var leftValueSmallerProperty = new DerivedProperty( [ model.leftFractionModel.fractionProperty, model.rightFractionModel.fractionProperty ], + const leftValueSmallerProperty = new DerivedProperty( [ model.leftFractionModel.fractionProperty, model.rightFractionModel.fractionProperty ], function( leftFraction, rightFraction ) { return leftFraction <= rightFraction; } ); //Only show the dotted line for the "underneath" shape after animation is complete - var eitherAnimating = new DerivedProperty( + const eitherAnimating = new DerivedProperty( [ model.leftFractionModel.animatingProperty, model.rightFractionModel.animatingProperty ], function( leftAnimating, rightAnimating ) { return leftAnimating || rightAnimating; } ); - var leftDottedLineContainerVisibleProperty = new DerivedProperty( [ model.bothCompareProperty, leftValueSmallerProperty, eitherAnimating ], + const leftDottedLineContainerVisibleProperty = new DerivedProperty( [ model.bothCompareProperty, leftValueSmallerProperty, eitherAnimating ], function( bothCompare, leftValueSmaller, eitherAnimating ) { return bothCompare && leftValueSmaller && !eitherAnimating; } ); leftDottedLineContainerVisibleProperty.linkAttribute( leftDottedLineContainerNode, 'visible' ); this.addChild( leftDottedLineContainerNode ); - var leftDivisionsProperty = model.leftFractionModel.divisionsProperty; - var leftDivisionSpinner = new LeftRightSpinner( leftDivisionsProperty, + const leftDivisionsProperty = model.leftFractionModel.divisionsProperty; + const leftDivisionSpinner = new LeftRightSpinner( leftDivisionsProperty, new DerivedProperty( [ leftDivisionsProperty ], function( leftDivisions ) { return leftDivisions > 1; } ), new DerivedProperty( [ leftDivisionsProperty ], function( leftDivisions ) { return leftDivisions < 10; } ), { centerX: leftHorizontalBarContainerNode.centerX, top: leftHorizontalBarContainerNode.bottom + 6 } ); this.addChild( leftDivisionSpinner ); - var rightDivisionsProperty = model.rightFractionModel.divisionsProperty; - var rightDivisionSpinner = new LeftRightSpinner( rightDivisionsProperty, + const rightDivisionsProperty = model.rightFractionModel.divisionsProperty; + const rightDivisionSpinner = new LeftRightSpinner( rightDivisionsProperty, new DerivedProperty( [ rightDivisionsProperty ], function( rightDivisions ) { return rightDivisions > 1; } ), new DerivedProperty( [ rightDivisionsProperty ], function( rightDivisions ) { return rightDivisions < 10; } ), { centerX: rightHorizontalBarContainerNode.centerX, top: rightHorizontalBarContainerNode.bottom + 6 } ); diff --git a/js/intro/view/NodeDragHandler.js b/js/intro/view/NodeDragHandler.js index 9145364..6a987d0 100644 --- a/js/intro/view/NodeDragHandler.js +++ b/js/intro/view/NodeDragHandler.js @@ -32,7 +32,7 @@ define( require => { endDrag: function() { /* do nothing */ } // use this to do things at the end of dragging, like 'snapping' }, options ); - var startOffset; // where the drag started, relative to the Movable's origin, in parent view coordinates + let startOffset; // where the drag started, relative to the Movable's origin, in parent view coordinates SimpleDragHandler.call( this, { @@ -46,8 +46,8 @@ define( require => { // change the location, adjust for starting offset, constrain to drag bounds drag: function( event ) { - var parentPoint = event.currentTarget.globalToParentPoint( event.pointer.point ).minus( startOffset ); - var constrainedLocation = constrainBounds( parentPoint, options.dragBounds ); + const parentPoint = event.currentTarget.globalToParentPoint( event.pointer.point ).minus( startOffset ); + const constrainedLocation = constrainBounds( parentPoint, options.dragBounds ); node.setTranslation( constrainedLocation ); options.drag( event ); }, @@ -70,8 +70,8 @@ define( require => { return point; } else { - var xConstrained = Math.max( Math.min( point.x, bounds.maxX ), bounds.x ); - var yConstrained = Math.max( Math.min( point.y, bounds.maxY ), bounds.y ); + const xConstrained = Math.max( Math.min( point.x, bounds.maxX ), bounds.x ); + const yConstrained = Math.max( Math.min( point.y, bounds.maxY ), bounds.y ); return new Vector2( xConstrained, yConstrained ); } }; diff --git a/js/intro/view/NumberLineNode.js b/js/intro/view/NumberLineNode.js index de6d359..89372a4 100644 --- a/js/intro/view/NumberLineNode.js +++ b/js/intro/view/NumberLineNode.js @@ -31,19 +31,19 @@ define( require => { function NumberLineNode( leftFractionModel, rightFractionModel, visibleProperty, options ) { Node.call( this ); - var leftFractionProperty = leftFractionModel.fractionProperty; - var rightFractionProperty = rightFractionModel.fractionProperty; + const leftFractionProperty = leftFractionModel.fractionProperty; + const rightFractionProperty = rightFractionModel.fractionProperty; - var width = 300; - var line = new Line( 0, 0, width, 0, { lineWidth: 2, stroke: 'black' } ); + const width = 300; + const line = new Line( 0, 0, width, 0, { lineWidth: 2, stroke: 'black' } ); this.addChild( line ); - var leftFill = '#61c9e4'; - var rightFill = '#dc528d'; - var leftRectangle = new Rectangle( 0, -20, width, 20, { fill: leftFill, lineWidth: 1, stroke: 'black' } ); + const leftFill = '#61c9e4'; + const rightFill = '#dc528d'; + const leftRectangle = new Rectangle( 0, -20, width, 20, { fill: leftFill, lineWidth: 1, stroke: 'black' } ); this.addChild( leftRectangle ); - var rightRectangle = new Rectangle( 0, -40, width, 20, { fill: rightFill, lineWidth: 1, stroke: 'black' } ); + const rightRectangle = new Rectangle( 0, -40, width, 20, { fill: rightFill, lineWidth: 1, stroke: 'black' } ); this.addChild( rightRectangle ); new DerivedProperty( [ leftFractionProperty ], function( leftFraction ) { @@ -54,31 +54,31 @@ define( require => { return rightFraction * width; } ).linkAttribute( rightRectangle, 'rectWidth' ); - var linesNode = new Node( { pickable: false } ); + const linesNode = new Node( { pickable: false } ); this.addChild( linesNode ); //Create the fraction nodes, and size them to be about the same size as the 0/1 labels. Cannot use maths to get the scaling exactly right since the font bounds are wonky, so just use a heuristic scale factor - var fractionNodeScale = 0.22; - var fractionTop = 14; - var leftFractionNode = new FractionNode( leftFractionModel.numeratorProperty, leftFractionModel.denominatorProperty, { + const fractionNodeScale = 0.22; + const fractionTop = 14; + const leftFractionNode = new FractionNode( leftFractionModel.numeratorProperty, leftFractionModel.denominatorProperty, { interactive: false, scale: fractionNodeScale, fill: leftFill, top: fractionTop } ); this.addChild( leftFractionNode ); - var coloredTickStroke = 2; - var leftFractionNodeTickMark = new Line( 0, 0, 0, 0, { lineWidth: coloredTickStroke, stroke: leftFill } ); + const coloredTickStroke = 2; + const leftFractionNodeTickMark = new Line( 0, 0, 0, 0, { lineWidth: coloredTickStroke, stroke: leftFill } ); this.addChild( leftFractionNodeTickMark ); - var rightFractionNode = new FractionNode( rightFractionModel.numeratorProperty, rightFractionModel.denominatorProperty, { + const rightFractionNode = new FractionNode( rightFractionModel.numeratorProperty, rightFractionModel.denominatorProperty, { interactive: false, scale: fractionNodeScale, fill: rightFill, top: fractionTop } ); this.addChild( rightFractionNode ); - var rightFractionNodeTickMark = new Line( 0, 0, 0, 0, { lineWidth: coloredTickStroke, stroke: rightFill } ); + const rightFractionNodeTickMark = new Line( 0, 0, 0, 0, { lineWidth: coloredTickStroke, stroke: rightFill } ); this.addChild( rightFractionNodeTickMark ); //When tick spacing or labeled ticks change, update the ticks @@ -89,12 +89,12 @@ define( require => { rightFractionModel.numeratorProperty, rightFractionModel.denominatorProperty ], function( visible, leftNumerator, leftDenominator, rightNumerator, rightDenominator ) { - var lineHeight = 16; - var leastCommonDenominator = NumberLineNode.leastCommonDenominator( leftDenominator, rightDenominator ); - var lines = []; - var maxTickIndex = leastCommonDenominator; - for ( var i = 0; i <= maxTickIndex; i++ ) { - var distance = i / maxTickIndex * width; + const lineHeight = 16; + const leastCommonDenominator = NumberLineNode.leastCommonDenominator( leftDenominator, rightDenominator ); + const lines = []; + const maxTickIndex = leastCommonDenominator; + for ( let i = 0; i <= maxTickIndex; i++ ) { + const distance = i / maxTickIndex * width; if ( visible || i === 0 || i === maxTickIndex ) { lines.push( new Line( distance, -lineHeight / 2, distance, lineHeight / 2, { lineWidth: 1.5, stroke: 'black' } ) ); @@ -103,23 +103,23 @@ define( require => { linesNode.children = lines; //Update the left/right fraction nodes for the fraction value and the colored tick mark - var leftXOffset = (leftNumerator === 0 || leftNumerator === leftDenominator ) ? lineHeight : + const leftXOffset = (leftNumerator === 0 || leftNumerator === leftDenominator ) ? lineHeight : Math.abs( leftNumerator / leftDenominator - rightNumerator / rightDenominator ) < 1E-6 ? lineHeight * 0.8 : 0; - var leftCenterX = width * leftNumerator / leftDenominator - leftXOffset; + const leftCenterX = width * leftNumerator / leftDenominator - leftXOffset; leftFractionNode.centerX = leftCenterX; leftFractionNodeTickMark.setLine( leftCenterX, leftFractionNode.top, width * leftNumerator / leftDenominator, leftFractionNode.top - fractionTop ); - var rightXOffset = (rightNumerator === 0 || rightNumerator === rightDenominator) ? lineHeight : + const rightXOffset = (rightNumerator === 0 || rightNumerator === rightDenominator) ? lineHeight : Math.abs( rightNumerator / rightDenominator - leftNumerator / leftDenominator ) < 1E-6 ? lineHeight * 0.8 : 0; - var rightCenterX = width * rightNumerator / rightDenominator + rightXOffset; + const rightCenterX = width * rightNumerator / rightDenominator + rightXOffset; rightFractionNode.centerX = rightCenterX; rightFractionNodeTickMark.setLine( rightCenterX, rightFractionNode.top, width * rightNumerator / rightDenominator, rightFractionNode.top - fractionTop ); //Handle overlapping number labels, see https://github.com/phetsims/fraction-comparison/issues/31 if ( leftFractionNode.bounds.intersectsBounds( rightFractionNode.bounds ) && Math.abs( rightNumerator / rightDenominator - leftNumerator / leftDenominator ) > 1E-6 ) { - var overlapAmount = (leftFractionModel.fraction > rightFractionModel.fraction) ? + const overlapAmount = (leftFractionModel.fraction > rightFractionModel.fraction) ? leftFractionNode.bounds.minX - rightFractionNode.bounds.maxX + 2 : leftFractionNode.bounds.maxX - rightFractionNode.bounds.minX + 2; @@ -128,10 +128,10 @@ define( require => { } } ); - var labelTop = linesNode.children[ 0 ].bounds.maxY; + const labelTop = linesNode.children[ 0 ].bounds.maxY; - var zeroLabel = new Text( '0', { centerX: linesNode.children[ 0 ].centerX, top: labelTop, font: new PhetFont( { size: 26 } ) } ); - var oneLabel = new Text( '1', { + const zeroLabel = new Text( '0', { centerX: linesNode.children[ 0 ].centerX, top: labelTop, font: new PhetFont( { size: 26 } ) } ); + const oneLabel = new Text( '1', { centerX: linesNode.children[ linesNode.children.length - 1 ].centerX, top: labelTop, font: new PhetFont( { size: 26 } ) diff --git a/js/intro/view/RepresentationPanel.js b/js/intro/view/RepresentationPanel.js index 18758c5..3b80310 100644 --- a/js/intro/view/RepresentationPanel.js +++ b/js/intro/view/RepresentationPanel.js @@ -18,7 +18,7 @@ define( require => { const Rectangle = require( 'SCENERY/nodes/Rectangle' ); // constants - var ICON_SCALE = 0.75; + const ICON_SCALE = 0.75; /** * @@ -34,7 +34,7 @@ define( require => { yMargin: 7 }, options ); - var content = new RadioButtonGroup( representationProperty, [ + const content = new RadioButtonGroup( representationProperty, [ { value: 'horizontal-bar', node: new Rectangle( 0, 0, 50 * ICON_SCALE, 30 * ICON_SCALE, { fill: '#208644', lineWidth: 1, stroke: 'black' } ) }, { value: 'vertical-bar', node: new Rectangle( 0, 0, 14 * ICON_SCALE, 50 * ICON_SCALE, { fill: 'red', lineWidth: 1, stroke: 'black' } ) }, { value: 'circle', node: new Circle( 22 * ICON_SCALE, { fill: '#145991', lineWidth: 1, stroke: 'black' } ) },