add strings, placeholder layout for 2nd screen, see #52

phetsims · Oct 11, 2024 · 209b7e2 · 209b7e2
1 parent 2b7c513
commit 209b7e2
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 12 deletions.
diff --git a/js/QuantumMeasurementStrings.ts b/js/QuantumMeasurementStrings.ts
@@ -21,11 +21,14 @@ type StringsType = {
   };
   'coinStringProperty': LocalizedStringProperty;
   'coinBiasStringProperty': LocalizedStringProperty;
+  'customStringProperty': LocalizedStringProperty;
   'downStringProperty': LocalizedStringProperty;
   'flipStringProperty': LocalizedStringProperty;
   'flipAndRevealStringProperty': LocalizedStringProperty;
+  'fortyFiveDegreesStringProperty': LocalizedStringProperty;
   'headsStringProperty': LocalizedStringProperty;
   'hideStringProperty': LocalizedStringProperty;
+  'horizontalStringProperty': LocalizedStringProperty;
   'identicalCoinsStringProperty': LocalizedStringProperty;
   'initialOrientationStringProperty': LocalizedStringProperty;
   'basisStateStringProperty': LocalizedStringProperty;
@@ -34,6 +37,7 @@ type StringsType = {
   'multipleCoinMeasurementsStringProperty': LocalizedStringProperty;
   'newCoinStringProperty': LocalizedStringProperty;
   'observeStringProperty': LocalizedStringProperty;
+  'photonPolarizationAngleStringProperty': LocalizedStringProperty;
   'classicalCoinStringProperty': LocalizedStringProperty;
   'preparedStateStringProperty': LocalizedStringProperty;
   'probabilityStringProperty': LocalizedStringProperty;
@@ -48,6 +52,7 @@ type StringsType = {
   'stateToPrepareStringProperty': LocalizedStringProperty;
   'tailsStringProperty': LocalizedStringProperty;
   'upStringProperty': LocalizedStringProperty;
+  'verticalStringProperty': LocalizedStringProperty;
 };
 
 const QuantumMeasurementStrings = getStringModule( 'QUANTUM_MEASUREMENT' ) as StringsType;

diff --git a/js/photons/view/PhotonsExperimentSceneView.ts b/js/photons/view/PhotonsExperimentSceneView.ts
@@ -6,28 +6,44 @@
  * @author John Blanco, PhET Interactive Simulations
  */
 
-import Vector2 from '../../../../dot/js/Vector2.js';
 import optionize, { EmptySelfOptions } from '../../../../phet-core/js/optionize.js';
 import WithRequired from '../../../../phet-core/js/types/WithRequired.js';
-import { Node, NodeOptions, Rectangle } from '../../../../scenery/js/imports.js';
+import { Color, HBox, HBoxOptions, Rectangle } from '../../../../scenery/js/imports.js';
 import quantumMeasurement from '../../quantumMeasurement.js';
 import PhotonsExperimentSceneModel from '../model/PhotonsExperimentSceneModel.js';
 
 type SelfOptions = EmptySelfOptions;
-type PhotonsExperimentSceneViewOptions = SelfOptions & WithRequired<NodeOptions, 'tandem'>;
+type PhotonsExperimentSceneViewOptions = SelfOptions & WithRequired<HBoxOptions, 'tandem'>;
 
-export default class PhotonsExperimentSceneView extends Node {
+export default class PhotonsExperimentSceneView extends HBox {
 
   public constructor( model: PhotonsExperimentSceneModel, providedOptions: PhotonsExperimentSceneViewOptions ) {
 
-    const testRect = new Rectangle( 0, 0, 700, 500, {
-      fill: 'lightBlue',
-      stroke: 'darkBlue',
-      center: Vector2.ZERO
+    // TODO: This set of rectangles is a placeholder for working on layout, see https://github.com/phetsims/quantum-measurement/issues/52
+    const testRectHeight = 510;
+    const testRect1 = new Rectangle( 0, 0, 220, testRectHeight, {
+      fill: new Color( '#C35985' ),
+      stroke: new Color( '#C35985' ).darkerColor( 0.5 )
+    } );
+    const testRect2 = new Rectangle( 0, 0, 370, testRectHeight, {
+      fill: new Color( '#947A0C' ),
+      stroke: new Color( '#947A0C' ).darkerColor( 0.5 ),
+      lineWidth: 2
+    } );
+    const testRect3 = new Rectangle( 0, 0, 180, testRectHeight, {
+      fill: new Color( '#44673A' ),
+      stroke: new Color( '#44673A' ).darkerColor( 0.5 ),
+      lineWidth: 2
+    } );
+    const testRect4 = new Rectangle( 0, 0, 210, testRectHeight, {
+      fill: new Color( '#E8AA93' ),
+      stroke: new Color( '#E8AA93' ).darkerColor( 0.5 ),
+      lineWidth: 2
     } );
 
-    const options = optionize<PhotonsExperimentSceneViewOptions, SelfOptions, NodeOptions>()( {
-      children: [ testRect ]
+    const options = optionize<PhotonsExperimentSceneViewOptions, SelfOptions, HBoxOptions>()( {
+      children: [ testRect1, testRect2, testRect3, testRect4 ],
+      spacing: 3
     }, providedOptions );
 
     super( options );

diff --git a/js/photons/view/PhotonsScreenView.ts b/js/photons/view/PhotonsScreenView.ts
@@ -38,15 +38,17 @@ export default class PhotonsScreenView extends QuantumMeasurementScreenView {
         [ model.experimentModeProperty ],
         experimentMode => experimentMode === 'singlePhoton'
       ),
-      center: ScreenView.DEFAULT_LAYOUT_BOUNDS.center,
+      centerX: ScreenView.DEFAULT_LAYOUT_BOUNDS.centerX,
+      bottom: ScreenView.DEFAULT_LAYOUT_BOUNDS.height - 15,
       tandem: tandem.createTandem( 'singlePhotonExperimentSceneView' )
     } );
     const manyPhotonExperimentSceneView = new PhotonsExperimentSceneView( model.manyPhotonsExperimentSceneModel, {
       visibleProperty: new DerivedProperty(
         [ model.experimentModeProperty ],
         experimentMode => experimentMode === 'manyPhotons'
       ),
-      center: ScreenView.DEFAULT_LAYOUT_BOUNDS.center.plusXY( 5, 5 ),
+      centerX: ScreenView.DEFAULT_LAYOUT_BOUNDS.centerX + 2,
+      bottom: ScreenView.DEFAULT_LAYOUT_BOUNDS.height - 13,
       tandem: tandem.createTandem( 'manyPhotonExperimentSceneView' )
     } );
 

diff --git a/quantum-measurement-strings_en.json b/quantum-measurement-strings_en.json
@@ -20,6 +20,9 @@
   "coinBias": {
     "value": "Coin Bias (State)"
   },
+  "custom": {
+    "value": "custom"
+  },
   "down": {
     "value": "Down"
   },
@@ -29,12 +32,18 @@
   "flipAndReveal": {
     "value": "Flip and Reveal"
   },
+  "fortyFiveDegrees": {
+    "value": "45 degrees"
+  },
   "heads": {
     "value": "Heads"
   },
   "hide": {
     "value": "Hide"
   },
+  "horizontal": {
+    "value": "Horizontal"
+  },
   "identicalCoins": {
     "value": "Identical Coins"
   },
@@ -59,6 +68,9 @@
   "observe": {
     "value": "Observe"
   },
+  "photonPolarizationAngle": {
+    "value": "Photon Polarization Angle"
+  },
   "classicalCoin": {
     "value": "Classical Coin"
   },
@@ -100,5 +112,8 @@
   },
   "up": {
     "value": "Up"
+  },
+  "vertical": {
+    "value": "Vertical"
   }
 }