phetsims / number-play

"Number Play" is an educational simulation in HTML5, by PhET Interactive Simulations.
GNU General Public License v3.0
3 stars 1 forks source link

Use custom layout in NumberPlayGameLevelSelectionButtonGroup #184

Closed chrisklus closed 1 year ago

chrisklus commented 2 years ago

From converting to use LevelSelectionButtonGroup in https://github.com/phetsims/vegas/issues/108.

Right now I'm using a default layout of 2 rows, but there can be a case where levels from different game types end up on the same row:

image

The red buttons should always be on the top row and the purple on the bottom row.

chrisklus commented 2 years ago

From https://github.com/phetsims/vegas/issues/108#issuecomment-1226090686:

Default layout got me pretty far but not quite what was in place in Number Play before, see https://github.com/phetsims/number-play/issues/184, and I did not see an easy way to fix this with a custom layout. I tried creating a type that tacks on info about the level (like game type) for the button so that I could split the buttons into two types for the layout, but naturally createLayoutNode is strict about its param type LevelSelectionButton[]. Any ideas on how to achieve this behavior? Or maybe it should not be a feature of LevelSelectionButtonGroup to know things about the levels the buttons are for? Worst case I could distinguish with getBaseColor from ButtonNode, but that seems not ideal. I'll add this as a comment in the issue so we can continue discussion over there.

pixelzoom commented 2 years ago

Try this:

createLayoutNode: ( levelSelectionButtons: LevelSelectionButton[] ) => {
  assert && assert( levelSelectionButtons.length === 4, 'this is hardcoded for 4 buttons' );
  return new VBox( {
    children: [
      new HBox( { children: [ levelSelectionButtons[0],  levelSelectionButtons[1] } ),
      new HBox( { children: [ levelSelectionButtons[2],  levelSelectionButtons[3] } )
    ]
  } );
};

... and if that gives the desired behavior, then make it less hardcoded as you prefer -- either a specific number of rows or columns. And decide what to do when levelSelectionButtons.length is odd.

chrisklus commented 1 year ago

The snippet in https://github.com/phetsims/number-play/issues/184#issuecomment-1226470463 has been working great. Given that this sim is very behind schedule and the number of game levels is not going to change anytime soon, I don't think it's worth the time and complexity to make it more general. I have an assertion for the number of levels and the current layout is very readable and clear the way it is. Closing.