diff --git a/package.json b/package.json
index 826c6cb176cedf8970d5794a43d0c4ce4916ac73..59b0e3a14a7abddc837806585d1f8b1a403da36b 100644
--- a/package.json
+++ b/package.json
@@ -70,6 +70,7 @@
"react-intl-redux": "0.6.0",
"react-modal": "2.2.2",
"react-redux": "5.0.6",
+ "react-responsive": "1.3.4",
"react-style-proptype": "3.0.0",
"react-tabs": "1.1.0",
"react-test-renderer": "^15.5.4",
diff --git a/src/components/forms/input.css b/src/components/forms/input.css
index 6747e2c215a38356104d977b29b9e6008f8b42f8..91b42d4cc59e69dc505975a90d22db22891b5253 100644
--- a/src/components/forms/input.css
+++ b/src/components/forms/input.css
@@ -35,6 +35,6 @@
}
.input-small {
- width: 3.5rem;
+ width: 3rem;
text-align: center;
}
diff --git a/src/components/gui/gui.css b/src/components/gui/gui.css
index de9c7f9ec3918a67cfdb2b65661f9277b5dd5676..5146c84f16e5340ab0be74a4340f40c3533ebbd6 100644
--- a/src/components/gui/gui.css
+++ b/src/components/gui/gui.css
@@ -112,13 +112,6 @@
*/
display: flex;
flex-direction: column;
-
- /*
- Calc the minimum width for this pane, accounting for left + right spacing.
- If and when the width doesn't need to be fixed, we can move the spacing out
- of this calc, and into padding instead
- */
- flex-basis: calc(480px + ($space * 2));
}
.stage-wrapper {
diff --git a/src/components/gui/gui.jsx b/src/components/gui/gui.jsx
index f15a5c9a933f1d1814bd54ef8537b6589cdb6645..1e7fe027e54d69c1caead489e3bb5f9f6dde6fdf 100644
--- a/src/components/gui/gui.jsx
+++ b/src/components/gui/gui.jsx
@@ -2,6 +2,7 @@ import classNames from 'classnames';
import PropTypes from 'prop-types';
import React from 'react';
import {Tab, Tabs, TabList, TabPanel} from 'react-tabs';
+import MediaQuery from 'react-responsive';
import tabStyles from 'react-tabs/style/react-tabs.css';
import VM from 'scratch-vm';
@@ -16,9 +17,9 @@ import StopAll from '../../containers/stop-all.jsx';
import Box from '../box/box.jsx';
import MenuBar from '../menu-bar/menu-bar.jsx';
+import layout from '../../lib/layout-constants.js';
import styles from './gui.css';
-
const GUIComponent = props => {
const {
basePath,
@@ -87,20 +88,22 @@ const GUIComponent = props => {
</Tabs>
</Box>
- <Box className={styles.stageAndTargetWrapper} >
- <Box className={styles.stageMenuWrapper} >
+ <Box className={styles.stageAndTargetWrapper}>
+ <Box className={styles.stageMenuWrapper}>
<GreenFlag vm={vm} />
<StopAll vm={vm} />
</Box>
-
- <Box className={styles.stageWrapper} >
- <Stage
- shrink={0}
- vm={vm}
- />
+ <Box className={styles.stageWrapper}>
+ <MediaQuery minWidth={layout.fullSizeMinWidth}>{isFullSize => (
+ <Stage
+ height={isFullSize ? layout.fullStageHeight : layout.smallerStageHeight}
+ shrink={0}
+ vm={vm}
+ width={isFullSize ? layout.fullStageWidth : layout.smallerStageWidth}
+ />
+ )}</MediaQuery>
</Box>
-
- <Box className={styles.targetWrapper} >
+ <Box className={styles.targetWrapper}>
<TargetPane
vm={vm}
/>
diff --git a/src/components/sprite-info/sprite-info.jsx b/src/components/sprite-info/sprite-info.jsx
index fc68c9121a44f6d587b46a15d1654e372b4688f4..8b3f212d99dfa870db88c6338f4efd09cfe0a643 100644
--- a/src/components/sprite-info/sprite-info.jsx
+++ b/src/components/sprite-info/sprite-info.jsx
@@ -1,12 +1,14 @@
import classNames from 'classnames';
import PropTypes from 'prop-types';
import React from 'react';
+import MediaQuery from 'react-responsive';
import Box from '../box/box.jsx';
import Label from '../forms/label.jsx';
import Input from '../forms/input.jsx';
import BufferedInputHOC from '../forms/buffered-input-hoc.jsx';
+import layout from '../../lib/layout-constants.js';
import styles from './sprite-info.css';
import xIcon from './icon--x.svg';
@@ -49,12 +51,14 @@ class SpriteInfo extends React.Component {
</div>
<div className={styles.group}>
- <div className={styles.iconWrapper}>
- <img
- className={classNames(styles.xIcon, styles.icon)}
- src={xIcon}
- />
- </div>
+ <MediaQuery minWidth={layout.fullSizeMinWidth}>
+ <div className={styles.iconWrapper}>
+ <img
+ className={classNames(styles.xIcon, styles.icon)}
+ src={xIcon}
+ />
+ </div>
+ </MediaQuery>
<Label text="x">
<BufferedInput
small
@@ -69,12 +73,14 @@ class SpriteInfo extends React.Component {
</div>
<div className={styles.group}>
- <div className={styles.iconWrapper}>
- <img
- className={classNames(styles.yIcon, styles.icon)}
- src={yIcon}
- />
- </div>
+ <MediaQuery minWidth={layout.fullSizeMinWidth}>
+ <div className={styles.iconWrapper}>
+ <img
+ className={classNames(styles.yIcon, styles.icon)}
+ src={yIcon}
+ />
+ </div>
+ </MediaQuery>
<Label text="y">
<BufferedInput
small
diff --git a/src/containers/stage.jsx b/src/containers/stage.jsx
index f0545c088dc422b39b61ea7aa8ee17eb342c0853..d9ab05f12966d701d898142b9f7a5a4855af9d15 100644
--- a/src/containers/stage.jsx
+++ b/src/containers/stage.jsx
@@ -40,8 +40,8 @@ class Stage extends React.Component {
this.audioEngine = new AudioEngine();
this.props.vm.attachAudioEngine(this.audioEngine);
}
- shouldComponentUpdate () {
- return false;
+ shouldComponentUpdate (nextProps) {
+ return this.props.width !== nextProps.width || this.props.height !== nextProps.height;
}
componentWillUnmount () {
this.detachMouseEvents(this.canvas);
@@ -69,9 +69,10 @@ class Stage extends React.Component {
this.rect = this.canvas.getBoundingClientRect();
}
getScratchCoords (x, y) {
+ const nativeSize = this.renderer.getNativeSize();
return [
- x - (this.rect.width / 2),
- y - (this.rect.height / 2)
+ (nativeSize[0] / this.rect.width) * (x - (this.rect.width / 2)),
+ (nativeSize[1] / this.rect.height) * (y - (this.rect.height / 2))
];
}
handleDoubleClick (e) {
@@ -127,6 +128,7 @@ class Stage extends React.Component {
}
}
onMouseDown (e) {
+ this.updateRect();
const mousePosition = [e.clientX - this.rect.left, e.clientY - this.rect.top];
this.setState({
mouseDown: true,
@@ -192,7 +194,9 @@ class Stage extends React.Component {
}
Stage.propTypes = {
- vm: PropTypes.instanceOf(VM).isRequired
+ height: PropTypes.number,
+ vm: PropTypes.instanceOf(VM).isRequired,
+ width: PropTypes.number
};
export default Stage;
diff --git a/src/lib/layout-constants.js b/src/lib/layout-constants.js
new file mode 100644
index 0000000000000000000000000000000000000000..672c8013f58d477ae767a159a3d2af28784d7139
--- /dev/null
+++ b/src/lib/layout-constants.js
@@ -0,0 +1,7 @@
+export default {
+ fullStageWidth: 480,
+ fullStageHeight: 360,
+ smallerStageWidth: 480 * 0.85,
+ smallerStageHeight: 360 * 0.85,
+ fullSizeMinWidth: 1096
+};