Skater assets for localization

[arouinfar]

@jessegreenberg has already created the infrastructure to switch between skater sets in Energy Skate Park. The current implementation in master uses stand-in artwork and region names. I've created an updated asset file with the USA skater set (including the cat and dog), and I'm working on getting the African set ready to pass off to @jessegreenberg.

Here's what the assets currently look like:

Questions:

1. We currently have artwork for a general African set. We previously discussed options like "Africa - Conservative". Is that a goal for this sim? If so, we'll need more skater artwork.
2. The USA set includes 6 human skaters and 2 animals. Are we following the same pattern for Africa? If so, we need to eliminate one of the human skaters in the first screenshot, since there are 7. Note that skater G appears in the USA set, but without the prosthetic leg.
3. Which animals would we like to include in the African set? Last I recall it was the cat and goat (assuming we go with 6 humans and 2 animals), but I would like to confirm. If we choose the goat or elephant, we'll need a headshot to use in the skater selection radio buttons.
4. Which skater should be the default, and how should we order them?

[solaolateju]

1. Yes, I recall that the choice of "Africa - Conservative" is to accommodate the preferences of religiously devout countries or cultures.

   • The current choice of skater appears neutral and should pass as appropriate across all countries except the girl with the prosthetic leg.
   • Does the infrastructure switch between skaters, based on country, regional or continent-wide information? This would also influence what might be possible.

2. I would take off one of the girls to maintain gender balance, either skater A or E since they share a lot of similarities. Skater E is preferred for her skirt.

3. The dog and goat will be the top 2 on my list.

4. We can keep the same order in the sim, interleaving female and male. Skater B will be my default.

[kathy-phet]

@arouinfar - Yes, as I recall, we would have an "Africa" and an "Africa-Conservative" set.

[arouinfar]

Thanks for the feedback @solaolateju @kathy-phet.

@solaolateju we have the infrastructure to switch between any number of skater sets. A set includes 8 skaters, and the USA set has 6 humans and 2 animals. @solaolateju can you work with @mariahmaephet to adjust the skaters to create a conservative set?

[arouinfar]

Design meeting 11/17/22

• Based on https://docs.google.com/document/d/1xBxZY_P6qb0M5Fsx5fK2Ih04erL47vW5QjyFukEQb54/edit, we can swap skaters E & G between the two African sets.
• Skater A should not have hair showing.
• The name of the region still needs to be decided. Is "Modest" a better term than "Conservative"?
• Elephant and goat are fun! Let's use those for both African sets. The birth weight of an elephant falls within the sim's range, and in the realm of energy conservation, the mass is irrelevant. We can reconsider if there is significant pushback. (Would likely use cat & goat for conservative and dog & goat for standard African sets.)
• Skater B is a good default.

Artwork TODOs:

• Skater A should not have visible hair
• Goat headshot
• Elephant headshot

[arouinfar]

@jessegreenberg @AgustinVallejo here are the latest assets: skaters.zip

Some notes

• Three of the headshots (skater A pictured above, goat, elephant) still need to be finalized, but I've created temporary stand-ins.
• Please replace all existing images in the sim. Even if the skaters look the same, the skateboard style has been updated and is different from what is checked in.
• All human skaters have the same dimensions. The animals have the same height as the humans, but the widths vary. This was necessary because the animals lean over the edge of the skateboards.
• Regardless of the image width, the skateboard is always centered.
• There are three sets of skaters (Set 1 = United States of America, Set 2 = Africa, Set 3= Africa - Conservative). Sets 2 and 3 are the same, except for skater 6.
• The names of the sets may change.
• The animals in set 1 are the cat and dog. The animals in sets 2 and 3 are the goat and elephant.

Please let me know if you have any questions!

[jessegreenberg]

@AgustinVallejo and @marlitas and I met today to review this issue and work required for publication.

@AgustinVallejo is going to work on putting the images in https://github.com/phetsims/energy-skate-park/issues/347#issuecomment-1320607871 into the sim in SkaterImages, SkaterNode, and the usage here: https://github.com/phetsims/energy-skate-park/blob/56636742762922a4061dc8a3c6a9e2e616bea7a0/js/common/view/EnergySkateParkControlPanel.js#L102-L108

@marlitas is going to work on a potentially improved way to pass a configuration for localization to PreferencesModel. Instead of regionAndCultureProperty being a NumberProperty, it could be an EnumerationProperty that better models the supported region/culture values of the sim. An new option to PreferencesModel.localizationOptions could provide the the values of the Enumeration.

When these are done we can check in with @arouinfar before creating a dev test.

[AgustinVallejo]

New character set is in place, locally... can't push til we decide how to handle the licensing of each image, as the current one reads like this:

  "skater2_set2_left.png": {
    "text": [
      "Copyright 2002-2020 University of Colorado Boulder"
    ],
    "projectURL": "https://phet.colorado.edu",
    "license": "contact phethelp@colorado.edu",
    "notes": "Created by Megan Lai"
  },

Copyright is expired (?) and I'm not sure if it's the same designer still. Will probably meet with @jessegreenberg this week to fix that, along with the image alignment for the animals.

[arouinfar]

@AgustinVallejo the new skater artwork was created by Mariah Hermsmeyer.

[AgustinVallejo]

Pushed! Ready for review

[arouinfar]

Thanks @AgustinVallejo @marlitas! The artwork itself looks good, but the animal alignment is off.

The red dot below the skateboard represents the model coordinate used for energy calculations. It should be centered below the skateboard, and the assets were formatted so that the skateboard is horizontally centered. With the current implementation, there is a mismatch between the visual and model positions of the animal skaters.

[AgustinVallejo]

Oh yes! I wasn't clear on last comment. We still have that pending, should be done by tomorrow.

[marlitas]

I switched regionAndCultureManager to take a CharacterSet Property instead of a NumberProperty. I wasn't able to figure out a way to initialize the value without null, which led to some type finnagling down the line. Not positive this is the best approach yet, so happy to hear other suggestions too. @jessegreenberg can you review?

[AgustinVallejo]

@arouinfar All skater images should now be properly centered!

[arouinfar]

The artwork looks great, thanks @marlitas @AgustinVallejo!

[jessegreenberg]

Thanks @marlitas and @AgustinVallejo, these changes look great!

@marlitas here are some review suggestions:

• Can you please update the old JSDoc now that regionAndCultureProperty is no longer a NumberProperty?
• CharacterSet.imageSets may be unused now in ESP (and everywhere), can that be removed?
• Just proposing this patch as a way to get rid of the @ts-ignore, what do you think?

Index: js/preferences/PreferencesModel.ts
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
diff --git a/js/preferences/PreferencesModel.ts b/js/preferences/PreferencesModel.ts
--- a/js/preferences/PreferencesModel.ts    (revision 31cbcb67dd4659201f5f5f6a8672518d252429ae)
+++ b/js/preferences/PreferencesModel.ts    (date 1669826496608)
@@ -176,7 +176,7 @@
 export type LocalizationModel = BaseModelType & {

   // The selected character artwork to use when the sim supports culture and region switching.
-  regionAndCultureProperty?: Property<CharacterSet>;
+  regionAndCultureProperty: Property<CharacterSet | null>;

   localeProperty: Property<string>;
 } & Required<LocalizationPreferencesOptions>;
@@ -301,7 +301,8 @@
     }, options.inputOptions );

     this.localizationModel = merge( {
-      localeProperty: localeProperty
+      localeProperty: localeProperty,
+      regionAndCultureProperty: regionAndCultureManager.regionAndCultureProperty
     }, options.localizationOptions );

     if ( options.localizationOptions.regionAndCultureDescriptors.length > 0 ) {
@@ -310,8 +311,6 @@
       regionAndCultureManager.regionAndCultureProperty.value = options.localizationOptions.regionAndCultureDescriptors[ 0 ].characterSet;

       assert && assert( regionAndCultureManager.regionAndCultureProperty.value !== null, 'We have at least one descriptor, so regionAndCultureProperty should not be null.' );
-
-      // @ts-ignore, regionAndCultureProperty.value cannot be null since there is at least one descriptor provided.
       this.localizationModel.regionAndCultureProperty = regionAndCultureManager.regionAndCultureProperty;
     }

Index: js/preferences/LocalizationPreferencesPanel.ts
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
diff --git a/js/preferences/LocalizationPreferencesPanel.ts b/js/preferences/LocalizationPreferencesPanel.ts
--- a/js/preferences/LocalizationPreferencesPanel.ts    (revision 31cbcb67dd4659201f5f5f6a8672518d252429ae)
+++ b/js/preferences/LocalizationPreferencesPanel.ts    (date 1669826803894)
@@ -44,8 +44,8 @@
       this.disposeEmitter.addListener( () => localePanel.dispose() );
     }

-    // regionAndCultureProperty only gets set in PreferencesModel if there is at least one descriptor.
-    if ( localizationModel.regionAndCultureProperty ) {
+    // regionAndCultureProperty value only gets set in PreferencesModel if there is at least one descriptor.
+    if ( localizationModel.regionAndCultureProperty.value ) {
       const comboBox = new RegionAndCultureComboBox( localizationModel.regionAndCultureProperty, localizationModel.regionAndCultureDescriptors );
       contentNode.addChild( comboBox );
       this.disposeEmitter.addListener( () => comboBox.dispose() );
Index: js/preferences/RegionAndCultureComboBox.ts
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
diff --git a/js/preferences/RegionAndCultureComboBox.ts b/js/preferences/RegionAndCultureComboBox.ts
--- a/js/preferences/RegionAndCultureComboBox.ts    (revision 31cbcb67dd4659201f5f5f6a8672518d252429ae)
+++ b/js/preferences/RegionAndCultureComboBox.ts    (date 1669826831115)
@@ -24,7 +24,7 @@
 type SelfOptions = EmptySelfOptions;
 type RegionAndCultureComboBoxOptions = SelfOptions & StrictOmit<ComboBoxOptions, 'labelNode' | 'tandem'>;

-class RegionAndCultureComboBox extends ComboBox<CharacterSet> {
+class RegionAndCultureComboBox extends ComboBox<CharacterSet | null> {

   /**
    * @param regionAndCultureProperty - Number indicating a selected region/culture. Map the value to particular set of
@@ -32,7 +32,7 @@
    * @param regionAndCultureDescriptors - Collection of data used to create ComboBoxItems for each supported character set.
    * @param [providedOptions?]
    */
-  public constructor( regionAndCultureProperty: Property<CharacterSet>, regionAndCultureDescriptors: RegionAndCultureDescriptor[], providedOptions?: RegionAndCultureComboBoxOptions ) {
+  public constructor( regionAndCultureProperty: Property<CharacterSet | null>, regionAndCultureDescriptors: RegionAndCultureDescriptor[], providedOptions?: RegionAndCultureComboBoxOptions ) {

     const options = optionize<RegionAndCultureComboBoxOptions, SelfOptions, ComboBoxOptions>()( {

Index: js/preferences/regionAndCultureManager.ts
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
diff --git a/js/preferences/regionAndCultureManager.ts b/js/preferences/regionAndCultureManager.ts
--- a/js/preferences/regionAndCultureManager.ts (revision 31cbcb67dd4659201f5f5f6a8672518d252429ae)
+++ b/js/preferences/regionAndCultureManager.ts (date 1669826185382)
@@ -29,10 +29,10 @@

   // An index describing the selected artwork for the simulation to display a particular region and culture. From this
   // value the simulation can implement different artwork to match the selected region and culture.
-  public readonly regionAndCultureProperty: Property<CharacterSet> | Property<null>;
+  public readonly regionAndCultureProperty: Property<CharacterSet | null>;

   public constructor() {
-    this.regionAndCultureProperty = new Property( null );
+    this.regionAndCultureProperty = new Property<CharacterSet | null>( null );
   }
 }

[marlitas]

That patch was the typescript knowledge I needed. Thanks so much!

[marlitas]

CharacterSet.imageSets may be unused now in ESP (and everywhere), can that be removed

@jessegreenberg I removed imageSets from the CharacterSet base class, but wasn't a fan that the base class didn't really have any typing to support subclasses or any of the type checking being used in preferences. I played around with these two options as well, but I'm not really a fan of either... what are your thoughts? I think the second option is my favorite so far, but there may be a typescript trick or convention that I'm not aware of that can help here.

• arguments are type checked to be CharacterImageSets, and at least one is required, but unused array

  public constructor( ....imageSets: [ CharacterImageSet, ...CharacterImageSet[] ] ) {
  this.imageSets = imageSets;
  }

• ensures an empty class can't be instantiated, but makes subclass implementation a little awkward...

  public constructor( ...imageSets: [ CharacterImageSet, ...CharacterImageSet[] ] ) {
  
  // A CharacterSet subclass must contain at least one image set
  this.imageSet1 = imageSets[ 0 ];
  }

[jessegreenberg]

@marlitas yes I see what you mean. Another potential problem is that entries of CharacterSet may be specific to energy-skate-park. Here is another thought, what if we get rid of the "descriptor" idea and all of that info into CharacterSet. Then you can just pass all the character sets into PreferencesModel without needing a descriptor array.

Here is a patch. I think this simplifies the API. What do you think?

```patch Index: joist/js/preferences/PreferencesModel.ts IDEA additional info: Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP <+>UTF-8 =================================================================== diff --git a/joist/js/preferences/PreferencesModel.ts b/joist/js/preferences/PreferencesModel.ts --- a/joist/js/preferences/PreferencesModel.ts (revision b7cd4caba485c9851a846e8cde04f2ed4d39bdc0) +++ b/joist/js/preferences/PreferencesModel.ts (date 1669846445747) @@ -17,7 +17,7 @@ import NumberProperty from '../../../axon/js/NumberProperty.js'; import PhetioObject, { PhetioObjectOptions } from '../../../tandem/js/PhetioObject.js'; import optionize, { EmptySelfOptions } from '../../../phet-core/js/optionize.js'; -import regionAndCultureManager, { RegionAndCultureDescriptor } from './regionAndCultureManager.js'; +import regionAndCultureManager from './regionAndCultureManager.js'; import SpeechSynthesisAnnouncer from '../../../utterance-queue/js/SpeechSynthesisAnnouncer.js'; import Tandem from '../../../tandem/js/Tandem.js'; import localeProperty from '../i18n/localeProperty.js'; @@ -90,10 +90,10 @@ // is still only available when localeProperty indicates that more than one locale is available. supportsMultipleLocales?: boolean; - // Describes the available artwork that can be used for different regions and cultures. If any descriptors are + // Describes the available artwork that can be used for different regions and cultures. If any sets are // provided, the Localization tab will include a UI component to swap out pieces of artwork to match the selected - // region and culture. RegionAndCultureDescriptors contains information for the UI component to describe each choice. - regionAndCultureDescriptors?: RegionAndCultureDescriptor[]; + // region and culture. CharacterSets contains information for the UI component to describe each choice. + characterSets?: CharacterSet[]; } & CustomPreferencesOptions; type PreferencesModelSelfOptions = { @@ -236,7 +236,7 @@ localizationOptions: optionize()( { tandemName: 'localizationModel', supportsMultipleLocales: !!localeProperty.validValues && localeProperty.validValues.length > 1, - regionAndCultureDescriptors: [], + characterSets: [], customPreferences: [] }, providedOptions.localizationOptions ) }; @@ -305,10 +305,10 @@ regionAndCultureProperty: regionAndCultureManager.regionAndCultureProperty }, options.localizationOptions ); - if ( options.localizationOptions.regionAndCultureDescriptors.length > 0 ) { + if ( options.localizationOptions.characterSets.length > 0 ) { - // default is the first set in the descriptors. - regionAndCultureManager.regionAndCultureProperty.value = options.localizationOptions.regionAndCultureDescriptors[ 0 ].characterSet; + // default is the first set + regionAndCultureManager.regionAndCultureProperty.value = options.localizationOptions.characterSets[ 0 ]; assert && assert( regionAndCultureManager.regionAndCultureProperty.value !== null, 'We have at least one descriptor, so regionAndCultureProperty should not be null.' ); this.localizationModel.regionAndCultureProperty = regionAndCultureManager.regionAndCultureProperty; @@ -471,7 +471,7 @@ */ public supportsLocalizationPreferences(): boolean { return this.localizationModel.supportsMultipleLocales || - this.localizationModel.regionAndCultureDescriptors.length > 0 || + this.localizationModel.characterSets.length > 0 || this.preferenceModelHasCustom( this.localizationModel ); } Index: joist/js/preferences/LocalizationPreferencesPanel.ts IDEA additional info: Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP <+>UTF-8 =================================================================== diff --git a/joist/js/preferences/LocalizationPreferencesPanel.ts b/joist/js/preferences/LocalizationPreferencesPanel.ts --- a/joist/js/preferences/LocalizationPreferencesPanel.ts (revision b7cd4caba485c9851a846e8cde04f2ed4d39bdc0) +++ b/joist/js/preferences/LocalizationPreferencesPanel.ts (date 1669847003268) @@ -40,7 +40,7 @@ // regionAndCultureProperty value only gets set in PreferencesModel if there is at least one descriptor. if ( localizationModel.regionAndCultureProperty.value ) { - const comboBox = new RegionAndCultureComboBox( localizationModel.regionAndCultureProperty, localizationModel.regionAndCultureDescriptors ); + const comboBox = new RegionAndCultureComboBox( localizationModel.regionAndCultureProperty, localizationModel.characterSets ); contentNode.addChild( comboBox ); this.disposeEmitter.addListener( () => comboBox.dispose() ); } Index: energy-skate-park/js/common/view/SkaterImages.js IDEA additional info: Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP <+>UTF-8 =================================================================== diff --git a/energy-skate-park/js/common/view/SkaterImages.js b/energy-skate-park/js/common/view/SkaterImages.js --- a/energy-skate-park/js/common/view/SkaterImages.js (revision 9189d3eeafc058a1f2817ec308f277aadb5c0bdb) +++ b/energy-skate-park/js/common/view/SkaterImages.js (date 1669847118842) @@ -86,8 +86,10 @@ * from preferences. */ class SkaterCharacterSet extends CharacterSet { - constructor( imageSet1, imageSet2, imageSet3, imageSet4, imageSet5, imageSet6, imageSet7, imageSet8 ) { - super(); + constructor( labelString, imageSet1, imageSet2, imageSet3, imageSet4, imageSet5, imageSet6, imageSet7, imageSet8 ) { + const headshotIcon = new HeadshotIcon( imageSet1.headshotImage ); + + super( headshotIcon, labelString ); this.imageSet1 = imageSet1; this.imageSet2 = imageSet2; this.imageSet3 = imageSet3; @@ -96,12 +98,11 @@ this.imageSet6 = imageSet6; this.imageSet7 = imageSet7; this.imageSet8 = imageSet8; - - this.imageSets = [ imageSet1, imageSet2, imageSet3, imageSet4, imageSet5, imageSet6, imageSet7, imageSet8 ]; } } const CHARACTER_SET_1 = new SkaterCharacterSet( + unitedStatesOfAmericaString, new SkaterImageSet( skater1_set1_left_png, skater1_set1_right_png, skater1_set1_headshot_png ), new SkaterImageSet( skater2_set1_left_png, skater2_set1_right_png, skater2_set1_headshot_png ), new SkaterImageSet( skater3_set1_left_png, skater3_set1_right_png, skater3_set1_headshot_png ), @@ -113,6 +114,7 @@ ); const CHARACTER_SET_2 = new SkaterCharacterSet( + africaString, new SkaterImageSet( skater1_set2_left_png, skater1_set2_right_png, skater1_set2_headshot_png ), new SkaterImageSet( skater2_set2_left_png, skater2_set2_right_png, skater2_set2_headshot_png ), new SkaterImageSet( skater3_set2_left_png, skater3_set2_right_png, skater3_set2_headshot_png ), @@ -124,6 +126,7 @@ ); const CHARACTER_SET_3 = new SkaterCharacterSet( + africaConservativeString, new SkaterImageSet( skater1_set2_left_png, skater1_set2_right_png, skater1_set2_headshot_png ), new SkaterImageSet( skater2_set2_left_png, skater2_set2_right_png, skater2_set2_headshot_png ), new SkaterImageSet( skater3_set2_left_png, skater3_set2_right_png, skater3_set2_headshot_png ), @@ -145,26 +148,6 @@ CHARACTER_SET_2: CHARACTER_SET_2, CHARACTER_SET_3: CHARACTER_SET_3, - SKATER_SET_DESCRIPTORS: [ - { - icon: new HeadshotIcon( CHARACTER_SET_1.imageSet1.headshotImage ), - label: unitedStatesOfAmericaString, - characterSet: CHARACTER_SET_1 - }, - { - icon: new HeadshotIcon( CHARACTER_SET_2.imageSet1.headshotImage ), - label: africaString, - characterSet: CHARACTER_SET_2 - }, - { - icon: new HeadshotIcon( CHARACTER_SET_3.imageSet1.headshotImage ), - label: africaConservativeString, - characterSet: CHARACTER_SET_3 - - - } - ], - IMAGES_PER_SET: 8 }; Index: energy-skate-park/js/energy-skate-park-main.js IDEA additional info: Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP <+>UTF-8 =================================================================== diff --git a/energy-skate-park/js/energy-skate-park-main.js b/energy-skate-park/js/energy-skate-park-main.js --- a/energy-skate-park/js/energy-skate-park-main.js (revision 9189d3eeafc058a1f2817ec308f277aadb5c0bdb) +++ b/energy-skate-park/js/energy-skate-park-main.js (date 1669846469308) @@ -42,7 +42,7 @@ } ] }, localizationOptions: { - regionAndCultureDescriptors: SkaterImages.SKATER_SET_DESCRIPTORS + characterSets: SkaterImages.SKATER_CHARACTER_SETS } } ), credits: { Index: joist/js/preferences/RegionAndCultureComboBox.ts IDEA additional info: Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP <+>UTF-8 =================================================================== diff --git a/joist/js/preferences/RegionAndCultureComboBox.ts b/joist/js/preferences/RegionAndCultureComboBox.ts --- a/joist/js/preferences/RegionAndCultureComboBox.ts (revision b7cd4caba485c9851a846e8cde04f2ed4d39bdc0) +++ b/joist/js/preferences/RegionAndCultureComboBox.ts (date 1669847071240) @@ -14,7 +14,6 @@ import optionize, { EmptySelfOptions } from '../../../phet-core/js/optionize.js'; import StrictOmit from '../../../phet-core/js/types/StrictOmit.js'; import Tandem from '../../../tandem/js/Tandem.js'; -import { RegionAndCultureDescriptor } from './regionAndCultureManager.js'; import CharacterSet from './CharacterSet.js'; // constants @@ -28,10 +27,10 @@ /** * @param regionAndCultureProperty - CharacterSet indicating a selected region/culture that is connected to a particular set of representations - * @param regionAndCultureDescriptors - Collection of data used to create ComboBoxItems for each supported character set. + * @param characterSets - The CharacterSet list, one for each region/culture. * @param [providedOptions?] */ - public constructor( regionAndCultureProperty: Property, regionAndCultureDescriptors: RegionAndCultureDescriptor[], providedOptions?: RegionAndCultureComboBoxOptions ) { + public constructor( regionAndCultureProperty: Property, characterSets: CharacterSet[], providedOptions?: RegionAndCultureComboBoxOptions ) { const options = optionize()( { @@ -44,17 +43,17 @@ options.labelNode = new Text( regionAndCultureString, PreferencesDialog.PANEL_SECTION_CONTENT_OPTIONS ); - const comboBoxItems = regionAndCultureDescriptors.map( ( descriptor, index ) => { + const comboBoxItems = characterSets.map( ( characterSet, index ) => { // Since we don't own the Node, wrap in a container for PhET-iO DAG cases and I think archetypes? - const wrappedIconNode = new Node( { children: [ descriptor.icon ] } ); + const wrappedIconNode = new Node( { children: [ characterSet.icon ] } ); const itemContent = new HBox( { - children: [ wrappedIconNode, new Text( descriptor.label, PreferencesDialog.PANEL_SECTION_CONTENT_OPTIONS ) ], + children: [ wrappedIconNode, new Text( characterSet.label, PreferencesDialog.PANEL_SECTION_CONTENT_OPTIONS ) ], spacing: 10 } ); return { - value: descriptor.characterSet, + value: characterSet, node: itemContent }; } ); Index: joist/js/preferences/CharacterSet.ts IDEA additional info: Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP <+>UTF-8 =================================================================== diff --git a/joist/js/preferences/CharacterSet.ts b/joist/js/preferences/CharacterSet.ts --- a/joist/js/preferences/CharacterSet.ts (revision b7cd4caba485c9851a846e8cde04f2ed4d39bdc0) +++ b/joist/js/preferences/CharacterSet.ts (date 1669846978388) @@ -7,20 +7,18 @@ * */ -import { Image } from '../../../scenery/js/imports.js'; - -type CharacterImageSet = { - characterImage?: Image; - headshotImage: Image; - leftImage?: Image; - rightImage?: Image; -}; +import { Node } from '../../../scenery/js/imports.js'; export default class CharacterSet { - public readonly imageSets: Array; + // Icon for the UI component that would select this character set + public readonly icon: Node; - public constructor() { - this.imageSets = []; + // Label string for the UI component that will select this character set + public readonly label: string; + + public constructor( icon: Node, label: string ) { + this.icon = icon; + this.label = label; } } \ No newline at end of file Index: energy-skate-park-basics/js/EnergySkateParkBasicsSim.js IDEA additional info: Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP <+>UTF-8 =================================================================== diff --git a/energy-skate-park-basics/js/EnergySkateParkBasicsSim.js b/energy-skate-park-basics/js/EnergySkateParkBasicsSim.js --- a/energy-skate-park-basics/js/EnergySkateParkBasicsSim.js (revision 63c9e2b122a5df3a88b882b75afa7684f106fb3e) +++ b/energy-skate-park-basics/js/EnergySkateParkBasicsSim.js (date 1669846779088) @@ -33,7 +33,7 @@ const options = { preferencesModel: new PreferencesModel( { localizationOptions: { - regionAndCultureDescriptors: SkaterImages.SKATER_SET_DESCRIPTORS + characterSets: SkaterImages.SKATER_CHARACTER_SETS } } ), credits: { Index: joist/js/preferences/regionAndCultureManager.ts IDEA additional info: Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP <+>UTF-8 =================================================================== diff --git a/joist/js/preferences/regionAndCultureManager.ts b/joist/js/preferences/regionAndCultureManager.ts --- a/joist/js/preferences/regionAndCultureManager.ts (revision b7cd4caba485c9851a846e8cde04f2ed4d39bdc0) +++ b/joist/js/preferences/regionAndCultureManager.ts (date 1669846275403) @@ -9,22 +9,8 @@ import Property from '../../../axon/js/Property.js'; import joist from '../joist.js'; -import { Node } from '../../../scenery/js/imports.js'; import CharacterSet from './CharacterSet.js'; -// A type that describes the possible values for regionAndCultureProperty so that different artwork can be selected -// by the user to match a particular region or culture. -export type RegionAndCultureDescriptor = { - - // Icon for the UI to select this artwork. - icon: Node; - - // Label string describing the region or culture in words. - label: string; - - characterSet: CharacterSet; -}; - class RegionAndCultureManager { // A character set that the simulation can implement different artwork to match the selected region and culture. ```

[marlitas]

Yes that feels much cleaner! Thanks for helping out with that. I committed the changes and they are pushed up. Let me know if there's anything else, if not is this ready to close?

[jessegreenberg]

Great, thanks @marlitas I think this is in a much better place for publication. Ill reassign back to @arouinfar for the original issue which was more design focused. Or to close if the remaining needs for artwork are already documented in other issues.

[arouinfar]

Thanks everyone! There are still a few TODOs, so let's leave this issue open.

• [x] Edit visible hair out of skater A's headshot
• [x] Goat headshot
• [x] Elephant headshot

[arouinfar]

@AgustinVallejo @jessegreenberg @marlitas here are the assets for the updated headshots: updated-headshots.zip

I cropped the elephant's trunk a bit so that its head filled the space like the other animal headshots. Keeping the entire trunk in view requires shrinking the elephant down quite a bit, and the headshots are already fairly small.

[marlitas]

@jessegreenberg and @AgustinVallejo, let me know if you need any help with this for preferences!

[AgustinVallejo]

Headshots have been updated! @arouinfar

[arouinfar]

Looks great, thanks @AgustinVallejo!