Add swipe prompt overlay to visualization area

apps/src/StudioApp.js

@@ -71,6 +71,7 @@ import {
 } from './redux/instructions';
 import {addCallouts} from '@cdo/apps/code-studio/callouts';
 import {RESIZE_VISUALIZATION_EVENT} from './lib/ui/VisualizationResizeBar';
+import {setArrowButtonDisabled} from '@cdo/apps/templates/arrowDisplayRedux';
 
 var copyrightStrings;
 
@@ -944,7 +945,7 @@ StudioApp.prototype.toggleRunReset = function(button) {
   }
 
   // Toggle soft-buttons (all have the 'arrow' class set):
-  $('.arrow').prop('disabled', showRun);
+  getStore().dispatch(setArrowButtonDisabled(showRun));
 };
 
 StudioApp.prototype.isRunning = function() {

apps/src/bounce/BounceVisualizationColumn.jsx

@@ -2,15 +2,17 @@ import React from 'react';
 var msg = require('@cdo/locale');
 
 var GameButtons = require('../templates/GameButtons').default;
-var ArrowButtons = require('../templates/ArrowButtons');
 var BelowVisualization = require('../templates/BelowVisualization');
 var ProtectedStatefulDiv = require('../templates/ProtectedStatefulDiv');
+import ArrowButtons from '../templates/ArrowButtons';
 import ProtectedVisualizationDiv from '../templates/ProtectedVisualizationDiv';
+import SwipePrompt from '@cdo/apps/templates/SwipePrompt';
 
 var BounceVisualizationColumn = function() {
   return (
     <span>
       <ProtectedVisualizationDiv>
+        <SwipePrompt />
         <svg version="1.1" id="svgBounce" />
       </ProtectedVisualizationDiv>
       <GameButtons>

apps/src/bounce/bounce.js

@@ -19,6 +19,10 @@ var Hammer = require('../third-party/hammer');
 import {getStore} from '../redux';
 import {getRandomDonorTwitter} from '../util/twitterHelper';
 import {KeyCodes, TestResults, ResultType} from '../constants';
+import {
+  showArrowButtons,
+  dismissSwipeOverlay
+} from '@cdo/apps/templates/arrowDisplayRedux';
 
 var SquareType = tiles.SquareType;
 
@@ -501,6 +505,10 @@ Bounce.onTick = function() {
       Bounce.keyState[KeyCodes[key]] &&
       Bounce.keyState[KeyCodes[key]] === 'keydown'
     ) {
+      let store = getStore();
+      if (!store.getState().arrowDisplay.swipeOverlayHasBeenDismissed) {
+        store.dispatch(dismissSwipeOverlay('keyPress'));
+      }
       switch (KeyCodes[key]) {
         case KeyCodes.LEFT:
           Bounce.callUserGeneratedCode(Bounce.whenLeft);
@@ -669,6 +677,10 @@ Bounce.onKey = function(e) {
 };
 
 Bounce.onArrowButtonDown = function(e, idBtn) {
+  let store = getStore();
+  if (!store.getState().arrowDisplay.swipeOverlayHasBeenDismissed) {
+    store.dispatch(dismissSwipeOverlay('buttonPress'));
+  }
   // Store the most recent event type per-button
   Bounce.btnState[idBtn] = ButtonState.DOWN;
   e.preventDefault(); // Stop normal events so we see mouseup later.
@@ -918,6 +930,7 @@ Bounce.reset = function(first) {
   }
   if (softButtonCount) {
     var softButtonsCell = document.getElementById('soft-buttons');
+    getStore().dispatch(showArrowButtons());
     softButtonsCell.className = 'soft-buttons-' + softButtonCount;
   }
 

apps/src/code-studio/redux.js

@@ -14,6 +14,7 @@ import publishDialog from '../templates/projects/publishDialog/publishDialogRedu
 import projects from '../templates/projects/projectsRedux';
 import verifiedTeacher from './verifiedTeacherRedux';
 import currentUser from '@cdo/apps/templates/currentUserRedux';
+import arrowDisplay from '@cdo/apps/templates/arrowDisplayRedux';
 
 registerReducers({
   header,
@@ -29,7 +30,8 @@ registerReducers({
   publishDialog,
   projects,
   verifiedTeacher,
-  currentUser
+  currentUser,
+  arrowDisplay
 });
 
 export {getStore};

apps/src/craft/agent/CraftVisualizationColumn.jsx

@@ -6,12 +6,14 @@ var GameButtons = require('../../templates/GameButtons').default;
 import ArrowButtons from '../../templates/ArrowButtons';
 var BelowVisualization = require('../../templates/BelowVisualization');
 import ProtectedVisualizationDiv from '../../templates/ProtectedVisualizationDiv';
+import SwipePrompt from '@cdo/apps/templates/SwipePrompt';
 
 var CraftVisualizationColumn = function(props) {
   return (
     <span>
       <ProtectedVisualizationDiv>
         <div id="minecraft-frame">
+          <SwipePrompt useMinecraftStyling />
           <div id="phaser-game" />
         </div>
       </ProtectedVisualizationDiv>

apps/src/craft/agent/craft.js

@@ -25,6 +25,10 @@ import Sounds from '../../Sounds';
 import {TestResults} from '../../constants';
 import {captureThumbnailFromCanvas} from '../../util/thumbnail';
 import {SignInState} from '@cdo/apps/templates/currentUserRedux';
+import {
+  showArrowButtons,
+  dismissSwipeOverlay
+} from '@cdo/apps/templates/arrowDisplayRedux';
 
 const MEDIA_URL = '/blockly/media/craft/';
 
@@ -264,10 +268,8 @@ export default class Craft {
             }
 
             dom.addMouseUpTouchEvent(document, Craft.onDocumentMouseUp, false);
-            $('#soft-buttons')
-              .removeClass('soft-buttons-none')
-              .addClass('soft-buttons-' + 4);
-            $('.arrow').prop('disabled', false);
+            $('#soft-buttons').addClass('soft-buttons-' + 4);
+            getStore().dispatch(showArrowButtons());
 
             const resetButton = document.getElementById('resetButton');
             dom.addClickTouchEvent(resetButton, Craft.resetButtonClick);
@@ -391,6 +393,10 @@ export default class Craft {
   }
 
   static onArrowButtonDown(e, btn) {
+    let store = getStore();
+    if (!store.getState().arrowDisplay.swipeOverlayHasBeenDismissed) {
+      store.dispatch(dismissSwipeOverlay('buttonPress'));
+    }
     Craft.gameController.codeOrgAPI.arrowDown(directionToFacing[btn]);
     e.preventDefault(); // Stop normal events so we see mouseup later.
   }
@@ -610,13 +616,6 @@ export default class Craft {
     return Craft.gameController && Craft.gameController.levelModel;
   }
 
-  /**
-   * Base's `studioApp().resetButtonClick` will be called first.
-   */
-  static resetButtonClick() {
-    $('.arrow').prop('disabled', false);
-  }
-
   static isPreAnimationFailure(testResult) {
     switch (testResult) {
       case TestResults.QUESTION_MARKS_IN_NUMBER_FIELD:
@@ -639,6 +638,27 @@ export default class Craft {
       return;
     }
 
+    let store = getStore();
+    if (!store.getState().arrowDisplay.swipeOverlayHasBeenDismissed) {
+      window.addEventListener('keydown', function hideOverlay(e) {
+        if (
+          [
+            'ArrowLeft',
+            'ArrowRight',
+            'ArrowUp',
+            'ArrowDown',
+            'Left',
+            'Right',
+            'Up',
+            'Down'
+          ].includes(e.key)
+        ) {
+          store.dispatch(dismissSwipeOverlay('keyPress'));
+          window.removeEventListener('keydown', hideOverlay);
+        }
+      });
+    }
+
     studioApp().toggleRunReset('reset');
     Blockly.mainBlockSpace.traceOn(true);
     studioApp().attempts++;

apps/src/craft/designer/CraftVisualizationColumn.jsx

@@ -7,6 +7,7 @@ import {default as GameButtons} from '../../templates/GameButtons';
 import BelowVisualization from '../../templates/BelowVisualization';
 import ArrowButtons from '../../templates/ArrowButtons';
 import ProtectedVisualizationDiv from '../../templates/ProtectedVisualizationDiv';
+import SwipePrompt from '@cdo/apps/templates/SwipePrompt';
 
 export default class CraftVisualizationColumn extends React.Component {
   static propTypes = {
@@ -19,6 +20,7 @@ export default class CraftVisualizationColumn extends React.Component {
       <span>
         <ProtectedVisualizationDiv>
           <div id="minecraft-frame">
+            <SwipePrompt useMinecraftStyling />
             <div id="phaser-game" />
             {this.props.showScore && (
               <div id="score-container">

apps/src/craft/designer/craft.js

@@ -21,11 +21,15 @@ import CraftVisualizationColumn from './CraftVisualizationColumn';
 import {ENTITY_ACTION_BLOCKS, ENTITY_TARGET_ACTION_BLOCKS} from './blocks';
 import {getStore} from '../../redux';
 import Sounds from '../../Sounds';
-
 import {TestResults} from '../../constants';
 import trackEvent from '../../util/trackEvent';
 import {captureThumbnailFromCanvas} from '../../util/thumbnail';
 import {SignInState} from '@cdo/apps/templates/currentUserRedux';
+import {
+  showArrowButtons,
+  hideArrowButtons,
+  dismissSwipeOverlay
+} from '@cdo/apps/templates/arrowDisplayRedux';
 
 const MEDIA_URL = '/blockly/media/craft/';
 
@@ -343,9 +347,7 @@ Craft.init = function(config) {
         }
 
         dom.addMouseUpTouchEvent(document, Craft.onDocumentMouseUp, false);
-        $('#soft-buttons')
-          .removeClass('soft-buttons-none')
-          .addClass('soft-buttons-' + 4);
+        $('#soft-buttons').addClass('soft-buttons-' + 4);
         Craft.hideSoftButtons();
 
         const phaserGame = document.getElementById('phaser-game');
@@ -461,6 +463,10 @@ const directionToFacing = {
 };
 
 Craft.onArrowButtonDown = function(e, btn) {
+  let store = getStore();
+  if (!store.getState().arrowDisplay.swipeOverlayHasBeenDismissed) {
+    store.dispatch(dismissSwipeOverlay('buttonPress'));
+  }
   Craft.gameController.codeOrgAPI.arrowDown(directionToFacing[btn]);
   e.preventDefault(); // Stop normal events so we see mouseup later.
 };
@@ -658,12 +664,12 @@ Craft.niceToHaveAssetsForLevel = function(levelNumber) {
 };
 
 Craft.hideSoftButtons = function() {
-  $('#soft-buttons').hide();
+  getStore().dispatch(hideArrowButtons());
   studioApp().resizePinnedBelowVisualizationArea();
 };
 
 Craft.showSoftButtons = function() {
-  $('#soft-buttons').show();
+  getStore().dispatch(showArrowButtons());
   studioApp().resizePinnedBelowVisualizationArea();
 };
 
@@ -703,6 +709,27 @@ Craft.runButtonClick = function() {
     return;
   }
 
+  let store = getStore();
+  if (!store.getState().arrowDisplay.swipeOverlayHasBeenDismissed) {
+    window.addEventListener('keydown', function hideOverlay(e) {
+      if (
+        [
+          'ArrowLeft',
+          'ArrowRight',
+          'ArrowUp',
+          'ArrowDown',
+          'Left',
+          'Right',
+          'Up',
+          'Down'
+        ].includes(e.key)
+      ) {
+        store.dispatch(dismissSwipeOverlay('keyPress'));
+        window.removeEventListener('keydown', hideOverlay);
+      }
+    });
+  }
+
   if (Craft.level.usePlayer) {
     Craft.showSoftButtons();
   }

apps/src/dance/Dance.js

@@ -40,6 +40,7 @@ import {
 } from './songs';
 import {SongTitlesToArtistTwitterHandle} from '../code-studio/dancePartySongArtistTags';
 import firehoseClient from '@cdo/apps/lib/util/firehose';
+import {showArrowButtons} from '@cdo/apps/templates/arrowDisplayRedux';
 
 const ButtonState = {
   UP: 0,
@@ -443,9 +444,8 @@ Dance.prototype.reset = function() {
     softButtonCount++;
   }
   if (softButtonCount) {
-    $('#soft-buttons')
-      .removeClass('soft-buttons-none')
-      .addClass('soft-buttons-' + softButtonCount);
+    getStore().dispatch(showArrowButtons());
+    $('#soft-buttons').addClass('soft-buttons-' + softButtonCount);
   }
 };
 

apps/src/p5lab/gamelab/MobileControls.js

@@ -1,6 +1,8 @@
 import dom from '@cdo/apps/dom';
 import gameLabDPadHtmlEjs from '@cdo/apps/templates/gameLabDPad.html.ejs';
 import {GAMELAB_DPAD_CONTAINER_ID} from './constants';
+import {showArrowButtons} from '@cdo/apps/templates/arrowDisplayRedux';
+import {getStore} from '@cdo/apps/redux';
 
 const DPAD_DEAD_ZONE = 3;
 // Allows diagonal to kick in after 22.5 degrees off primary axis, giving each
@@ -251,9 +253,8 @@ export default class MobileControls {
       buttonId => (document.getElementById(buttonId).style.display = 'inline')
     );
     if (softButtonIds.length) {
-      $('#soft-buttons')
-        .removeClass('soft-buttons-none')
-        .addClass('soft-buttons-' + softButtonIds.length);
+      $('#soft-buttons').addClass('soft-buttons-' + softButtonIds.length);
+      getStore().dispatch(showArrowButtons());
     }
     // For export mode only:
     $('#sketch').removeClass('no-controls');

apps/src/studio/StudioVisualizationColumn.jsx

@@ -3,17 +3,19 @@ import React from 'react';
 var msg = require('@cdo/locale');
 
 var GameButtons = require('../templates/GameButtons').default;
-var ArrowButtons = require('../templates/ArrowButtons');
 var BelowVisualization = require('../templates/BelowVisualization');
+import ArrowButtons from '../templates/ArrowButtons';
 import ProtectedVisualizationDiv from '../templates/ProtectedVisualizationDiv';
 import VisualizationOverlay from '../templates/VisualizationOverlay';
 import CrosshairOverlay from '../templates/CrosshairOverlay';
 import TooltipOverlay, {coordinatesProvider} from '../templates/TooltipOverlay';
+import SwipePrompt from '@cdo/apps/templates/SwipePrompt';
 
 var StudioVisualizationColumn = function(props) {
   return (
     <span>
       <ProtectedVisualizationDiv>
+        <SwipePrompt />
         <svg version="1.1" id="svgStudio" />
         <VisualizationOverlay width={400} height={400}>
           <CrosshairOverlay />

apps/src/studio/studio.js

@@ -55,6 +55,10 @@ import project from '../code-studio/initApp/project';
 import {blockAsXmlNode, cleanBlocks} from '../block_utils';
 import {parseElement} from '../xml';
 import {getRandomDonorTwitter} from '../util/twitterHelper';
+import {
+  showArrowButtons,
+  dismissSwipeOverlay
+} from '@cdo/apps/templates/arrowDisplayRedux';
 
 // tests don't have svgelement
 import '../util/svgelement-polyfill';
@@ -1098,6 +1102,12 @@ var setSvgText = (Studio.setSvgText = function(opts) {
  *  machine for consumption by the student's event-handling code.
  */
 function callHandler(name, allowQueueExtension, extraArgs = []) {
+  if (['when-up', 'when-down', 'when-left', 'when-right'].includes(name)) {
+    let store = getStore();
+    if (!store.getState().arrowDisplay.swipeOverlayHasBeenDismissed) {
+      store.dispatch(dismissSwipeOverlay('buttonKeyPress'));
+    }
+  }
   if (level.autoArrowSteer) {
     var moveDir;
     switch (name) {
@@ -2638,9 +2648,8 @@ Studio.reset = function(first) {
     softButtonCount++;
   }
   if (softButtonCount) {
-    $('#soft-buttons')
-      .removeClass('soft-buttons-none')
-      .addClass('soft-buttons-' + softButtonCount);
+    getStore().dispatch(showArrowButtons());
+    $('#soft-buttons').addClass('soft-buttons-' + softButtonCount);
   }
 
   // True if we should fail before execution, even if freeplay