diff --git a/js/coins/view/MultiCoinTestBox.ts b/js/coins/view/MultiCoinTestBox.ts index 3629b83..c001f2c 100644 --- a/js/coins/view/MultiCoinTestBox.ts +++ b/js/coins/view/MultiCoinTestBox.ts @@ -28,7 +28,7 @@ import SmallCoinNode, { SmallCoinDisplayMode } from './SmallCoinNode.js'; type SelfOptions = EmptySelfOptions; export type MultiCoinTestBoxOptions = SelfOptions & WithRequired; -// constants TODO: Colors https://github.com/phetsims/quantum-measurement/issues/49 +// constants const BOX_SIZE = new Dimension2( 200, 200 ); const TEST_BOX_CONTENTS_HIDDEN_FILL = new LinearGradient( 0, 0, BOX_SIZE.width, 0 ) .addColorStop( 0, quantumMeasurementColors.multiCoinFirstGradientColorProperty ) diff --git a/js/coins/view/OutcomeProbabilityControl.ts b/js/coins/view/OutcomeProbabilityControl.ts index f77611f..b7872ac 100644 --- a/js/coins/view/OutcomeProbabilityControl.ts +++ b/js/coins/view/OutcomeProbabilityControl.ts @@ -11,6 +11,7 @@ import DerivedProperty from '../../../../axon/js/DerivedProperty.js'; import DerivedStringProperty from '../../../../axon/js/DerivedStringProperty.js'; +import Multilink from '../../../../axon/js/Multilink.js'; import NumberProperty from '../../../../axon/js/NumberProperty.js'; import Utils from '../../../../dot/js/Utils.js'; import optionize, { EmptySelfOptions } from '../../../../phet-core/js/optionize.js'; @@ -19,29 +20,25 @@ import StringUtils from '../../../../phetcommon/js/util/StringUtils.js'; import PhetFont from '../../../../scenery-phet/js/PhetFont.js'; import { Node, RichText, Text, VBox, VBoxOptions } from '../../../../scenery/js/imports.js'; import { SystemType } from '../../common/model/SystemType.js'; +import QuantumMeasurementColors from '../../common/QuantumMeasurementColors.js'; import QuantumMeasurementConstants from '../../common/QuantumMeasurementConstants.js'; import quantumMeasurement from '../../quantumMeasurement.js'; import QuantumMeasurementStrings from '../../QuantumMeasurementStrings.js'; +import ProbabilityEquationsNode from './ProbabilityEquationsNode.js'; import ProbabilityValueControl from './ProbabilityValueControl.js'; type SelfOptions = EmptySelfOptions; type OutcomeProbabilityControlOptions = SelfOptions & PickRequired; -// TODO: Include color into the span https://github.com/phetsims/quantum-measurement/issues/49 -// constants -const MAGENTA_SPAN = ( text: string ) => `${text}`; +// constants that don't rely on systemType for the color const TITLE_AND_LABEL_FONT = new PhetFont( 16 ); const ALPHA = QuantumMeasurementConstants.ALPHA; const BETA = QuantumMeasurementConstants.BETA; const UP = QuantumMeasurementConstants.SPIN_UP_ARROW_CHARACTER; const DOWN = QuantumMeasurementConstants.SPIN_DOWN_ARROW_CHARACTER; const KET = QuantumMeasurementConstants.KET; -const BRA_KET_TITLE_STRING = `( ${ALPHA}|${UP}${KET} + ${MAGENTA_SPAN( BETA )}|${MAGENTA_SPAN( DOWN )}${KET} )`; - const MAGNITUDE_OF_ALPHA_SQUARED = `|${ALPHA}|2`; -const MAGNITUDE_OF_BETA_SQUARED = MAGENTA_SPAN( `|${BETA}|2` ); - export default class OutcomeProbabilityControl extends VBox { @@ -49,6 +46,26 @@ export default class OutcomeProbabilityControl extends VBox { outcomeProbabilityProperty: NumberProperty, providedOptions: OutcomeProbabilityControlOptions ) { + let COLOR_SPAN: ( text: string ) => string = text => text; + + let BRA_KET_TITLE_STRING = `( ${ALPHA}|${UP}${KET} + ${COLOR_SPAN( BETA )}|${COLOR_SPAN( DOWN )}${KET} )`; + let MAGNITUDE_OF_BETA_SQUARED = COLOR_SPAN( `|${BETA}|2` ); + + Multilink.multilink( + [ + QuantumMeasurementColors.tailsColorProperty, + QuantumMeasurementColors.downColorProperty + ], + ( tailsColor, downColor ) => { + COLOR_SPAN = ( text: string ) => { + return ProbabilityEquationsNode.COLOR_SPAN( text, systemType === 'classical' ? tailsColor : downColor ); + }; + BRA_KET_TITLE_STRING = `( ${ALPHA}|${UP}${KET} + ${COLOR_SPAN( BETA )}|${COLOR_SPAN( DOWN )}${KET} )`; + MAGNITUDE_OF_BETA_SQUARED = COLOR_SPAN( `|${BETA}|2` ); + } + ); + + let title: Node; if ( systemType === 'classical' ) { title = new Text( QuantumMeasurementStrings.coinBiasStringProperty, { @@ -58,7 +75,11 @@ export default class OutcomeProbabilityControl extends VBox { } else { const titleStringProperty = new DerivedStringProperty( - [ QuantumMeasurementStrings.stateToPrepareStringProperty ], + [ + QuantumMeasurementStrings.stateToPrepareStringProperty, + QuantumMeasurementColors.tailsColorProperty, + QuantumMeasurementColors.downColorProperty + ], stateToPrepareString => `${stateToPrepareString} ${BRA_KET_TITLE_STRING}` ); title = new RichText( titleStringProperty, { @@ -96,9 +117,11 @@ export default class OutcomeProbabilityControl extends VBox { const classicalDownTitleProperty = new DerivedProperty( [ QuantumMeasurementStrings.probabilityStringProperty, - QuantumMeasurementStrings.probabilityOfValuePatternStringProperty + QuantumMeasurementStrings.probabilityOfValuePatternStringProperty, + QuantumMeasurementColors.tailsColorProperty, + QuantumMeasurementColors.downColorProperty ], ( probabilityString, probabilityOfValuePatternString ) => { - const POfV = StringUtils.fillIn( probabilityOfValuePatternString, { value: MAGENTA_SPAN( `${QuantumMeasurementConstants.CLASSICAL_DOWN_SYMBOL}` ) } ); + const POfV = StringUtils.fillIn( probabilityOfValuePatternString, { value: COLOR_SPAN( `${QuantumMeasurementConstants.CLASSICAL_DOWN_SYMBOL}` ) } ); return `${probabilityString} ${POfV}`; } ); @@ -114,9 +137,11 @@ export default class OutcomeProbabilityControl extends VBox { const quantumDownTitleProperty = new DerivedProperty( [ QuantumMeasurementStrings.probabilityStringProperty, - QuantumMeasurementStrings.probabilityOfValuePatternStringProperty + QuantumMeasurementStrings.probabilityOfValuePatternStringProperty, + QuantumMeasurementColors.tailsColorProperty, + QuantumMeasurementColors.downColorProperty ], ( probabilityString, probabilityOfValuePatternString ) => { - const POfV = StringUtils.fillIn( probabilityOfValuePatternString, { value: MAGENTA_SPAN( `${QuantumMeasurementConstants.SPIN_DOWN_ARROW_CHARACTER}` ) } ); + const POfV = StringUtils.fillIn( probabilityOfValuePatternString, { value: COLOR_SPAN( `${QuantumMeasurementConstants.SPIN_DOWN_ARROW_CHARACTER}` ) } ); return `${probabilityString} ${POfV} = ${MAGNITUDE_OF_BETA_SQUARED}`; } ); @@ -141,12 +166,16 @@ export default class OutcomeProbabilityControl extends VBox { // There is an additional child node in the quantum case that shows the quantum state and updates dynamically. const quantumStateReadoutStringProperty = new DerivedProperty( - [ outcomeProbabilityProperty ], + [ + outcomeProbabilityProperty, + QuantumMeasurementColors.tailsColorProperty, + QuantumMeasurementColors.downColorProperty + ], outcomeProbability => { const alphaValue = Utils.toFixed( Math.sqrt( outcomeProbability ), 3 ); const betaValue = Utils.toFixed( Math.sqrt( 1 - outcomeProbability ), 3 ); - return `${alphaValue}|${UP}${KET} + ${MAGENTA_SPAN( betaValue )}|${MAGENTA_SPAN( DOWN )}${KET}`; + return `${alphaValue}|${UP}${KET} + ${COLOR_SPAN( betaValue )}|${COLOR_SPAN( DOWN )}${KET}`; } ); diff --git a/js/coins/view/ProbabilityEquationsNode.ts b/js/coins/view/ProbabilityEquationsNode.ts index 9904b26..5eaf23b 100644 --- a/js/coins/view/ProbabilityEquationsNode.ts +++ b/js/coins/view/ProbabilityEquationsNode.ts @@ -12,22 +12,25 @@ import DerivedProperty from '../../../../axon/js/DerivedProperty.js'; import TReadOnlyProperty from '../../../../axon/js/TReadOnlyProperty.js'; import Utils from '../../../../dot/js/Utils.js'; import PhetFont from '../../../../scenery-phet/js/PhetFont.js'; -import { RichText } from '../../../../scenery/js/imports.js'; +import { Color, RichText } from '../../../../scenery/js/imports.js'; import { SystemType } from '../../common/model/SystemType.js'; +import QuantumMeasurementColors from '../../common/QuantumMeasurementColors.js'; import QuantumMeasurementConstants from '../../common/QuantumMeasurementConstants.js'; import quantumMeasurement from '../../quantumMeasurement.js'; export default class ProbabilityEquationsNode extends RichText { public constructor( biasProperty: TReadOnlyProperty, systemType: SystemType ) { - const equationsStringProperty = new DerivedProperty( [ biasProperty ], bias => { - - // TODO: Include color into the span https://github.com/phetsims/quantum-measurement/issues/49 - + const equationsStringProperty = new DerivedProperty( [ + biasProperty, + QuantumMeasurementColors.tailsColorProperty, + QuantumMeasurementColors.downColorProperty + ], ( bias, tailsColor, downColor ) => { const upperFunctionParameter = systemType === 'classical' ? QuantumMeasurementConstants.CLASSICAL_UP_SYMBOL : QuantumMeasurementConstants.SPIN_UP_ARROW_CHARACTER; const lowerFunctionParameter = systemType === 'classical' ? QuantumMeasurementConstants.CLASSICAL_DOWN_SYMBOL : QuantumMeasurementConstants.SPIN_DOWN_ARROW_CHARACTER; const upperEquation = `P(${upperFunctionParameter}) = ${Utils.toFixed( bias, 2 )}`; - const lowerEquation = `P(${lowerFunctionParameter}) = ${Utils.toFixed( 1 - bias, 2 )}`; + const COLOR_SPAN = ( text: string ) => ProbabilityEquationsNode.COLOR_SPAN( text, systemType === 'classical' ? tailsColor : downColor ); + const lowerEquation = `P(${COLOR_SPAN( lowerFunctionParameter )}) = ${COLOR_SPAN( Utils.toFixed( 1 - bias, 2 ) )}`; return `${upperEquation}
${lowerEquation}`; } ); @@ -36,6 +39,10 @@ export default class ProbabilityEquationsNode extends RichText { leading: 7 } ); } + + public static COLOR_SPAN( text: string, color: Color ): string { + return `${text}`; + } } quantumMeasurement.register( 'ProbabilityEquationsNode', ProbabilityEquationsNode ); \ No newline at end of file