// Copyright 2019, University of Colorado Boulder

/**
 * Button group that contains a play/pause and step button.
 *
 * @author Chris Klusendorf (PhET Interactive Simulations)
 */
define( function( require ) {
  'use strict';

  // modules
  var EFACConstants = require( 'ENERGY_FORMS_AND_CHANGES/common/EFACConstants' );
  var energyFormsAndChanges = require( 'ENERGY_FORMS_AND_CHANGES/energyFormsAndChanges' );
  var HBox = require( 'SCENERY/nodes/HBox' );
  var inherit = require( 'PHET_CORE/inherit' );
  var PlayPauseButton = require( 'SCENERY_PHET/buttons/PlayPauseButton' );
  var StepForwardButton = require( 'SCENERY_PHET/buttons/StepForwardButton' );

  /**
   * @param {EFACIntroModel|SystemsModel} model
   * @constructor
   */
  function PlayPauseStepButtonGroup( model ) {

    // create the play/pause button
    var playPauseButton = new PlayPauseButton( model.isPlayingProperty, {
      radius: EFACConstants.PLAY_PAUSE_BUTTON_RADIUS
    } );

    // create the step button, which is used to manually step the simulation
    var stepButton = new StepForwardButton( {
      isPlayingProperty: model.isPlayingProperty,
      listener: function() { model.manualStep(); },
      radius: EFACConstants.STEP_FORWARD_BUTTON_RADIUS
    } );

    HBox.call( this, {
      children: [ playPauseButton, stepButton ],
      spacing: 10
    } );
  }

  energyFormsAndChanges.register( 'PlayPauseStepButtonGroup', PlayPauseStepButtonGroup );

  return inherit( HBox, PlayPauseStepButtonGroup );
} );


@@ -181,26 +181,16 @@
 %0Adefine(
- function(
  require
@@ -190,17 +190,18 @@
 require 
-)
+=%3E
  %7B%0A  'us
@@ -227,19 +227,21 @@
 dules%0A  
-var
+const
  EFACCon
@@ -311,19 +311,21 @@
 s' );%0A  
-var
+const
  energyF
@@ -404,19 +404,21 @@
 s' );%0A  
-var
+const
  HBox = 
@@ -456,59 +456,13 @@
 ;%0A  
-var inherit = require( 'PHET_CORE/inherit' );%0A  var
+const
  Pla
@@ -529,19 +529,21 @@
 n' );%0A  
-var
+const
  StepFor
@@ -613,14 +613,67 @@
 );%0A%0A
+  class PlayPauseStepButtonGroup extends HBox %7B%0A%0A  
   /**%0A
+  
    *
@@ -723,64 +723,28 @@
 %0A   
-* @constructor%0A   */%0A  function PlayPauseStepButtonGroup
+  */%0A    constructor
 ( mo
@@ -748,24 +748,26 @@
  model ) %7B%0A%0A
+  
     // creat
@@ -794,19 +794,23 @@
 ton%0A    
-var
+  const
  playPau
@@ -870,24 +870,26 @@
 ty, %7B%0A      
+  
 radius: EFAC
@@ -923,30 +923,34 @@
 _RADIUS%0A    
+  
 %7D );%0A%0A
+  
     // creat
@@ -1022,11 +1022,15 @@
     
-var
+  const
  ste
@@ -1064,16 +1064,18 @@
 tton( %7B%0A
+  
       is
@@ -1116,16 +1116,18 @@
 operty,%0A
+  
       li
@@ -1138,20 +1138,13 @@
 er: 
-function
 () 
-%7B
+=%3E
  mod
@@ -1162,13 +1162,12 @@
 ep()
-; %7D
 ,%0A
+  
     
@@ -1217,24 +1217,26 @@
 _RADIUS%0A    
+  
 %7D );%0A%0A    HB
@@ -1237,27 +1237,21 @@
     
-HBox.call( this,
+  super(
  %7B%0A
+  
     
@@ -1301,16 +1301,18 @@
 ,%0A      
+  
 spacing:
@@ -1323,20 +1323,35 @@
     
+  
 %7D );%0A
+    %7D%0A
   %7D%0A%0A  
+return 
 ener
@@ -1437,61 +1437,8 @@
 p );
-%0A%0A  return inherit( HBox, PlayPauseStepButtonGroup );
 %0A%7D )

Convert to ES6, see https://github.com/phetsims/energy-forms-and-changes/issues/211