Create Compare Screen (populated with existing components)

[zepumph]

From https://docs.google.com/document/d/1XH0LhgFuor4dfc0gfF96Ao-qk7771vRLn53jQplDe0I/edit#heading=h.53jt3te8wd42

[zepumph]

• From Updates to preference for percentageSubmergedVisible buoyancy#126 (comment), percent submerged panel should default to closed.

[zepumph]

Working on this now.

[zepumph]

Still TODO (maybe separate issues?):

• Block material textures
• Component number control (mass/volume/density).
  • TODO how should the other two entities change when changing the slider?
• Do we need to say "Blocks" in the "same" radio buttons panel? We don't in other sims.
• Many more details that aren't captured from the screen shot in the design doc!

[zepumph]

getting us started on the number control. This has an infinite loop.

Subject: [PATCH] add assertion, https://github.com/phetsims/mean-share-and-balance/issues/204
---
Index: js/buoyancy-basics/view/BuoyancyBasicsCompareScreenView.ts
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
diff --git a/js/buoyancy-basics/view/BuoyancyBasicsCompareScreenView.ts b/js/buoyancy-basics/view/BuoyancyBasicsCompareScreenView.ts
--- a/js/buoyancy-basics/view/BuoyancyBasicsCompareScreenView.ts	(revision a708cd79884565c5a1a1861e8ec6b923b02931d3)
+++ b/js/buoyancy-basics/view/BuoyancyBasicsCompareScreenView.ts	(date 1714598380006)
@@ -34,6 +34,8 @@
 import ScaleHeightControl from '../../common/view/ScaleHeightControl.js';
 import smileWinkSolidShape from '../../../../sherpa/js/fontawesome-5/smileWinkSolidShape.js';
 import FluidsRadioButtonPanel from '../../buoyancy/view/FluidsRadioButtonPanel.js';
+import MaterialMassVolumeControlNode from '../../common/view/MaterialMassVolumeControlNode.js';
+import NumberControl from '../../../../scenery-phet/js/NumberControl.js';
 
 // constants
 const MARGIN = DensityBuoyancyCommonConstants.MARGIN;
@@ -164,7 +166,11 @@
     } );
 
     this.readoutPanelsVBox = new VBox( {
-      children: [ densityAccordionBox, submergedAccordionBox ],
+      children: [
+        new NumberControl( 'oh hello', model.sameMassProperty, model.sameMassProperty.range, MaterialMassVolumeControlNode.getNumberControlOptions() ),
+        densityAccordionBox,
+        submergedAccordionBox
+      ],
       spacing: MARGIN
     } );
     this.addChild( this.readoutPanelsVBox );
Index: js/buoyancy-basics/model/BuoyancyBasicsCompareModel.ts
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
diff --git a/js/buoyancy-basics/model/BuoyancyBasicsCompareModel.ts b/js/buoyancy-basics/model/BuoyancyBasicsCompareModel.ts
--- a/js/buoyancy-basics/model/BuoyancyBasicsCompareModel.ts	(revision a708cd79884565c5a1a1861e8ec6b923b02931d3)
+++ b/js/buoyancy-basics/model/BuoyancyBasicsCompareModel.ts	(date 1714598351355)
@@ -30,6 +30,7 @@
   public readonly percentageSubmergedExpandedProperty = new BooleanProperty( false );
   public readonly poolScaleHeightProperty: NumberProperty;
   public readonly poolScale: Scale;
+  public readonly sameMassProperty: NumberProperty;
 
   public constructor( providedOptions: BuoyancyBasicsCompareModelOptions ) {
     const tandem = providedOptions.tandem;
@@ -39,6 +40,13 @@
     const sameVolumeTandem = blockSetsTandem.createTandem( 'sameVolume' );
     const sameDensityTandem = blockSetsTandem.createTandem( 'sameDensity' );
 
+    const sameMassProperty = new NumberProperty( 5, {
+      range: new Range( 1, 10 )
+    } );
+    const sameVolumeProperty = new NumberProperty( 5, {
+      range: new Range( 1, 10 )
+    } );
+
     const options = optionize<BuoyancyBasicsCompareModelOptions, EmptySelfOptions, BlockSetModelOptions<BlockSet>>()( {
       initialMode: BlockSet.SAME_MASS,
       BlockSet: BlockSet.enumeration,
@@ -48,69 +56,72 @@
       usePoolScale: false, // create out own based on the ScaleHeightControl
 
       createMassesCallback: ( model, blockSet ) => {
-        switch( blockSet ) {
-          case BlockSet.SAME_MASS:
-            return [
-              Cube.createWithMass( model.engine,
-                Material.createCustomMaterial( {
-                  density: 500, // V=10L
-                  customColor: DensityBuoyancyCommonColors.compareRedColorProperty
-                } ), Vector2.ZERO, 5, {
-                  tandem: sameMassTandem.createTandem( 'blockA' ),
-                  adjustableMaterial: true,
-                  tag: MassTag.ONE_A.withColorProperty( MassTag.PRIMARY_COLOR_PROPERTY )
-                } ),
-              Cube.createWithMass( model.engine,
-                Material.createCustomMaterial( {
-                  density: 2500, // V=2L
-                  customColor: DensityBuoyancyCommonColors.compareBlueColorProperty
-                } ), Vector2.ZERO, 5, {
-                  tandem: sameMassTandem.createTandem( 'blockB' ),
-                  adjustableMaterial: true,
-                  tag: MassTag.ONE_B.withColorProperty( MassTag.SECONDARY_COLOR_PROPERTY )
-                } )
-            ];
-          case BlockSet.SAME_VOLUME:
-            return [
-              Cube.createWithVolume( model.engine, Material.createCustomMaterial( {
-                density: 400, // m=2kg
-                customColor: DensityBuoyancyCommonColors.compareRedColorProperty
-              } ), Vector2.ZERO, 0.005, {
-                tandem: sameVolumeTandem.createTandem( 'blockA' ),
-                adjustableMaterial: true,
-                tag: MassTag.TWO_A.withColorProperty( MassTag.PRIMARY_COLOR_PROPERTY )
-              } ),
-              Cube.createWithVolume( model.engine, Material.createCustomMaterial( {
-                density: 2000, // m=2kg
-                customColor: DensityBuoyancyCommonColors.compareBlueColorProperty
-              } ), Vector2.ZERO, 0.005, {
-                tandem: sameVolumeTandem.createTandem( 'blockB' ),
-                adjustableMaterial: true,
-                tag: MassTag.TWO_B.withColorProperty( MassTag.SECONDARY_COLOR_PROPERTY )
-              } )
-            ];
-          case BlockSet.SAME_DENSITY:
-            return [
-              Cube.createWithMass( model.engine, Material.createCustomMaterial( {
-                density: 400, // V=5L
-                customColor: DensityBuoyancyCommonColors.compareRedColorProperty
-              } ), Vector2.ZERO, 2, {
-                tandem: sameDensityTandem.createTandem( 'blockA' ),
-                adjustableMaterial: true,
-                tag: MassTag.THREE_A.withColorProperty( MassTag.PRIMARY_COLOR_PROPERTY )
-              } ),
-              Cube.createWithMass( model.engine, Material.createCustomMaterial( {
-                density: 400, // V=10L
-                customColor: DensityBuoyancyCommonColors.compareBlueColorProperty
-              } ), Vector2.ZERO, 4, {
-                tandem: sameDensityTandem.createTandem( 'blockB' ),
-                adjustableMaterial: true,
-                tag: MassTag.THREE_B.withColorProperty( MassTag.SECONDARY_COLOR_PROPERTY )
-              } )
-            ];
-          default:
-            throw new Error( `unknown blockSet: ${blockSet}` );
-        }
+        if ( blockSet === BlockSet.SAME_MASS ) {
+
+          const blockA = new Cube( model.engine, 1, {
+            adjustVolumeOnMassChanged: true,
+            material: Material.createCustomMaterial( {
+              density: 500, // V=10L
+              customColor: DensityBuoyancyCommonColors.compareRedColorProperty
+            } ),
+            tandem: sameMassTandem.createTandem( 'blockA' ),
+            tag: MassTag.ONE_A.withColorProperty( MassTag.PRIMARY_COLOR_PROPERTY )
+          } );
+          const blockB = new Cube( model.engine, 1, {
+            adjustVolumeOnMassChanged: true,
+            material: Material.createCustomMaterial( {
+              density: 2500, // V=2L
+              customColor: DensityBuoyancyCommonColors.compareBlueColorProperty
+            } ),
+            tandem: sameMassTandem.createTandem( 'blockB' ),
+            tag: MassTag.ONE_B.withColorProperty( MassTag.SECONDARY_COLOR_PROPERTY )
+          } );
+          sameMassProperty.link( mass => {
+            blockA.massProperty.value = mass;
+            blockB.massProperty.value = mass;
+          } );
+          return [
+            blockA,
+            blockB
+          ];
+        }
+        else if ( blockSet === BlockSet.SAME_VOLUME ) {
+          return [
+            Cube.createWithVolume( model.engine, Material.createCustomMaterial( {
+              density: 400, // m=2kg
+              customColor: DensityBuoyancyCommonColors.compareRedColorProperty
+            } ), Vector2.ZERO, 0.005, {
+              tandem: sameVolumeTandem.createTandem( 'blockA' ),
+              tag: MassTag.TWO_A.withColorProperty( MassTag.PRIMARY_COLOR_PROPERTY )
+            } ),
+            Cube.createWithVolume( model.engine, Material.createCustomMaterial( {
+              density: 2000, // m=2kg
+              customColor: DensityBuoyancyCommonColors.compareBlueColorProperty
+            } ), Vector2.ZERO, 0.005, {
+              tandem: sameVolumeTandem.createTandem( 'blockB' ),
+              tag: MassTag.TWO_B.withColorProperty( MassTag.SECONDARY_COLOR_PROPERTY )
+            } )
+          ];
+        }
+        else if ( blockSet === BlockSet.SAME_DENSITY ) {
+          return [
+            Cube.createWithMass( model.engine, Material.createCustomMaterial( {
+              density: 400, // V=5L
+              customColor: DensityBuoyancyCommonColors.compareRedColorProperty
+            } ), Vector2.ZERO, 2, {
+              tandem: sameDensityTandem.createTandem( 'blockA' ),
+              tag: MassTag.THREE_A.withColorProperty( MassTag.PRIMARY_COLOR_PROPERTY )
+            } ),
+            Cube.createWithMass( model.engine, Material.createCustomMaterial( {
+              density: 400, // V=10L
+              customColor: DensityBuoyancyCommonColors.compareBlueColorProperty
+            } ), Vector2.ZERO, 4, {
+              tandem: sameDensityTandem.createTandem( 'blockB' ),
+              tag: MassTag.THREE_B.withColorProperty( MassTag.SECONDARY_COLOR_PROPERTY )
+            } )
+          ];
+        }
+        throw new Error( `unknown blockSet: ${blockSet}` );
       },
 
       regenerateMassesCallback: ( model, blockSet, masses ) => {
@@ -139,6 +150,8 @@
 
     super( options );
 
+    this.sameMassProperty = sameMassProperty;
+
     // Left scale
     this.availableMasses.push( new Scale( this.engine, this.gravityProperty, {
       matrix: Matrix3.translation( -0.77, -Scale.SCALE_BASE_BOUNDS.minY ),

[zepumph]

I see only two checkboxes still to do above. Getting close!

[AgustinVallejo]

Taking control of this vessel now

[AgustinVallejo]

Passing back for review by @DianaTavares

[zepumph]

From discussion with @DianaTavares and @samreid

• Let's make the red block yellow
• The home screen icon block colors should match the colors of the actual blocks (yellow and blue)
• The opacity of honey should be changed (for all sims) for better contrast with the contact force vector. Opacity should be .5 (currently .65)

[samreid]

@AgustinVallejo and I started working on this and have a few questions:

1. We saw that there is a red block on Buoyancy's Lab screen, and it also shows a pink arrow on a red block for Material O:

Should this block color be changed?

2. We observed that the contact force is orange-yellowish and we are wondering if it will have the same problem (difficult to see the arrow) when we switch to a yellow block. See the image above.

[zepumph]

Let's hear from @DianaTavares, but the B:B compare screen is a bit different because that red color changes based on the density, so it can get darker, and quite a bit closer to the pink color. Not sure if that is enough of an excuse though.

[AgustinVallejo]

After talking to @DianaTavares we decided to try with a green or yellow. I added this ocre, which for the default state allows a decent visibility of the arrows. Please let me know if I should push this color change.

[AgustinVallejo]

Discussed with @DianaTavares internally and she aproved the changes :) Closing