[Spritelab] Implement Pause button behind experiment

apps/src/p5lab/P5Lab.js

@@ -391,8 +391,10 @@ P5Lab.prototype.init = function(config) {
     (!config.hideSource &&
       !config.level.debuggerDisabled &&
       !config.level.iframeEmbedAppAndCode);
+  var showPauseButton = experiments.isEnabled(experiments.SPRITELAB_PAUSE);
   var showDebugConsole = config.level.editCode && !config.hideSource;
-  this.debuggerEnabled = showDebugButtons || showDebugConsole;
+  this.debuggerEnabled =
+    showDebugButtons || showPauseButton || showDebugConsole;
 
   if (this.debuggerEnabled) {
     getStore().dispatch(

apps/src/p5lab/P5LabVisualizationColumn.jsx

@@ -5,6 +5,7 @@ import {connect} from 'react-redux';
 import classNames from 'classnames';
 import GameButtons from '@cdo/apps/templates/GameButtons';
 import ArrowButtons from '@cdo/apps/templates/ArrowButtons';
+import PauseButton from '@cdo/apps/templates/PauseButton';
 import BelowVisualization from '@cdo/apps/templates/BelowVisualization';
 import experiments from '@cdo/apps/util/experiments';
 import {APP_HEIGHT, APP_WIDTH} from './constants';
@@ -192,6 +193,9 @@ class P5LabVisualizationColumn extends React.Component {
         </div>
 
         <GameButtons>
+          {experiments.isEnabled(experiments.SPRITELAB_PAUSE) && (
+            <PauseButton />
+          )}
           <ArrowButtons />
 
           <CompletionButton />

apps/src/p5lab/spritelab/commands/worldCommands.js

@@ -10,7 +10,7 @@ export const commands = {
 
   getTime(unit) {
     if (unit === 'seconds') {
-      return this.World.seconds || 0;
+      return coreLibrary.getAdjustedWorldTime(this) || 0;
     } else if (unit === 'frames') {
       return this.World.frameCount || 0;
     }

apps/src/p5lab/spritelab/coreLibrary.js

@@ -4,6 +4,7 @@ var inputEvents = [];
 var behaviors = [];
 var userInputEventCallbacks = {};
 var newSprites = {};
+var pauseTime = 0;
 
 export var background;
 export var title = '';
@@ -19,6 +20,19 @@ export function reset() {
   title = subtitle = '';
   userInputEventCallbacks = {};
   defaultSpriteSize = 100;
+  pauseTime = 0;
+}
+
+export function addPauseTime(time) {
+  pauseTime += time;
+}
+
+/**
+ * Returns World.seconds adjusted to exclude time during which the app was paused
+ */
+export function getAdjustedWorldTime(p5Inst) {
+  const current = new Date().getTime();
+  return Math.round((current - p5Inst._startTime - pauseTime) / 1000);
 }
 
 /**
@@ -205,13 +219,11 @@ export function clearCollectDataEvents() {
 function atTimeEvent(inputEvent, p5Inst) {
   if (inputEvent.args.unit === 'seconds') {
     const previousTime = inputEvent.previousTime || 0;
-    inputEvent.previousTime = p5Inst.World.seconds;
+    const worldTime = getAdjustedWorldTime(p5Inst);
+    inputEvent.previousTime = worldTime;
     // There are many ticks per second, but we only want to fire the event once (on the first tick where
-    // World.seconds matches the event argument)
-    if (
-      p5Inst.World.seconds === inputEvent.args.n &&
-      previousTime !== inputEvent.args.n
-    ) {
+    // the time matches the event argument)
+    if (worldTime === inputEvent.args.n && previousTime !== inputEvent.args.n) {
       // Call callback with no extra args
       return [{}];
     }
@@ -227,10 +239,11 @@ function atTimeEvent(inputEvent, p5Inst) {
 
 function collectDataEvent(inputEvent, p5Inst) {
   const previous = inputEvent.previous || 0;
-  inputEvent.previous = p5Inst.World.seconds;
+  const worldTime = getAdjustedWorldTime(p5Inst);
+  inputEvent.previous = worldTime;
 
   // Only log data once per second
-  if (p5Inst.World.seconds !== previous) {
+  if (worldTime !== previous) {
     // Call callback with no extra args
     return [{}];
   } else {

apps/src/templates/PauseButton.jsx

@@ -0,0 +1,63 @@
+import React from 'react';
+import {connect} from 'react-redux';
+import PropTypes from 'prop-types';
+import color from '@cdo/apps/util/color';
+import {actions, selectors} from '@cdo/apps/lib/tools/jsdebugger/redux';
+import * as coreLibrary from '@cdo/apps/p5lab/spritelab/coreLibrary';
+
+const styles = {
+  button: {
+    minWidth: 0,
+    padding: '10px 13px',
+    backgroundColor: color.orange,
+    borderColor: color.orange,
+    color: color.white
+  }
+};
+
+class PauseButton extends React.Component {
+  static propTypes = {
+    // from redux
+    togglePause: PropTypes.func.isRequired,
+    isPaused: PropTypes.bool.isRequired,
+    isAttached: PropTypes.bool.isRequired
+  };
+
+  state = {
+    pauseStart: 0
+  };
+
+  togglePause = () => {
+    const current = new Date().getTime();
+    if (this.props.isPaused) {
+      coreLibrary.addPauseTime(current - this.state.pauseStart);
+      this.setState({pauseStart: 0});
+    } else {
+      this.setState({pauseStart: current});
+    }
+    this.props.togglePause();
+  };
+
+  render() {
+    return (
+      <button
+        type="button"
+        onClick={this.togglePause}
+        style={styles.button}
+        disabled={!this.props.isAttached}
+      >
+        <i className={this.props.isPaused ? 'fa fa-play' : 'fa fa-pause'} />
+      </button>
+    );
+  }
+}
+
+export default connect(
+  state => ({
+    isAttached: selectors.isAttached(state),
+    isPaused: selectors.isPaused(state)
+  }),
+  {
+    togglePause: actions.togglePause
+  }
+)(PauseButton);

apps/src/util/experiments.js

@@ -33,6 +33,7 @@ experiments.SPRITELAB_INPUT = 'spritelabInput';
 experiments.TIME_SPENT = 'time-spent';
 experiments.APPLAB_ML = 'applab-ml';
 experiments.BYPASS_DIALOG_POPUP = 'bypass-dialog-popup';
+experiments.SPRITELAB_PAUSE = 'spritelabPause';
 
 /**
  * Get our query string. Provided as a method so that tests can mock this.