From c05654d5e38e511c363490a5d65a88b98d4d558c Mon Sep 17 00:00:00 2001
From: matthew-blackman <mabl4992@colorado.edu>
Date: Sat, 18 Nov 2023 19:10:33 -0500
Subject: [PATCH] Add gradient background - see
 https://github.com/phetsims/projectile-data-lab/issues/7

---
 js/common/ProjectileDataLabColors.ts |  8 ++++++--
 js/common/view/PDLScreenView.ts      | 15 ++++++++++++++-
 2 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/js/common/ProjectileDataLabColors.ts b/js/common/ProjectileDataLabColors.ts
index d4807fb4..f91e102a 100644
--- a/js/common/ProjectileDataLabColors.ts
+++ b/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'
   } )
 };
 
diff --git a/js/common/view/PDLScreenView.ts b/js/common/view/PDLScreenView.ts
index b6a7d7ef..60e3de8b 100644
--- a/js/common/view/PDLScreenView.ts
+++ b/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