Use a big green flag overlay to start the VM if needed
This commit is contained in:
1 parent
f659dfbc3c
commit
9e783d8aeb
3 files changed
+75
-1
No files matched your search
@@ -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} />
|
||||
|
||||
@@ -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);
|
||||
Reference in new issue
Block a user