Skip to content

Commit

Permalink
Refactor super constructor to children, see: #44
Browse files Browse the repository at this point in the history
  • Loading branch information
marlitas committed Aug 26, 2022
1 parent 90a36a0 commit f8f65ed
Showing 1 changed file with 47 additions and 40 deletions.
87 changes: 47 additions & 40 deletions js/intro/view/IntroScreenView.ts
Original file line number Diff line number Diff line change
Expand Up @@ -26,12 +26,13 @@ import ABSwitch from '../../../../sun/js/ABSwitch.js';
import Dimension2 from '../../../../dot/js/Dimension2.js';
import ValveNode from './ValveNode.js';
import TableNode from './TableNode.js';
import { ScreenViewOptions } from '../../../../joist/js/ScreenView.js';
import { combineOptions } from '../../../../phet-core/js/optionize.js';


type LevelingOutScreenViewOptions = MeanShareAndBalanceScreenViewOptions;

export default class IntroScreenView extends MeanShareAndBalanceScreenView {
private readonly pipeNodes: PipeNode[];
public readonly predictMeanVisibleProperty: Property<boolean>;
public readonly meanVisibleProperty: Property<boolean>;
public readonly tickMarksVisibleProperty: Property<boolean>;
Expand All @@ -40,35 +41,32 @@ export default class IntroScreenView extends MeanShareAndBalanceScreenView {
public constructor( model: IntroModel, providedOptions: LevelingOutScreenViewOptions ) {

const options = providedOptions;
super( model, meanShareAndBalanceStrings.introQuestionProperty, MeanShareAndBalanceColors.introQuestionBarColorProperty, model.numberOfCupsProperty, options );

this.predictMeanVisibleProperty = new BooleanProperty( false, {
const predictMeanVisibleProperty = new BooleanProperty( false, {
// phet-io
tandem: options.tandem.createTandem( 'predictMeanVisibleProperty' )
} );
this.meanVisibleProperty = new BooleanProperty( false, {
const meanVisibleProperty = new BooleanProperty( false, {
// phet-io
tandem: options.tandem.createTandem( 'meanVisibleProperty' )
} );
this.tickMarksVisibleProperty = new BooleanProperty( false, {
const tickMarksVisibleProperty = new BooleanProperty( false, {
// phet-io
tandem: options.tandem.createTandem( 'tickMarksVisibleProperty' )
} );
this.cupLevelVisibleProperty = new BooleanProperty( false, {
const cupLevelVisibleProperty = new BooleanProperty( false, {
// phet-io
tandem: options.tandem.createTandem( 'cupLevelVisibleProperty' )
} );
const modelViewTransform2DCups = ModelViewTransform2.createSinglePointScaleInvertedYMapping( new Vector2( 0, 0 ), new Vector2( 0, MeanShareAndBalanceConstants.CUPS_2D_CENTER_Y ), MeanShareAndBalanceConstants.CUP_HEIGHT );
const modelViewTransform3DCups = ModelViewTransform2.createSinglePointScaleInvertedYMapping( new Vector2( 0, 0 ), new Vector2( 0, MeanShareAndBalanceConstants.CUPS_3D_CENTER_Y ), MeanShareAndBalanceConstants.CUP_HEIGHT );

model.numberOfCupsProperty.lazyLink( () => this.interruptSubtreeInput );

//Predict Mean Line that acts as a slider for alternative input.
const predictMeanSlider = new PredictMeanSlider(
model.meanPredictionProperty, model.dragRange,
model.numberOfCupsProperty, () => model.getActive2DCups(),
modelViewTransform2DCups, {
visibleProperty: this.predictMeanVisibleProperty,
visibleProperty: predictMeanVisibleProperty,
valueProperty: model.meanPredictionProperty,

// Constant range
Expand All @@ -85,62 +83,66 @@ export default class IntroScreenView extends MeanShareAndBalanceScreenView {
excludeInvisibleChildrenFromBounds: true
} );

// 2D/3D water cup nodes addition and removal
// Center 2D & 3D cups
const checkboxGroupWidthOffset = ( MeanShareAndBalanceConstants.MAX_CONTROLS_TEXT_WIDTH + MeanShareAndBalanceConstants.CONTROLS_HORIZONTAL_MARGIN ) / 2;
const cupsAreaCenterX = this.layoutBounds.centerX - checkboxGroupWidthOffset;
const centerWaterCupLayerNode = () => {
waterCupLayerNode.centerX = cupsAreaCenterX;
predictMeanSlider.x = waterCupLayerNode.x - 12.5;
};
// Configure layout

// Pipe toggle
const pipeSwitch = new ABSwitch( model.arePipesOpenProperty,
false, new ValveNode( new Vector2( 0, 0 ), new Property( 0 ), options.tandem.createTandem( 'closedValveIcon' ) ),
true, new ValveNode( new Vector2( 0, 0 ), new Property( Math.PI / 2 ), options.tandem.createTandem( 'openValveIcon' ) ), {
toggleSwitchOptions: {
size: new Dimension2( 40, 20 )
},

// phet-io
tandem: options.tandem.createTandem( 'pipeSwitch' )
} );

const tableNode = new TableNode( { centerX: 6, y: 200 } );

const combinedOptions = combineOptions<ScreenViewOptions>( { children: [ tableNode, waterCupLayerNode, predictMeanSlider ] }, options );

super( model, meanShareAndBalanceStrings.introQuestionProperty, MeanShareAndBalanceColors.introQuestionBarColorProperty, model.numberOfCupsProperty, combinedOptions );

// add all cup nodes to the view
model.waterCup2DArray.forEach( ( cupModel, index ) => {
const cupNode = new WaterCup2DNode( cupModel, model.waterCup3DArray[ index ], modelViewTransform2DCups, model.meanProperty, this.tickMarksVisibleProperty,
this.meanVisibleProperty, this.cupLevelVisibleProperty, { tandem: options.tandem.createTandem( `waterCup2DNode${cupModel.linePlacement}` ) } );
const cupNode = new WaterCup2DNode( cupModel, model.waterCup3DArray[ index ], modelViewTransform2DCups, model.meanProperty, tickMarksVisibleProperty,
meanVisibleProperty, cupLevelVisibleProperty, { tandem: options.tandem.createTandem( `waterCup2DNode${cupModel.linePlacement}` ) } );
waterCupLayerNode.addChild( cupNode );
centerWaterCupLayerNode();
} );

model.waterCup3DArray.forEach( cupModel => {
const cupNode = new WaterCup3DNode( this.tickMarksVisibleProperty, model, cupModel, modelViewTransform3DCups, {
const cupNode = new WaterCup3DNode( tickMarksVisibleProperty, model, cupModel, modelViewTransform3DCups, {
tandem: options.tandem.createTandem( `waterCup3DNode${cupModel.linePlacement}` )
} );
waterCupLayerNode.addChild( cupNode );
centerWaterCupLayerNode();
} );

this.pipeNodes = model.pipeArray.map( pipeModel => {
model.pipeArray.map( pipeModel => {
const index = model.pipeArray.indexOf( pipeModel );
const pipeNode = new PipeNode( pipeModel, model.arePipesOpenProperty, modelViewTransform2DCups,
{ tandem: options.tandem.createTandem( `pipeNode${index}` ) } );
waterCupLayerNode.addChild( pipeNode );
return pipeNode;
} );

// Center waterCups as they are activated and de-activated
const checkboxGroupWidthOffset = ( MeanShareAndBalanceConstants.MAX_CONTROLS_TEXT_WIDTH + MeanShareAndBalanceConstants.CONTROLS_HORIZONTAL_MARGIN ) / 2;
const cupsAreaCenterX = this.layoutBounds.centerX - checkboxGroupWidthOffset;
const centerWaterCupLayerNode = () => {
waterCupLayerNode.centerX = cupsAreaCenterX;
predictMeanSlider.x = waterCupLayerNode.x - 12.5;
tableNode.centerX = waterCupLayerNode.centerX;
tableNode.y = waterCupLayerNode.y - 28;
};

model.numberOfCupsProperty.link( centerWaterCupLayerNode );
model.numberOfCupsProperty.lazyLink( () => this.interruptSubtreeInput );

// Configure layout
const controlPanel = new IntroControlPanel( this.tickMarksVisibleProperty, this.meanVisibleProperty, this.predictMeanVisibleProperty, this.cupLevelVisibleProperty, options.tandem );
const controlPanel = new IntroControlPanel( tickMarksVisibleProperty, meanVisibleProperty, predictMeanVisibleProperty, cupLevelVisibleProperty, options.tandem );
this.controlsVBox.addChild( controlPanel );

// Pipe toggle
const pipeSwitch = new ABSwitch( model.arePipesOpenProperty,
false, new ValveNode( new Vector2( 0, 0 ), new Property( 0 ), options.tandem.createTandem( 'closedValveIcon' ) ),
true, new ValveNode( new Vector2( 0, 0 ), new Property( Math.PI / 2 ), options.tandem.createTandem( 'openValveIcon' ) ), {
toggleSwitchOptions: {
size: new Dimension2( 40, 20 )
},

// phet-io
tandem: options.tandem.createTandem( 'pipeSwitch' )
} );
this.dataStateVBox.addChild( pipeSwitch );

this.addChild( new TableNode( { centerX: waterCupLayerNode.centerX - 6, y: waterCupLayerNode.bottom - 28 } ) );
this.addChild( waterCupLayerNode );
this.addChild( predictMeanSlider );

this.pdomPlayAreaNode.pdomOrder = [
waterCupLayerNode,
controlPanel,
Expand All @@ -150,6 +152,11 @@ export default class IntroScreenView extends MeanShareAndBalanceScreenView {
this.pdomControlAreaNode.pdomOrder = [
this.resetAllButton
];

this.predictMeanVisibleProperty = predictMeanVisibleProperty;
this.meanVisibleProperty = meanVisibleProperty;
this.tickMarksVisibleProperty = tickMarksVisibleProperty;
this.cupLevelVisibleProperty = cupLevelVisibleProperty;
}

public override reset(): void {
Expand Down

0 comments on commit f8f65ed

Please sign in to comment.