Convert number-line-integers and number-line-distance to new region a…

…nd culture approach. See phetsims/joist#958.

js/NumberLineDistanceImages.ts

@@ -0,0 +1,57 @@
+// Copyright 2024, University of Colorado Boulder
+
+/**
+ * Auto-generated from modulify, DO NOT manually modify.
+ */
+/* eslint-disable */
+import LocalizedImageProperty from '../../joist/js/i18n/LocalizedImageProperty.js';
+import numberLineDistance from './numberLineDistance.js';
+import africaExploreHomeIcon_png from '../images/africa/africaExploreHomeIcon_png.js';
+import africaExploreNavbarIcon_png from '../images/africa/africaExploreNavbarIcon_png.js';
+import africaPerson_png from '../images/africa/africaPerson_png.js';
+import africaModestExploreHomeIcon_png from '../images/africaModest/africaModestExploreHomeIcon_png.js';
+import africaModestExploreNavbarIcon_png from '../images/africaModest/africaModestExploreNavbarIcon_png.js';
+import africaModestPerson_png from '../images/africaModest/africaModestPerson_png.js';
+import asiaExploreHomeIcon_png from '../images/asia/asiaExploreHomeIcon_png.js';
+import asiaExploreNavbarIcon_png from '../images/asia/asiaExploreNavbarIcon_png.js';
+import asiaPerson_png from '../images/asia/asiaPerson_png.js';
+import latinAmericaExploreHomeIcon_png from '../images/latinAmerica/latinAmericaExploreHomeIcon_png.js';
+import latinAmericaExploreNavbarIcon_png from '../images/latinAmerica/latinAmericaExploreNavbarIcon_png.js';
+import latinAmericaPerson_png from '../images/latinAmerica/latinAmericaPerson_png.js';
+import oceaniaExploreHomeIcon_png from '../images/oceania/oceaniaExploreHomeIcon_png.js';
+import oceaniaExploreNavbarIcon_png from '../images/oceania/oceaniaExploreNavbarIcon_png.js';
+import oceaniaPerson_png from '../images/oceania/oceaniaPerson_png.js';
+import usaExploreHomeIcon_png from '../images/usa/usaExploreHomeIcon_png.js';
+import usaExploreNavbarIcon_png from '../images/usa/usaExploreNavbarIcon_png.js';
+import usaPerson_png from '../images/usa/usaPerson_png.js';
+
+const NumberLineDistanceImages = {
+  exploreHomeIconImageProperty: new LocalizedImageProperty( 'exploreHomeIcon', {
+    africa: africaExploreHomeIcon_png,
+    africaModest: africaModestExploreHomeIcon_png,
+    asia: asiaExploreHomeIcon_png,
+    latinAmerica: latinAmericaExploreHomeIcon_png,
+    oceania: oceaniaExploreHomeIcon_png,
+    usa: usaExploreHomeIcon_png
+  } ),
+  exploreNavbarIconImageProperty: new LocalizedImageProperty( 'exploreNavbarIcon', {
+    africa: africaExploreNavbarIcon_png,
+    africaModest: africaModestExploreNavbarIcon_png,
+    asia: asiaExploreNavbarIcon_png,
+    latinAmerica: latinAmericaExploreNavbarIcon_png,
+    oceania: oceaniaExploreNavbarIcon_png,
+    usa: usaExploreNavbarIcon_png
+  } ),
+  personImageProperty: new LocalizedImageProperty( 'person', {
+    africa: africaPerson_png,
+    africaModest: africaModestPerson_png,
+    asia: asiaPerson_png,
+    latinAmerica: latinAmericaPerson_png,
+    oceania: oceaniaPerson_png,
+    usa: usaPerson_png
+  } )
+};
+
+numberLineDistance.register( 'NumberLineDistanceImages', NumberLineDistanceImages );
+
+export default NumberLineDistanceImages;

js/explore/NLDExploreScreen.js

@@ -7,9 +7,10 @@
  */
 
 import Screen from '../../../joist/js/Screen.js';
-import ExploreScreenIcon from '../../../number-line-common/js/explore/view/ExploreScreenIcon.js';
+import ScreenIcon from '../../../joist/js/ScreenIcon.js';
 import NLDColors from '../common/NLDColors.js';
-import ExplorerImages from './view/ExplorerImages.js';
+import NumberLineDistanceImages from '../NumberLineDistanceImages.js';
+import { Image } from '../../../scenery/js/imports.js';
 import numberLineDistance from '../numberLineDistance.js';
 import NumberLineDistanceStrings from '../NumberLineDistanceStrings.js';
 import NLDExploreModel from './model/NLDExploreModel.js';
@@ -18,21 +19,26 @@ import NLDExploreScreenView from './view/NLDExploreScreenView.js';
 class NLDExploreScreen extends Screen {
 
   /**
-   * @param { PreferencesModel } preferencesModel
    * @param {Tandem} tandem
    * @public
    */
-  constructor( preferencesModel, tandem ) {
+  constructor( tandem ) {
     const options = {
       name: NumberLineDistanceStrings.screen.exploreStringProperty,
       backgroundColorProperty: NLDColors.exploreScreenBackgroundColorProperty,
-      homeScreenIcon: new ExploreScreenIcon( ExplorerImages.EXPLORER_CHARACTER_SETS, preferencesModel.localizationModel.regionAndCulturePortrayalProperty, 'home' ),
-      navigationBarIcon: new ExploreScreenIcon( ExplorerImages.EXPLORER_CHARACTER_SETS, preferencesModel.localizationModel.regionAndCulturePortrayalProperty, 'nav' ),
+      homeScreenIcon: new ScreenIcon( new Image( NumberLineDistanceImages.exploreHomeIconImageProperty ), {
+        maxIconWidthProportion: 1,
+        maxIconHeightProportion: 1
+      } ),
+      navigationBarIcon: new ScreenIcon( new Image( NumberLineDistanceImages.exploreNavbarIconImageProperty ), {
+        maxIconWidthProportion: 1,
+        maxIconHeightProportion: 1
+      } ),
       tandem: tandem
     };
 
     super(
-      () => new NLDExploreModel( preferencesModel, tandem.createTandem( 'model' ) ),
+      () => new NLDExploreModel( tandem.createTandem( 'model' ) ),
       model => new NLDExploreScreenView( model, tandem.createTandem( 'view' ) ),
       options
     );

js/explore/model/DistanceSceneModel.js

@@ -20,10 +20,9 @@ const SIDEWALK_HEIGHT = 50;
 class DistanceSceneModel extends AbstractNLDBaseModel {
 
   /**
-   * @param {preferencesModel} preferencesModel
    * @param {Tandem} tandem
    */
-  constructor( preferencesModel, tandem ) {
+  constructor( tandem ) {
 
     // values empirically determined
     const numberLine = new SpatializedNumberLine( NLDConstants.NLD_LAYOUT_BOUNDS.center.plusXY( 0, -75 ), {
@@ -68,12 +67,6 @@ class DistanceSceneModel extends AbstractNLDBaseModel {
 
     // @public (read-only) {Bounds2}
     this.sidewalkBounds = sidewalkBounds;
-
-    /**
-     * @public (read-only)
-     * @type {preferencesModel}
-     */
-    this.preferencesModel = preferencesModel;
   }
 }
 

js/explore/model/NLDExploreModel.js

@@ -15,13 +15,12 @@ import TemperatureSceneModel from './TemperatureSceneModel.js';
 class NLDExploreModel {
 
   /**
-   * @param {PreferencesModel} preferencesModel
    * @param {Tandem} tandem
    */
-  constructor( preferencesModel, tandem ) {
+  constructor( tandem ) {
 
     // @public the instance for the model of the 'Distance' scene
-    this.distanceSceneModel = new DistanceSceneModel( preferencesModel, tandem );
+    this.distanceSceneModel = new DistanceSceneModel( tandem );
 
     // @public the instance for the model of the 'Temperature' scene
     this.temperatureSceneModel = new TemperatureSceneModel( tandem );

js/explore/view/DistanceSceneView.js

@@ -8,12 +8,11 @@
 
 import DerivedProperty from '../../../../axon/js/DerivedProperty.js';
 import PhetFont from '../../../../scenery-phet/js/PhetFont.js';
-import { AlignGroup, Image, ManualConstraint, Node, Text } from '../../../../scenery/js/imports.js';
+import { Image, ManualConstraint, Node, Text } from '../../../../scenery/js/imports.js';
 import fireHydrant_png from '../../../images/fireHydrant_png.js';
 import house_png from '../../../images/house_png.js';
 import sidewalk_png from '../../../images/sidewalk_png.js';
-import ExplorerPortrayalUSA from './portrayals/ExplorerPortrayalUSA.js';
-import ExplorerImages from './ExplorerImages.js';
+import NumberLineDistanceImages from '../../NumberLineDistanceImages.js';
 import numberLineDistance from '../../numberLineDistance.js';
 import NumberLineDistanceStrings from '../../NumberLineDistanceStrings.js';
 import DistancePointControllerNode from './DistancePointControllerNode.js';
@@ -40,33 +39,13 @@ class DistanceSceneView extends NLDSceneView {
    */
   constructor( model ) {
 
-    /**
-     *
-     * @param {number} scale
-     * @param {AlignGroup} alignGroup
-     * @returns {AlignBox[]}
-     */
-    const createPersonImages = ( scale, alignGroup ) => ExplorerImages.EXPLORER_CHARACTER_SETS.map( set => {
-      return alignGroup.createBox( new Image( set.standing, {
-        scale: scale,
-        visibleProperty: new DerivedProperty( [ model.preferencesModel.localizationModel.regionAndCulturePortrayalProperty ], portrayal => {
-          return portrayal === set;
-        } )
-      } ), {
-        yAlign: 'bottom'
-      } );
-    } );
-
     // Create the representations for the person and the house in the area that they can be swapped.
     // scales were empirically determined
-    const legendAlignGroup = new AlignGroup();
-    const personRepresentationScale = 0.1;
     const houseRepresentation = new Image( house_png, { scale: 0.15 } );
-    const personRepresentation = new Node( { children: createPersonImages( personRepresentationScale, legendAlignGroup ) } );
+    const personRepresentation = new Image( NumberLineDistanceImages.personImageProperty, { scale: 0.1 } );
 
     // All the personRepresentation images have the same width.
-    const smallestWidth = Math.min( houseRepresentation.getImageWidth(),
-      new Image( ExplorerPortrayalUSA.standing, { scale: personRepresentationScale } ).getImageWidth() );
+    const smallestWidth = Math.min( houseRepresentation.getImageWidth(), personRepresentation.getImageWidth() );
     houseRepresentation.maxWidth = smallestWidth;
     personRepresentation.maxWidth = smallestWidth;
 
@@ -116,8 +95,7 @@ class DistanceSceneView extends NLDSceneView {
     // Point controllers that are in different parent nodes so that the person is always on top of the house in terms of
     // layering. The mouse area dilation for the personPointControllerImage is for #38.
     // the image scales and dilations are empirically determined
-    const controllerAlignGroup = new AlignGroup();
-    const personPointControllerImage = new Node( { children: createPersonImages( 0.22, controllerAlignGroup ) } );
+    const personPointControllerImage = new Image( NumberLineDistanceImages.personImageProperty, { scale: 0.22 } );
     personPointControllerImage.mouseArea = personPointControllerImage.localBounds.dilated(
       5 / personPointControllerImage.getScaleVector().x
     );