prototype FaucetControlsKeyboardHelpContent, #249

js/common/view/FaucetControlsKeyboardHelpContent.ts

@@ -0,0 +1,66 @@
+// Copyright 2022, University of Colorado Boulder
+
+//TODO https://github.com/phetsims/scenery-phet/issues/773 move to scenery-phet
+/**
+ * FaucetControlsKeyboardHelpContent is the keyboard-help section that describes how to interact with FaucetNode.
+ *
+ * @author Chris Malley (PixelZoom, Inc.)
+ */
+
+import StringProperty from '../../../../axon/js/StringProperty.js';
+import optionize from '../../../../phet-core/js/optionize.js';
+import PickOptional from '../../../../phet-core/js/types/PickOptional.js';
+import { FaucetNodeOptions } from '../../../../scenery-phet/js/FaucetNode.js';
+import KeyboardHelpIconFactory from '../../../../scenery-phet/js/keyboard/help/KeyboardHelpIconFactory.js';
+import KeyboardHelpSection, { KeyboardHelpSectionOptions } from '../../../../scenery-phet/js/keyboard/help/KeyboardHelpSection.js';
+import KeyboardHelpSectionRow from '../../../../scenery-phet/js/keyboard/help/KeyboardHelpSectionRow.js';
+import TextKeyNode from '../../../../scenery-phet/js/keyboard/TextKeyNode.js';
+import phScale from '../../phScale.js';
+
+//TODO https://github.com/phetsims/scenery-phet/issues/773 i18n, add to scenery-phet-strings_en.json
+const faucetControlsStringProperty = new StringProperty( 'Faucet Controls' );
+const openCloseStringProperty = new StringProperty( 'Open/close' );
+const openCloseSlowerStringProperty = new StringProperty( 'Open/close slower' );
+const dispenseASmallAmountStringProperty = new StringProperty( 'Dispense a small amount' );
+
+type SelfOptions = PickOptional<FaucetNodeOptions, 'tapToDispenseEnabled'>;
+
+export type FaucetControlsKeyboardHelpContentOptions = SelfOptions & KeyboardHelpSectionOptions;
+
+export default class FaucetControlsKeyboardHelpContent extends KeyboardHelpSection {
+
+  public constructor( providedOptions?: FaucetControlsKeyboardHelpContentOptions ) {
+
+    const options = optionize<FaucetControlsKeyboardHelpContentOptions, SelfOptions, KeyboardHelpSectionOptions>()( {
+
+      // SelfOptions
+      tapToDispenseEnabled: true
+    }, providedOptions );
+
+    // arrows or WASD
+    const normalRow = KeyboardHelpSectionRow.labelWithIcon( openCloseStringProperty,
+      KeyboardHelpIconFactory.arrowOrWasdKeysRowIcon() );
+
+    // Shift+arrows or Shift+WASD
+    const slowerRow = KeyboardHelpSectionRow.labelWithIconList( openCloseSlowerStringProperty, [
+      KeyboardHelpIconFactory.shiftPlusIcon( KeyboardHelpIconFactory.arrowKeysRowIcon() ),
+      KeyboardHelpIconFactory.shiftPlusIcon( KeyboardHelpIconFactory.wasdRowIcon() )
+    ] );
+
+    const rows = [ normalRow, slowerRow ];
+
+    // Space or Enter
+    if ( options.tapToDispenseEnabled ) {
+
+      const dispenseRow = KeyboardHelpSectionRow.labelWithIcon(
+        dispenseASmallAmountStringProperty,
+        KeyboardHelpIconFactory.iconOrIcon( TextKeyNode.space(), TextKeyNode.enter() )
+      );
+      rows.push( dispenseRow );
+    }
+
+    super( faucetControlsStringProperty, rows );
+  }
+}
+
+phScale.register( 'FaucetControlsKeyboardHelpContent', FaucetControlsKeyboardHelpContent );

js/macro/view/MacroKeyboardHelpContent.ts

@@ -12,6 +12,7 @@ import BasicActionsKeyboardHelpSection from '../../../../scenery-phet/js/keyboar
 import ComboBoxKeyboardHelpSection from '../../../../scenery-phet/js/keyboard/help/ComboBoxKeyboardHelpSection.js';
 import PhScaleStrings from '../../PhScaleStrings.js';
 import MoveKeyboardHelpContent from '../../common/view/MoveKeyboardHelpContent.js';
+import FaucetControlsKeyboardHelpContent from '../../common/view/FaucetControlsKeyboardHelpContent.js';
 
 export default class MacroKeyboardHelpContent extends TwoColumnKeyboardHelpContent {
 
@@ -32,6 +33,9 @@ export default class MacroKeyboardHelpContent extends TwoColumnKeyboardHelpConte
 
     const rightColumn = [
 
+      // Faucet Controls
+      new FaucetControlsKeyboardHelpContent(),
+
       // Basic Actions
       new BasicActionsKeyboardHelpSection( {
         withCheckboxContent: true

js/micro/view/MicroKeyboardHelpContent.ts

@@ -12,6 +12,7 @@ import MoveKeyboardHelpContent from '../../common/view/MoveKeyboardHelpContent.j
 import PhScaleStrings from '../../PhScaleStrings.js';
 import ComboBoxKeyboardHelpSection from '../../../../scenery-phet/js/keyboard/help/ComboBoxKeyboardHelpSection.js';
 import BasicActionsKeyboardHelpSection from '../../../../scenery-phet/js/keyboard/help/BasicActionsKeyboardHelpSection.js';
+import FaucetControlsKeyboardHelpContent from '../../common/view/FaucetControlsKeyboardHelpContent.js';
 
 export default class MicroKeyboardHelpContent extends TwoColumnKeyboardHelpContent {
 
@@ -32,6 +33,9 @@ export default class MicroKeyboardHelpContent extends TwoColumnKeyboardHelpConte
 
     const rightColumn = [
 
+      // Faucet Controls
+      new FaucetControlsKeyboardHelpContent(),
+
       // Basic Actions
       new BasicActionsKeyboardHelpSection( {
         withCheckboxContent: true