Add maxWidth to kick buttons, add phet-io to kick buttons, see #6

phetsims · Feb 2, 2022 · 0daf15f · 0daf15f
1 parent df17d47
commit 0daf15f
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 15 deletions.
diff --git a/js/common/view/KickButtonGroup.ts b/js/common/view/KickButtonGroup.ts
@@ -12,28 +12,36 @@ import RectangularPushButton from '../../../../sun/js/buttons/RectangularPushBut
 import { AlignGroup, NodeOptions, Text, VBox } from '../../../../scenery/js/imports.js';
 import optionize from '../../../../phet-core/js/optionize.js';
 import centerAndSpreadStrings from '../../centerAndSpreadStrings.js';
+import Tandem from '../../../../tandem/js/Tandem.js';
 
 // TODO: VBox/LayoutBox could use TS options
-export type KickButtonGroupOptions = NodeOptions;
+export type KickButtonGroupOptions = NodeOptions & Required<Pick<NodeOptions, 'tandem'>>;
+
+// constants
+const TEXT_MAX_WIDTH = 40;
 
 class KickButtonGroup extends VBox {
 
   constructor( providedOptions?: KickButtonGroupOptions ) {
 
+    const options = optionize<KickButtonGroupOptions>( {
+      spacing: 2,
+      tandem: Tandem.REQUIRED
+    }, providedOptions );
+
     const alignGroup = new AlignGroup();
-    const kickOneAlignBox = alignGroup.createBox( new Text( centerAndSpreadStrings.kick1 ) );
-    const kickTenAlignBox = alignGroup.createBox( new Text( centerAndSpreadStrings.kick10 ) );
+    const kickOneAlignBox = alignGroup.createBox( new Text( centerAndSpreadStrings.kick1, {
+      maxWidth: TEXT_MAX_WIDTH,
+      tandem: options.tandem.createTandem( 'kickOneButton' )
+    } ) );
+    const kickTenAlignBox = alignGroup.createBox( new Text( centerAndSpreadStrings.kick10, {
+      maxWidth: TEXT_MAX_WIDTH,
+      tandem: options.tandem.createTandem( 'kickTenButton' )
+    } ) );
 
     const kickOneButton = new RectangularPushButton( { content: kickOneAlignBox } );
     const kickTenButton = new RectangularPushButton( { content: kickTenAlignBox } );
-
-    const options = optionize<any>( {
-      spacing: 2,
-      children: [
-        kickOneButton,
-        kickTenButton
-      ]
-    }, providedOptions );
+    options.children = [ kickOneButton, kickTenButton ];
 
     super( options );
   }

diff --git a/js/common/view/SoccerScreenView.ts b/js/common/view/SoccerScreenView.ts
@@ -22,20 +22,21 @@ type SoccerScreenViewSelfOptions = {
 export type SoccerScreenViewOptions = SoccerScreenViewSelfOptions & CASScreenViewOptions;
 
 class SoccerScreenView extends CASScreenView {
-  constructor( model: CASModel, options: SoccerScreenViewOptions ) {
-    options = optionize<SoccerScreenViewOptions>( {
+  constructor( model: CASModel, providedOptions: SoccerScreenViewOptions ) {
+    const options = optionize<SoccerScreenViewOptions>( {
 
       // phet-io options
       tandem: Tandem.REQUIRED
 
-    }, options );
+    }, providedOptions );
 
     super( model, options );
 
     this.addChild( new QuestionBar( this.layoutBounds, this.visibleBoundsProperty, options.questionBarOptions ) );
     this.addChild( new KickButtonGroup( {
       left: CASConstants.SCREEN_VIEW_X_MARGIN,
-      bottom: this.layoutBounds.bottom - CASConstants.SCREEN_VIEW_Y_MARGIN
+      bottom: this.layoutBounds.bottom - CASConstants.SCREEN_VIEW_Y_MARGIN,
+      tandem: options.tandem.createTandem( 'kickButtonGroup' )
     } ) );
   }