Add hand icon to kittens, see: #81

js/common/model/NumberPairsModel.ts

@@ -93,6 +93,8 @@ export default class NumberPairsModel implements TModel {
   public readonly leftAddendCountingObjectsLengthProperty: TReadOnlyProperty<number>;
   public readonly rightAddendCountingObjectsLengthProperty: TReadOnlyProperty<number>;
 
+  public readonly hasAttributeBeenSwitchedProperty: Property<boolean>;
+
   protected constructor(
     // The totalProperty is derived from the left and right addend numbers.
     // In decomposition models (Intro, Ten, and Twenty screens) it is set by the selected scene.
@@ -190,6 +192,10 @@ export default class NumberPairsModel implements TModel {
       hasListenerOrderDependencies: true,
       derive: 'lengthProperty'
     } );
+    this.hasAttributeBeenSwitchedProperty = new BooleanProperty( false, {
+      tandem: options.tandem.createTandem( 'hasAttributeBeenSwitchedProperty' ),
+      phetioState: false
+    } );
   }
 
   /**

js/common/view/KittenNode.ts

@@ -36,6 +36,7 @@ import CountingObject, { AddendType } from '../model/CountingObject.js';
 import { PositionPropertyType } from '../model/NumberPairsModel.js';
 import NumberPairsColors from '../NumberPairsColors.js';
 import NumberPairsConstants from '../NumberPairsConstants.js';
+import hand_png from '../../../../scenery-phet/images/hand_png.js';
 
 type SelfOptions = {
   onEndDrag: ( countingObject: CountingObject, positionPropertyType: PositionPropertyType ) => void;
@@ -58,6 +59,7 @@ export default class KittenNode extends InteractiveHighlightingNode {
     public readonly countingObject: CountingObject,
     dragBounds: Bounds2,
     newKittenSelectedEmitter: Emitter<[CountingObject]>,
+    hasAttributeBeenSwitchedProperty: Property<boolean>,
     providedOptions: KittenNodeOptions
   ) {
 
@@ -70,8 +72,8 @@ export default class KittenNode extends InteractiveHighlightingNode {
     // a Property that allows us to toggle between the left and right addend while also still respecting the
     // INACTIVE options that addendTypeProperty supports.
     const isLeftAddendProperty = new BooleanProperty( countingObject.addendTypeProperty.value === AddendType.LEFT, {} );
-    isLeftAddendProperty.link( isLeftAddend => {
-
+    isLeftAddendProperty.lazyLink( isLeftAddend => {
+      hasAttributeBeenSwitchedProperty.value = true;
       // Only update the addendTypeProperty if it is not inactive. We should not be changing the state of an
       // inactive counting object.
       if ( countingObject.addendTypeProperty.value !== AddendType.INACTIVE ) {
@@ -99,6 +101,8 @@ export default class KittenNode extends InteractiveHighlightingNode {
       tandem: options.tandem.createTandem( 'kittenAttributeSwitch' ),
       setLabelEnabled: _.noop // We do not want the labels to change opacity
     } );
+    const handIconVisibleProperty = new DerivedProperty( [ hasAttributeBeenSwitchedProperty, countingObject.kittenSelectedProperty ],
+      ( hasAttributeBeenSwitched, selected ) => !hasAttributeBeenSwitched && selected );
 
     // When a countingObject is focused the panel with a switch is visible
     const panelBounds = new Bounds2( 0, 0, KITTEN_PANEL_WIDTH, KITTEN_PANEL_HEIGHT );
@@ -114,6 +118,13 @@ export default class KittenNode extends InteractiveHighlightingNode {
       stroke: null
     } );
 
+    const handIcon = new Image( hand_png, {
+      maxWidth: 24,
+      centerX: focusPanel.centerX + 6,
+      y: 13,
+      visibleProperty: handIconVisibleProperty
+    } );
+
     const leftAddendKittenImage = new Image( kittenYellow_svg, {
       centerX: focusPanel.centerX + KITTEN_OFFSET,
       bottom: focusPanel.bottom - KITTEN_PANEL_MARGIN,
@@ -133,7 +144,7 @@ export default class KittenNode extends InteractiveHighlightingNode {
 
     // TODO: use options.children = instead, etc.
     const superOptions = combineOptions<NodeOptions>( {
-      children: [ focusPanel, leftAddendKittenImage, rightAddendKittenImage ],
+      children: [ focusPanel, leftAddendKittenImage, rightAddendKittenImage, handIcon ],
       focusHighlight: Shape.bounds( focusPanel.bounds )
     }, options );
     super( superOptions );

js/common/view/KittensLayerNode.ts

@@ -18,17 +18,18 @@ import CountingObject, { AddendType } from '../model/CountingObject.js';
 import NumberPairsConstants from '../NumberPairsConstants.js';
 import CountingAreaNode from './CountingAreaNode.js';
 import KittenNode from './KittenNode.js';
+import Property from '../../../../axon/js/Property.js';
 
 type KittensLayerNodeOptions = PickRequired<NodeOptions, 'tandem'> & StrictOmit<NodeOptions, 'children'>;
 export default class KittensLayerNode extends Node {
   public readonly kittenNodes: KittenNode[];
 
-  public constructor( countingObjects: CountingObject[], countingAreNode: CountingAreaNode, providedOptions: KittensLayerNodeOptions ) {
+  public constructor( countingObjects: CountingObject[], countingAreNode: CountingAreaNode, hasAttributeBeenSwitchedProperty: Property<boolean>, providedOptions: KittensLayerNodeOptions ) {
     const newKittenSelectedEmitter = new Emitter<[ CountingObject ]>( { parameters: [ { valueType: CountingObject } ] } );
     const kittenNodes: KittenNode[] = [];
 
     countingObjects.forEach( ( countingObject, i ) => {
-      kittenNodes.push( new KittenNode( countingObject, NumberPairsConstants.COUNTING_AREA_BOUNDS, newKittenSelectedEmitter, {
+      kittenNodes.push( new KittenNode( countingObject, NumberPairsConstants.COUNTING_AREA_BOUNDS, newKittenSelectedEmitter, hasAttributeBeenSwitchedProperty, {
         switchFocusToFirstKitten: () => {
           const firstKitten = kittenNodes[ 0 ];
           assert && assert( firstKitten.countingObject.addendTypeProperty.value !== AddendType.INACTIVE, 'first kitten should not be inactive' );

js/common/view/NumberPairsScreenView.ts

@@ -257,7 +257,7 @@ export default class NumberPairsScreenView extends ScreenView {
      */
     if ( model.representationTypeProperty.validValues?.includes( RepresentationType.KITTENS ) ) {
       const kittensLayerVisibleProperty = DerivedProperty.valueEqualsConstant( model.representationTypeProperty, RepresentationType.KITTENS );
-      const kittensLayerNode = new KittensLayerNode( model.countingObjects, countingAreaNode, {
+      const kittensLayerNode = new KittensLayerNode( model.countingObjects, countingAreaNode, model.hasAttributeBeenSwitchedProperty, {
         visibleProperty: kittensLayerVisibleProperty,
         tandem: options.tandem.createTandem( 'kittensLayerNode' )
       } );