Add BackgroundNode, see #6

phetsims · Feb 2, 2022 · 691ba34 · 691ba34
1 parent c278f09
commit 691ba34
Show file tree

Hide file tree

Showing 5 changed files with 77 additions and 15 deletions.
diff --git a/images/license.json b/images/license.json
@@ -1,3 +1,10 @@
 {
-
+  "ball.png": {
+    "text": [
+      "Copyright 2022 University of Colorado Boulder"
+    ],
+    "projectURL": "https://phet.colorado.edu",
+    "license": "contact [email protected]",
+    "notes": "created by ??? TODO: Annotate author"
+  }
 }
diff --git a/js/common/view/BackgroundNode.ts b/js/common/view/BackgroundNode.ts
@@ -0,0 +1,39 @@
+// Copyright 2022, University of Colorado Boulder
+
+/**
+ * TODO: Describe this class and its responsibilities.
+ * TODO: Possibly generalize this, move to scenery-phet, replace usages
+ *
+ * @author Chris Klusendorf (PhET Interactive Simulations)
+ * @author Sam Reid (PhET Interactive Simulations)
+ */
+
+import centerAndSpread from '../../centerAndSpread.js';
+import { LinearGradient, Rectangle } from '../../../../scenery/js/imports.js';
+import Property from '../../../../axon/js/Property.js';
+import Bounds2 from '../../../../dot/js/Bounds2.js';
+
+// TODO: Do we still want a separate node for Sky and Ground?
+class BackgroundNode extends Rectangle {
+  constructor( bottomY: number, visibleBoundsProperty: Property<Bounds2> ) {
+    super( visibleBoundsProperty.value.centerX, visibleBoundsProperty.value.top, visibleBoundsProperty.value.centerX, bottomY );
+
+    visibleBoundsProperty.link( visibleBounds => {
+      const gradient = new LinearGradient( visibleBounds.centerX, visibleBounds.top, visibleBounds.centerX, bottomY );
+
+      // sky gradient, sampled from a screenshot
+      gradient.addColorStop( 0.0, '#2e4f8a' );
+      gradient.addColorStop( 0.5, '#5c98d3' );
+      gradient.addColorStop( 1.0, '#c9d9ef' );
+
+      // The ground
+      gradient.addColorStop( 1.0, '#468a41' );
+
+      this.setRect( visibleBounds.left, visibleBounds.top, visibleBounds.width, visibleBounds.height );
+      this.fill = gradient;
+    } );
+  }
+}
+
+centerAndSpread.register( 'BackgroundNode', BackgroundNode );
+export default BackgroundNode;
diff --git a/js/common/view/CASScreenView.ts b/js/common/view/CASScreenView.ts
@@ -9,9 +9,7 @@
 
 import ScreenView from '../../../../joist/js/ScreenView.js';
 import optionize from '../../../../phet-core/js/optionize.js';
-import ResetAllButton from '../../../../scenery-phet/js/buttons/ResetAllButton.js';
 import Tandem from '../../../../tandem/js/Tandem.js';
-import CASConstants from '../../common/CASConstants.js';
 import centerAndSpread from '../../centerAndSpread.js';
 import CASModel from '../model/CASModel.js';
 
@@ -27,18 +25,6 @@ class CASScreenView extends ScreenView {
     }, options );
 
     super( options );
-
-    const resetAllButton = new ResetAllButton( {
-      listener: () => {
-        this.interruptSubtreeInput(); // cancel interactions that may be in progress
-        model.reset();
-        this.reset();
-      },
-      right: this.layoutBounds.maxX - CASConstants.SCREEN_VIEW_X_MARGIN,
-      bottom: this.layoutBounds.maxY - CASConstants.SCREEN_VIEW_Y_MARGIN,
-      tandem: options.tandem.createTandem( 'resetAllButton' )
-    } );
-    this.addChild( resetAllButton );
   }
 
   /**

diff --git a/js/common/view/SoccerScreenView.ts b/js/common/view/SoccerScreenView.ts
@@ -15,6 +15,8 @@ import CASScreenView, { CASScreenViewOptions } from './CASScreenView.js';
 import QuestionBar, { QuestionBarOptions } from './QuestionBar.js';
 import KickButtonGroup from './KickButtonGroup.js';
 import CASConstants from '../CASConstants.js';
+import BackgroundNode from './BackgroundNode.js';
+import ResetAllButton from '../../../../scenery-phet/js/buttons/ResetAllButton.js';
 
 type SoccerScreenViewSelfOptions = {
   questionBarOptions: QuestionBarOptions
@@ -32,12 +34,26 @@ class SoccerScreenView extends CASScreenView {
 
     super( model, options );
 
+    this.addChild( new BackgroundNode( 400, this.visibleBoundsProperty ) );
+
     this.addChild( new QuestionBar( this.layoutBounds, this.visibleBoundsProperty, options.questionBarOptions ) );
     this.addChild( new KickButtonGroup( {
       left: CASConstants.SCREEN_VIEW_X_MARGIN,
       bottom: this.layoutBounds.bottom - CASConstants.SCREEN_VIEW_Y_MARGIN,
       tandem: options.tandem.createTandem( 'kickButtonGroup' )
     } ) );
+
+    const resetAllButton = new ResetAllButton( {
+      listener: () => {
+        this.interruptSubtreeInput(); // cancel interactions that may be in progress
+        model.reset();
+        this.reset();
+      },
+      right: this.layoutBounds.maxX - CASConstants.SCREEN_VIEW_X_MARGIN,
+      bottom: this.layoutBounds.maxY - CASConstants.SCREEN_VIEW_Y_MARGIN,
+      tandem: options.tandem.createTandem( 'resetAllButton' )
+    } );
+    this.addChild( resetAllButton );
   }
 
   /**

diff --git a/js/lab/view/LabScreenView.ts b/js/lab/view/LabScreenView.ts
@@ -12,6 +12,8 @@ import Tandem from '../../../../tandem/js/Tandem.js';
 import centerAndSpread from '../../centerAndSpread.js';
 import LabModel from '../model/LabModel.js';
 import CASScreenView, { CASScreenViewOptions } from '../../common/view/CASScreenView.js';
+import CASConstants from '../../common/CASConstants.js';
+import ResetAllButton from '../../../../scenery-phet/js/buttons/ResetAllButton.js';
 
 type LabScreenViewOptions = CASScreenViewOptions;
 
@@ -26,6 +28,18 @@ class LabScreenView extends CASScreenView {
     }, providedOptions );
 
     super( model, options );
+
+    const resetAllButton = new ResetAllButton( {
+      listener: () => {
+        this.interruptSubtreeInput(); // cancel interactions that may be in progress
+        model.reset();
+        this.reset();
+      },
+      right: this.layoutBounds.maxX - CASConstants.SCREEN_VIEW_X_MARGIN,
+      bottom: this.layoutBounds.maxY - CASConstants.SCREEN_VIEW_Y_MARGIN,
+      tandem: options.tandem.createTandem( 'resetAllButton' )
+    } );
+    this.addChild( resetAllButton );
   }
 
   /**