Skip to content
Snippets Groups Projects
Commit 9e783d8a authored by Paul Kaplan's avatar Paul Kaplan
Browse files

Use a big green flag overlay to start the VM if needed

parent f659dfbc
No related branches found
No related tags found
No related merge requests found
......@@ -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; }
......
......@@ -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} />
......
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);
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment