From 84ff1c618031e681cbe46804a59fe01af45d0c9b Mon Sep 17 00:00:00 2001
From: jbphet <jpblanco@yahoo.com>
Date: Fri, 17 Jan 2025 08:46:36 -0700
Subject: [PATCH] add color and new captions for button for controlling
 observations, see https://github.com/phetsims/quantum-measurement/issues/80

---
 .../view/BlochSphereMeasurementArea.ts        | 29 ++++++++++++++++---
 1 file changed, 25 insertions(+), 4 deletions(-)

diff --git a/js/bloch-sphere/view/BlochSphereMeasurementArea.ts b/js/bloch-sphere/view/BlochSphereMeasurementArea.ts
index 5065347..4ac7b80 100644
--- a/js/bloch-sphere/view/BlochSphereMeasurementArea.ts
+++ b/js/bloch-sphere/view/BlochSphereMeasurementArea.ts
@@ -204,15 +204,36 @@ export default class BlochSphereMeasurementArea extends Node {
       ]
     } ), QuantumMeasurementConstants.panelOptions );
 
+    // Define a DerivedStringProperty for the label that will appear on the button.
     const prepareObserveButtonTextProperty = new DerivedStringProperty(
       [
         model.measurementStateProperty,
+        model.magneticFieldEnabledProperty,
         QuantumMeasurementStrings.startStringProperty,
+        QuantumMeasurementStrings.observeStringProperty,
         QuantumMeasurementStrings.reprepareStringProperty
       ],
-      ( measurementState, startString, reprepareString ) => measurementState === 'observed' ?
-                                                            reprepareString :
-                                                            startString
+      ( measurementState, magneticFieldEnabled, startString, observeString, reprepareString ) => {
+        let buttonText = '';
+        if ( measurementState === 'observed' ) {
+          buttonText = reprepareString;
+        }
+        else if ( magneticFieldEnabled ) {
+          buttonText = startString;
+        }
+        else {
+          buttonText = observeString;
+        }
+        return buttonText;
+      }
+    );
+
+    // Define a derived Property for the color of the button, which changes based on the measurement state.
+    const prepareObserveButtonColorProperty = new DerivedProperty(
+      [ model.measurementStateProperty ],
+      measurementState => measurementState === 'observed' ?
+                          QuantumMeasurementColors.experimentButtonColorProperty.value :
+                          QuantumMeasurementColors.startMeasurementButtonColorProperty.value
     );
 
     const prepareObserveButton = new TextPushButton(
@@ -226,7 +247,7 @@ export default class BlochSphereMeasurementArea extends Node {
             model.reprepare();
           }
         },
-        baseColor: QuantumMeasurementColors.experimentButtonColorProperty,
+        baseColor: prepareObserveButtonColorProperty,
         font: new PhetFont( 18 ),
         enabledProperty: DerivedProperty.valueNotEqualsConstant( model.measurementStateProperty, 'timingObservation' ),
         xMargin: 20,