convert to ES6 class, phetsims/tasks#1044

phetsims · Sep 8, 2020 · 8077825 · 8077825
1 parent 7c28bcd
commit 8077825
Show file tree

Hide file tree

Showing 3 changed files with 103 additions and 118 deletions.
diff --git a/js/AllLevelsCompletedNode.js b/js/AllLevelsCompletedNode.js
@@ -1,10 +1,11 @@
 // Copyright 2018-2020, University of Colorado Boulder
 
 /**
- * model dialog shown when all levels have been completed
+ * AllLevelsCompletedNode is a pseudo-dialog shown when all game levels have been completed.
+ *
+ * @author Jonathan Olson
  */
 
-import inherit from '../../phet-core/js/inherit.js';
 import merge from '../../phet-core/js/merge.js';
 import FaceNode from '../../scenery-phet/js/FaceNode.js';
 import PhetFont from '../../scenery-phet/js/PhetFont.js';
@@ -14,59 +15,56 @@ import Text from '../../scenery/js/nodes/Text.js';
 import VBox from '../../scenery/js/nodes/VBox.js';
 import RectangularPushButton from '../../sun/js/buttons/RectangularPushButton.js';
 import Panel from '../../sun/js/Panel.js';
-import vegasStrings from './vegasStrings.js';
 import vegas from './vegas.js';
+import vegasStrings from './vegasStrings.js';
 
 // constants
 const FACE_DIAMETER = 160; // empirically determined
 
-const doneString = vegasStrings.done;
-const youCompletedAllLevelsString = vegasStrings.youCompletedAllLevels;
+class AllLevelsCompletedNode extends Node {
 
-/**
- * @param {Function} listener - function that gets called when 'next' button is pressed
- * @param {Object} [options]
- * @constructor
- */
-function AllLevelsCompletedNode( listener, options ) {
-  Node.call( this );
+  /**
+   * @param {Function} listener - function that gets called when 'next' button is pressed
+   * @param {Object} [options]
+   */
+  constructor( listener, options ) {
+    super();
 
-  options = merge( {
-    // {number} - Controls the width of the main message and the text in the button
-    maxTextWidth: 300
-  }, options );
+    options = merge( {
+      // {number} - Controls the width of the main message and the text in the button
+      maxTextWidth: 300
+    }, options );
 
-  // create the smiley face
-  const faceNode = new FaceNode( FACE_DIAMETER );
+    // create the smiley face
+    const faceNode = new FaceNode( FACE_DIAMETER );
 
-  // create the dialog text
-  const textMessage = new RichText( youCompletedAllLevelsString, {
-    font: new PhetFont( 25 ),
-    lineWrap: 300,
-    maxWidth: options.maxTextWidth,
-    maxHeight: 300
-  } );
+    // create the dialog text
+    const textMessage = new RichText( vegasStrings.youCompletedAllLevels, {
+      font: new PhetFont( 25 ),
+      lineWrap: 300,
+      maxWidth: options.maxTextWidth,
+      maxHeight: 300
+    } );
 
-  // create the button
-  const button = new RectangularPushButton( {
-    content: new Text( doneString, {
-      font: new PhetFont( 30 ),
-      maxWidth: options.maxTextWidth
-    } ),
-    listener: listener,
-    baseColor: 'yellow'
-  } );
+    // create the button
+    const button = new RectangularPushButton( {
+      content: new Text( vegasStrings.done, {
+        font: new PhetFont( 30 ),
+        maxWidth: options.maxTextWidth
+      } ),
+      listener: listener,
+      baseColor: 'yellow'
+    } );
 
-  // add the main background panel
-  this.addChild( new Panel(
-    new VBox( { children: [ faceNode, textMessage, button ], spacing: 20 } ),
-    { xMargin: 50, yMargin: 20 }
-  ) );
+    // add the main background panel
+    this.addChild( new Panel(
+      new VBox( { children: [ faceNode, textMessage, button ], spacing: 20 } ),
+      { xMargin: 50, yMargin: 20 }
+    ) );
 
-  this.mutate( options );
+    this.mutate( options );
+  }
 }
 
 vegas.register( 'AllLevelsCompletedNode', AllLevelsCompletedNode );
-
-inherit( Node, AllLevelsCompletedNode );
 export default AllLevelsCompletedNode;
diff --git a/js/ElapsedTimeNode.js b/js/ElapsedTimeNode.js
@@ -1,12 +1,11 @@
 // Copyright 2018-2020, University of Colorado Boulder
 
 /**
- * Game timer display that appears in FiniteStatusBar.
+ * ElapsedTimeNode shows the elapsed time in a game status bar (FiniteStatusBar).
  *
  * @author Chris Malley (PixelZoom, Inc.)
  */
 
-import inherit from '../../phet-core/js/inherit.js';
 import merge from '../../phet-core/js/merge.js';
 import SimpleClockIcon from '../../scenery-phet/js/SimpleClockIcon.js';
 import HBox from '../../scenery/js/nodes/HBox.js';
@@ -15,58 +14,56 @@ import GameTimer from './GameTimer.js';
 import StatusBar from './StatusBar.js';
 import vegas from './vegas.js';
 
-/**
- * @param {Property.<number>} elapsedTimeProperty
- * @param {Object} [options]
- * @constructor
- */
-function ElapsedTimeNode( elapsedTimeProperty, options ) {
-
-  options = merge( {
-    spacing: 8,
-    clockIconRadius: 15,
-    font: StatusBar.DEFAULT_FONT,
-    textFill: 'black'
-  }, options );
+class ElapsedTimeNode extends HBox {
 
-  const clockIcon = new SimpleClockIcon( options.clockIconRadius );
+  /**
+   * @param {Property.<number>} elapsedTimeProperty
+   * @param {Object} [options]
+   */
+  constructor( elapsedTimeProperty, options ) {
 
-  const timeValue = new Text( '', {
-    font: options.font,
-    fill: options.textFill
-  } );
+    options = merge( {
+      spacing: 8,
+      clockIconRadius: 15,
+      font: StatusBar.DEFAULT_FONT,
+      textFill: 'black'
+    }, options );
 
-  assert && assert( !options.children, 'ElapsedTimeNode sets children' );
-  options.children = [ clockIcon, timeValue ];
+    const clockIcon = new SimpleClockIcon( options.clockIconRadius );
 
-  HBox.call( this, options );
+    const timeValue = new Text( '', {
+      font: options.font,
+      fill: options.textFill
+    } );
 
-  // Update the time display
-  const elapsedTimeListener = function( elapsedTime ) {
-    timeValue.text = GameTimer.formatTime( elapsedTime );
-  };
-  elapsedTimeProperty.link( elapsedTimeListener );
+    assert && assert( !options.children, 'ElapsedTimeNode sets children' );
+    options.children = [ clockIcon, timeValue ];
 
-  // @private
-  this.disposeElapsedTimeNode = function() {
-    if ( elapsedTimeProperty.hasListener( elapsedTimeListener ) ) {
-      elapsedTimeProperty.unlink( elapsedTimeListener );
-    }
-  };
-}
+    super( options );
 
-vegas.register( 'ElapsedTimeNode', ElapsedTimeNode );
+    // Update the time display
+    const elapsedTimeListener = elapsedTime => {
+      timeValue.text = GameTimer.formatTime( elapsedTime );
+    };
+    elapsedTimeProperty.link( elapsedTimeListener );
 
-inherit( HBox, ElapsedTimeNode, {
+    // @private
+    this.disposeElapsedTimeNode = () => {
+      if ( elapsedTimeProperty.hasListener( elapsedTimeListener ) ) {
+        elapsedTimeProperty.unlink( elapsedTimeListener );
+      }
+    };
+  }
 
   /**
    * @public
    * @override
    */
-  dispose: function() {
+  dispose() {
     this.disposeElapsedTimeNode();
-    HBox.prototype.dispose.call( this );
+    super.dispose();
   }
-} );
+}
 
+vegas.register( 'ElapsedTimeNode', ElapsedTimeNode );
 export default ElapsedTimeNode;
diff --git a/js/GameTimer.js b/js/GameTimer.js
@@ -7,83 +7,72 @@
  * @author Chris Malley (PixelZoom, Inc.)
  */
 
-import Property from '../../axon/js/Property.js';
+import BooleanProperty from '../../axon/js/BooleanProperty.js';
+import NumberProperty from '../../axon/js/NumberProperty.js';
 import timer from '../../axon/js/timer.js';
-import inherit from '../../phet-core/js/inherit.js';
 import StringUtils from '../../phetcommon/js/util/StringUtils.js';
-import vegasStrings from './vegasStrings.js';
 import vegas from './vegas.js';
+import vegasStrings from './vegasStrings.js';
 
-const pattern0Hours1Minutes2SecondsString = vegasStrings.pattern[ '0hours' ][ '1minutes' ][ '2seconds' ];
-const pattern0Minutes1SecondsString = vegasStrings.pattern[ '0minutes' ][ '1seconds' ];
-
-/**
- * @constructor
- */
-function GameTimer() {
-
-  // @public seconds since the timer was started
-  this.elapsedTimeProperty = new Property( 0 );
-  this.isRunningProperty = new Property( false );
+class GameTimer {
 
-  this.intervalId = null; // @private
-}
+  constructor() {
 
-vegas.register( 'GameTimer', GameTimer );
+    // @public seconds since the timer was started
+    this.elapsedTimeProperty = new NumberProperty( 0 );
+    this.isRunningProperty = new BooleanProperty( false );
 
-inherit( Object, GameTimer, {
+    this.intervalId = null; // @private
+  }
 
   // @public
-  reset: function() {
+  reset() {
     this.elapsedTimeProperty.reset();
     this.isRunningProperty.reset();
-  },
+  }
 
   /**
    * Starts the timer. This is a no-op if the timer is already running.
    * @public
    */
-  start: function() {
+  start() {
     if ( !this.isRunningProperty.value ) {
-      const self = this;
-      self.elapsedTimeProperty.value = 0;
-      self.intervalId = timer.setInterval( function() {
-        self.elapsedTimeProperty.value = self.elapsedTimeProperty.value + 1;
+      this.elapsedTimeProperty.value = 0;
+      this.intervalId = timer.setInterval( () => {
+        this.elapsedTimeProperty.value = this.elapsedTimeProperty.value + 1;
       }, 1000 ); // fire once per second
-      self.isRunningProperty.value = true;
+      this.isRunningProperty.value = true;
     }
-  },
+  }
 
   /**
    * Stops the timer. This is a no-op if the timer is already stopped.
    * @public
    */
-  stop: function() {
+  stop() {
     if ( this.isRunningProperty.value ) {
       timer.clearInterval( this.intervalId );
       this.intervalId = null;
       this.isRunningProperty.value = false;
     }
-  },
+  }
 
   /**
    * Convenience function for restarting the timer.
    * @public
    */
-  restart: function() {
+  restart() {
     this.stop();
     this.start();
   }
-}, {
 
   /**
    * Formats a value representing seconds into H:MM:SS (localized).
    * @param {number} time in seconds
    * @returns {string}
    * @public
-   * @static
    */
-  formatTime: function( time ) {
+  static formatTime( time ) {
 
     const hours = Math.floor( time / 3600 );
     const minutes = Math.floor( ( time - ( hours * 3600 ) ) / 60 );
@@ -93,12 +82,13 @@ inherit( Object, GameTimer, {
     const secondsString = ( seconds > 9 ) ? seconds : ( '0' + seconds );
 
     if ( hours > 0 ) {
-      return StringUtils.format( pattern0Hours1Minutes2SecondsString, hours, minutesString, secondsString );
+      return StringUtils.format( vegasStrings.pattern[ '0hours' ][ '1minutes' ][ '2seconds' ], hours, minutesString, secondsString );
     }
     else {
-      return StringUtils.format( pattern0Minutes1SecondsString, minutesString, secondsString );
+      return StringUtils.format( vegasStrings.pattern[ '0minutes' ][ '1seconds' ], minutesString, secondsString );
     }
   }
-} );
+}
 
+vegas.register( 'GameTimer', GameTimer );
 export default GameTimer;