From 9e783d8aeb0315324e1ede2963074fdc1e75cc09 Mon Sep 17 00:00:00 2001
From: Paul Kaplan <pkaplan@media.mit.edu>
Date: Tue, 27 Nov 2018 14:09:22 -0500
Subject: [PATCH] Use a big green flag overlay to start the VM if needed
---
src/components/stage/stage.css | 15 +++++++-
src/components/stage/stage.jsx | 6 +++
src/containers/green-flag-overlay.jsx | 55 +++++++++++++++++++++++++++
3 files changed, 75 insertions(+), 1 deletion(-)
create mode 100644 src/containers/green-flag-overlay.jsx
diff --git a/src/components/stage/stage.css b/src/components/stage/stage.css
index 9264c094e..97f7e1ebf 100644
--- a/src/components/stage/stage.css
+++ b/src/components/stage/stage.css
@@ -89,7 +89,10 @@ to adjust for the border using a different method */
padding-bottom: calc($stage-full-screen-stage-padding + $stage-full-screen-border-width);
}
-.monitor-wrapper, .color-picker-wrapper, .frame-wrapper {
+.monitor-wrapper,
+.color-picker-wrapper,
+.frame-wrapper,
+.green-flag-overlay-wrapper {
position: absolute;
top: 0;
left: 0;
@@ -138,6 +141,16 @@ to adjust for the border using a different method */
animation-fill-mode: forwards; /* Leave at 0 opacity after animation */
}
+.green-flag-overlay {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ pointer-events: all;
+ cursor: pointer;
+}
+
@keyframes flash {
0% { opacity: 1; }
100% { opacity: 0; }
diff --git a/src/components/stage/stage.jsx b/src/components/stage/stage.jsx
index ede5048ea..6d81443f8 100644
--- a/src/components/stage/stage.jsx
+++ b/src/components/stage/stage.jsx
@@ -7,6 +7,7 @@ import DOMElementRenderer from '../../containers/dom-element-renderer.jsx';
import Loupe from '../loupe/loupe.jsx';
import MonitorList from '../../containers/monitor-list.jsx';
import TargetHighlight from '../../containers/target-highlight.jsx';
+import GreenFlagOverlay from '../../containers/green-flag-overlay.jsx';
import Question from '../../containers/question.jsx';
import MicIndicator from '../mic-indicator/mic-indicator.jsx';
import {STAGE_DISPLAY_SIZES} from '../../lib/layout-constants.js';
@@ -71,6 +72,11 @@ const StageComponent = props => {
stageWidth={stageDimensions.width}
/>
</Box>
+ <Box className={styles.greenFlagOverlayWrapper}>
+ <GreenFlagOverlay
+ className={styles.greenFlagOverlay}
+ />
+ </Box>
{isColorPicking && colorInfo ? (
<Box className={styles.colorPickerWrapper}>
<Loupe colorInfo={colorInfo} />
diff --git a/src/containers/green-flag-overlay.jsx b/src/containers/green-flag-overlay.jsx
new file mode 100644
index 000000000..2d0e4135f
--- /dev/null
+++ b/src/containers/green-flag-overlay.jsx
@@ -0,0 +1,55 @@
+import bindAll from 'lodash.bindall';
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import {connect} from 'react-redux';
+import VM from 'scratch-vm';
+import greenFlag from '../components/green-flag/icon--green-flag.svg';
+
+class GreenFlagOverlay extends React.Component {
+ constructor (props) {
+ super(props);
+ bindAll(this, [
+ 'handleClick'
+ ]);
+ }
+
+ handleClick () {
+ this.props.vm.start();
+ this.props.vm.greenFlag();
+ }
+
+ render () {
+ if (this.props.isStarted) return null;
+
+ return (
+ <div
+ className={this.props.className}
+ onClick={this.handleClick}
+ >
+ <img
+ draggable={false}
+ src={greenFlag}
+ />
+ </div>
+ );
+ }
+}
+
+GreenFlagOverlay.propTypes = {
+ className: PropTypes.string,
+ isStarted: PropTypes.bool,
+ vm: PropTypes.instanceOf(VM)
+};
+
+const mapStateToProps = state => ({
+ isStarted: state.scratchGui.vmStatus.started,
+ vm: state.scratchGui.vm
+});
+
+const mapDispatchToProps = () => ({});
+
+export default connect(
+ mapStateToProps,
+ mapDispatchToProps
+)(GreenFlagOverlay);
--
GitLab