Add gradient background - see #7

js/common/ProjectileDataLabColors.ts

@@ -20,8 +20,12 @@ import projectileDataLab from '../projectileDataLab.js';
 const ProjectileDataLabColors = {
 
   // Background color for screens in this sim
-  screenBackgroundColorProperty: new ProfileColorProperty( projectileDataLab, 'background', {
-    default: 'white'
+  screenBackgroundTopColorProperty: new ProfileColorProperty( projectileDataLab, 'backgroundTop', {
+    default: '#15AFFF'
+  } ),
+
+  screenBackgroundBottomColorProperty: new ProfileColorProperty( projectileDataLab, 'backgroundBottom', {
+    default: '#B6D2FF'
   } )
 };
 

js/common/view/PDLScreenView.ts

@@ -11,10 +11,12 @@ import ScreenView, { ScreenViewOptions } from '../../../../joist/js/ScreenView.j
 import { EmptySelfOptions } from '../../../../phet-core/js/optionize.js';
 import projectileDataLab from '../../projectileDataLab.js';
 import ResetAllButton from '../../../../scenery-phet/js/buttons/ResetAllButton.js';
-import { ManualConstraint, Text } from '../../../../scenery/js/imports.js';
+import { LinearGradient, ManualConstraint, Node, Rectangle, Text } from '../../../../scenery/js/imports.js';
 import ProjectileDataLabConstants from '../ProjectileDataLabConstants.js';
 import TModel from '../../../../joist/js/TModel.js';
 import ProjectileDataLabStrings from '../../ProjectileDataLabStrings.js';
+import ProjectileDataLabColors from '../ProjectileDataLabColors.js';
+import GradientBackgroundNode from '../../../../scenery-phet/js/GradientBackgroundNode.js';
 
 type SelfOptions = EmptySelfOptions;
 type PDLScreenViewOptions = SelfOptions & ScreenViewOptions;
@@ -25,6 +27,17 @@ export class PDLScreenView extends ScreenView {
   public constructor( model: TModel, options: PDLScreenViewOptions ) {
     super( options );
 
+    const backgroundNode = new GradientBackgroundNode( 0, 0, 1, 1,
+      ProjectileDataLabColors.screenBackgroundTopColorProperty, ProjectileDataLabColors.screenBackgroundBottomColorProperty,
+      0, 1 );
+
+    // This instance lives for the lifetime of the simulation, so we don't need to remove this listener
+    this.visibleBoundsProperty.link( visibleBounds => {
+      backgroundNode.translation = visibleBounds.leftTop;
+      backgroundNode.setScaleMagnitude( visibleBounds.width, visibleBounds.height );
+    } );
+    this.addChild( backgroundNode );
+
     const noAirResistanceText = new Text( ProjectileDataLabStrings.noAirResistanceStringProperty, {
       font: ProjectileDataLabConstants.PRIMARY_FONT,
       maxWidth: 120.046875 * 1.25 // 25% larger than the default English text