More prep to hide the editor by default

src/components/loader/loader.css

@@ -2,11 +2,13 @@
 @import "../../css/z-index.css";
 
 .background {
+    /* tw: fixes to make the loading screen appear properly when scrolled, in wrong size element, etc. */
+    position: sticky;
     position: absolute;
     top: 0;
     left: 0;
-    width: 100%;
-    height: 100%;
+    width: 100vw;
+    height: 100vh;
     z-index: $z-index-loader;
     display: flex;
     justify-content: center;

src/components/menu-bar/menu-bar.jsx

@@ -567,19 +567,30 @@ class MenuBar extends React.Component {
                                             />
                                         </MenuItem>
                                     )}</ChangeUsername>
-                                    <CloudVariablesToggler>{(toggleCloudVariables, {cloud}) => (
-                                        <MenuItem onClick={toggleCloudVariables}>
-                                            {cloud ? (
-                                                <FormattedMessage
-                                                    defaultMessage="Disable cloud variables"
-                                                    description="Menu bar item for disabling cloud variables"
-                                                    id="tw.settings.cloudOff"
-                                                />
+                                    <CloudVariablesToggler>{(toggleCloudVariables, {cloud, canUseCloudVariables}) => (
+                                        <MenuItem
+                                            className={classNames({[styles.disabled]: !canUseCloudVariables})}
+                                            onClick={toggleCloudVariables}
+                                        >
+                                            {canUseCloudVariables ? (
+                                                cloud ? (
+                                                    <FormattedMessage
+                                                        defaultMessage="Disable cloud variables"
+                                                        description="Menu bar item for disabling cloud variables"
+                                                        id="tw.settings.cloudOff"
+                                                    />
+                                                ) : (
+                                                    <FormattedMessage
+                                                        defaultMessage="Enable cloud variables"
+                                                        description="Menu bar item for enabling cloud variables"
+                                                        id="tw.settings.cloudOn"
+                                                    />
+                                                )
                                             ) : (
                                                 <FormattedMessage
-                                                    defaultMessage="Enable cloud variables"
-                                                    description="Menu bar item for enabling cloud variables"
-                                                    id="tw.settings.cloudOn"
+                                                    defaultMessage="Cloud variables not available"
+                                                    description="Menu bar item for when cloud variables are not available"
+                                                    id="tw.settings.cloudUnavailable"
                                                 />
                                             )}
                                         </MenuItem>

src/components/tw-home/about/about.jsx

@@ -5,7 +5,7 @@ const About = () => {
     return (
         <p>
             <FormattedMessage
-                defaultMessage="TurboWarp compiles your Scratch projects to JavaScript to make them run faster. Try it out by inputting a project ID or URL below and pressing enter. Visit {studioLink} for some examples."
+                defaultMessage="TurboWarp compiles your Scratch projects to JavaScript to make them run faster. Try it out by inputting a project ID or URL and pressing enter. Visit {studioLink} for some examples."
                 description="Description of TurboWarp"
                 id="tw.home.description"
                 values={{

src/containers/tw-change-username.jsx

@@ -12,7 +12,7 @@ class ChangeUsername extends React.Component {
         ]);
     }
     changeUsername () {
-        this.props.onUsernameChange(prompt('New username:', this.props.username) || '');
+        this.props.onUsernameChange(prompt('New username:', this.props.username) || this.props.username || '');
     }
     render () {
         const {

src/containers/tw-cloud.jsx

@@ -12,7 +12,11 @@ class CloudVariablesToggler extends React.Component {
         ]);
     }
     toggleCloudVariables () {
-        if (!this.props.username || this.props.username.length < 3) {
+        if (!this.props.canUseCloudVariables) {
+            alert('Cannot use cloud variables, most likely because you opened the editor.');
+            return;
+        }
+        if (!this.props.cloud && (!this.props.username || this.props.username.length < 3)) {
             // temporary
             alert('Username is missing or too short.');
             return;
@@ -34,12 +38,14 @@ CloudVariablesToggler.propTypes = {
     children: PropTypes.func,
     cloud: PropTypes.bool,
     username: PropTypes.string,
-    onCloudChange: PropTypes.func
+    onCloudChange: PropTypes.func,
+    canUseCloudVariables: PropTypes.bool
 };
 
 const mapStateToProps = state => ({
     username: state.scratchGui.tw.username,
-    cloud: state.scratchGui.tw.cloud
+    cloud: state.scratchGui.tw.cloud,
+    canUseCloudVariables: !state.scratchGui.mode.hasEverEnteredEditor
 });
 
 const mapDispatchToProps = dispatch => ({

src/lib/cloud-manager-hoc.jsx

@@ -145,9 +145,7 @@ const cloudManagerHOC = function (WrappedComponent) {
             projectId: state.scratchGui.projectState.projectId,
             hasCloudPermission: state.scratchGui.tw ? state.scratchGui.tw.cloud : false,
             username: state.scratchGui.tw ? state.scratchGui.tw.username : '',
-            // once the new player becomes the default, switch to this
-            // canModifyCloudData: (!state.scratchGui.mode.hasEverEnteredEditor || ownProps.canSave)
-            canModifyCloudData: true
+            canModifyCloudData: (!state.scratchGui.mode.hasEverEnteredEditor || ownProps.canSave)
         };
     };
 

src/playground/editor.css

@@ -1,15 +0,0 @@
-html,
-body,
-.app {
-    /* probably unecessary, transitional until layout is refactored */
-    width: 100%; 
-    height: 100%;
-    margin: 0;
-
-    /* Setting min height/width makes the UI scroll below those sizes */
-    min-width: 1024px;
-    min-height: 640px; /* Min height to fit sprite/backdrop button */
-}
-
-/* @todo: move globally? Safe / side FX, for blocks particularly? */
-* { box-sizing: border-box; }

src/playground/gui.css

@@ -3,8 +3,10 @@ p {
 }
 
 .stage-only {
-    width: 480px;
-    margin: 24px auto 0;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
 }
 
 .editor {
@@ -19,7 +21,17 @@ p {
     box-sizing: border-box;
 }
 
+.center {
+    width: 100%;
+    height: 100%;
+}
+
+.stage-only .center {
+    width: 480px;
+    margin: auto;
+}
+
 /* make sure this isn't "see-inside-button" or anything because that might cause the dev tools to wrongly reinject */
 .see-inside {
-    float: right;
+    text-align: right;
 }

src/playground/render-gui.jsx

@@ -21,37 +21,43 @@ if (process.env.NODE_ENV === 'production' && typeof window === 'object') {
 
 import styles from './gui.css';
 
+import MenuBar from '../components/menu-bar/menu-bar.jsx';
 import ProjectInput from '../components/tw-project-input/project-input.jsx';
 import About from '../components/tw-home/about/about.jsx';
 import Title from '../components/tw-home/title/title.jsx';
 import SeeInside from './tw-see-inside/see-inside.jsx';
 
 const Player = ({isPlayerOnly, projectId}) => (
-    <Box className={classNames(isPlayerOnly ? styles.stageOnly : styles.editor)}>
+    <div className={classNames(isPlayerOnly ? styles.stageOnly : styles.editor)}>
         {isPlayerOnly ? (
-            <Box>
+            <MenuBar
+                onClickLogo={onClickLogo}
+            />
+        ) : null}
+        <div className={styles.center}>
+            {isPlayerOnly ? (
                 <Title />
-                <About />
-            </Box>
-        ) : null}
-        <GUI
-            onClickLogo={onClickLogo}
-            cloudHost={'cirrus.garbomuffin.com'}
-            canSave={false}
-            canEditTitle
-            enableCommunity
-            isPlayerOnly={isPlayerOnly}
-            projectId={projectId}
-        />
-        {isPlayerOnly ? (
-            <Box>
-                <ProjectInput />
-                <div className={styles.seeInside}>
-                    <SeeInside />
+            ) : null}
+            <GUI
+                onClickLogo={onClickLogo}
+                cloudHost={'cirrus.garbomuffin.com'}
+                canSave={false}
+                canEditTitle
+                enableCommunity
+                isPlayerOnly={isPlayerOnly}
+                projectId={projectId}
+            />
+            {isPlayerOnly ? (
+                <div className="about">
+                    <ProjectInput />
+                    <div className={styles.seeInside}>
+                        <SeeInside />
+                    </div>
+                    <About />
                 </div>
-            </Box>
-        ) : null}
-    </Box>
+            ) : null}
+        </div>
+    </div>
 );
 
 Player.propTypes = {