From b60e5a3281d5e3989ba5487b6125e31ec0d6d141 Mon Sep 17 00:00:00 2001 From: zepumph Date: Thu, 19 Sep 2019 14:25:43 -0800 Subject: [PATCH] var -> const using eslint auto fix, https://github.com/phetsims/tasks/issues/1012 --- js/area-builder-main.js | 4 +- js/common/AreaBuilderQueryParameters.js | 2 +- js/common/AreaBuilderSharedConstants.js | 2 +- js/common/model/MovableShape.js | 22 +- js/common/model/PerimeterShape.js | 18 +- js/common/model/ShapePlacementBoard.js | 192 +++++++------- js/common/view/AreaBuilderControlPanel.js | 10 +- js/common/view/AreaBuilderIconFactory.js | 42 +-- js/common/view/DimensionsIcon.js | 12 +- js/common/view/Grid.js | 2 +- js/common/view/GridIcon.js | 2 +- js/common/view/PerimeterShapeNode.js | 50 ++-- js/common/view/ShapeCreatorNode.js | 28 +- js/common/view/ShapeNode.js | 26 +- js/common/view/ShapePlacementBoardNode.js | 8 +- js/explore/AreaBuilderExploreScreen.js | 2 +- js/explore/model/AreaBuilderExploreModel.js | 36 +-- js/explore/view/AreaAndPerimeterDisplay.js | 20 +- js/explore/view/AreaBuilderExploreView.js | 20 +- js/explore/view/BoardDisplayModePanel.js | 8 +- js/explore/view/ExploreNode.js | 28 +- js/game/AreaBuilderGameScreen.js | 2 +- js/game/model/AreaBuilderChallengeFactory.js | 262 +++++++++---------- js/game/model/AreaBuilderGameModel.js | 26 +- js/game/model/GameState.js | 2 +- js/game/model/QuizGameModel.js | 10 +- js/game/view/AreaBuilderGameView.js | 66 ++--- js/game/view/AreaBuilderScoreboard.js | 10 +- js/game/view/ColorProportionsPrompt.js | 10 +- js/game/view/FeedbackWindow.js | 10 +- js/game/view/FractionNode.js | 2 +- js/game/view/GameIconFactory.js | 14 +- js/game/view/GameInfoBanner.js | 30 +-- js/game/view/StartGameLevelNode.js | 26 +- js/game/view/YouBuiltWindow.js | 2 +- js/game/view/YouEnteredWindow.js | 2 +- 36 files changed, 504 insertions(+), 504 deletions(-) diff --git a/js/area-builder-main.js b/js/area-builder-main.js index e6a179e..d6a5e19 100644 --- a/js/area-builder-main.js +++ b/js/area-builder-main.js @@ -19,9 +19,9 @@ define( require => { const areaBuilderTitleString = require( 'string!AREA_BUILDER/area-builder.title' ); // constants - var tandem = Tandem.rootTandem; + const tandem = Tandem.rootTandem; - var simOptions = { + const simOptions = { credits: { leadDesign: 'Karina K. R. Hensberry', softwareDevelopment: 'John Blanco', diff --git a/js/common/AreaBuilderQueryParameters.js b/js/common/AreaBuilderQueryParameters.js index 9320a0e..895e7dd 100644 --- a/js/common/AreaBuilderQueryParameters.js +++ b/js/common/AreaBuilderQueryParameters.js @@ -11,7 +11,7 @@ define( require => { // modules const areaBuilder = require( 'AREA_BUILDER/areaBuilder' ); - var AreaBuilderQueryParameters = QueryStringMachine.getAll( { + const AreaBuilderQueryParameters = QueryStringMachine.getAll( { // fill the shape placement boards on the 'Explore' screen during startup, useful for testing prefillBoards: { type: 'flag' } diff --git a/js/common/AreaBuilderSharedConstants.js b/js/common/AreaBuilderSharedConstants.js index be173e7..ca7f6b3 100644 --- a/js/common/AreaBuilderSharedConstants.js +++ b/js/common/AreaBuilderSharedConstants.js @@ -12,7 +12,7 @@ define( require => { const areaBuilder = require( 'AREA_BUILDER/areaBuilder' ); const Bounds2 = require( 'DOT/Bounds2' ); - var AreaBuilderSharedConstants = { + const AreaBuilderSharedConstants = { // layout bounds used throughout the simulation for laying out the screens LAYOUT_BOUNDS: new Bounds2( 0, 0, 768, 464 ), diff --git a/js/common/model/MovableShape.js b/js/common/model/MovableShape.js index 15d6c53..a35f322 100644 --- a/js/common/model/MovableShape.js +++ b/js/common/model/MovableShape.js @@ -19,7 +19,7 @@ define( require => { const Vector2 = require( 'DOT/Vector2' ); // constants - var FADE_RATE = 2; // proportion per second + const FADE_RATE = 2; // proportion per second /** * @param {Shape} shape @@ -28,7 +28,7 @@ define( require => { * @constructor */ function MovableShape( shape, color, initialPosition ) { - var self = this; + const self = this; // Property that indicates where in model space the upper left corner of this shape is. In general, this should // not be set directly outside of this type, and should only be manipulated through the methods defined below. @@ -79,12 +79,12 @@ define( require => { if ( !this.userControlledProperty.get() ) { // perform any animation - var currentPosition = this.positionProperty.get(); - var distanceToDestination = currentPosition.distance( this.destination ); + const currentPosition = this.positionProperty.get(); + const distanceToDestination = currentPosition.distance( this.destination ); if ( distanceToDestination > dt * AreaBuilderSharedConstants.ANIMATION_SPEED ) { // Move a step toward the destination. - var stepAngle = Math.atan2( this.destination.y - currentPosition.y, this.destination.x - currentPosition.x ); - var stepVector = Vector2.createPolar( AreaBuilderSharedConstants.ANIMATION_SPEED * dt, stepAngle ); + const stepAngle = Math.atan2( this.destination.y - currentPosition.y, this.destination.x - currentPosition.x ); + const stepVector = Vector2.createPolar( AreaBuilderSharedConstants.ANIMATION_SPEED * dt, stepAngle ); this.positionProperty.set( currentPosition.plus( stepVector ) ); } else if ( this.animatingProperty.get() ) { @@ -145,11 +145,11 @@ define( require => { decomposeIntoSquares: function( squareLength ) { assert && assert( this.shape.bounds.width % squareLength === 0 && this.shape.bounds.height % squareLength === 0, 'Error: A dimension of this movable shape is not an integer multiple of the provided dimension' ); - var shapes = []; - var unitSquareShape = Shape.rect( 0, 0, squareLength, squareLength ); - for ( var column = 0; column < this.shape.bounds.width; column += squareLength ) { - for ( var row = 0; row < this.shape.bounds.height; row += squareLength ) { - var constituentShape = new MovableShape( unitSquareShape, this.color, this.positionProperty.initialValue ); + const shapes = []; + const unitSquareShape = Shape.rect( 0, 0, squareLength, squareLength ); + for ( let column = 0; column < this.shape.bounds.width; column += squareLength ) { + for ( let row = 0; row < this.shape.bounds.height; row += squareLength ) { + const constituentShape = new MovableShape( unitSquareShape, this.color, this.positionProperty.initialValue ); constituentShape.setDestination( this.positionProperty.get().plusXY( column, row ), false ); constituentShape.invisibleWhenStillProperty.set( this.invisibleWhenStillProperty.get() ); shapes.push( constituentShape ); diff --git a/js/common/model/PerimeterShape.js b/js/common/model/PerimeterShape.js index 68323a4..2f6b873 100644 --- a/js/common/model/PerimeterShape.js +++ b/js/common/model/PerimeterShape.js @@ -16,7 +16,7 @@ define( require => { const Vector2 = require( 'DOT/Vector2' ); // constants - var FLOATING_POINT_ERR_TOLERANCE = 1e-6; + const FLOATING_POINT_ERR_TOLERANCE = 1e-6; // Utility function to compute the unit area of a perimeter shape. function calculateUnitArea( shape, unitLength ) { @@ -31,10 +31,10 @@ define( require => { ); // Compute the unit area by testing whether or not points on a sub-grid are contained in the shape. - var unitArea = 0; - var testPoint = new Vector2( 0, 0 ); - for ( var row = 0; row * unitLength < shape.bounds.height; row++ ) { - for ( var column = 0; column * unitLength < shape.bounds.width; column++ ) { + let unitArea = 0; + const testPoint = new Vector2( 0, 0 ); + for ( let row = 0; row * unitLength < shape.bounds.height; row++ ) { + for ( let column = 0; column * unitLength < shape.bounds.width; column++ ) { // Scan four points in the unit square. This allows support for triangular 1/2 unit square shapes. This is // in-lined rather than looped for the sake of efficiency, since this approach avoids vector allocations. testPoint.setXY( shape.bounds.minX + ( column + 0.25 ) * unitLength, shape.bounds.minY + ( row + 0.5 ) * unitLength ); @@ -69,8 +69,8 @@ define( require => { * @constructor */ function PerimeterShape( exteriorPerimeters, interiorPerimeters, unitLength, options ) { - var self = this; - var i; + const self = this; + let i; options = _.extend( { fillColor: null, @@ -125,8 +125,8 @@ define( require => { // Returns a linearly translated version of this perimeter shape. translated: function( x, y ) { - var exteriorPerimeters = []; - var interiorPerimeters = []; + const exteriorPerimeters = []; + const interiorPerimeters = []; this.exteriorPerimeters.forEach( function( exteriorPerimeter, index ) { exteriorPerimeters.push( [] ); exteriorPerimeter.forEach( function( point ) { diff --git a/js/common/model/ShapePlacementBoard.js b/js/common/model/ShapePlacementBoard.js index c1554b0..585cdda 100644 --- a/js/common/model/ShapePlacementBoard.js +++ b/js/common/model/ShapePlacementBoard.js @@ -23,7 +23,7 @@ define( require => { const Vector2 = require( 'DOT/Vector2' ); // constants - var MOVEMENT_VECTORS = { + const MOVEMENT_VECTORS = { // This sim is using screen conventions, meaning positive Y indicates down. up: new Vector2( 0, -1 ), down: new Vector2( 0, 1 ), @@ -33,7 +33,7 @@ define( require => { // Functions used for scanning the edge of the perimeter. These are a key component of the "marching squares" // algorithm that is used for perimeter traversal, see the function where they are used for more information. - var SCAN_AREA_MOVEMENT_FUNCTIONS = [ + const SCAN_AREA_MOVEMENT_FUNCTIONS = [ null, // 0 function() { return MOVEMENT_VECTORS.up; }, // 1 function() { return MOVEMENT_VECTORS.right; }, // 2 @@ -123,9 +123,9 @@ define( require => { // and so forth, a 2D array is used to track various state information about the 'cells' that correspond to the // locations on this board where shapes may be placed. this.cells = []; //@private - for ( var column = 0; column < this.numColumns; column++ ) { - var currentRow = []; - for ( var row = 0; row < this.numRows; row++ ) { + for ( let column = 0; column < this.numColumns; column++ ) { + const currentRow = []; + for ( let row = 0; row < this.numRows; row++ ) { // Add an object that defines the information internally tracked for each cell. currentRow.push( { column: column, @@ -145,8 +145,8 @@ define( require => { // @private shapeOverlapsBoard: function( shape ) { - var shapePosition = shape.positionProperty.get(); - var shapeBounds = new Bounds2( + const shapePosition = shape.positionProperty.get(); + const shapeBounds = new Bounds2( shapePosition.x, shapePosition.y, shapePosition.x + shape.shape.bounds.getWidth(), @@ -166,7 +166,7 @@ define( require => { movableShape.userControlledProperty.get() === false, 'Shapes can\'t be placed when still controlled by user.' ); - var self = this; + const self = this; // Only place the shape if it is of the correct color and is positioned so that it overlaps with the board. if ( ( this.colorHandled !== '*' && !movableShape.color.equals( this.colorHandled ) ) || !this.shapeOverlapsBoard( movableShape ) ) { @@ -177,19 +177,19 @@ define( require => { movableShape.invisibleWhenStillProperty.set( this.formCompositeProperty.get() ); // Determine where to place the shape on the board. - var placementLocation = null; - for ( var surroundingPointsLevel = 0; + let placementLocation = null; + for ( let surroundingPointsLevel = 0; surroundingPointsLevel < Math.max( this.numRows, this.numColumns ) && placementLocation === null; surroundingPointsLevel++ ) { - var surroundingPoints = this.getOuterSurroundingPoints( + const surroundingPoints = this.getOuterSurroundingPoints( movableShape.positionProperty.get(), surroundingPointsLevel ); surroundingPoints.sort( function( p1, p2 ) { return p1.distance( movableShape.positionProperty.get() ) - p2.distance( movableShape.positionProperty.get() ); } ); - for ( var pointIndex = 0; pointIndex < surroundingPoints.length && placementLocation === null; pointIndex++ ) { + for ( let pointIndex = 0; pointIndex < surroundingPoints.length && placementLocation === null; pointIndex++ ) { if ( self.isValidToPlace( movableShape, surroundingPoints[ pointIndex ] ) ) { placementLocation = surroundingPoints[ pointIndex ]; } @@ -230,19 +230,19 @@ define( require => { * @param color */ getProportionOfColor: function( color ) { - var self = this; - var compareColor = Color.toColor( color ); - var totalArea = 0; - var areaOfSpecifiedColor = 0; + const self = this; + const compareColor = Color.toColor( color ); + let totalArea = 0; + let areaOfSpecifiedColor = 0; this.residentShapes.forEach( function( residentShape ) { - var areaOfShape = residentShape.shape.bounds.width * residentShape.shape.bounds.height / ( self.unitSquareLength * self.unitSquareLength ); + const areaOfShape = residentShape.shape.bounds.width * residentShape.shape.bounds.height / ( self.unitSquareLength * self.unitSquareLength ); totalArea += areaOfShape; if ( compareColor.equals( residentShape.color ) ) { areaOfSpecifiedColor += areaOfShape; } } ); - var proportion = new Fraction( areaOfSpecifiedColor, totalArea ); + const proportion = new Fraction( areaOfSpecifiedColor, totalArea ); proportion.reduce(); return proportion; }, @@ -272,7 +272,7 @@ define( require => { //@private, remove the specified shape from the shape placement board removeResidentShape: function( movableShape ) { assert && assert( this.isResidentShape( movableShape ), 'Error: Attempt to remove shape that is not a resident.' ); - var self = this; + const self = this; this.residentShapes.remove( movableShape ); self.updateCellOccupation( movableShape, 'remove' ); self.updateAll(); @@ -295,7 +295,7 @@ define( require => { // @private, add the shape to the list of incoming shapes and set up a listener to move it to resident shapes addIncomingShape: function( movableShape, destination, releaseOrphans ) { - var self = this; + const self = this; movableShape.setDestination( destination, true ); @@ -349,8 +349,8 @@ define( require => { // TODO: This is rather ugly. Work with SR to improve or find alternative, or to bake into Axon. Maybe a map. // @private, remove all observers from a property that have been tagged by this shape placement board. removeTaggedObservers: function( property ) { - var self = this; - var taggedObservers = []; + const self = this; + const taggedObservers = []; property.changedEmitter.listeners.forEach( function( observer ) { if ( self.listenerTagMatches( observer ) ) { taggedObservers.push( observer ); @@ -371,7 +371,7 @@ define( require => { // @private Function for getting the occupant of the specified cell, does bounds checking. getCellOccupant: function( column, row ) { - var cell = this.getCell( column, row ); + const cell = this.getCell( column, row ); return cell ? cell.occupiedBy : null; }, @@ -382,11 +382,11 @@ define( require => { * @param operation */ updateCellOccupation: function( movableShape, operation ) { - var xIndex = Util.roundSymmetric( ( movableShape.destination.x - this.bounds.minX ) / this.unitSquareLength ); - var yIndex = Util.roundSymmetric( ( movableShape.destination.y - this.bounds.minY ) / this.unitSquareLength ); + const xIndex = Util.roundSymmetric( ( movableShape.destination.x - this.bounds.minX ) / this.unitSquareLength ); + const yIndex = Util.roundSymmetric( ( movableShape.destination.y - this.bounds.minY ) / this.unitSquareLength ); // Mark all cells occupied by this shape. - for ( var row = 0; row < movableShape.shape.bounds.height / this.unitSquareLength; row++ ) { - for ( var column = 0; column < movableShape.shape.bounds.width / this.unitSquareLength; column++ ) { + for ( let row = 0; row < movableShape.shape.bounds.height / this.unitSquareLength; row++ ) { + for ( let column = 0; column < movableShape.shape.bounds.width / this.unitSquareLength; column++ ) { this.cells[ xIndex + column ][ yIndex + row ].occupiedBy = operation === 'add' ? movableShape : null; } } @@ -395,12 +395,12 @@ define( require => { // @private updateAreaAndTotalPerimeter: function() { if ( this.compositeShapeProperty.get().exteriorPerimeters.length <= 1 ) { - var self = this; - var totalArea = 0; + const self = this; + let totalArea = 0; this.residentShapes.forEach( function( residentShape ) { totalArea += residentShape.shape.bounds.width * residentShape.shape.bounds.height / ( self.unitSquareLength * self.unitSquareLength ); } ); - var totalPerimeter = 0; + let totalPerimeter = 0; this.compositeShapeProperty.get().exteriorPerimeters.forEach( function( exteriorPerimeter ) { totalPerimeter += exteriorPerimeter.length; } ); @@ -446,10 +446,10 @@ define( require => { if ( this.isCellOccupied( column, row ) ) { return true; } - for ( var i = 0; i < this.incomingShapes.length; i++ ) { - var targetCell = this.modelToCellVector( this.incomingShapes[ i ].destination ); - var normalizedWidth = Util.roundSymmetric( this.incomingShapes[ i ].shape.bounds.width / this.unitSquareLength ); - var normalizedHeight = Util.roundSymmetric( this.incomingShapes[ i ].shape.bounds.height / this.unitSquareLength ); + for ( let i = 0; i < this.incomingShapes.length; i++ ) { + const targetCell = this.modelToCellVector( this.incomingShapes[ i ].destination ); + const normalizedWidth = Util.roundSymmetric( this.incomingShapes[ i ].shape.bounds.width / this.unitSquareLength ); + const normalizedHeight = Util.roundSymmetric( this.incomingShapes[ i ].shape.bounds.height / this.unitSquareLength ); if ( column >= targetCell.x && column < targetCell.x + normalizedWidth && row >= targetCell.y && row < targetCell.y + normalizedHeight ) { return true; @@ -466,19 +466,19 @@ define( require => { * @param levelsRemoved */ getOuterSurroundingPoints: function( point, levelsRemoved ) { - var self = this; - var normalizedPoints = []; + const self = this; + const normalizedPoints = []; // Get the closest point in cell coordinates. - var normalizedStartingPoint = new Vector2( + const normalizedStartingPoint = new Vector2( Math.floor( ( point.x - this.bounds.minX ) / this.unitSquareLength ) - levelsRemoved, Math.floor( ( point.y - this.bounds.minY ) / this.unitSquareLength ) - levelsRemoved ); - var squareSize = ( levelsRemoved + 1 ) * 2; + const squareSize = ( levelsRemoved + 1 ) * 2; - for ( var row = 0; row < squareSize; row++ ) { - for ( var column = 0; column < squareSize; column++ ) { + for ( let row = 0; row < squareSize; row++ ) { + for ( let column = 0; column < squareSize; column++ ) { if ( ( row === 0 || row === squareSize - 1 || column === 0 || column === squareSize - 1 ) && ( column + normalizedStartingPoint.x <= this.numColumns && row + normalizedStartingPoint.y <= this.numRows ) ) { // This is an outer point, and is valid, so include it. @@ -487,7 +487,7 @@ define( require => { } } - var outerSurroundingPoints = []; + const outerSurroundingPoints = []; normalizedPoints.forEach( function( p ) { outerSurroundingPoints.push( self.cellToModelVector( p ) ); } ); return outerSurroundingPoints; }, @@ -501,11 +501,11 @@ define( require => { * @returns {boolean} */ isValidToPlace: function( movableShape, location ) { - var normalizedLocation = this.modelToCellVector( location ); - var normalizedWidth = Util.roundSymmetric( movableShape.shape.bounds.width / this.unitSquareLength ); - var normalizedHeight = Util.roundSymmetric( movableShape.shape.bounds.height / this.unitSquareLength ); - var row; - var column; + const normalizedLocation = this.modelToCellVector( location ); + const normalizedWidth = Util.roundSymmetric( movableShape.shape.bounds.width / this.unitSquareLength ); + const normalizedHeight = Util.roundSymmetric( movableShape.shape.bounds.height / this.unitSquareLength ); + let row; + let column; // Return false if the shape would go off the board if placed at this location. if ( normalizedLocation.x < 0 || normalizedLocation.x + normalizedWidth > this.numColumns || @@ -557,9 +557,9 @@ define( require => { * 'jumpHome'. 'jumpHome' is the default. */ releaseAllShapes: function( releaseMode ) { - var self = this; + const self = this; - var shapesToRelease = []; + const shapesToRelease = []; // Remove all listeners added to the shapes by this placement board. this.residentShapes.forEach( function( shape ) { @@ -576,8 +576,8 @@ define( require => { this.incomingShapes.length = 0; // Clear the cell array that tracks occupancy. - for ( var row = 0; row < this.numRows; row++ ) { - for ( var column = 0; column < this.numColumns; column++ ) { + for ( let row = 0; row < this.numRows; row++ ) { + for ( let column = 0; column < this.numColumns; column++ ) { this.cells[ column ][ row ].occupiedBy = null; } } @@ -643,9 +643,9 @@ define( require => { //@private createShapeFromPerimeterPoints: function( perimeterPoints ) { - var perimeterShape = new Shape(); + const perimeterShape = new Shape(); perimeterShape.moveToPoint( perimeterPoints[ 0 ] ); - for ( var i = 1; i < perimeterPoints.length; i++ ) { + for ( let i = 1; i < perimeterPoints.length; i++ ) { perimeterShape.lineToPoint( perimeterPoints[ i ] ); } perimeterShape.close(); // Shouldn't be needed, but best to be sure. @@ -654,10 +654,10 @@ define( require => { //@private createShapeFromPerimeterList: function( perimeters ) { - var perimeterShape = new Shape(); + const perimeterShape = new Shape(); perimeters.forEach( function( perimeterPoints ) { perimeterShape.moveToPoint( perimeterPoints[ 0 ] ); - for ( var i = 1; i < perimeterPoints.length; i++ ) { + for ( let i = 1; i < perimeterPoints.length; i++ ) { perimeterShape.lineToPoint( perimeterPoints[ i ] ); } perimeterShape.close(); @@ -672,20 +672,20 @@ define( require => { * @private */ scanPerimeter: function( windowStart ) { - var scanWindow = windowStart.copy(); - var scanComplete = false; - var perimeterPoints = []; - var previousMovementVector = MOVEMENT_VECTORS.up; // Init this way allows algorithm to work for interior perimeters. + const scanWindow = windowStart.copy(); + let scanComplete = false; + const perimeterPoints = []; + let previousMovementVector = MOVEMENT_VECTORS.up; // Init this way allows algorithm to work for interior perimeters. while ( !scanComplete ) { // Scan the current four-pixel area. - var upLeftOccupied = this.isCellOccupied( scanWindow.x - 1, scanWindow.y - 1 ); - var upRightOccupied = this.isCellOccupied( scanWindow.x, scanWindow.y - 1 ); - var downLeftOccupied = this.isCellOccupied( scanWindow.x - 1, scanWindow.y ); - var downRightOccupied = this.isCellOccupied( scanWindow.x, scanWindow.y ); + const upLeftOccupied = this.isCellOccupied( scanWindow.x - 1, scanWindow.y - 1 ); + const upRightOccupied = this.isCellOccupied( scanWindow.x, scanWindow.y - 1 ); + const downLeftOccupied = this.isCellOccupied( scanWindow.x - 1, scanWindow.y ); + const downRightOccupied = this.isCellOccupied( scanWindow.x, scanWindow.y ); // Map the scan to the one of 16 possible states. - var marchingSquaresState = 0; + let marchingSquaresState = 0; if ( upLeftOccupied ) { marchingSquaresState |= 1; } if ( upRightOccupied ) { marchingSquaresState |= 2; } if ( downLeftOccupied ) { marchingSquaresState |= 4; } @@ -700,7 +700,7 @@ define( require => { perimeterPoints.push( this.cellToModelCoords( scanWindow.x, scanWindow.y ) ); // Move the scan window to the next location. - var movementVector = SCAN_AREA_MOVEMENT_FUNCTIONS[ marchingSquaresState ]( previousMovementVector ); + const movementVector = SCAN_AREA_MOVEMENT_FUNCTIONS[ marchingSquaresState ]( previousMovementVector ); scanWindow.add( movementVector ); previousMovementVector = movementVector; @@ -713,7 +713,7 @@ define( require => { // @private, Update the exterior and interior perimeters. updatePerimeters: function() { - var self = this; + const self = this; // The perimeters can only be computed for a single consolidated shape. if ( !this.formCompositeProperty.get() || this.residentShapes.length === 0 ) { @@ -721,17 +721,17 @@ define( require => { this.compositeShapeProperty.reset(); } else { // Do the full-blown perimeter calculation - var row; - var column; - var exteriorPerimeters = []; + let row; + let column; + const exteriorPerimeters = []; // Identify each outer perimeter. There may be more than one if the user is moving a shape that was previously // on this board, since any orphaned shapes are not released until the move is complete. - var contiguousCellGroups = this.identifyContiguousCellGroups(); + const contiguousCellGroups = this.identifyContiguousCellGroups(); contiguousCellGroups.forEach( function( cellGroup ) { // Find the top left square of this group to use as a starting point. - var topLeftCell = null; + let topLeftCell = null; cellGroup.forEach( function( cell ) { if ( topLeftCell === null || cell.row < topLeftCell.row || ( cell.row === topLeftCell.row && cell.column < topLeftCell.column ) ) { topLeftCell = cell; @@ -739,18 +739,18 @@ define( require => { } ); // Scan the outer perimeter and add to list. - var topLeftCellOfGroup = new Vector2( topLeftCell.column, topLeftCell.row ); + const topLeftCellOfGroup = new Vector2( topLeftCell.column, topLeftCell.row ); exteriorPerimeters.push( self.scanPerimeter( topLeftCellOfGroup ) ); } ); // Scan for empty spaces enclosed within the outer perimeter(s). - var outlineShape = this.createShapeFromPerimeterList( exteriorPerimeters ); - var enclosedSpaces = []; + const outlineShape = this.createShapeFromPerimeterList( exteriorPerimeters ); + let enclosedSpaces = []; for ( row = 0; row < this.numRows; row++ ) { for ( column = 0; column < this.numColumns; column++ ) { if ( !this.isCellOccupied( column, row ) ) { // This cell is empty. Test if it is within the outline perimeter. - var cellCenterInModel = this.cellToModelCoords( column, row ).addXY( this.unitSquareLength / 2, this.unitSquareLength / 2 ); + const cellCenterInModel = this.cellToModelCoords( column, row ).addXY( this.unitSquareLength / 2, this.unitSquareLength / 2 ); if ( outlineShape.containsPoint( cellCenterInModel ) ) { enclosedSpaces.push( new Vector2( column, row ) ); } @@ -759,7 +759,7 @@ define( require => { } // Map the internal perimeters - var interiorPerimeters = []; + const interiorPerimeters = []; while ( enclosedSpaces.length > 0 ) { // Locate the top left most space @@ -771,15 +771,15 @@ define( require => { } ); // Map the interior perimeter. - var enclosedPerimeterPoints = this.scanPerimeter( topLeftSpace ); + const enclosedPerimeterPoints = this.scanPerimeter( topLeftSpace ); interiorPerimeters.push( enclosedPerimeterPoints ); // Identify and save all spaces not enclosed by this perimeter. var perimeterShape = this.createShapeFromPerimeterPoints( enclosedPerimeterPoints ); var leftoverEmptySpaces = []; enclosedSpaces.forEach( function( enclosedSpace ) { - var positionPoint = self.cellToModelCoords( enclosedSpace.x, enclosedSpace.y ); - var centerPoint = positionPoint.plusXY( self.unitSquareLength / 2, self.unitSquareLength / 2 ); + const positionPoint = self.cellToModelCoords( enclosedSpace.x, enclosedSpace.y ); + const centerPoint = positionPoint.plusXY( self.unitSquareLength / 2, self.unitSquareLength / 2 ); if ( !perimeterShape.containsPoint( centerPoint ) ) { // This space is not contained in the perimeter that was just mapped. leftoverEmptySpaces.push( enclosedSpace ); @@ -819,7 +819,7 @@ define( require => { if ( perimeterList1.length !== perimeterList2.length ) { return false; } - var self = this; + const self = this; return perimeterList1.every( function( perimeterPoints, index ) { return self.perimeterPointsEqual( perimeterPoints, perimeterList2[ index ] ); } ); @@ -839,7 +839,7 @@ define( require => { identifyAdjacentOccupiedCells: function( startCell, cellGroup ) { assert && assert( startCell.occupiedBy !== null, 'Usage error: Unoccupied cell passed to group identification.' ); assert && assert( !startCell.cataloged, 'Usage error: Cataloged cell passed to group identification algorithm.' ); - var self = this; + const self = this; // Catalog this cell. cellGroup.push( startCell ); @@ -847,8 +847,8 @@ define( require => { // Check occupancy of each of the four adjecent cells. Object.keys( MOVEMENT_VECTORS ).forEach( function( key ) { - var movementVector = MOVEMENT_VECTORS[ key ]; - var adjacentCell = self.getCell( startCell.column + movementVector.x, startCell.row + movementVector.y ); + const movementVector = MOVEMENT_VECTORS[ key ]; + const adjacentCell = self.getCell( startCell.column + movementVector.x, startCell.row + movementVector.y ); if ( adjacentCell !== null && adjacentCell.occupiedBy !== null && !adjacentCell.cataloged ) { self.identifyAdjacentOccupiedCells( adjacentCell, cellGroup ); } @@ -863,10 +863,10 @@ define( require => { identifyContiguousCellGroups: function() { // Make a list of locations for all occupied cells. - var ungroupedOccupiedCells = []; - for ( var row = 0; row < this.numRows; row++ ) { - for ( var column = 0; column < this.numColumns; column++ ) { - var cell = this.cells[ column ][ row ]; + let ungroupedOccupiedCells = []; + for ( let row = 0; row < this.numRows; row++ ) { + for ( let column = 0; column < this.numColumns; column++ ) { + const cell = this.cells[ column ][ row ]; if ( cell.occupiedBy !== null ) { ungroupedOccupiedCells.push( this.cells[ column ][ row ] ); // Clear the flag used by the search algorithm. @@ -876,9 +876,9 @@ define( require => { } // Identify the interconnected groups of cells. - var contiguousCellGroups = []; + const contiguousCellGroups = []; while ( ungroupedOccupiedCells.length > 0 ) { - var cellGroup = []; + const cellGroup = []; this.identifyAdjacentOccupiedCells( ungroupedOccupiedCells[ 0 ], cellGroup ); contiguousCellGroups.push( cellGroup ); ungroupedOccupiedCells = _.difference( ungroupedOccupiedCells, cellGroup ); @@ -896,12 +896,12 @@ define( require => { // Orphans can only exist when operating in the 'formComposite' mode. if ( this.formCompositeProperty.get() ) { - var self = this; - var contiguousCellGroups = this.identifyContiguousCellGroups(); + const self = this; + const contiguousCellGroups = this.identifyContiguousCellGroups(); if ( contiguousCellGroups.length > 1 ) { // There are orphans that should be released. Determine which ones. - var indexOfRetainedGroup = 0; + let indexOfRetainedGroup = 0; contiguousCellGroups.forEach( function( group, index ) { if ( group.length > contiguousCellGroups[ indexOfRetainedGroup ].length ) { indexOfRetainedGroup = index; @@ -911,7 +911,7 @@ define( require => { contiguousCellGroups.forEach( function( group, groupIndex ) { if ( groupIndex !== indexOfRetainedGroup ) { group.forEach( function( cell ) { - var movableShape = cell.occupiedBy; + const movableShape = cell.occupiedBy; if ( movableShape !== null ) { // Need to test in case a previously released shape covered multiple cells. self.releaseShape( movableShape ); movableShape.returnToOrigin( true ); @@ -934,7 +934,7 @@ define( require => { */ replaceShapeWithUnitSquares: function( originalShape, unitSquares ) { assert && assert( this.isResidentShape( originalShape ), 'Error: Specified shape to be replaced does not appear to be present.' ); - var self = this; + const self = this; // The following add and remove operations do not use the add and remove methods in order to avoid releasing // orphans (which could cause undesired behavior) and attribute updates (which are unnecessary). @@ -959,7 +959,7 @@ define( require => { */ addRemovalListener: function( movableShape ) { - var self = this; + const self = this; function removalListener( userControlled ) { assert && assert( @@ -1017,8 +1017,8 @@ define( require => { assert && assert( perimeterShape.getWidth() % this.unitSquareLength === 0 && perimeterShape.getHeight() % this.unitSquareLength === 0, 'Background shape width and height must be integer multiples of the unit square size.' ); if ( centered ) { - var xOffset = this.bounds.minX + Math.floor( ( ( this.bounds.width - perimeterShape.getWidth() ) / 2 ) / this.unitSquareLength ) * this.unitSquareLength; - var yOffset = this.bounds.minY + Math.floor( ( ( this.bounds.height - perimeterShape.getHeight() ) / 2 ) / this.unitSquareLength ) * this.unitSquareLength; + const xOffset = this.bounds.minX + Math.floor( ( ( this.bounds.width - perimeterShape.getWidth() ) / 2 ) / this.unitSquareLength ) * this.unitSquareLength; + const yOffset = this.bounds.minY + Math.floor( ( ( this.bounds.height - perimeterShape.getHeight() ) / 2 ) / this.unitSquareLength ) * this.unitSquareLength; this.backgroundShapeProperty.set( perimeterShape.translated( xOffset, yOffset ) ); } else { diff --git a/js/common/view/AreaBuilderControlPanel.js b/js/common/view/AreaBuilderControlPanel.js index 56a513b..284c66b 100644 --- a/js/common/view/AreaBuilderControlPanel.js +++ b/js/common/view/AreaBuilderControlPanel.js @@ -23,8 +23,8 @@ define( require => { const VBox = require( 'SCENERY/nodes/VBox' ); // constants - var BACKGROUND_COLOR = AreaBuilderSharedConstants.CONTROL_PANEL_BACKGROUND_COLOR; - var PANEL_OPTIONS = { fill: BACKGROUND_COLOR, yMargin: 10, xMargin: 20 }; + const BACKGROUND_COLOR = AreaBuilderSharedConstants.CONTROL_PANEL_BACKGROUND_COLOR; + const PANEL_OPTIONS = { fill: BACKGROUND_COLOR, yMargin: 10, xMargin: 20 }; /** * @param showGridProperty @@ -40,16 +40,16 @@ define( require => { this.dimensionsControlVisibleProperty = new Property( true ); // Create the controls and labels - var gridCheckbox = new Checkbox( + const gridCheckbox = new Checkbox( new Grid( new Bounds2( 0, 0, 40, 40 ), 10, { stroke: '#b0b0b0' } ), showGridProperty, { spacing: 15 } ); this.dimensionsIcon = new DimensionsIcon(); // @public so that the icon style can be set - var dimensionsCheckbox = new Checkbox( this.dimensionsIcon, showDimensionsProperty, { spacing: 15 } ); + const dimensionsCheckbox = new Checkbox( this.dimensionsIcon, showDimensionsProperty, { spacing: 15 } ); // Create the panel. - var vBox = new VBox( { + const vBox = new VBox( { children: [ gridCheckbox, dimensionsCheckbox diff --git a/js/common/view/AreaBuilderIconFactory.js b/js/common/view/AreaBuilderIconFactory.js index 7ed14f8..d8c84d4 100644 --- a/js/common/view/AreaBuilderIconFactory.js +++ b/js/common/view/AreaBuilderIconFactory.js @@ -23,10 +23,10 @@ define( require => { const Vector2 = require( 'DOT/Vector2' ); // constants - var NAV_BAR_ICON_SIZE = Screen.MINIMUM_NAVBAR_ICON_SIZE; - var GRID_STROKE = null; - var SHAPE_LINE_WIDTH = 1; - var GRID_OPTIONS = { + const NAV_BAR_ICON_SIZE = Screen.MINIMUM_NAVBAR_ICON_SIZE; + const GRID_STROKE = null; + const SHAPE_LINE_WIDTH = 1; + const GRID_OPTIONS = { backgroundStroke: 'black', backgroundLineWidth: 0.5, gridStroke: GRID_STROKE, @@ -34,11 +34,11 @@ define( require => { }; function createBucketIcon( options ) { - var icon = new Node(); - var ellipseXRadius = NAV_BAR_ICON_SIZE.width * 0.125; - var ellipseYRadius = ellipseXRadius * 0.3; - var bucketDepth = ellipseXRadius * 0.75; - var bodyShape = new Shape().moveTo( -ellipseXRadius, 0 ). + const icon = new Node(); + const ellipseXRadius = NAV_BAR_ICON_SIZE.width * 0.125; + const ellipseYRadius = ellipseXRadius * 0.3; + const bucketDepth = ellipseXRadius * 0.75; + const bodyShape = new Shape().moveTo( -ellipseXRadius, 0 ). lineTo( -ellipseXRadius * 0.75, bucketDepth ). quadraticCurveTo( 0, bucketDepth + ellipseYRadius, ellipseXRadius * 0.75, bucketDepth ). lineTo( ellipseXRadius, 0 ). @@ -55,11 +55,11 @@ define( require => { /** * Static object, not meant to be instantiated. */ - var AreaBuilderIconFactory = { + const AreaBuilderIconFactory = { createExploreScreenNavBarIcon: function() { // root node - var icon = new Node(); + const icon = new Node(); // background icon.addChild( new Rectangle( 0, 0, NAV_BAR_ICON_SIZE.width, NAV_BAR_ICON_SIZE.height, 0, 0, { @@ -67,14 +67,14 @@ define( require => { } ) ); // left shape placement board and shapes - var unitSquareLength = 15; - var leftBoard = new GridIcon( 4, 4, unitSquareLength, AreaBuilderSharedConstants.GREENISH_COLOR, [ + const unitSquareLength = 15; + const leftBoard = new GridIcon( 4, 4, unitSquareLength, AreaBuilderSharedConstants.GREENISH_COLOR, [ new Vector2( 1, 1 ), new Vector2( 2, 1 ), new Vector2( 1, 2 ) ], _.extend( { left: NAV_BAR_ICON_SIZE.width * 0.05, top: NAV_BAR_ICON_SIZE.height * 0.1 }, GRID_OPTIONS ) ); icon.addChild( leftBoard ); // right shape placement board and shapes - var rightBoard = new GridIcon( 4, 4, unitSquareLength, AreaBuilderSharedConstants.PURPLISH_COLOR, [ + const rightBoard = new GridIcon( 4, 4, unitSquareLength, AreaBuilderSharedConstants.PURPLISH_COLOR, [ new Vector2( 1, 1 ), new Vector2( 2, 1 ) ], _.extend( { right: NAV_BAR_ICON_SIZE.width * 0.95, top: NAV_BAR_ICON_SIZE.height * 0.1 }, GRID_OPTIONS ) ); icon.addChild( rightBoard ); @@ -91,7 +91,7 @@ define( require => { createGameScreenNavBarIcon: function() { // root node - var icon = new Node(); + const icon = new Node(); // background icon.addChild( new Rectangle( 0, 0, NAV_BAR_ICON_SIZE.width, NAV_BAR_ICON_SIZE.height, 0, 0, { @@ -99,8 +99,8 @@ define( require => { } ) ); // shape placement board and shapes - var unitSquareLength = 12; - var shapePlacementBoard = new GridIcon( 4, 4, unitSquareLength, AreaBuilderSharedConstants.GREENISH_COLOR, [ + const unitSquareLength = 12; + const shapePlacementBoard = new GridIcon( 4, 4, unitSquareLength, AreaBuilderSharedConstants.GREENISH_COLOR, [ new Vector2( 1, 1 ), new Vector2( 2, 1 ), new Vector2( 2, 2 ) ], _.extend( { left: NAV_BAR_ICON_SIZE.width * 0.075, top: NAV_BAR_ICON_SIZE.height * 0.1 }, GRID_OPTIONS ) ); icon.addChild( shapePlacementBoard ); @@ -112,7 +112,7 @@ define( require => { } ) ); // shape carousel - var shapeCarousel = new Rectangle( 0, 0, NAV_BAR_ICON_SIZE.width * 0.5, NAV_BAR_ICON_SIZE.height * 0.25, 1, 1, { + const shapeCarousel = new Rectangle( 0, 0, NAV_BAR_ICON_SIZE.width * 0.5, NAV_BAR_ICON_SIZE.height * 0.25, 1, 1, { fill: AreaBuilderSharedConstants.CONTROL_PANEL_BACKGROUND_COLOR, stroke: 'black', lineWidth: 0.5, @@ -122,9 +122,9 @@ define( require => { icon.addChild( shapeCarousel ); // shapes on the shape carousel - var shapeFill = AreaBuilderSharedConstants.GREENISH_COLOR; - var shapeStroke = new Color( shapeFill ).colorUtilsDarker( AreaBuilderSharedConstants.PERIMETER_DARKEN_FACTOR ); - var shapes = new HBox( { + const shapeFill = AreaBuilderSharedConstants.GREENISH_COLOR; + const shapeStroke = new Color( shapeFill ).colorUtilsDarker( AreaBuilderSharedConstants.PERIMETER_DARKEN_FACTOR ); + const shapes = new HBox( { children: [ new Rectangle( 0, 0, unitSquareLength, unitSquareLength, 0, 0, { fill: shapeFill, diff --git a/js/common/view/DimensionsIcon.js b/js/common/view/DimensionsIcon.js index 7bcc9d7..dc0d851 100644 --- a/js/common/view/DimensionsIcon.js +++ b/js/common/view/DimensionsIcon.js @@ -22,11 +22,11 @@ define( require => { const Text = require( 'SCENERY/nodes/Text' ); // constants - var UNIT_LENGTH = 10; // in screen coordinates - var WIDTH = 3 * UNIT_LENGTH; - var HEIGHT = 2 * UNIT_LENGTH; // in screen coordinates - var LABEL_FONT = new PhetFont( 10 ); - var DEFAULT_FILL_COLOR = AreaBuilderSharedConstants.GREENISH_COLOR; + const UNIT_LENGTH = 10; // in screen coordinates + const WIDTH = 3 * UNIT_LENGTH; + const HEIGHT = 2 * UNIT_LENGTH; // in screen coordinates + const LABEL_FONT = new PhetFont( 10 ); + const DEFAULT_FILL_COLOR = AreaBuilderSharedConstants.GREENISH_COLOR; /** * @param {Object} [options] @@ -67,7 +67,7 @@ define( require => { setColor: function( color ) { this.singleRectNode.fill = color; - var strokeColor = Color.toColor( color ).colorUtilsDarker( AreaBuilderSharedConstants.PERIMETER_DARKEN_FACTOR ); + const strokeColor = Color.toColor( color ).colorUtilsDarker( AreaBuilderSharedConstants.PERIMETER_DARKEN_FACTOR ); this.singleRectNode.stroke = strokeColor; this.grid.stroke = strokeColor; } diff --git a/js/common/view/Grid.js b/js/common/view/Grid.js index 2345bb3..c7dd83d 100644 --- a/js/common/view/Grid.js +++ b/js/common/view/Grid.js @@ -22,7 +22,7 @@ define( require => { * @constructor */ function Grid( bounds, spacing, options ) { - var gridShape = new Shape(); + const gridShape = new Shape(); // Add the vertical lines for ( var i = bounds.minX + spacing; i < bounds.minX + bounds.width; i += spacing ) { diff --git a/js/common/view/GridIcon.js b/js/common/view/GridIcon.js index 131354a..bf236ec 100644 --- a/js/common/view/GridIcon.js +++ b/js/common/view/GridIcon.js @@ -30,7 +30,7 @@ define( require => { function GridIcon( columns, rows, cellLength, shapeFillColor, occupiedCells, options ) { Node.call( this ); - var self = this; + const self = this; options = _.extend( { // defaults diff --git a/js/common/view/PerimeterShapeNode.js b/js/common/view/PerimeterShapeNode.js index 705b233..e5025e9 100644 --- a/js/common/view/PerimeterShapeNode.js +++ b/js/common/view/PerimeterShapeNode.js @@ -24,8 +24,8 @@ define( require => { const Vector2 = require( 'DOT/Vector2' ); // constants - var DIMENSION_LABEL_FONT = new PhetFont( { size: 14 } ); - var COMPARISON_TOLERANCE = 1E-6; + const DIMENSION_LABEL_FONT = new PhetFont( { size: 14 } ); + const COMPARISON_TOLERANCE = 1E-6; // Utility function for identifying a perimeter segment with no bends. function identifySegment( perimeterPoints, startIndex ) { @@ -36,15 +36,15 @@ define( require => { } // Set up initial portion of segment. - var segmentStartPoint = perimeterPoints[ startIndex ]; - var endIndex = ( startIndex + 1 ) % perimeterPoints.length; - var segmentEndPoint = perimeterPoints[ endIndex ]; - var previousAngle = Math.atan2( segmentEndPoint.y - segmentStartPoint.y, segmentEndPoint.x - segmentStartPoint.x ); - var segmentComplete = false; + const segmentStartPoint = perimeterPoints[ startIndex ]; + let endIndex = ( startIndex + 1 ) % perimeterPoints.length; + let segmentEndPoint = perimeterPoints[ endIndex ]; + const previousAngle = Math.atan2( segmentEndPoint.y - segmentStartPoint.y, segmentEndPoint.x - segmentStartPoint.x ); + let segmentComplete = false; while ( !segmentComplete && endIndex !== 0 ) { - var candidatePoint = perimeterPoints[ ( endIndex + 1 ) % perimeterPoints.length ]; - var angleToCandidatePoint = Math.atan2( candidatePoint.y - segmentEndPoint.y, candidatePoint.x - segmentEndPoint.x ); + const candidatePoint = perimeterPoints[ ( endIndex + 1 ) % perimeterPoints.length ]; + const angleToCandidatePoint = Math.atan2( candidatePoint.y - segmentEndPoint.y, candidatePoint.x - segmentEndPoint.x ); if ( previousAngle === angleToCandidatePoint ) { // This point is an extension of the current segment. segmentEndPoint = candidatePoint; @@ -75,28 +75,28 @@ define( require => { Node.call( this ); - var perimeterDefinesViableShapeProperty = new Property( false ); + const perimeterDefinesViableShapeProperty = new Property( false ); // Set up the shape, edge, and grid, which will be updated as the perimeter changes. The order in which these // are added is important for proper layering. - var perimeterShapeNode = new Path( null ); + const perimeterShapeNode = new Path( null ); this.addChild( perimeterShapeNode ); - var grid = new Grid( maxBounds, unitSquareLength, { + const grid = new Grid( maxBounds, unitSquareLength, { lineDash: [ 0, 3, 1, 0 ], // Tweaked to work well with unit size stroke: 'black' } ); this.addChild( grid ); - var perimeterNode = new Path( null, { lineWidth: 2 } ); + const perimeterNode = new Path( null, { lineWidth: 2 } ); this.addChild( perimeterNode ); - var dimensionsLayer = new Node(); + const dimensionsLayer = new Node(); this.addChild( dimensionsLayer ); // Create a pool of text nodes that will be used to portray the dimension values. This is done as a performance // optimization, since changing text nodes is more efficient that recreating them on each update. - var textNodePool = []; + const textNodePool = []; function addDimensionLabelNode() { - var textNode = new Text( '', { font: DIMENSION_LABEL_FONT, centerX: maxBounds.centerX, centerY: maxBounds.centerY } ); + const textNode = new Text( '', { font: DIMENSION_LABEL_FONT, centerX: maxBounds.centerX, centerY: maxBounds.centerY } ); textNode.visible = false; textNodePool.push( textNode ); dimensionsLayer.addChild( textNode ); @@ -106,7 +106,7 @@ define( require => { // Define function for updating the appearance of the perimeter shape. function update() { - var i; + let i; // Update the colors assert && assert( perimeterShapeProperty.value.fillColor || perimeterShapeProperty.value.edgeColor, @@ -115,7 +115,7 @@ define( require => { perimeterNode.stroke = perimeterShapeProperty.value.edgeColor; // Define the shape of the outer perimeter. - var mainShape = new Shape(); + const mainShape = new Shape(); perimeterShapeProperty.value.exteriorPerimeters.forEach( function( exteriorPerimeters ) { mainShape.moveToPoint( exteriorPerimeters[ 0 ] ); for ( i = 1; i < exteriorPerimeters.length; i++ ) { @@ -158,20 +158,20 @@ define( require => { if ( perimeterShapeProperty.value.exteriorPerimeters.length === 1 ) { // Create a list of the perimeters to be labeled. - var perimetersToLabel = []; + const perimetersToLabel = []; perimetersToLabel.push( perimeterShapeProperty.value.exteriorPerimeters[ 0 ] ); perimeterShapeProperty.value.interiorPerimeters.forEach( function( interiorPerimeter ) { perimetersToLabel.push( interiorPerimeter ); } ); // Identify the segments in each of the perimeters, exterior and interior, to be labeled. - var segmentLabelsInfo = []; + const segmentLabelsInfo = []; perimetersToLabel.forEach( function( perimeterToLabel ) { - var segment = { startIndex: 0, endIndex: 0 }; + let segment = { startIndex: 0, endIndex: 0 }; do { segment = identifySegment( perimeterToLabel, segment.endIndex ); // Only put labels on segments that have integer lengths. - var segmentLabelInfo = { + const segmentLabelInfo = { unitLength: perimeterToLabel[ segment.startIndex ].distance( perimeterToLabel[ segment.endIndex ] ) / unitSquareLength, position: new Vector2( ( perimeterToLabel[ segment.startIndex ].x + perimeterToLabel[ segment.endIndex ].x ) / 2, ( perimeterToLabel[ segment.startIndex ].y + perimeterToLabel[ segment.endIndex ].y ) / 2 ), @@ -195,15 +195,15 @@ define( require => { // Get labels from the pool and place them on each segment, just outside of the shape. segmentLabelsInfo.forEach( function( segmentLabelInfo, segmentIndex ) { - var dimensionLabel = textNodePool[ segmentIndex ]; + const dimensionLabel = textNodePool[ segmentIndex ]; dimensionLabel.visible = true; dimensionLabel.text = segmentLabelInfo.unitLength; - var labelPositionOffset = new Vector2( 0, 0 ); + const labelPositionOffset = new Vector2( 0, 0 ); // TODO: At the time of this writing there is an issue with Shape.containsPoint() that can make // containment testing unreliable if there is an edge on the same line as the containment test. As a // workaround, the containment test offset is tweaked a little below. Once this issue is fixed, the // label offset itself can be used for the test. See https://github.com/phetsims/kite/issues/3. - var containmentTestOffset; + let containmentTestOffset; if ( segmentLabelInfo.edgeAngle === 0 || segmentLabelInfo.edgeAngle === Math.PI ) { // Label is on horizontal edge, so use height to determine offset. labelPositionOffset.setXY( 0, dimensionLabel.height / 2 ); diff --git a/js/common/view/ShapeCreatorNode.js b/js/common/view/ShapeCreatorNode.js index 845c48d..c731113 100644 --- a/js/common/view/ShapeCreatorNode.js +++ b/js/common/view/ShapeCreatorNode.js @@ -25,7 +25,7 @@ define( require => { const Vector2Property = require( 'DOT/Vector2Property' ); // constants - var BORDER_LINE_WIDTH = 1; + const BORDER_LINE_WIDTH = 1; /** * @param {Shape} shape @@ -37,7 +37,7 @@ define( require => { function ShapeCreatorNode( shape, color, addShapeToModel, options ) { assert && assert( shape.bounds.minX === 0 && shape.bounds.minY === 0, 'Error: Shape is expected to be located at 0, 0' ); Node.call( this, { cursor: 'pointer' } ); - var self = this; + const self = this; options = _.extend( { @@ -72,7 +72,7 @@ define( require => { } // Create the node that the user will click upon to add a model element to the view. - var representation = new Path( shape, { + const representation = new Path( shape, { fill: color, stroke: Color.toColor( color ).colorUtilsDarker( AreaBuilderSharedConstants.PERIMETER_DARKEN_FACTOR ), lineWidth: BORDER_LINE_WIDTH, @@ -82,14 +82,14 @@ define( require => { // Add grid if specified. if ( options.gridSpacing ) { - var gridNode = new Grid( representation.bounds.dilated( -BORDER_LINE_WIDTH ), options.gridSpacing, { + const gridNode = new Grid( representation.bounds.dilated( -BORDER_LINE_WIDTH ), options.gridSpacing, { lineDash: [ 0, 3, 1, 0 ], stroke: 'black' } ); this.addChild( gridNode ); } - var createdCountProperty = new Property( 0 ); // Used to track the number of shapes created and not returned. + const createdCountProperty = new Property( 0 ); // Used to track the number of shapes created and not returned. // If the created count exceeds the max, make this node invisible (which also makes it unusable). createdCountProperty.link( function( numCreated ) { @@ -97,9 +97,9 @@ define( require => { } ); // variables used by the drag handler - var parentScreenView = null; // needed for coordinate transforms - var movableShape = null; - var shapePositionProperty = new Vector2Property( Vector2.ZERO ); + let parentScreenView = null; // needed for coordinate transforms + let movableShape = null; + const shapePositionProperty = new Vector2Property( Vector2.ZERO ); // Link the internal position property to the movable shape. shapePositionProperty.link( function( position ){ @@ -109,7 +109,7 @@ define( require => { } ); // Adjust the drag bounds to compensate for the shape that that the entire shape will stay in bounds. - var shapeDragBounds = options.shapeDragBounds.copy(); + const shapeDragBounds = options.shapeDragBounds.copy(); shapeDragBounds.setMaxX( shapeDragBounds.maxX - shape.bounds.width ); shapeDragBounds.setMaxY( shapeDragBounds.maxY - shape.bounds.height ); @@ -126,7 +126,7 @@ define( require => { if ( !parentScreenView ) { // Find the parent screen view by moving up the scene graph. - var testNode = self; + let testNode = self; while ( testNode !== null ) { if ( testNode instanceof ScreenView ) { parentScreenView = testNode; @@ -138,9 +138,9 @@ define( require => { } // Determine the initial position of the new element as a function of the event position and this node's bounds. - var upperLeftCornerGlobal = self.parentToGlobalPoint( self.leftTop ); - var initialPositionOffset = upperLeftCornerGlobal.minus( event.pointer.point ); - var initialPosition = parentScreenView.globalToLocalPoint( event.pointer.point.plus( initialPositionOffset ) ); + const upperLeftCornerGlobal = self.parentToGlobalPoint( self.leftTop ); + const initialPositionOffset = upperLeftCornerGlobal.minus( event.pointer.point ); + const initialPosition = parentScreenView.globalToLocalPoint( event.pointer.point.plus( initialPositionOffset ) ); shapePositionProperty.value = initialPosition; // Create and add the new model element. @@ -153,7 +153,7 @@ define( require => { // Use an IIFE to keep a reference of the movable shape in a closure. ( function() { createdCountProperty.value++; - var localRefToMovableShape = movableShape; + const localRefToMovableShape = movableShape; localRefToMovableShape.returnedToOriginEmitter.addListener( function returnedToOriginListener() { if ( !localRefToMovableShape.userControlledProperty.get() ) { // The shape has been returned to its origin. diff --git a/js/common/view/ShapeNode.js b/js/common/view/ShapeNode.js index 9952d9c..3def915 100644 --- a/js/common/view/ShapeNode.js +++ b/js/common/view/ShapeNode.js @@ -22,11 +22,11 @@ define( require => { const Vector2 = require( 'DOT/Vector2' ); // constants - var SHADOW_COLOR = 'rgba( 50, 50, 50, 0.5 )'; - var SHADOW_OFFSET = new Vector2( 5, 5 ); - var OPACITY_OF_TRANSLUCENT_SHAPES = 0.65; // Value empirically determined. - var UNIT_LENGTH = AreaBuilderSharedConstants.UNIT_SQUARE_LENGTH; - var BORDER_LINE_WIDTH = 1; + const SHADOW_COLOR = 'rgba( 50, 50, 50, 0.5 )'; + const SHADOW_OFFSET = new Vector2( 5, 5 ); + const OPACITY_OF_TRANSLUCENT_SHAPES = 0.65; // Value empirically determined. + const UNIT_LENGTH = AreaBuilderSharedConstants.UNIT_SQUARE_LENGTH; + const BORDER_LINE_WIDTH = 1; /** * @param {MovableShape} movableShape @@ -35,7 +35,7 @@ define( require => { */ function ShapeNode( movableShape, dragBounds ) { Node.call( this, { cursor: 'pointer' } ); - var self = this; + const self = this; this.color = movableShape.color; // @public // Set up the mouse and touch areas for this node so that this can still be grabbed when invisible. @@ -43,18 +43,18 @@ define( require => { this.mouseArea = movableShape.shape; // Set up a root node whose visibility and opacity will be manipulated below. - var rootNode = new Node(); + const rootNode = new Node(); this.addChild( rootNode ); // Create the shadow - var shadow = new Path( movableShape.shape, { + const shadow = new Path( movableShape.shape, { fill: SHADOW_COLOR, leftTop: SHADOW_OFFSET } ); rootNode.addChild( shadow ); // Create the primary representation - var representation = new Path( movableShape.shape, { + const representation = new Path( movableShape.shape, { fill: movableShape.color, stroke: Color.toColor( movableShape.color ).colorUtilsDarker( AreaBuilderSharedConstants.PERIMETER_DARKEN_FACTOR ), lineWidth: 1, @@ -75,7 +75,7 @@ define( require => { // Because a composite shape is often used to depict the overall shape when a shape is on the placement board, this // element may become invisible unless it is user controlled, animating, or fading. - var visibleProperty = new DerivedProperty( [ + const visibleProperty = new DerivedProperty( [ movableShape.userControlledProperty, movableShape.animatingProperty, movableShape.fadeProportionProperty, @@ -85,7 +85,7 @@ define( require => { } ); // Opacity is also a derived property, range is 0 to 1. - var opacityProperty = new DerivedProperty( [ + const opacityProperty = new DerivedProperty( [ movableShape.userControlledProperty, movableShape.animatingProperty, movableShape.fadeProportionProperty ], @@ -115,7 +115,7 @@ define( require => { rootNode.visible = visible; } ); - var shadowVisibilityProperty = new DerivedProperty( + const shadowVisibilityProperty = new DerivedProperty( [ movableShape.userControlledProperty, movableShape.animatingProperty ], function( userControlled, animating ) { return ( userControlled || animating ); @@ -137,7 +137,7 @@ define( require => { } ); // Adjust the drag bounds to compensate for the shape that that the entire shape will stay in bounds. - var shapeDragBounds = new Bounds2( + const shapeDragBounds = new Bounds2( dragBounds.minX, dragBounds.minY, dragBounds.maxX - movableShape.shape.bounds.width, diff --git a/js/common/view/ShapePlacementBoardNode.js b/js/common/view/ShapePlacementBoardNode.js index 923a2cf..b2ed89f 100644 --- a/js/common/view/ShapePlacementBoardNode.js +++ b/js/common/view/ShapePlacementBoardNode.js @@ -27,11 +27,11 @@ define( require => { Node.call( this ); // Create and add the board itself. - var board = Rectangle.bounds( shapePlacementBoard.bounds, { fill: 'white', stroke: 'black' } ); + const board = Rectangle.bounds( shapePlacementBoard.bounds, { fill: 'white', stroke: 'black' } ); this.addChild( board ); // Create and add the grid - var grid = new Grid( shapePlacementBoard.bounds, shapePlacementBoard.unitSquareLength, { stroke: '#C0C0C0' } ); + const grid = new Grid( shapePlacementBoard.bounds, shapePlacementBoard.unitSquareLength, { stroke: '#C0C0C0' } ); this.addChild( grid ); // Track and update the grid visibility @@ -50,12 +50,12 @@ define( require => { // Monitor the shapes added by the user to the board and create an equivalent shape with no edges for each. This // may seem a little odd - why hide the shapes that the user placed and depict them with essentially the same // thing minus the edge stroke? The reason is that this makes layering and control of visual modes much easier. - var shapesLayer = new Node(); + const shapesLayer = new Node(); this.addChild( shapesLayer ); shapePlacementBoard.residentShapes.addItemAddedListener( function( addedShape ) { if ( shapePlacementBoard.formCompositeProperty.get() ) { // Add a representation of the shape. - var representation = new Path( addedShape.shape, { + const representation = new Path( addedShape.shape, { fill: addedShape.color, left: addedShape.positionProperty.get().x, top: addedShape.positionProperty.get().y diff --git a/js/explore/AreaBuilderExploreScreen.js b/js/explore/AreaBuilderExploreScreen.js index 11aa111..ec4198b 100644 --- a/js/explore/AreaBuilderExploreScreen.js +++ b/js/explore/AreaBuilderExploreScreen.js @@ -30,7 +30,7 @@ define( require => { */ function AreaBuilderExploreScreen( tandem ) { - var options = { + const options = { name: exploreString, backgroundColorProperty: new Property( AreaBuilderSharedConstants.BACKGROUND_COLOR ), homeScreenIcon: new Image( exploreIcon ), diff --git a/js/explore/model/AreaBuilderExploreModel.js b/js/explore/model/AreaBuilderExploreModel.js index 63e2e83..78d082e 100644 --- a/js/explore/model/AreaBuilderExploreModel.js +++ b/js/explore/model/AreaBuilderExploreModel.js @@ -22,15 +22,15 @@ define( require => { const Vector2 = require( 'DOT/Vector2' ); // constants - var UNIT_SQUARE_LENGTH = AreaBuilderSharedConstants.UNIT_SQUARE_LENGTH; - var UNIT_SQUARE_SHAPE = Shape.rect( 0, 0, UNIT_SQUARE_LENGTH, UNIT_SQUARE_LENGTH ); - var SMALL_BOARD_SIZE = new Dimension2( UNIT_SQUARE_LENGTH * 9, UNIT_SQUARE_LENGTH * 8 ); - var LARGE_BOARD_SIZE = new Dimension2( UNIT_SQUARE_LENGTH * 19, UNIT_SQUARE_LENGTH * 8 ); - var PLAY_AREA_WIDTH = AreaBuilderSharedConstants.LAYOUT_BOUNDS.width; - var SPACE_BETWEEN_PLACEMENT_BOARDS = UNIT_SQUARE_LENGTH; - var BOARD_Y_POS = 70; // Empirically determined from looking at the layout - var BUCKET_SIZE = new Dimension2( 90, 45 ); - var BOARD_TO_BUCKET_Y_SPACING = 45; + const UNIT_SQUARE_LENGTH = AreaBuilderSharedConstants.UNIT_SQUARE_LENGTH; + const UNIT_SQUARE_SHAPE = Shape.rect( 0, 0, UNIT_SQUARE_LENGTH, UNIT_SQUARE_LENGTH ); + const SMALL_BOARD_SIZE = new Dimension2( UNIT_SQUARE_LENGTH * 9, UNIT_SQUARE_LENGTH * 8 ); + const LARGE_BOARD_SIZE = new Dimension2( UNIT_SQUARE_LENGTH * 19, UNIT_SQUARE_LENGTH * 8 ); + const PLAY_AREA_WIDTH = AreaBuilderSharedConstants.LAYOUT_BOUNDS.width; + const SPACE_BETWEEN_PLACEMENT_BOARDS = UNIT_SQUARE_LENGTH; + const BOARD_Y_POS = 70; // Empirically determined from looking at the layout + const BUCKET_SIZE = new Dimension2( 90, 45 ); + const BOARD_TO_BUCKET_Y_SPACING = 45; /** * @constructor @@ -75,7 +75,7 @@ define( require => { this.shapePlacementBoards = [ this.leftShapePlacementBoard, this.rightShapePlacementBoard, this.singleShapePlacementBoard ]; // Create the buckets that will hold the shapes. - var bucketYPos = this.leftShapePlacementBoard.bounds.minY + SMALL_BOARD_SIZE.height + BOARD_TO_BUCKET_Y_SPACING; + const bucketYPos = this.leftShapePlacementBoard.bounds.minY + SMALL_BOARD_SIZE.height + BOARD_TO_BUCKET_Y_SPACING; this.leftBucket = new Bucket( { position: new Vector2( this.leftShapePlacementBoard.bounds.minX + SMALL_BOARD_SIZE.width * 0.7, bucketYPos ), baseColor: '#000080', @@ -105,8 +105,8 @@ define( require => { }, placeShape: function( movableShape ) { - var shapePlaced = false; - for ( var i = 0; i < this.shapePlacementBoards.length && !shapePlaced; i++ ) { + let shapePlaced = false; + for ( let i = 0; i < this.shapePlacementBoards.length && !shapePlaced; i++ ) { shapePlaced = this.shapePlacementBoards[ i ].placeShape( movableShape ); } if ( !shapePlaced ) { @@ -121,7 +121,7 @@ define( require => { * @param movableShape */ addUserCreatedMovableShape: function( movableShape ) { - var self = this; + const self = this; this.movableShapes.push( movableShape ); movableShape.userControlledProperty.link( function( userControlled ) { if ( !userControlled ) { @@ -151,12 +151,12 @@ define( require => { * fill the boards with unit squares, useful for debugging, not used in general operation of the sim */ fillBoards: function() { - var self = this; + const self = this; this.shapePlacementBoards.forEach( function( board ) { - var numRows = board.bounds.height / UNIT_SQUARE_LENGTH; - var numColumns = board.bounds.width / UNIT_SQUARE_LENGTH; - var movableShape; - var shapeOrigin; + const numRows = board.bounds.height / UNIT_SQUARE_LENGTH; + const numColumns = board.bounds.width / UNIT_SQUARE_LENGTH; + let movableShape; + let shapeOrigin; if ( board === self.leftShapePlacementBoard ){ shapeOrigin = self.leftBucket.position; } diff --git a/js/explore/view/AreaAndPerimeterDisplay.js b/js/explore/view/AreaAndPerimeterDisplay.js index 698b62f..9781bb0 100644 --- a/js/explore/view/AreaAndPerimeterDisplay.js +++ b/js/explore/view/AreaAndPerimeterDisplay.js @@ -23,9 +23,9 @@ define( require => { const valuesString = require( 'string!AREA_BUILDER/values' ); // constants - var DISPLAY_FONT = new PhetFont( 14 ); - var MAX_CONTENT_WIDTH = 200; // empirically determined, supports translation - var MAX_TITLE_WIDTH = 190; // empirically determined, supports translation + const DISPLAY_FONT = new PhetFont( 14 ); + const MAX_CONTENT_WIDTH = 200; // empirically determined, supports translation + const MAX_TITLE_WIDTH = 190; // empirically determined, supports translation /** * @param {Property} areaAndPerimeterProperty - An object containing values for area and perimeter @@ -40,12 +40,12 @@ define( require => { maxWidth: Number.POSITIVE_INFINITY }, options ); - var contentNode = new Node(); - var areaCaption = new Text( areaString, { font: DISPLAY_FONT } ); - var perimeterCaption = new Text( perimeterString, { font: DISPLAY_FONT } ); - var tempTwoDigitString = new Text( '999', { font: DISPLAY_FONT } ); - var areaReadout = new Text( '', { font: DISPLAY_FONT, fill: areaTextColor } ); - var perimeterReadout = new Text( '', { font: DISPLAY_FONT, fill: perimeterTextColor } ); + const contentNode = new Node(); + const areaCaption = new Text( areaString, { font: DISPLAY_FONT } ); + const perimeterCaption = new Text( perimeterString, { font: DISPLAY_FONT } ); + const tempTwoDigitString = new Text( '999', { font: DISPLAY_FONT } ); + const areaReadout = new Text( '', { font: DISPLAY_FONT, fill: areaTextColor } ); + const perimeterReadout = new Text( '', { font: DISPLAY_FONT, fill: perimeterTextColor } ); contentNode.addChild( areaCaption ); perimeterCaption.left = areaCaption.left; @@ -53,7 +53,7 @@ define( require => { contentNode.addChild( perimeterCaption ); contentNode.addChild( areaReadout ); contentNode.addChild( perimeterReadout ); - var readoutsRightEdge = Math.max( perimeterCaption.right, areaCaption.right ) + 8 + tempTwoDigitString.width; + const readoutsRightEdge = Math.max( perimeterCaption.right, areaCaption.right ) + 8 + tempTwoDigitString.width; areaAndPerimeterProperty.link( function( areaAndPerimeter ) { areaReadout.text = areaAndPerimeter.area; diff --git a/js/explore/view/AreaBuilderExploreView.js b/js/explore/view/AreaBuilderExploreView.js index a29dd8d..8f77fa5 100644 --- a/js/explore/view/AreaBuilderExploreView.js +++ b/js/explore/view/AreaBuilderExploreView.js @@ -21,7 +21,7 @@ define( require => { const ScreenView = require( 'JOIST/ScreenView' ); // constants - var SPACE_AROUND_SHAPE_PLACEMENT_BOARD = AreaBuilderSharedConstants.CONTROLS_INSET; + const SPACE_AROUND_SHAPE_PLACEMENT_BOARD = AreaBuilderSharedConstants.CONTROLS_INSET; /** * @param {AreaBuilderExploreModel} model @@ -33,21 +33,21 @@ define( require => { // Create the layers where the shapes will be placed. The shapes are maintained in separate layers so that they // are over all of the shape placement boards in the z-order. - var movableShapesLayer = new Node( { layerSplit: true } ); // Force the moving shape into a separate layer for improved performance. - var singleBoardShapesLayer = new Node(); + const movableShapesLayer = new Node( { layerSplit: true } ); // Force the moving shape into a separate layer for improved performance. + const singleBoardShapesLayer = new Node(); movableShapesLayer.addChild( singleBoardShapesLayer ); - var dualBoardShapesLayer = new Node(); + const dualBoardShapesLayer = new Node(); movableShapesLayer.addChild( dualBoardShapesLayer ); // Create the composite nodes that contain the shape placement board, the readout, the bucket, the shape creator // nodes, and the eraser button. - var centerExploreNode = new ExploreNode( model.singleShapePlacementBoard, model.addUserCreatedMovableShape.bind( model ), + const centerExploreNode = new ExploreNode( model.singleShapePlacementBoard, model.addUserCreatedMovableShape.bind( model ), model.movableShapes, model.singleModeBucket, { shapesLayer: singleBoardShapesLayer, shapeDragBounds: this.layoutBounds } ); this.addChild( centerExploreNode ); - var leftExploreNode = new ExploreNode( model.leftShapePlacementBoard, model.addUserCreatedMovableShape.bind( model ), + const leftExploreNode = new ExploreNode( model.leftShapePlacementBoard, model.addUserCreatedMovableShape.bind( model ), model.movableShapes, model.leftBucket, { shapesLayer: dualBoardShapesLayer, shapeDragBounds: this.layoutBounds } ); this.addChild( leftExploreNode ); - var rightExploreNode = new ExploreNode( model.rightShapePlacementBoard, model.addUserCreatedMovableShape.bind( model ), + const rightExploreNode = new ExploreNode( model.rightShapePlacementBoard, model.addUserCreatedMovableShape.bind( model ), model.movableShapes, model.rightBucket, { shapesLayer: dualBoardShapesLayer, shapeDragBounds: this.layoutBounds } ); this.addChild( rightExploreNode ); @@ -61,11 +61,11 @@ define( require => { } ); // Create and add the panel that contains the ABSwitch. - var switchPanel = new BoardDisplayModePanel( model.boardDisplayModeProperty ); + const switchPanel = new BoardDisplayModePanel( model.boardDisplayModeProperty ); this.addChild( switchPanel ); // Create and add the common control panel. - var controlPanel = new AreaBuilderControlPanel( model.showShapeBoardGridsProperty, model.showDimensionsProperty ); + const controlPanel = new AreaBuilderControlPanel( model.showShapeBoardGridsProperty, model.showDimensionsProperty ); this.addChild( controlPanel ); // Add the reset button. @@ -85,7 +85,7 @@ define( require => { this.addChild( movableShapesLayer ); // Perform final layout adjustments - var centerBoardBounds = model.singleShapePlacementBoard.bounds; + const centerBoardBounds = model.singleShapePlacementBoard.bounds; controlPanel.top = centerBoardBounds.maxY + SPACE_AROUND_SHAPE_PLACEMENT_BOARD; controlPanel.left = centerBoardBounds.minX; switchPanel.top = centerBoardBounds.maxY + SPACE_AROUND_SHAPE_PLACEMENT_BOARD; diff --git a/js/explore/view/BoardDisplayModePanel.js b/js/explore/view/BoardDisplayModePanel.js index d107156..1e132ef 100644 --- a/js/explore/view/BoardDisplayModePanel.js +++ b/js/explore/view/BoardDisplayModePanel.js @@ -22,8 +22,8 @@ define( require => { // utility function for creating the icons used on this panel function createIcon( color, rectangleLength, rectanglePositions ) { - var edgeColor = Color.toColor( color ).colorUtilsDarker( AreaBuilderSharedConstants.PERIMETER_DARKEN_FACTOR ); - var content = new Node(); + const edgeColor = Color.toColor( color ).colorUtilsDarker( AreaBuilderSharedConstants.PERIMETER_DARKEN_FACTOR ); + const content = new Node(); rectanglePositions.forEach( function( position ) { content.addChild( new Rectangle( 0, 0, rectangleLength, rectangleLength, 0, 0, { fill: color, @@ -41,13 +41,13 @@ define( require => { */ function BoardDisplayModePanel( boardDisplayModeProperty ) { - var singleBoardIcon = createIcon( AreaBuilderSharedConstants.ORANGISH_COLOR, 6, [ + const singleBoardIcon = createIcon( AreaBuilderSharedConstants.ORANGISH_COLOR, 6, [ new Vector2( 0, 1 ), new Vector2( 1, 0 ), new Vector2( 1, 1 ) ] ); - var dualBoardIcon = new HBox( { + const dualBoardIcon = new HBox( { children: [ createIcon( AreaBuilderSharedConstants.GREENISH_COLOR, 6, [ new Vector2( 0, 0 ), diff --git a/js/explore/view/ExploreNode.js b/js/explore/view/ExploreNode.js index 50a9010..6f916c3 100644 --- a/js/explore/view/ExploreNode.js +++ b/js/explore/view/ExploreNode.js @@ -28,11 +28,11 @@ define( require => { const Vector2 = require( 'DOT/Vector2' ); // constants - var SPACE_AROUND_SHAPE_PLACEMENT_BOARD = AreaBuilderSharedConstants.CONTROLS_INSET; - var IDENTITY_TRANSFORM = ModelViewTransform2.createIdentity(); - var UNIT_SQUARE_LENGTH = AreaBuilderSharedConstants.UNIT_SQUARE_LENGTH; - var UNIT_RECTANGLE_SHAPE = Shape.rect( 0, 0, UNIT_SQUARE_LENGTH, UNIT_SQUARE_LENGTH ); - var SHAPE_CREATOR_OFFSET_POSITIONS = [ + const SPACE_AROUND_SHAPE_PLACEMENT_BOARD = AreaBuilderSharedConstants.CONTROLS_INSET; + const IDENTITY_TRANSFORM = ModelViewTransform2.createIdentity(); + const UNIT_SQUARE_LENGTH = AreaBuilderSharedConstants.UNIT_SQUARE_LENGTH; + const UNIT_RECTANGLE_SHAPE = Shape.rect( 0, 0, UNIT_SQUARE_LENGTH, UNIT_SQUARE_LENGTH ); + const SHAPE_CREATOR_OFFSET_POSITIONS = [ // Offsets used for initial position of shape, relative to bucket hole center. Empirically determined. new Vector2( -20 - UNIT_SQUARE_LENGTH / 2, 0 - UNIT_SQUARE_LENGTH / 2 ), new Vector2( -10 - UNIT_SQUARE_LENGTH / 2, -2 - UNIT_SQUARE_LENGTH / 2 ), @@ -65,14 +65,14 @@ define( require => { // Verify that the shape placement board is set up to handle a specific color, rather than all colors, since other // code below depends on this. assert && assert( shapePlacementBoard.colorHandled !== '*' ); - var shapeColor = Color.toColor( shapePlacementBoard.colorHandled ); + const shapeColor = Color.toColor( shapePlacementBoard.colorHandled ); Node.call( this ); // Create the nodes that will be used to layer things visually. - var backLayer = new Node(); + const backLayer = new Node(); this.addChild( backLayer ); - var movableShapesLayer; + let movableShapesLayer; if ( !options.shapesLayer ) { movableShapesLayer = new Node( { layerSplit: true } ); // Force the moving shape into a separate layer for performance reasons. this.addChild( movableShapesLayer ); @@ -81,14 +81,14 @@ define( require => { // Assume that this layer was added to the scene graph elsewhere, and doesn't need to be added here. movableShapesLayer = options.shapesLayer; } - var bucketFrontLayer = new Node(); + const bucketFrontLayer = new Node(); this.addChild( bucketFrontLayer ); - var singleBoardControlsLayer = new Node(); + const singleBoardControlsLayer = new Node(); this.addChild( singleBoardControlsLayer ); // Add the node that represents the shape placement board. This is positioned based on this model location, and // all other nodes (such as the bucket) are positioned relative to this. - var shapePlacementBoardNode = new ShapePlacementBoardNode( shapePlacementBoard ); + const shapePlacementBoardNode = new ShapePlacementBoardNode( shapePlacementBoard ); backLayer.addChild( shapePlacementBoardNode ); // Add the area and perimeter display @@ -104,9 +104,9 @@ define( require => { this.addChild( this.areaAndPerimeterDisplay ); // Add the bucket view elements - var bucketFront = new BucketFront( bucket, IDENTITY_TRANSFORM ); + const bucketFront = new BucketFront( bucket, IDENTITY_TRANSFORM ); bucketFrontLayer.addChild( bucketFront ); - var bucketHole = new BucketHole( bucket, IDENTITY_TRANSFORM ); + const bucketHole = new BucketHole( bucket, IDENTITY_TRANSFORM ); backLayer.addChild( bucketHole ); // Add the shape creator nodes. These must be added after the bucket hole for proper layering. @@ -133,7 +133,7 @@ define( require => { if ( addedShape.color.equals( shapeColor ) ) { // Create and add the view representation for this shape. - var shapeNode = new ShapeNode( addedShape, options.shapeDragBounds ); + const shapeNode = new ShapeNode( addedShape, options.shapeDragBounds ); movableShapesLayer.addChild( shapeNode ); // Move the shape to the front of this layer when grabbed by the user. diff --git a/js/game/AreaBuilderGameScreen.js b/js/game/AreaBuilderGameScreen.js index 87dfc5c..59ae659 100644 --- a/js/game/AreaBuilderGameScreen.js +++ b/js/game/AreaBuilderGameScreen.js @@ -29,7 +29,7 @@ define( require => { function AreaBuilderGameScreen( tandem ) { - var options = { + const options = { name: gameString, backgroundColorProperty: new Property( AreaBuilderSharedConstants.BACKGROUND_COLOR ), homeScreenIcon: new Image( gameIcon ), diff --git a/js/game/model/AreaBuilderChallengeFactory.js b/js/game/model/AreaBuilderChallengeFactory.js index 4ab0cfa..c46037b 100644 --- a/js/game/model/AreaBuilderChallengeFactory.js +++ b/js/game/model/AreaBuilderChallengeFactory.js @@ -22,56 +22,56 @@ define( require => { const Vector2 = require( 'DOT/Vector2' ); // constants - var UNIT_SQUARE_LENGTH = AreaBuilderSharedConstants.UNIT_SQUARE_LENGTH; // In screen coords + const UNIT_SQUARE_LENGTH = AreaBuilderSharedConstants.UNIT_SQUARE_LENGTH; // In screen coords function AreaBuilderChallengeFactory() { - var random = phet.joist.random; + const random = phet.joist.random; // Basic shapes used in the 'creator kits'. - var UNIT_SQUARE_SHAPE = new Shape() + const UNIT_SQUARE_SHAPE = new Shape() .moveTo( 0, 0 ) .lineTo( UNIT_SQUARE_LENGTH, 0 ) .lineTo( UNIT_SQUARE_LENGTH, UNIT_SQUARE_LENGTH ) .lineTo( 0, UNIT_SQUARE_LENGTH ) .close(); - var HORIZONTAL_DOUBLE_SQUARE_SHAPE = new Shape() + const HORIZONTAL_DOUBLE_SQUARE_SHAPE = new Shape() .moveTo( 0, 0 ) .lineTo( UNIT_SQUARE_LENGTH * 2, 0 ) .lineTo( UNIT_SQUARE_LENGTH * 2, UNIT_SQUARE_LENGTH ) .lineTo( 0, UNIT_SQUARE_LENGTH ) .close(); - var VERTICAL_DOUBLE_SQUARE_SHAPE = new Shape() + const VERTICAL_DOUBLE_SQUARE_SHAPE = new Shape() .moveTo( 0, 0 ) .lineTo( UNIT_SQUARE_LENGTH, 0 ) .lineTo( UNIT_SQUARE_LENGTH, UNIT_SQUARE_LENGTH * 2 ) .lineTo( 0, UNIT_SQUARE_LENGTH * 2 ) .close(); - var QUAD_SQUARE_SHAPE = new Shape() + const QUAD_SQUARE_SHAPE = new Shape() .moveTo( 0, 0 ) .lineTo( UNIT_SQUARE_LENGTH * 2, 0 ) .lineTo( UNIT_SQUARE_LENGTH * 2, UNIT_SQUARE_LENGTH * 2 ) .lineTo( 0, UNIT_SQUARE_LENGTH * 2 ) .close(); - var RIGHT_BOTTOM_TRIANGLE_SHAPE = new Shape() + const RIGHT_BOTTOM_TRIANGLE_SHAPE = new Shape() .moveTo( UNIT_SQUARE_LENGTH, 0 ) .lineTo( UNIT_SQUARE_LENGTH, UNIT_SQUARE_LENGTH ) .lineTo( 0, UNIT_SQUARE_LENGTH ) .lineTo( UNIT_SQUARE_LENGTH, 0 ) .close(); - var LEFT_BOTTOM_TRIANGLE_SHAPE = new Shape() + const LEFT_BOTTOM_TRIANGLE_SHAPE = new Shape() .moveTo( 0, 0 ) .lineTo( UNIT_SQUARE_LENGTH, UNIT_SQUARE_LENGTH ) .lineTo( 0, UNIT_SQUARE_LENGTH ) .lineTo( 0, 0 ) .close(); - var RIGHT_TOP_TRIANGLE_SHAPE = new Shape() + const RIGHT_TOP_TRIANGLE_SHAPE = new Shape() .moveTo( 0, 0 ) .lineTo( UNIT_SQUARE_LENGTH, 0 ) .lineTo( UNIT_SQUARE_LENGTH, UNIT_SQUARE_LENGTH ) .lineTo( 0, 0 ) .close(); - var LEFT_TOP_TRIANGLE_SHAPE = new Shape() + const LEFT_TOP_TRIANGLE_SHAPE = new Shape() .moveTo( 0, 0 ) .lineTo( UNIT_SQUARE_LENGTH, 0 ) .lineTo( 0, UNIT_SQUARE_LENGTH ) @@ -79,7 +79,7 @@ define( require => { .close(); // Shape kit with a set of basic shapes and a default color. - var BASIC_RECTANGLES_SHAPE_KIT = [ + const BASIC_RECTANGLES_SHAPE_KIT = [ { shape: UNIT_SQUARE_SHAPE, color: AreaBuilderSharedConstants.GREENISH_COLOR @@ -98,7 +98,7 @@ define( require => { } ]; - var RECTANGLES_AND_TRIANGLES_SHAPE_KIT = [ + const RECTANGLES_AND_TRIANGLES_SHAPE_KIT = [ { shape: HORIZONTAL_DOUBLE_SQUARE_SHAPE, color: AreaBuilderSharedConstants.GREENISH_COLOR @@ -130,7 +130,7 @@ define( require => { ]; // Color chooser for selecting randomized colors for 'find the area' challenges. - var FIND_THE_AREA_COLOR_CHOOSER = { + const FIND_THE_AREA_COLOR_CHOOSER = { colorList: random.shuffle( [ new Color( AreaBuilderSharedConstants.PALE_BLUE_COLOR ), new Color( AreaBuilderSharedConstants.PINKISH_COLOR ), @@ -143,7 +143,7 @@ define( require => { if ( this.index >= this.colorList.length ) { // Time to shuffle the color list. Make sure that when we do, the color that was at the end of the previous // list isn't at the beginning of this one, or we'll get two of the same colors in a row. - var lastColor = this.colorList[ this.colorList.length - 1 ]; + const lastColor = this.colorList[ this.colorList.length - 1 ]; do { this.colorList = random.shuffle( this.colorList ); } while ( this.colorList[ 0 ] === lastColor ); @@ -156,7 +156,7 @@ define( require => { }; // Color chooser for selecting randomized colors for 'build it' style challenges. - var BUILD_IT_COLOR_CHOOSER = { + const BUILD_IT_COLOR_CHOOSER = { colorList: random.shuffle( [ new Color( AreaBuilderSharedConstants.GREENISH_COLOR ), new Color( AreaBuilderSharedConstants.PINKISH_COLOR ), @@ -168,7 +168,7 @@ define( require => { if ( this.index >= this.colorList.length ) { // Time to shuffle the color list. Make sure that when we do, the color that was at the end of the previous // list isn't at the beginning of this one, or we'll get two of the same colors in a row. - var lastColor = this.colorList[ this.colorList.length - 1 ]; + const lastColor = this.colorList[ this.colorList.length - 1 ]; do { this.colorList = random.shuffle( this.colorList ); } while ( this.colorList[ 0 ] === lastColor ); @@ -181,7 +181,7 @@ define( require => { }; // Color pair chooser, used for selecting randomized colors for two tone 'build it' challenges. - var COLOR_PAIR_CHOOSER = { + const COLOR_PAIR_CHOOSER = { colorPairList: random.shuffle( [ { color1: AreaBuilderSharedConstants.GREENISH_COLOR, @@ -204,7 +204,7 @@ define( require => { nextColorPair: function() { if ( this.index >= this.colorPairList.length ) { // Time to shuffle the list. - var lastColorPair = this.colorPairList[ this.colorPairList.length - 1 ]; + const lastColorPair = this.colorPairList[ this.colorPairList.length - 1 ]; do { this.colorPairList = random.shuffle( this.colorPairList ); } while ( this.colorPairList[ 0 ] === lastColorPair ); @@ -225,9 +225,9 @@ define( require => { // Create a solution spec (a.k.a. an example solution) that represents a rectangle with the specified origin and size. function createMonochromeRectangularSolutionSpec( x, y, width, height, color ) { - var solutionSpec = []; - for ( var column = 0; column < width; column++ ) { - for ( var row = 0; row < height; row++ ) { + const solutionSpec = []; + for ( let column = 0; column < width; column++ ) { + for ( let row = 0; row < height; row++ ) { solutionSpec.push( { cellColumn: column + x, cellRow: row + y, @@ -240,9 +240,9 @@ define( require => { // Create a solution spec (a.k.a. an example solution) for a two-tone challenge function createTwoColorRectangularSolutionSpec( x, y, width, height, color1, color2, color1proportion ) { - var solutionSpec = []; - for ( var row = 0; row < height; row++ ) { - for ( var column = 0; column < width; column++ ) { + const solutionSpec = []; + for ( let row = 0; row < height; row++ ) { + for ( let column = 0; column < width; column++ ) { solutionSpec.push( { cellColumn: column + x, cellRow: row + y, @@ -255,7 +255,7 @@ define( require => { // Function for creating a 'shape kit' of the basic shapes of the specified color. function createBasicRectanglesShapeKit( color ) { - var kit = []; + const kit = []; BASIC_RECTANGLES_SHAPE_KIT.forEach( function( kitElement ) { kit.push( { shape: kitElement.shape, color: color } ); } ); @@ -263,14 +263,14 @@ define( require => { } function createTwoToneRectangleBuildKit( color1, color2 ) { - var kit = []; + const kit = []; BASIC_RECTANGLES_SHAPE_KIT.forEach( function( kitElement ) { - var color1Element = { + const color1Element = { shape: kitElement.shape, color: color1 }; kit.push( color1Element ); - var color2Element = { + const color2Element = { shape: kitElement.shape, color: color2 }; @@ -280,9 +280,9 @@ define( require => { } function flipPerimeterPointsHorizontally( perimeterPointList ) { - var reflectedPoints = []; - var minX = Number.POSITIVE_INFINITY; - var maxX = Number.NEGATIVE_INFINITY; + const reflectedPoints = []; + let minX = Number.POSITIVE_INFINITY; + let maxX = Number.NEGATIVE_INFINITY; perimeterPointList.forEach( function( point ) { minX = Math.min( point.x, minX ); maxX = Math.max( point.x, maxX ); @@ -294,9 +294,9 @@ define( require => { } function flipPerimeterPointsVertically( perimeterPointList ) { - var reflectedPoints = []; - var minY = Number.POSITIVE_INFINITY; - var maxY = Number.NEGATIVE_INFINITY; + const reflectedPoints = []; + let minY = Number.POSITIVE_INFINITY; + let maxY = Number.NEGATIVE_INFINITY; perimeterPointList.forEach( function( point ) { minY = Math.min( point.y, minY ); maxY = Math.max( point.y, maxY ); @@ -336,7 +336,7 @@ define( require => { function createLShapedPerimeterShape( x, y, width, height, missingCorner, widthMissing, heightMissing, fillColor ) { assert && assert( width > widthMissing && height > heightMissing, 'Invalid parameters' ); - var perimeterPoints = [ + let perimeterPoints = [ new Vector2( x + widthMissing, y ), new Vector2( x + width, y ), new Vector2( x + width, y + height ), @@ -361,7 +361,7 @@ define( require => { // Create a perimeter shape with a cutout in the top, bottom, left, or right side. function createUShapedPerimeterShape( x, y, width, height, sideWithCutout, cutoutWidth, cutoutHeight, cutoutOffset, fillColor ) { - var perimeterPoints = [ new Vector2( 0, 0 ), new Vector2( 0, 0 ), new Vector2( 0, 0 ), new Vector2( 0, 0 ), new Vector2( 0, 0 ), new Vector2( 0, 0 ), new Vector2( 0, 0 ), new Vector2( 0, 0 ) ]; + let perimeterPoints = [ new Vector2( 0, 0 ), new Vector2( 0, 0 ), new Vector2( 0, 0 ), new Vector2( 0, 0 ), new Vector2( 0, 0 ), new Vector2( 0, 0 ), new Vector2( 0, 0 ), new Vector2( 0, 0 ) ]; if ( sideWithCutout === 'left' || sideWithCutout === 'right' ) { perimeterPoints[ 0 ].setXY( x, y ); @@ -397,13 +397,13 @@ define( require => { } function createPerimeterShapeWithHole( x, y, width, height, holeWidth, holeHeight, holeXOffset, holeYOffset, fillColor ) { - var exteriorPerimeterPoints = [ + const exteriorPerimeterPoints = [ new Vector2( x, y ), new Vector2( x + width, y ), new Vector2( x + width, y + height ), new Vector2( x, y + height ) ]; - var interiorPerimeterPoints = [ + const interiorPerimeterPoints = [ // Have to draw hole in opposite direction for it to appear. new Vector2( x + holeXOffset, y + holeYOffset ), new Vector2( x + holeXOffset, y + holeYOffset + holeHeight ), @@ -418,7 +418,7 @@ define( require => { } function createPerimeterShapeSlantedHypotenuseRightIsoscelesTriangle( x, y, edgeLength, cornerPosition, fillColor ) { - var perimeterPoints = [ new Vector2( x, y ), new Vector2( x + edgeLength, y ), new Vector2( x, y + edgeLength ) ]; + let perimeterPoints = [ new Vector2( x, y ), new Vector2( x + edgeLength, y ), new Vector2( x, y + edgeLength ) ]; if ( cornerPosition === 'rightTop' || cornerPosition === 'rightBottom' ) { perimeterPoints = flipPerimeterPointsHorizontally( perimeterPoints ); } @@ -433,7 +433,7 @@ define( require => { } function createPerimeterShapeLevelHypotenuseRightIsoscelesTriangle( x, y, hypotenuseLength, cornerPosition, fillColor ) { - var perimeterPoints; + let perimeterPoints; if ( cornerPosition === 'centerTop' || cornerPosition === 'centerBottom' ) { perimeterPoints = [ new Vector2( x, y ), new Vector2( x + hypotenuseLength, y ), new Vector2( x + hypotenuseLength / 2, y + hypotenuseLength / 2 ) ]; @@ -466,7 +466,7 @@ define( require => { function createShapeWithDiagonalAndMissingCorner( x, y, width, height, diagonalPosition, diagonalSquareLength, cutWidth, cutHeight, fillColor ) { assert && assert( width - diagonalSquareLength >= cutWidth && height - diagonalSquareLength >= cutHeight, 'Invalid parameters' ); - var perimeterPoints = []; + let perimeterPoints = []; // Draw shape with diagonal in lower right corner, starting in upper right corner. perimeterPoints.push( new Vector2( x + width, y ) ); perimeterPoints.push( new Vector2( x + width, y + height - diagonalSquareLength ) ); @@ -521,8 +521,8 @@ define( require => { // Test the challenge against the history of recently generated challenges to see if it is unique. function isChallengeUnique( challenge ) { - var challengeIsUnique = true; - for ( var i = 0; i < challengeHistory.length; i++ ) { + let challengeIsUnique = true; + for ( let i = 0; i < challengeHistory.length; i++ ) { if ( isChallengeSimilar( challenge, challengeHistory[ i ] ) ) { challengeIsUnique = false; break; @@ -534,14 +534,14 @@ define( require => { function generateBuildAreaChallenge() { // Create a unique challenge - var challenge; - var width = random.nextIntBetween( 2, AreaBuilderGameModel.SHAPE_BOARD_UNIT_WIDTH - 2 ); - var height = 0; + let challenge; + const width = random.nextIntBetween( 2, AreaBuilderGameModel.SHAPE_BOARD_UNIT_WIDTH - 2 ); + let height = 0; while ( width * height < 8 || width * height > 36 ) { height = random.nextIntBetween( 0, AreaBuilderGameModel.SHAPE_BOARD_UNIT_HEIGHT - 2 ); } - var color = BUILD_IT_COLOR_CHOOSER.nextColor(); - var exampleSolution = createMonochromeRectangularSolutionSpec( + const color = BUILD_IT_COLOR_CHOOSER.nextColor(); + const exampleSolution = createMonochromeRectangularSolutionSpec( Math.floor( ( AreaBuilderGameModel.SHAPE_BOARD_UNIT_WIDTH - width ) / 2 ), Math.floor( ( AreaBuilderGameModel.SHAPE_BOARD_UNIT_HEIGHT - height ) / 2 ), width, @@ -559,31 +559,31 @@ define( require => { function generateTwoRectangleBuildAreaAndPerimeterChallenge() { // Create first rectangle dimensions - var width1 = random.nextIntBetween( 2, 6 ); - var height1; + const width1 = random.nextIntBetween( 2, 6 ); + let height1; do { height1 = random.nextIntBetween( 1, 4 ); } while ( width1 % 2 === height1 % 2 ); // Create second rectangle dimensions - var width2 = 0; + let width2 = 0; do { width2 = random.nextIntBetween( 1, 6 ); } while ( width1 + width2 > AreaBuilderGameModel.SHAPE_BOARD_UNIT_WIDTH - 2 ); - var height2; + let height2; do { height2 = random.nextIntBetween( 1, 6 ); } while ( width2 % 2 === height2 % 2 || height1 + height2 > AreaBuilderGameModel.SHAPE_BOARD_UNIT_HEIGHT - 2 ); // Choose the amount of overlap - var overlap = random.nextIntBetween( 1, Math.min( width1, width2 ) - 1 ); + const overlap = random.nextIntBetween( 1, Math.min( width1, width2 ) - 1 ); - var left = Math.floor( ( AreaBuilderGameModel.SHAPE_BOARD_UNIT_WIDTH - ( width1 + width2 - overlap ) ) / 2 ); - var top = Math.floor( ( AreaBuilderGameModel.SHAPE_BOARD_UNIT_HEIGHT - ( height1 + height2 ) ) / 2 ); + const left = Math.floor( ( AreaBuilderGameModel.SHAPE_BOARD_UNIT_WIDTH - ( width1 + width2 - overlap ) ) / 2 ); + const top = Math.floor( ( AreaBuilderGameModel.SHAPE_BOARD_UNIT_HEIGHT - ( height1 + height2 ) ) / 2 ); // Create a solution spec by merging specs for each of the rectangles together. - var color = BUILD_IT_COLOR_CHOOSER.nextColor(); - var solutionSpec = createMonochromeRectangularSolutionSpec( left, top, width1, height1, color ).concat( + const color = BUILD_IT_COLOR_CHOOSER.nextColor(); + const solutionSpec = createMonochromeRectangularSolutionSpec( left, top, width1, height1, color ).concat( createMonochromeRectangularSolutionSpec( left + width1 - overlap, top + height1, width2, height2, color ) ); return ( AreaBuilderGameChallenge.createBuildAreaAndPerimeterChallenge( width1 * height1 + width2 * height2, @@ -592,8 +592,8 @@ define( require => { function generateBuildAreaAndPerimeterChallenge() { - var width; - var height; + let width; + let height; // Width can be any value from 3 to 8 excluding 7, see design doc. do { @@ -605,9 +605,9 @@ define( require => { height = random.nextIntBetween( 3, 8 ); } while ( width * height < 12 || width * height > 36 || height === 7 || height > AreaBuilderGameModel.SHAPE_BOARD_UNIT_HEIGHT - 2 ); - var color = BUILD_IT_COLOR_CHOOSER.nextColor(); + const color = BUILD_IT_COLOR_CHOOSER.nextColor(); - var exampleSolution = createMonochromeRectangularSolutionSpec( + const exampleSolution = createMonochromeRectangularSolutionSpec( Math.floor( ( AreaBuilderGameModel.SHAPE_BOARD_UNIT_WIDTH - width ) / 2 ), Math.floor( ( AreaBuilderGameModel.SHAPE_BOARD_UNIT_HEIGHT - height ) / 2 ), width, @@ -619,45 +619,45 @@ define( require => { } function generateRectangularFindAreaChallenge() { - var width; - var height; + let width; + let height; do { width = random.nextIntBetween( 2, AreaBuilderGameModel.SHAPE_BOARD_UNIT_WIDTH - 4 ); height = random.nextIntBetween( 2, AreaBuilderGameModel.SHAPE_BOARD_UNIT_HEIGHT - 4 ); } while ( width * height < 16 || width * height > 36 ); - var perimeterShape = createRectangularPerimeterShape( 0, 0, width * UNIT_SQUARE_LENGTH, height * UNIT_SQUARE_LENGTH, + const perimeterShape = createRectangularPerimeterShape( 0, 0, width * UNIT_SQUARE_LENGTH, height * UNIT_SQUARE_LENGTH, FIND_THE_AREA_COLOR_CHOOSER.nextColor() ); return AreaBuilderGameChallenge.createFindAreaChallenge( perimeterShape, BASIC_RECTANGLES_SHAPE_KIT ); } function generateLShapedFindAreaChallenge() { - var width; - var height; + let width; + let height; do { width = random.nextIntBetween( 2, AreaBuilderGameModel.SHAPE_BOARD_UNIT_WIDTH - 4 ); height = random.nextIntBetween( 2, AreaBuilderGameModel.SHAPE_BOARD_UNIT_HEIGHT - 4 ); } while ( width * height < 16 || width * height > 36 ); - var missingWidth = random.nextIntBetween( 1, width - 1 ); - var missingHeight = random.nextIntBetween( 1, height - 1 ); - var missingCorner = randomElement( [ 'leftTop', 'rightTop', 'leftBottom', 'rightBottom' ] ); - var perimeterShape = createLShapedPerimeterShape( 0, 0, width * UNIT_SQUARE_LENGTH, height * UNIT_SQUARE_LENGTH, + const missingWidth = random.nextIntBetween( 1, width - 1 ); + const missingHeight = random.nextIntBetween( 1, height - 1 ); + const missingCorner = randomElement( [ 'leftTop', 'rightTop', 'leftBottom', 'rightBottom' ] ); + const perimeterShape = createLShapedPerimeterShape( 0, 0, width * UNIT_SQUARE_LENGTH, height * UNIT_SQUARE_LENGTH, missingCorner, missingWidth * UNIT_SQUARE_LENGTH, missingHeight * UNIT_SQUARE_LENGTH, FIND_THE_AREA_COLOR_CHOOSER.nextColor() ); return AreaBuilderGameChallenge.createFindAreaChallenge( perimeterShape, BASIC_RECTANGLES_SHAPE_KIT ); } function generateUShapedFindAreaChallenge() { - var width; - var height; + let width; + let height; do { width = random.nextIntBetween( 4, AreaBuilderGameModel.SHAPE_BOARD_UNIT_WIDTH - 4 ); height = random.nextIntBetween( 4, AreaBuilderGameModel.SHAPE_BOARD_UNIT_HEIGHT - 2 ); } while ( width * height < 16 || width * height > 36 ); - var sideWithCutout = randomElement( [ 'left', 'right', 'top', 'bottom' ] ); - var cutoutWidth; - var cutoutHeight; - var cutoutOffset; + const sideWithCutout = randomElement( [ 'left', 'right', 'top', 'bottom' ] ); + let cutoutWidth; + let cutoutHeight; + let cutoutOffset; if ( sideWithCutout === 'left' || sideWithCutout === 'right' ) { cutoutWidth = random.nextIntBetween( 2, width - 1 ); cutoutHeight = random.nextIntBetween( 1, height - 2 ); @@ -668,7 +668,7 @@ define( require => { cutoutHeight = random.nextIntBetween( 2, height - 1 ); cutoutOffset = random.nextIntBetween( 1, width - cutoutWidth - 1 ); } - var perimeterShape = createUShapedPerimeterShape( 0, 0, width * UNIT_SQUARE_LENGTH, height * UNIT_SQUARE_LENGTH, + const perimeterShape = createUShapedPerimeterShape( 0, 0, width * UNIT_SQUARE_LENGTH, height * UNIT_SQUARE_LENGTH, sideWithCutout, cutoutWidth * UNIT_SQUARE_LENGTH, cutoutHeight * UNIT_SQUARE_LENGTH, cutoutOffset * UNIT_SQUARE_LENGTH, FIND_THE_AREA_COLOR_CHOOSER.nextColor() ); @@ -676,17 +676,17 @@ define( require => { } function generateOShapedFindAreaChallenge() { - var width; - var height; + let width; + let height; do { width = random.nextIntBetween( 3, AreaBuilderGameModel.SHAPE_BOARD_UNIT_WIDTH - 4 ); height = random.nextIntBetween( 3, AreaBuilderGameModel.SHAPE_BOARD_UNIT_HEIGHT - 2 ); } while ( width * height < 16 || width * height > 36 ); - var holeWidth = random.nextIntBetween( 1, width - 2 ); - var holeHeight = random.nextIntBetween( 1, height - 2 ); - var holeXOffset = random.nextIntBetween( 1, width - holeWidth - 1 ); - var holeYOffset = random.nextIntBetween( 1, height - holeHeight - 1 ); - var perimeterShape = createPerimeterShapeWithHole( 0, 0, width * UNIT_SQUARE_LENGTH, height * UNIT_SQUARE_LENGTH, + const holeWidth = random.nextIntBetween( 1, width - 2 ); + const holeHeight = random.nextIntBetween( 1, height - 2 ); + const holeXOffset = random.nextIntBetween( 1, width - holeWidth - 1 ); + const holeYOffset = random.nextIntBetween( 1, height - holeHeight - 1 ); + const perimeterShape = createPerimeterShapeWithHole( 0, 0, width * UNIT_SQUARE_LENGTH, height * UNIT_SQUARE_LENGTH, holeWidth * UNIT_SQUARE_LENGTH, holeHeight * UNIT_SQUARE_LENGTH, holeXOffset * UNIT_SQUARE_LENGTH, holeYOffset * UNIT_SQUARE_LENGTH, FIND_THE_AREA_COLOR_CHOOSER.nextColor() ); @@ -694,21 +694,21 @@ define( require => { } function generateIsoscelesRightTriangleSlantedHypotenuseFindAreaChallenge() { - var cornerPosition = randomElement( [ 'leftTop', 'rightTop', 'rightBottom', 'leftBottom' ] ); - var edgeLength = 0; + const cornerPosition = randomElement( [ 'leftTop', 'rightTop', 'rightBottom', 'leftBottom' ] ); + let edgeLength = 0; do { edgeLength = random.nextIntBetween( 4, Math.min( AreaBuilderGameModel.SHAPE_BOARD_UNIT_WIDTH - 2, AreaBuilderGameModel.SHAPE_BOARD_UNIT_HEIGHT - 2 ) ); } while ( edgeLength % 2 !== 0 ); - var perimeterShape = createPerimeterShapeSlantedHypotenuseRightIsoscelesTriangle( 0, 0, + const perimeterShape = createPerimeterShapeSlantedHypotenuseRightIsoscelesTriangle( 0, 0, edgeLength * UNIT_SQUARE_LENGTH, cornerPosition, FIND_THE_AREA_COLOR_CHOOSER.nextColor() ); return AreaBuilderGameChallenge.createFindAreaChallenge( perimeterShape, RECTANGLES_AND_TRIANGLES_SHAPE_KIT ); } function generateIsoscelesRightTriangleLevelHypotenuseFindAreaChallenge() { - var cornerPosition = randomElement( [ 'centerTop', 'rightCenter', 'centerBottom', 'leftCenter' ] ); - var hypotenuseLength = 0; - var maxHypotenuse; + const cornerPosition = randomElement( [ 'centerTop', 'rightCenter', 'centerBottom', 'leftCenter' ] ); + let hypotenuseLength = 0; + let maxHypotenuse; if ( cornerPosition === 'centerTop' || cornerPosition === 'centerBottom' ) { maxHypotenuse = AreaBuilderGameModel.SHAPE_BOARD_UNIT_WIDTH - 4; } @@ -718,18 +718,18 @@ define( require => { do { hypotenuseLength = random.nextIntBetween( 2, maxHypotenuse ); } while ( hypotenuseLength % 2 !== 0 ); - var perimeterShape = createPerimeterShapeLevelHypotenuseRightIsoscelesTriangle( 0, 0, + const perimeterShape = createPerimeterShapeLevelHypotenuseRightIsoscelesTriangle( 0, 0, hypotenuseLength * UNIT_SQUARE_LENGTH, cornerPosition, FIND_THE_AREA_COLOR_CHOOSER.nextColor() ); return AreaBuilderGameChallenge.createFindAreaChallenge( perimeterShape, RECTANGLES_AND_TRIANGLES_SHAPE_KIT ); } function generateLargeRectWithChipMissingChallenge() { - var width = random.nextIntBetween( AreaBuilderGameModel.SHAPE_BOARD_UNIT_WIDTH - 4, AreaBuilderGameModel.SHAPE_BOARD_UNIT_WIDTH - 2 ); - var height = random.nextIntBetween( AreaBuilderGameModel.SHAPE_BOARD_UNIT_HEIGHT - 3, AreaBuilderGameModel.SHAPE_BOARD_UNIT_HEIGHT - 2 ); - var sideWithCutout = randomElement( [ 'left', 'right', 'top', 'bottom' ] ); - var cutoutWidth; - var cutoutHeight; - var cutoutOffset; + const width = random.nextIntBetween( AreaBuilderGameModel.SHAPE_BOARD_UNIT_WIDTH - 4, AreaBuilderGameModel.SHAPE_BOARD_UNIT_WIDTH - 2 ); + const height = random.nextIntBetween( AreaBuilderGameModel.SHAPE_BOARD_UNIT_HEIGHT - 3, AreaBuilderGameModel.SHAPE_BOARD_UNIT_HEIGHT - 2 ); + const sideWithCutout = randomElement( [ 'left', 'right', 'top', 'bottom' ] ); + let cutoutWidth; + let cutoutHeight; + let cutoutOffset; if ( sideWithCutout === 'left' || sideWithCutout === 'right' ) { cutoutWidth = 1; cutoutHeight = random.nextIntBetween( 1, 3 ); @@ -740,7 +740,7 @@ define( require => { cutoutHeight = 1; cutoutOffset = random.nextIntBetween( 1, width - cutoutWidth - 1 ); } - var perimeterShape = createUShapedPerimeterShape( 0, 0, width * UNIT_SQUARE_LENGTH, height * UNIT_SQUARE_LENGTH, + const perimeterShape = createUShapedPerimeterShape( 0, 0, width * UNIT_SQUARE_LENGTH, height * UNIT_SQUARE_LENGTH, sideWithCutout, cutoutWidth * UNIT_SQUARE_LENGTH, cutoutHeight * UNIT_SQUARE_LENGTH, cutoutOffset * UNIT_SQUARE_LENGTH, FIND_THE_AREA_COLOR_CHOOSER.nextColor() ); @@ -748,10 +748,10 @@ define( require => { } function generateLargeRectWithSmallHoleMissingChallenge() { - var width = random.nextIntBetween( AreaBuilderGameModel.SHAPE_BOARD_UNIT_WIDTH - 4, AreaBuilderGameModel.SHAPE_BOARD_UNIT_WIDTH - 2 ); - var height = random.nextIntBetween( AreaBuilderGameModel.SHAPE_BOARD_UNIT_HEIGHT - 3, AreaBuilderGameModel.SHAPE_BOARD_UNIT_HEIGHT - 2 ); - var holeWidth; - var holeHeight; + const width = random.nextIntBetween( AreaBuilderGameModel.SHAPE_BOARD_UNIT_WIDTH - 4, AreaBuilderGameModel.SHAPE_BOARD_UNIT_WIDTH - 2 ); + const height = random.nextIntBetween( AreaBuilderGameModel.SHAPE_BOARD_UNIT_HEIGHT - 3, AreaBuilderGameModel.SHAPE_BOARD_UNIT_HEIGHT - 2 ); + let holeWidth; + let holeHeight; if ( random.nextDouble() < 0.5 ) { holeWidth = random.nextIntBetween( 1, 3 ); holeHeight = 1; @@ -760,9 +760,9 @@ define( require => { holeHeight = random.nextIntBetween( 1, 3 ); holeWidth = 1; } - var holeXOffset = random.nextIntBetween( 1, width - holeWidth - 1 ); - var holeYOffset = random.nextIntBetween( 1, height - holeHeight - 1 ); - var perimeterShape = createPerimeterShapeWithHole( 0, 0, width * UNIT_SQUARE_LENGTH, height * UNIT_SQUARE_LENGTH, + const holeXOffset = random.nextIntBetween( 1, width - holeWidth - 1 ); + const holeYOffset = random.nextIntBetween( 1, height - holeHeight - 1 ); + const perimeterShape = createPerimeterShapeWithHole( 0, 0, width * UNIT_SQUARE_LENGTH, height * UNIT_SQUARE_LENGTH, holeWidth * UNIT_SQUARE_LENGTH, holeHeight * UNIT_SQUARE_LENGTH, holeXOffset * UNIT_SQUARE_LENGTH, holeYOffset * UNIT_SQUARE_LENGTH, FIND_THE_AREA_COLOR_CHOOSER.nextColor() ); @@ -774,17 +774,17 @@ define( require => { } function generateShapeWithDiagonalFindAreaChallenge() { - var width = random.nextIntBetween( 3, AreaBuilderGameModel.SHAPE_BOARD_UNIT_WIDTH - 4 ); - var height = random.nextIntBetween( 3, AreaBuilderGameModel.SHAPE_BOARD_UNIT_HEIGHT - 4 ); - var diagonalPosition = randomElement( [ 'leftTop', 'rightTop', 'leftBottom', 'rightBottom' ] ); - var diagonalSquareLength = 2; + const width = random.nextIntBetween( 3, AreaBuilderGameModel.SHAPE_BOARD_UNIT_WIDTH - 4 ); + const height = random.nextIntBetween( 3, AreaBuilderGameModel.SHAPE_BOARD_UNIT_HEIGHT - 4 ); + const diagonalPosition = randomElement( [ 'leftTop', 'rightTop', 'leftBottom', 'rightBottom' ] ); + let diagonalSquareLength = 2; if ( height > 4 && width > 4 && random.nextDouble() > 0.5 ) { diagonalSquareLength = 4; } - var cutWidth = random.nextIntBetween( 1, width - diagonalSquareLength ); - var cutHeight = random.nextIntBetween( 1, height - diagonalSquareLength ); + const cutWidth = random.nextIntBetween( 1, width - diagonalSquareLength ); + const cutHeight = random.nextIntBetween( 1, height - diagonalSquareLength ); - var perimeterShape = createShapeWithDiagonalAndMissingCorner( 0, 0, width * UNIT_SQUARE_LENGTH, + const perimeterShape = createShapeWithDiagonalAndMissingCorner( 0, 0, width * UNIT_SQUARE_LENGTH, height * UNIT_SQUARE_LENGTH, diagonalPosition, diagonalSquareLength * UNIT_SQUARE_LENGTH, cutWidth * UNIT_SQUARE_LENGTH, cutHeight * UNIT_SQUARE_LENGTH, FIND_THE_AREA_COLOR_CHOOSER.nextColor() ); @@ -801,11 +801,11 @@ define( require => { function generateProportionalBuildAreaChallenge( difficulty, includePerimeter ) { assert && assert( difficulty === 'easy' || difficulty === 'harder' ); - var width; - var height; + let width; + let height; // Randomly generate width, height, and the possible factors from which a proportional challenge can be created. - var factors = []; + const factors = []; do { height = random.nextIntBetween( 3, 6 ); if ( height === 3 ) { @@ -815,11 +815,11 @@ define( require => { width = random.nextIntBetween( 2, 10 ); } - var minFactor = difficulty === 'easy' ? 2 : 5; - var maxFactor = difficulty === 'easy' ? 4 : 9; + const minFactor = difficulty === 'easy' ? 2 : 5; + const maxFactor = difficulty === 'easy' ? 4 : 9; - var area = width * height; - for ( var i = minFactor; i <= maxFactor; i++ ) { + const area = width * height; + for ( let i = minFactor; i <= maxFactor; i++ ) { if ( area % i === 0 ) { // This is a factor of the area. factors.push( i ); @@ -828,18 +828,18 @@ define( require => { } while ( factors.length === 0 ); // Choose the fractional proportion. - var fractionDenominator = randomElement( factors ); - var color1FractionNumerator; + const fractionDenominator = randomElement( factors ); + let color1FractionNumerator; do { color1FractionNumerator = random.nextIntBetween( 1, fractionDenominator - 1 ); } while ( Util.gcd( color1FractionNumerator, fractionDenominator ) > 1 ); - var color1Fraction = new Fraction( color1FractionNumerator, fractionDenominator ); + const color1Fraction = new Fraction( color1FractionNumerator, fractionDenominator ); // Choose the colors for this challenge - var colorPair = COLOR_PAIR_CHOOSER.nextColorPair(); + const colorPair = COLOR_PAIR_CHOOSER.nextColorPair(); // Create the example solution - var exampleSolution = createTwoColorRectangularSolutionSpec( + const exampleSolution = createTwoColorRectangularSolutionSpec( Math.floor( ( AreaBuilderGameModel.SHAPE_BOARD_UNIT_WIDTH - width ) / 2 ), Math.floor( ( AreaBuilderGameModel.SHAPE_BOARD_UNIT_HEIGHT - height ) / 2 ), width, @@ -849,7 +849,7 @@ define( require => { color1Fraction.getValue() ); - var userShapes = createTwoToneRectangleBuildKit( colorPair.color1, colorPair.color2 ); + const userShapes = createTwoToneRectangleBuildKit( colorPair.color1, colorPair.color2 ); // Build the challenge from all the pieces. if ( includePerimeter ) { @@ -875,9 +875,9 @@ define( require => { // Use the provided generation function to create challenges until a unique one has been created. function generateUniqueChallenge( generationFunction ) { - var challenge; - var uniqueChallengeGenerated = false; - var attempts = 0; + let challenge; + let uniqueChallengeGenerated = false; + let attempts = 0; while ( !uniqueChallengeGenerated ) { challenge = generationFunction(); attempts++; @@ -906,7 +906,7 @@ define( require => { // Limit the number of shapes to the length of the larger side. This encourages certain strategies. assert && assert( challenge.backgroundShape.exteriorPerimeters.length === 1, 'Unexpected configuration for background shape.' ); - var perimeterShape = new PerimeterShape( challenge.backgroundShape.exteriorPerimeters, [], UNIT_SQUARE_LENGTH ); + const perimeterShape = new PerimeterShape( challenge.backgroundShape.exteriorPerimeters, [], UNIT_SQUARE_LENGTH ); challenge.userShapes[ 0 ].creationLimit = Math.max( perimeterShape.getWidth() / UNIT_SQUARE_LENGTH, perimeterShape.getHeight() / UNIT_SQUARE_LENGTH ); return challenge; @@ -921,8 +921,8 @@ define( require => { * @returns {Array} */ this.generateChallengeSet = function( level, numChallenges ) { - var challengeSet = []; - var tempChallenge; + let challengeSet = []; + let tempChallenge; switch( level ) { case 0: _.times( 3, function() { challengeSet.push( generateUniqueChallenge( generateBuildAreaChallenge ) ); } ); diff --git a/js/game/model/AreaBuilderGameModel.js b/js/game/model/AreaBuilderGameModel.js index bcae072..3274479 100644 --- a/js/game/model/AreaBuilderGameModel.js +++ b/js/game/model/AreaBuilderGameModel.js @@ -27,9 +27,9 @@ define( require => { const Vector2 = require( 'DOT/Vector2' ); // constants - var UNIT_SQUARE_LENGTH = AreaBuilderSharedConstants.UNIT_SQUARE_LENGTH; // In screen coords, which are roughly pixels - var BOARD_SIZE = new Dimension2( UNIT_SQUARE_LENGTH * 12, UNIT_SQUARE_LENGTH * 8 ); - var UNIT_SQUARE_SHAPE = Shape.rect( 0, 0, UNIT_SQUARE_LENGTH, UNIT_SQUARE_LENGTH ); + const UNIT_SQUARE_LENGTH = AreaBuilderSharedConstants.UNIT_SQUARE_LENGTH; // In screen coords, which are roughly pixels + const BOARD_SIZE = new Dimension2( UNIT_SQUARE_LENGTH * 12, UNIT_SQUARE_LENGTH * 8 ); + const UNIT_SQUARE_SHAPE = Shape.rect( 0, 0, UNIT_SQUARE_LENGTH, UNIT_SQUARE_LENGTH ); /** * @constructor @@ -66,14 +66,14 @@ define( require => { // @private - replace a composite shape with unit squares replaceShapeWithUnitSquares: function( movableShape ) { - var self = this; + const self = this; assert && assert( movableShape.shape.bounds.width > UNIT_SQUARE_LENGTH || movableShape.shape.bounds.height > UNIT_SQUARE_LENGTH, 'This method should not be called for non-composite shapes' ); // break the shape into the constituent squares - var constituentShapes = movableShape.decomposeIntoSquares( UNIT_SQUARE_LENGTH ); + const constituentShapes = movableShape.decomposeIntoSquares( UNIT_SQUARE_LENGTH ); // add the newly created squares to this model constituentShapes.forEach( function( shape ) { self.addUserCreatedMovableShape( shape ); } ); @@ -92,7 +92,7 @@ define( require => { * @param movableShape */ addUserCreatedMovableShape: function( movableShape ) { - var self = this; + const self = this; this.movableShapes.push( movableShape ); movableShape.userControlledProperty.lazyLink( function( userControlled ) { @@ -158,8 +158,8 @@ define( require => { * @private */ addUnitSquareDirectlyToBoard: function( cellColumn, cellRow, color ) { - var self = this; - var shape = new MovableShape( UNIT_SQUARE_SHAPE, color, this.solutionShapeOrigin ); + const self = this; + const shape = new MovableShape( UNIT_SQUARE_SHAPE, color, this.solutionShapeOrigin ); this.movableShapes.push( shape ); // Remove this shape when it gets returned to its original location. @@ -186,7 +186,7 @@ define( require => { // @public displayCorrectAnswer: function( challenge ) { - var self = this; + const self = this; if ( challenge.buildSpec ) { // clear whatever the user had added @@ -210,8 +210,8 @@ define( require => { // @public checkAnswer: function( challenge ) { - var answerIsCorrect = false; - var userBuiltSpec; + let answerIsCorrect = false; + let userBuiltSpec; switch( challenge.checkSpec ) { case 'areaEntered': @@ -297,9 +297,9 @@ define( require => { if ( challenge.buildSpec && this.shapePlacementBoard.formCompositeProperty.get() && challenge.userShapes ) { // Make the perimeter color be a darker version of the first user shape. - var perimeterColor = Color.toColor( challenge.userShapes[ 0 ].color ).colorUtilsDarker( AreaBuilderSharedConstants.PERIMETER_DARKEN_FACTOR ); + const perimeterColor = Color.toColor( challenge.userShapes[ 0 ].color ).colorUtilsDarker( AreaBuilderSharedConstants.PERIMETER_DARKEN_FACTOR ); - var fillColor; + let fillColor; if ( challenge.buildSpec.proportions ) { // The composite shape needs to be see through so that the original shapes can be seen. This allows // multiple colors to be depicted, but generally doesn't look quite as good. diff --git a/js/game/model/GameState.js b/js/game/model/GameState.js index 7d88115..6a0cc37 100644 --- a/js/game/model/GameState.js +++ b/js/game/model/GameState.js @@ -11,7 +11,7 @@ define( require => { // modules const areaBuilder = require( 'AREA_BUILDER/areaBuilder' ); - var GameState = { + const GameState = { CHOOSING_LEVEL: 'choosingLevel', PRESENTING_INTERACTIVE_CHALLENGE: 'presentingInteractiveChallenge', SHOWING_CORRECT_ANSWER_FEEDBACK: 'showingCorrectAnswerFeedback', diff --git a/js/game/model/QuizGameModel.js b/js/game/model/QuizGameModel.js index 7edaa22..a9685c5 100644 --- a/js/game/model/QuizGameModel.js +++ b/js/game/model/QuizGameModel.js @@ -29,7 +29,7 @@ define( require => { * @constructor */ function QuizGameModel( challengeFactory, simSpecificModel, options ) { - var self = this; + const self = this; this.challengeFactory = challengeFactory; // @private this.simSpecificModel = simSpecificModel; // @public @@ -97,7 +97,7 @@ define( require => { this.gameStateProperty.reset(); this.bestScoreProperties.forEach( function( bestScoreProperty ) { bestScoreProperty.reset(); } ); this.bestTimes = []; - var self = this; + const self = this; _.times( this.numberOfLevels, function() { self.bestTimes.push( null ); } ); @@ -142,7 +142,7 @@ define( require => { // @private handleProposedAnswer: function( answerIsCorrect ) { - var pointsEarned = 0; + let pointsEarned = 0; if ( answerIsCorrect ) { // The user answered the challenge correctly. this.gameStateProperty.set( GameState.SHOWING_CORRECT_ANSWER_FEEDBACK ); @@ -177,7 +177,7 @@ define( require => { // Move to the next challenge in the current challenge set. nextChallenge: function() { - var currentLevel = this.levelProperty.get(); + const currentLevel = this.levelProperty.get(); this.incorrectGuessesOnCurrentChallenge = 0; if ( this.challengeIndexProperty.get() + 1 < this.challengeList.length ) { // Move to the next challenge. @@ -221,7 +221,7 @@ define( require => { window.clearInterval( this.gameTimerId ); } this.elapsedTimeProperty.set( 0 ); - var self = this; + const self = this; this.gameTimerId = window.setInterval( function() { self.elapsedTimeProperty.value += 1; }, 1000 ); }, diff --git a/js/game/view/AreaBuilderGameView.js b/js/game/view/AreaBuilderGameView.js index 77e1677..3b109e1 100644 --- a/js/game/view/AreaBuilderGameView.js +++ b/js/game/view/AreaBuilderGameView.js @@ -63,13 +63,13 @@ define( require => { const yourGoalString = require( 'string!AREA_BUILDER/yourGoal' ); // constants - var BUTTON_FONT = new PhetFont( 18 ); - var BUTTON_FILL = PhetColorScheme.BUTTON_YELLOW; - var INFO_BANNER_HEIGHT = 60; // Height of the prompt and solution banners, empirically determined. - var GOAL_PROMPT_FONT = new PhetFont( { size: 20, weight: 'bold' } ); - var SPACE_AROUND_SHAPE_PLACEMENT_BOARD = AreaBuilderSharedConstants.CONTROLS_INSET; - var ITEMS_PER_CAROUSEL_PAGE = 4; - var BUTTON_TOUCH_AREA_DILATION = 7; + const BUTTON_FONT = new PhetFont( 18 ); + const BUTTON_FILL = PhetColorScheme.BUTTON_YELLOW; + const INFO_BANNER_HEIGHT = 60; // Height of the prompt and solution banners, empirically determined. + const GOAL_PROMPT_FONT = new PhetFont( { size: 20, weight: 'bold' } ); + const SPACE_AROUND_SHAPE_PLACEMENT_BOARD = AreaBuilderSharedConstants.CONTROLS_INSET; + const ITEMS_PER_CAROUSEL_PAGE = 4; + const BUTTON_TOUCH_AREA_DILATION = 7; /** * @param {AreaBuilderGameModel} gameModel @@ -77,7 +77,7 @@ define( require => { */ function AreaBuilderGameView( gameModel ) { ScreenView.call( this, { layoutBounds: AreaBuilderSharedConstants.LAYOUT_BOUNDS } ); - var self = this; + const self = this; self.model = gameModel; // Create the game audio player. @@ -137,8 +137,8 @@ define( require => { touchAreaYDilation: BUTTON_TOUCH_AREA_DILATION, listener: function() { - var challenge = gameModel.currentChallengeProperty.get(); - var shapeReleaseMode = 'fade'; + const challenge = gameModel.currentChallengeProperty.get(); + let shapeReleaseMode = 'fade'; if ( challenge.checkSpec === 'areaEntered' && challenge.userShapes && challenge.userShapes[ 0 ].creationLimit ) { @@ -235,7 +235,7 @@ define( require => { // Add and lay out the game control buttons. this.gameControlButtons = []; - var buttonOptions = { + const buttonOptions = { font: BUTTON_FONT, baseColor: BUTTON_FILL, cornerRadius: 4, @@ -284,8 +284,8 @@ define( require => { }, buttonOptions ) ); this.gameControlButtons.push( this.showASolutionButton ); - var buttonCenterX = ( this.layoutBounds.width + this.shapeBoard.right ) / 2; - var buttonBottom = this.shapeBoard.bottom; + const buttonCenterX = ( this.layoutBounds.width + this.shapeBoard.right ) / 2; + const buttonBottom = this.shapeBoard.bottom; this.gameControlButtons.forEach( function( button ) { button.centerX = buttonCenterX; button.bottom = buttonBottom; @@ -332,11 +332,11 @@ define( require => { gameModel.simSpecificModel.movableShapes.addItemAddedListener( function( addedShape ) { // Create and add the view representation for this shape. - var shapeNode = new ShapeNode( addedShape, self.layoutBounds ); + const shapeNode = new ShapeNode( addedShape, self.layoutBounds ); self.challengeLayer.addChild( shapeNode ); // Add a listener that handles changes to the userControlled state. - var userControlledListener = function( userControlled ) { + const userControlledListener = function( userControlled ) { if ( userControlled ) { shapeNode.moveToFront(); @@ -431,7 +431,7 @@ define( require => { // Hide all nodes - the appropriate ones will be shown later based on the current state. this.hideAllGameNodes(); - var challenge = this.model.currentChallengeProperty.get(); // convenience var + const challenge = this.model.currentChallengeProperty.get(); // convenience var // Show the nodes appropriate to the state switch( gameState ) { @@ -481,7 +481,7 @@ define( require => { this.presentChallenge(); // Make a list of the nodes to be shown in this state. - var nodesToShow = [ + const nodesToShow = [ this.scoreboard, this.controlPanel, this.checkAnswerButton, @@ -513,7 +513,7 @@ define( require => { handleShowingCorrectAnswerFeedbackState: function( challenge ) { // Make a list of the nodes to be shown in this state. - var nodesToShow = [ + const nodesToShow = [ this.scoreboard, this.controlPanel, this.nextButton, @@ -547,7 +547,7 @@ define( require => { handleShowingIncorrectAnswerFeedbackTryAgainState: function( challenge ) { // Make a list of the nodes to be shown in this state. - var nodesToShow = [ + const nodesToShow = [ this.scoreboard, this.controlPanel, this.tryAgainButton, @@ -583,7 +583,7 @@ define( require => { handleShowingIncorrectAnswerFeedbackMoveOnState: function( challenge ) { // Make a list of the nodes to be shown in this state. - var nodesToShow = [ + const nodesToShow = [ this.scoreboard, this.controlPanel, this.challengePromptBanner, @@ -626,7 +626,7 @@ define( require => { // @private handleDisplayingCorrectAnswerState: function( challenge ) { // Make a list of the nodes to be shown in this state. - var nodesToShow = [ + const nodesToShow = [ this.scoreboard, this.controlPanel, this.nextButton, @@ -683,7 +683,7 @@ define( require => { // @private Update the window that depicts what the user has built. updateYouBuiltWindow: function( challenge ) { assert && assert( challenge.buildSpec, 'This method should only be called for challenges that include a build spec.' ); - var userBuiltSpec = new BuildSpec( + const userBuiltSpec = new BuildSpec( this.areaOfUserCreatedShape, challenge.buildSpec.perimeter ? this.perimeterOfUserCreatedShape : null, challenge.buildSpec.proportions ? { @@ -712,7 +712,7 @@ define( require => { // Save the parameters of what the user has built, if they've built anything. this.areaOfUserCreatedShape = this.model.simSpecificModel.shapePlacementBoard.areaAndPerimeterProperty.get().area; this.perimeterOfUserCreatedShape = this.model.simSpecificModel.shapePlacementBoard.areaAndPerimeterProperty.get().perimeter; - var challenge = this.model.currentChallengeProperty.get(); // convenience var + const challenge = this.model.currentChallengeProperty.get(); // convenience var if ( challenge.buildSpec && challenge.buildSpec.proportions ) { this.color1Proportion = this.model.simSpecificModel.getProportionOfColor( challenge.buildSpec.proportions.color1 ); } @@ -726,7 +726,7 @@ define( require => { // @private Returns true if any shape is animating or user controlled, false if not. isAnyShapeMoving: function() { - for ( var i = 0; i < this.model.simSpecificModel.movableShapes.length; i++ ) { + for ( let i = 0; i < this.model.simSpecificModel.movableShapes.length; i++ ) { if ( this.model.simSpecificModel.movableShapes.get( i ).animatingProperty.get() || this.model.simSpecificModel.movableShapes.get( i ).userControlledProperty.get() ) { return true; @@ -738,7 +738,7 @@ define( require => { // @private, Present the challenge to the user and set things up so that they can submit their answer. presentChallenge: function() { - var self = this; + const self = this; if ( this.model.incorrectGuessesOnCurrentChallenge === 0 ) { @@ -747,7 +747,7 @@ define( require => { this.challengePromptBanner.reset(); this.shapeCarouselLayer.removeAllChildren(); - var challenge = this.model.currentChallengeProperty.get(); // Convenience var + const challenge = this.model.currentChallengeProperty.get(); // Convenience var // Set up the challenge prompt banner, which appears above the shape placement board. this.challengePromptBanner.titleTextProperty.value = challenge.buildSpec ? buildItString : findTheAreaString; @@ -757,15 +757,15 @@ define( require => { this.buildPromptVBox.removeAllChildren(); this.buildPromptVBox.addChild( this.yourGoalTitle ); - var areaGoalNode = new Text( StringUtils.format( areaEqualsString, challenge.buildSpec.area ), { + const areaGoalNode = new Text( StringUtils.format( areaEqualsString, challenge.buildSpec.area ), { font: GOAL_PROMPT_FONT, maxWidth: this.shapeBoardOriginalBounds.width * 0.9 } ); if ( challenge.buildSpec.proportions ) { - var areaPrompt = new Node(); + const areaPrompt = new Node(); areaPrompt.addChild( areaGoalNode ); areaGoalNode.text = areaGoalNode.text + ','; - var colorProportionsPrompt = new ColorProportionsPrompt( challenge.buildSpec.proportions.color1, + const colorProportionsPrompt = new ColorProportionsPrompt( challenge.buildSpec.proportions.color1, challenge.buildSpec.proportions.color2, challenge.buildSpec.proportions.color1Proportion, { font: new PhetFont( { size: 16, weight: 'bold' } ), left: areaGoalNode.width + 10, @@ -819,9 +819,9 @@ define( require => { // Create the carousel if included as part of this challenge if ( challenge.userShapes !== null ) { - var creatorNodes = []; + const creatorNodes = []; challenge.userShapes.forEach( function( userShapeSpec ) { - var creatorNodeOptions = { + const creatorNodeOptions = { gridSpacing: AreaBuilderGameModel.UNIT_SQUARE_LENGTH, shapeDragBounds: self.layoutBounds, nonMovingAncestor: self.shapeCarouselLayer @@ -849,7 +849,7 @@ define( require => { } else { // Add a non-scrolling panel - var creatorNodeHBox = new HBox( { children: creatorNodes, spacing: 20 } ); + const creatorNodeHBox = new HBox( { children: creatorNodes, spacing: 20 } ); this.shapeCarouselLayer.addChild( new Panel( creatorNodeHBox, { centerX: this.shapeBoardOriginalBounds.centerX, top: this.shapeBoardOriginalBounds.bottom + SPACE_AROUND_SHAPE_PLACEMENT_BOARD, @@ -917,7 +917,7 @@ define( require => { // @private showLevelResultsNode: function() { - var self = this; + const self = this; // Set a new "level completed" node based on the results. var levelCompletedNode = new LevelCompletedNode( diff --git a/js/game/view/AreaBuilderScoreboard.js b/js/game/view/AreaBuilderScoreboard.js index fb81aff..03c0dc8 100644 --- a/js/game/view/AreaBuilderScoreboard.js +++ b/js/game/view/AreaBuilderScoreboard.js @@ -44,28 +44,28 @@ define( require => { this.timeVisibleProperty = new Property( true ); // Create the labels - var levelIndicator = new Text( '', { + const levelIndicator = new Text( '', { font: new PhetFont( { size: 20, weight: 'bold' } ), maxWidth: options.maxWidth } ); levelProperty.link( function( level ) { levelIndicator.text = StringUtils.format( levelString, level + 1 ); } ); - var currentChallengeIndicator = new Text( '', { font: new PhetFont( { size: 16 } ), maxWidth: options.maxWidth } ); + const currentChallengeIndicator = new Text( '', { font: new PhetFont( { size: 16 } ), maxWidth: options.maxWidth } ); problemNumberProperty.link( function( currentChallenge ) { currentChallengeIndicator.text = StringUtils.format( pattern0Challenge1MaxString, currentChallenge + 1, problemsPerLevel ); } ); - var scoreIndicator = new Text( '', { font: new PhetFont( 20 ), maxWidth: options.maxWidth } ); + const scoreIndicator = new Text( '', { font: new PhetFont( 20 ), maxWidth: options.maxWidth } ); scoreProperty.link( function( score ) { scoreIndicator.text = StringUtils.format( labelScoreString, score ); } ); - var elapsedTimeIndicator = new Text( '', { font: new PhetFont( 20 ), maxWidth: options.maxWidth } ); + const elapsedTimeIndicator = new Text( '', { font: new PhetFont( 20 ), maxWidth: options.maxWidth } ); elapsedTimeProperty.link( function( elapsedTime ) { elapsedTimeIndicator.text = StringUtils.format( labelTimeString, GameTimer.formatTime( elapsedTime ) ); } ); // Create the panel. - var vBox = new VBox( { + const vBox = new VBox( { children: [ levelIndicator, currentChallengeIndicator, diff --git a/js/game/view/ColorProportionsPrompt.js b/js/game/view/ColorProportionsPrompt.js index cf969d3..ce3f782 100644 --- a/js/game/view/ColorProportionsPrompt.js +++ b/js/game/view/ColorProportionsPrompt.js @@ -20,9 +20,9 @@ define( require => { const Shape = require( 'KITE/Shape' ); // constants - var MULTI_LINE_SPACING = 5; // Empirically determined to look good - var SINGLE_LINE_SPACING = 12; // Empirically determined to look good - var PROMPT_TO_COLOR_SPACING = 4; // Empirically determined to look good + const MULTI_LINE_SPACING = 5; // Empirically determined to look good + const SINGLE_LINE_SPACING = 12; // Empirically determined to look good + const PROMPT_TO_COLOR_SPACING = 4; // Empirically determined to look good /** * @param {string || Color} color1 - Color value for the 1st color patch @@ -47,14 +47,14 @@ define( require => { } ); this.addChild( this.color1FractionNode ); - var color2Proportion = new Fraction( color1Proportion.denominator - color1Proportion.numerator, color1Proportion.denominator ); + const color2Proportion = new Fraction( color1Proportion.denominator - color1Proportion.numerator, color1Proportion.denominator ); this.color2FractionNode = new FractionNode( color2Proportion, { font: options.font, color: options.textFill } ); this.addChild( this.color2FractionNode ); - var colorPatchShape = Shape.ellipse( 0, 0, this.color1FractionNode.bounds.height * 0.5, this.color1FractionNode.bounds.height * 0.35 ); + const colorPatchShape = Shape.ellipse( 0, 0, this.color1FractionNode.bounds.height * 0.5, this.color1FractionNode.bounds.height * 0.35 ); this.color1Patch = new Path( colorPatchShape, { fill: color1, left: this.color1FractionNode.right + PROMPT_TO_COLOR_SPACING, diff --git a/js/game/view/FeedbackWindow.js b/js/game/view/FeedbackWindow.js index 55e82d0..323c512 100644 --- a/js/game/view/FeedbackWindow.js +++ b/js/game/view/FeedbackWindow.js @@ -19,11 +19,11 @@ define( require => { const Text = require( 'SCENERY/nodes/Text' ); // constants - var X_MARGIN = 8; - var TITLE_FONT = new PhetFont( { size: 20, weight: 'bold' } ); - var NORMAL_TEXT_FONT = new PhetFont( { size: 18 } ); - var CORRECT_ANSWER_BACKGROUND_COLOR = 'white'; - var INCORRECT_ANSWER_BACKGROUND_COLOR = PhetColorScheme.PHET_LOGO_YELLOW; + const X_MARGIN = 8; + const TITLE_FONT = new PhetFont( { size: 20, weight: 'bold' } ); + const NORMAL_TEXT_FONT = new PhetFont( { size: 18 } ); + const CORRECT_ANSWER_BACKGROUND_COLOR = 'white'; + const INCORRECT_ANSWER_BACKGROUND_COLOR = PhetColorScheme.PHET_LOGO_YELLOW; /** * Constructor for the window that shows the user what they built. It is constructed with no contents, and the diff --git a/js/game/view/FractionNode.js b/js/game/view/FractionNode.js index 0e7c7e0..3c3359d 100644 --- a/js/game/view/FractionNode.js +++ b/js/game/view/FractionNode.js @@ -40,7 +40,7 @@ define( require => { this.addChild( this.numeratorNode ); this.denominatorNode = new Text( '0', { font: options.font, fill: options.color } ); this.addChild( this.denominatorNode ); - var fractionBarWidth = options.fractionBarWidthProportion * Math.max( this.numeratorNode.width, this.denominatorNode.width ); + const fractionBarWidth = options.fractionBarWidthProportion * Math.max( this.numeratorNode.width, this.denominatorNode.width ); this.fractionBarNode = new Line( 0, 0, fractionBarWidth, 0, { stroke: options.color, lineWidth: options.fractionBarLineWidth diff --git a/js/game/view/GameIconFactory.js b/js/game/view/GameIconFactory.js index 93bfb77..c8a6ed8 100644 --- a/js/game/view/GameIconFactory.js +++ b/js/game/view/GameIconFactory.js @@ -15,10 +15,10 @@ define( require => { const Vector2 = require( 'DOT/Vector2' ); // constants - var NUM_COLUMNS = 8; - var NUM_ROWS = 9; - var CELL_LENGTH = 3; - var GRID_ICON_OPTIONS = { + const NUM_COLUMNS = 8; + const NUM_ROWS = 9; + const CELL_LENGTH = 3; + const GRID_ICON_OPTIONS = { gridStroke: '#dddddd', gridLineWidth: 0.25, shapeLineWidth: 0.25 @@ -27,10 +27,10 @@ define( require => { /** * Static object, not meant to be instantiated. */ - var GameIconFactory = { + const GameIconFactory = { createIcon: function( level ) { - var color; - var occupiedCells; + let color; + let occupiedCells; switch( level ) { case 1: color = AreaBuilderSharedConstants.ORANGISH_COLOR; diff --git a/js/game/view/GameInfoBanner.js b/js/game/view/GameInfoBanner.js index 82e8bc1..cc11b41 100644 --- a/js/game/view/GameInfoBanner.js +++ b/js/game/view/GameInfoBanner.js @@ -27,12 +27,12 @@ define( require => { const perimeterEqualsString = require( 'string!AREA_BUILDER/perimeterEquals' ); // constants - var TEXT_FILL_COLOR = 'white'; - var TITLE_FONT = new PhetFont( { size: 24, weight: 'bold' } ); // Font used for the title - var LARGER_FONT = new PhetFont( { size: 24 } ); // Font for single line text - var SMALLER_FONT = new PhetFont( { size: 18 } ); // Font for two-line text - var TITLE_INDENT = 15; // Empirically determined. - var ANIMATION_TIME = 0.6; // In seconds + const TEXT_FILL_COLOR = 'white'; + const TITLE_FONT = new PhetFont( { size: 24, weight: 'bold' } ); // Font used for the title + const LARGER_FONT = new PhetFont( { size: 24 } ); // Font for single line text + const SMALLER_FONT = new PhetFont( { size: 18 } ); // Font for two-line text + const TITLE_INDENT = 15; // Empirically determined. + const ANIMATION_TIME = 0.6; // In seconds /** * @param {number} width @@ -42,7 +42,7 @@ define( require => { * @constructor */ function GameInfoBanner( width, height, backgroundColor, options ) { - var self = this; + const self = this; Rectangle.call( this, 0, 0, width, height, 0, 0, { fill: backgroundColor } ); // @public These properties are the main API for this class, and they control what is and isn't shown on the banner. @@ -51,7 +51,7 @@ define( require => { this.areaToFindProperty = new Property( null ); // Define the title. - var title = new Text( this.titleTextProperty.value, { + const title = new Text( this.titleTextProperty.value, { font: TITLE_FONT, fill: TEXT_FILL_COLOR, centerY: height / 2, @@ -74,14 +74,14 @@ define( require => { } ); // Define the build prompt, which is shown in both the challenge prompt and the solution. - var buildPrompt = new Node(); + const buildPrompt = new Node(); this.addChild( buildPrompt ); - var maxBuildPromptWidth = width / 2; // the build prompt has to fit in the banner with the title - var areaPrompt = new Text( '', { font: SMALLER_FONT, fill: TEXT_FILL_COLOR, top: 0 } ); + const maxBuildPromptWidth = width / 2; // the build prompt has to fit in the banner with the title + const areaPrompt = new Text( '', { font: SMALLER_FONT, fill: TEXT_FILL_COLOR, top: 0 } ); buildPrompt.addChild( areaPrompt ); - var perimeterPrompt = new Text( '', { font: SMALLER_FONT, fill: TEXT_FILL_COLOR, top: 0 } ); + const perimeterPrompt = new Text( '', { font: SMALLER_FONT, fill: TEXT_FILL_COLOR, top: 0 } ); buildPrompt.addChild( perimeterPrompt ); - var colorProportionPrompt = new ColorProportionsPrompt( 'black', 'white', + const colorProportionPrompt = new ColorProportionsPrompt( 'black', 'white', new Fraction( 1, 1 ), { font: new PhetFont( { size: 11 } ), textFill: TEXT_FILL_COLOR, @@ -118,8 +118,8 @@ define( require => { // Function that positions the build prompt such that its visible bounds are centered in the space to the left of // the title. function positionBuildPrompt() { - var centerX = ( TITLE_INDENT + title.width + width - TITLE_INDENT ) / 2; - var centerY = height / 2; + const centerX = ( TITLE_INDENT + title.width + width - TITLE_INDENT ) / 2; + const centerY = height / 2; buildPrompt.setScaleMagnitude( 1 ); if ( buildPrompt.width > maxBuildPromptWidth ) { // scale the build prompt to fit with the title on the banner diff --git a/js/game/view/StartGameLevelNode.js b/js/game/view/StartGameLevelNode.js index 8cbe840..8b4e97d 100644 --- a/js/game/view/StartGameLevelNode.js +++ b/js/game/view/StartGameLevelNode.js @@ -26,7 +26,7 @@ define( require => { const chooseYourLevelString = require( 'string!VEGAS/chooseYourLevel' ); // constants - var CONTROL_BUTTON_TOUCH_AREA_DILATION = 4; + const CONTROL_BUTTON_TOUCH_AREA_DILATION = 4; /** * @param {function} startLevelFunction - Function used to initiate a game @@ -69,7 +69,7 @@ define( require => { } // Title - var title = new Text( options.titleString, { font: new PhetFont( 30 ), maxWidth: options.maxTitleWidth } ); + const title = new Text( options.titleString, { font: new PhetFont( 30 ), maxWidth: options.maxTitleWidth } ); this.addChild( title ); // Add the buttons @@ -77,8 +77,8 @@ define( require => { return function() { startLevelFunction( level ); }; } - var buttons = new Array( options.numLevels ); - for ( var i = 0; i < options.numLevels; i++ ) { + const buttons = new Array( options.numLevels ); + for ( let i = 0; i < options.numLevels; i++ ) { buttons[ i ] = new LevelSelectionButton( iconNodes[ i ], scores[ i ], @@ -96,28 +96,28 @@ define( require => { } // Sound and timer controls. - var timerToggleButton = new TimerToggleButton( timerEnabledProperty, { + const timerToggleButton = new TimerToggleButton( timerEnabledProperty, { touchAreaXDilation: CONTROL_BUTTON_TOUCH_AREA_DILATION, touchAreaYDilation: CONTROL_BUTTON_TOUCH_AREA_DILATION } ); this.addChild( timerToggleButton ); // Reset button. - var resetButton = new ResetAllButton( { + const resetButton = new ResetAllButton( { listener: resetFunction, radius: AreaBuilderSharedConstants.RESET_BUTTON_RADIUS } ); this.addChild( resetButton ); // Layout - var numColumns = options.numLevels / options.numButtonRows; - var buttonSpacingX = buttons[ 0 ].width * 1.2; // Note: Assumes all buttons are the same size. - var buttonSpacingY = buttons[ 0 ].height * 1.2; // Note: Assumes all buttons are the same size. - var firstButtonOrigin = new Vector2( options.size.width / 2 - ( numColumns - 1 ) * buttonSpacingX / 2, + const numColumns = options.numLevels / options.numButtonRows; + const buttonSpacingX = buttons[ 0 ].width * 1.2; // Note: Assumes all buttons are the same size. + const buttonSpacingY = buttons[ 0 ].height * 1.2; // Note: Assumes all buttons are the same size. + const firstButtonOrigin = new Vector2( options.size.width / 2 - ( numColumns - 1 ) * buttonSpacingX / 2, options.size.height * 0.5 - ( ( options.numButtonRows - 1 ) * buttonSpacingY ) / 2 ); - for ( var row = 0; row < options.numButtonRows; row++ ) { - for ( var col = 0; col < numColumns; col++ ) { - var buttonIndex = row * numColumns + col; + for ( let row = 0; row < options.numButtonRows; row++ ) { + for ( let col = 0; col < numColumns; col++ ) { + const buttonIndex = row * numColumns + col; buttons[ buttonIndex ].centerX = firstButtonOrigin.x + col * buttonSpacingX; buttons[ buttonIndex ].centerY = firstButtonOrigin.y + row * buttonSpacingY; } diff --git a/js/game/view/YouBuiltWindow.js b/js/game/view/YouBuiltWindow.js index 7fce39f..02f08fc 100644 --- a/js/game/view/YouBuiltWindow.js +++ b/js/game/view/YouBuiltWindow.js @@ -24,7 +24,7 @@ define( require => { const youBuiltString = require( 'string!AREA_BUILDER/youBuilt' ); // constants - var LINE_SPACING = 5; + const LINE_SPACING = 5; /** * Constructor for the window that shows the user what they built. It is constructed with no contents, and the diff --git a/js/game/view/YouEnteredWindow.js b/js/game/view/YouEnteredWindow.js index dcd3cdc..032d5d7 100644 --- a/js/game/view/YouEnteredWindow.js +++ b/js/game/view/YouEnteredWindow.js @@ -19,7 +19,7 @@ define( require => { const youEnteredString = require( 'string!AREA_BUILDER/youEntered' ); // constants - var LINE_SPACING = 5; + const LINE_SPACING = 5; /** * Constructor for the window that shows the user what they built. It is constructed with no contents, and the