diff --git a/src/components/stage/stage.css b/src/components/stage/stage.css index 9264c094e51bd6e20f897f41be0c4c04c5eac5e6..97f7e1ebf0b395a853e6e5e382fc55dc12123d80 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 ede5048ea8a2c96e7b5535b2b63651d88e16099b..6d81443f893a9c0126d91f950f996c855b6f0b22 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 0000000000000000000000000000000000000000..2d0e4135ff241e30666414e133241261c05fe1d3 --- /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);