Fix eslint?

Enhance mysterious atmosphere

package-lock.json

@@ -1759,17 +1759,29 @@
       "dev": true
     },
     "babel-eslint": {
-      "version": "10.0.3",
-      "resolved": "https://registry.npmjs.org/babel-eslint/-/babel-eslint-10.0.3.tgz",
-      "integrity": "sha512-z3U7eMY6r/3f3/JB9mTsLjyxrv0Yb1zb8PCWCLpguxfCzBIZUwy23R1t/XKewP+8mEN2Ck8Dtr4q20z6ce6SoA==",
+      "version": "10.0.1",
+      "resolved": "https://registry.npmjs.org/babel-eslint/-/babel-eslint-10.0.1.tgz",
+      "integrity": "sha512-z7OT1iNV+TjOwHNLLyJk+HN+YVWX+CLE6fPD2SymJZOZQBs+QIexFjhm4keGTm8MW9xr4EC9Q0PbaLB24V5GoQ==",
       "dev": true,
       "requires": {
         "@babel/code-frame": "^7.0.0",
         "@babel/parser": "^7.0.0",
         "@babel/traverse": "^7.0.0",
         "@babel/types": "^7.0.0",
-        "eslint-visitor-keys": "^1.0.0",
-        "resolve": "^1.12.0"
+        "eslint-scope": "3.7.1",
+        "eslint-visitor-keys": "^1.0.0"
+      },
+      "dependencies": {
+        "eslint-scope": {
+          "version": "3.7.1",
+          "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-3.7.1.tgz",
+          "integrity": "sha1-PWPD7f2gLgbgGkUq2IyqzHzctug=",
+          "dev": true,
+          "requires": {
+            "esrecurse": "^4.1.0",
+            "estraverse": "^4.1.1"
+          }
+        }
       }
     },
     "babel-generator": {
@@ -4875,27 +4887,27 @@
       "dev": true
     },
     "falafel": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/falafel/-/falafel-2.1.0.tgz",
-      "integrity": "sha1-lrsXdh2rqU9G0AFzizzt86Z/4Gw=",
+      "version": "2.2.4",
+      "resolved": "https://registry.npmjs.org/falafel/-/falafel-2.2.4.tgz",
+      "integrity": "sha512-0HXjo8XASWRmsS0X1EkhwEMZaD3Qvp7FfURwjLKjG1ghfRm/MGZl2r4cWUTv41KdNghTw4OUMmVtdGQp3+H+uQ==",
       "dev": true,
       "requires": {
-        "acorn": "^5.0.0",
+        "acorn": "^7.1.1",
         "foreach": "^2.0.5",
-        "isarray": "0.0.1",
+        "isarray": "^2.0.1",
         "object-keys": "^1.0.6"
       },
       "dependencies": {
         "acorn": {
-          "version": "5.7.3",
-          "resolved": "https://registry.npmjs.org/acorn/-/acorn-5.7.3.tgz",
-          "integrity": "sha512-T/zvzYRfbVojPWahDsE5evJdHb3oJoQfFbsrKM7w5Zcs++Tr257tia3BmMP8XYVjp1S9RZXQMh7gao96BlqZOw==",
+          "version": "7.1.1",
+          "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.1.1.tgz",
+          "integrity": "sha512-add7dgA5ppRPxCFJoAGfMDi7PIBXq1RtGo7BhbLaxwrXPOmw8gq48Y9ozT01hUKy9byMjlR20EJhu5zlkErEkg==",
           "dev": true
         },
         "isarray": {
-          "version": "0.0.1",
-          "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
-          "integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8=",
+          "version": "2.0.5",
+          "resolved": "https://registry.npmjs.org/isarray/-/isarray-2.0.5.tgz",
+          "integrity": "sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==",
           "dev": true
         }
       }
@@ -9410,6 +9422,12 @@
       "integrity": "sha1-LRDAa9/TEuqXd2laTShDlFa3WUI=",
       "dev": true
     },
+    "npm-normalize-package-bin": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/npm-normalize-package-bin/-/npm-normalize-package-bin-1.0.1.tgz",
+      "integrity": "sha512-EPfafl6JL5/rU+ot6P3gRSCpPDW5VmIzX959Ob1+ySFUuuYHWHekXpwdUZcKP5C+DS4GEtdJluwBjnsNDl+fSA==",
+      "dev": true
+    },
     "npm-run-path": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-2.0.2.tgz",
@@ -10552,9 +10570,9 @@
       },
       "dependencies": {
         "minimist": {
-          "version": "1.2.0",
-          "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
-          "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=",
+          "version": "1.2.5",
+          "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz",
+          "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==",
           "dev": true
         }
       }
@@ -10882,24 +10900,16 @@
       }
     },
     "read-package-json": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/read-package-json/-/read-package-json-2.1.0.tgz",
-      "integrity": "sha512-KLhu8M1ZZNkMcrq1+0UJbR8Dii8KZUqB0Sha4mOx/bknfKI/fyrQVrG/YIt2UOtG667sD8+ee4EXMM91W9dC+A==",
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/read-package-json/-/read-package-json-2.1.1.tgz",
+      "integrity": "sha512-dAiqGtVc/q5doFz6096CcnXhpYk0ZN8dEKVkGLU0CsASt8SrgF6SF7OTKAYubfvFhWaqofl+Y8HK19GR8jwW+A==",
       "dev": true,
       "requires": {
         "glob": "^7.1.1",
         "graceful-fs": "^4.1.2",
         "json-parse-better-errors": "^1.0.1",
         "normalize-package-data": "^2.0.0",
-        "slash": "^1.0.0"
-      },
-      "dependencies": {
-        "slash": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/slash/-/slash-1.0.0.tgz",
-          "integrity": "sha1-xB8vbDn8FtHNF61LXYlhFK5HDVU=",
-          "dev": true
-        }
+        "npm-normalize-package-bin": "^1.0.0"
       }
     },
     "read-pkg": {
@@ -11597,9 +11607,9 @@
       }
     },
     "scratch-render": {
-      "version": "0.1.0-prerelease.20191029200037",
-      "resolved": "https://registry.npmjs.org/scratch-render/-/scratch-render-0.1.0-prerelease.20191029200037.tgz",
-      "integrity": "sha512-qwNZHd0y41tbLxJc29/pko2XuVnrhxkyjwhLy2jt7tMDZNvgcFZL1bDpB4PMGLzXgivGIT3FXmN7iFP3EGp34w==",
+      "version": "0.1.0-prerelease.20200324022200",
+      "resolved": "https://registry.npmjs.org/scratch-render/-/scratch-render-0.1.0-prerelease.20200324022200.tgz",
+      "integrity": "sha512-nW77KkYJa6YG9ytTs6v+DJ1cy6fc+E1B5Jm+K4735VTsrz3eej/APS0QuXx/TdcD29gJryOGkfAcAF4UkBq4lw==",
       "dev": true,
       "requires": {
         "grapheme-breaker": "0.3.2",
@@ -11609,8 +11619,35 @@
         "minilog": "3.1.0",
         "raw-loader": "^0.5.1",
         "scratch-storage": "^1.0.0",
-        "scratch-svg-renderer": "0.2.0-prerelease.20190822202608",
+        "scratch-svg-renderer": "0.2.0-prerelease.20200205003400",
         "twgl.js": "4.4.0"
+      },
+      "dependencies": {
+        "base64-js": {
+          "version": "1.2.1",
+          "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.2.1.tgz",
+          "integrity": "sha512-dwVUVIXsBZXwTuwnXI9RK8sBmgq09NDHzyR9SAph9eqk76gKK2JSQmZARC2zRC81JC2QTtxD0ARU5qTS25gIGw==",
+          "dev": true
+        },
+        "scratch-svg-renderer": {
+          "version": "0.2.0-prerelease.20200205003400",
+          "resolved": "https://registry.npmjs.org/scratch-svg-renderer/-/scratch-svg-renderer-0.2.0-prerelease.20200205003400.tgz",
+          "integrity": "sha512-0CeFHYrwlQ28c7R3d5XUUdPuo9/6i+iXcmiEPnied4iL9elyrdTn3oGNseWAoaKrm7RO2oUbsbFVpzQXGeUD3g==",
+          "dev": true,
+          "requires": {
+            "base64-js": "1.2.1",
+            "base64-loader": "1.0.0",
+            "minilog": "3.1.0",
+            "scratch-render-fonts": "1.0.0-prerelease.20180906193204",
+            "transformation-matrix": "1.15.0"
+          }
+        },
+        "transformation-matrix": {
+          "version": "1.15.0",
+          "resolved": "https://registry.npmjs.org/transformation-matrix/-/transformation-matrix-1.15.0.tgz",
+          "integrity": "sha512-808EqPQbmUD6/IMpWUXLOZcblCHf9xaiB+un0RYNNE9+6VRjoiw6Be8R32tZ0ips1PX/15tlnA2Ev4UUgg827Q==",
+          "dev": true
+        }
       }
     },
     "scratch-render-fonts": {
@@ -12469,12 +12506,12 @@
       "dev": true
     },
     "static-eval": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/static-eval/-/static-eval-2.0.2.tgz",
-      "integrity": "sha512-N/D219Hcr2bPjLxPiV+TQE++Tsmrady7TqAJugLy7Xk1EumfDWS/f5dtBbkRCGE7wKKXuYockQoj8Rm2/pVKyg==",
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/static-eval/-/static-eval-2.0.5.tgz",
+      "integrity": "sha512-nNbV6LbGtMBgv7e9LFkt5JV8RVlRsyJrphfAt9tOtBBW/SfnzZDf2KnS72an8e434A+9e/BmJuTxeGPvrAK7KA==",
       "dev": true,
       "requires": {
-        "escodegen": "^1.8.1"
+        "escodegen": "^1.11.1"
       }
     },
     "static-extend": {
@@ -13210,9 +13247,9 @@
       }
     },
     "tiny-inflate": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/tiny-inflate/-/tiny-inflate-1.0.2.tgz",
-      "integrity": "sha1-k9nez/yIBb1X6uQxDwt0Xptvs6c=",
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/tiny-inflate/-/tiny-inflate-1.0.3.tgz",
+      "integrity": "sha512-pkY1fj1cKHb2seWDy0B16HeWyczlJA9/WW3u3c4z/NiWDsO3DOU5D7nhTLE9CF0yXv/QZFY7sEJmj24dK+Rrqw==",
       "dev": true
     },
     "tmp": {

package.json

@@ -40,7 +40,7 @@
     "arraybuffer-loader": "^1.0.6",
     "autoprefixer": "^9.0.1",
     "babel-core": "7.0.0-bridge.0",
-    "babel-eslint": "^10.0.1",
+    "babel-eslint": "10.0.1",
     "babel-loader": "^8.0.4",
     "base64-loader": "1.0.0",
     "bowser": "1.9.4",
@@ -108,10 +108,10 @@
     "redux-throttle": "0.1.1",
     "rimraf": "^2.6.1",
     "scratch-audio": "0.1.0-prerelease.20190925183642",
-    "scratch-l10n": "3.6.20191008224547",
     "scratch-blocks": "0.1.0-prerelease.1572384380",
+    "scratch-l10n": "3.6.20191008224547",
     "scratch-paint": "0.2.0-prerelease.20191010161144",
-    "scratch-render": "0.1.0-prerelease.20191029200037",
+    "scratch-render": "0.1.0-prerelease.20200324022200",
     "scratch-storage": "1.3.2",
     "scratch-svg-renderer": "0.2.0-prerelease.20190822202608",
     "scratch-vm": "0.2.0-prerelease.20191017151616",

src/components/gui/gui.jsx

@@ -18,6 +18,7 @@ import StageWrapper from '../../containers/stage-wrapper.jsx';
 import Loader from '../loader/loader.jsx';
 import Box from '../box/box.jsx';
 import MenuBar from '../menu-bar/menu-bar.jsx';
+import MysteryMode from '../mystery-mode/mystery-mode.jsx';
 import CostumeLibrary from '../../containers/costume-library.jsx';
 import BackdropLibrary from '../../containers/backdrop-library.jsx';
 import Watermark from '../../containers/watermark.jsx';
@@ -156,6 +157,7 @@ const GUIComponent = props => {
                 dir={isRtl ? 'rtl' : 'ltr'}
                 {...componentProps}
             >
+                <MysteryMode />
                 {telemetryModalVisible ? (
                     <TelemetryModal
                         onCancel={onTelemetryModalCancel}

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

@@ -32,6 +32,7 @@ import MenuBarHOC from '../../containers/menu-bar-hoc.jsx';
 
 import {openTipsLibrary} from '../../reducers/modals';
 import {setPlayer} from '../../reducers/mode';
+import {toggleMysteryMode} from '../../reducers/mystery-mode';
 import {
     autoUpdateProject,
     getIsUpdating,
@@ -469,6 +470,21 @@ class MenuBar extends React.Component {
                                             )}
                                         </MenuItem>
                                     )}</TurboMode>
+                                    <MenuItem onClick={this.props.onClickToggleMysteryMode}>
+                                        {this.props.mysteryMode ? (
+                                            <FormattedMessage
+                                                defaultMessage="Turn off Mystery Mode"
+                                                description="Menu bar item for turning off dark mode"
+                                                id="gui.menuBar.mysteryModeOff"
+                                            />
+                                        ) : (
+                                            <FormattedMessage
+                                                defaultMessage="Turn on Mystery Mode"
+                                                description="Menu bar item for turning on dark mode"
+                                                id="gui.menuBar.mysteryModeOn"
+                                            />
+                                        )}
+                                    </MenuItem>
                                 </MenuSection>
                             </MenuBarMenu>
                         </div>
@@ -722,6 +738,7 @@ MenuBar.propTypes = {
     locale: PropTypes.string.isRequired,
     loginMenuOpen: PropTypes.bool,
     logo: PropTypes.string,
+    mysteryMode: PropTypes.bool,
     onClickAccount: PropTypes.func,
     onClickEdit: PropTypes.func,
     onClickFile: PropTypes.func,
@@ -732,6 +749,7 @@ MenuBar.propTypes = {
     onClickRemix: PropTypes.func,
     onClickSave: PropTypes.func,
     onClickSaveAsCopy: PropTypes.func,
+    onClickToggleMysteryMode: PropTypes.func,
     onLogOut: PropTypes.func,
     onOpenRegistration: PropTypes.func,
     onOpenTipLibrary: PropTypes.func,
@@ -772,6 +790,7 @@ const mapStateToProps = (state, ownProps) => {
         languageMenuOpen: languageMenuOpen(state),
         locale: state.locales.locale,
         loginMenuOpen: loginMenuOpen(state),
+        mysteryMode: state.scratchGui.mysteryMode,
         projectTitle: state.scratchGui.projectTitle,
         sessionExists: state.session && typeof state.session.session !== 'undefined',
         username: user ? user.username : null,
@@ -798,6 +817,7 @@ const mapDispatchToProps = dispatch => ({
     onClickRemix: () => dispatch(remixProject()),
     onClickSave: () => dispatch(manualUpdateProject()),
     onClickSaveAsCopy: () => dispatch(saveProjectAsCopy()),
+    onClickToggleMysteryMode: () => dispatch(toggleMysteryMode()),
     onSeeCommunity: () => dispatch(setPlayer(true))
 });
 

src/components/mystery-mode/mystery-mode.css

@@ -0,0 +1,9 @@
+.mystery-mode {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    opacity: 0.9;
+    background: transparent url('./mystery.png') center center;
+    z-index: 50;
+    pointer-events: none;
+}

src/components/mystery-mode/mystery-mode.jsx

@@ -0,0 +1,55 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import bindAll from 'lodash.bindall';
+import styles from './mystery-mode.css';
+import {connect} from 'react-redux';
+
+class MysteryMode extends React.Component {
+    constructor (props) {
+        super(props);
+        bindAll(this, [
+            'handleMouseMove'
+        ]);
+        this.state = {
+            x: window.innerWidth / 2,
+            y: window.innerHeight / 2
+        };
+    }
+
+    componentDidMount () {
+        document.addEventListener('mousemove', this.handleMouseMove);
+    }
+
+    componentWillUnmount () {
+        document.removeEventListener('mousemove', this.handleMouseMove);
+    }
+    
+    handleMouseMove (event) {
+        this.setState({x: event.clientX, y: event.clientY});
+    }
+
+    render () {
+        if (!this.props.show) return null;
+        return (
+            <div
+                className={styles.mysteryMode}
+                style={{
+                    backgroundPosition: `${this.state.x + 2000}px ${this.state.y + 2000}px`
+                }}
+            />
+        );
+    }
+}
+
+MysteryMode.propTypes = {
+    show: PropTypes.bool
+};
+
+const mapStateToProps = state => ({
+    // This is the button's mode, as opposed to the actual current state
+    show: state.scratchGui.mysteryMode
+});
+
+export default connect(
+    mapStateToProps
+)(MysteryMode);

src/containers/mystery-mode.jsx

@@ -0,0 +1,60 @@
+import bindAll from 'lodash.bindall';
+import PropTypes from 'prop-types';
+import React from 'react';
+import {connect} from 'react-redux';
+
+/**
+ * Turbo Mode component passes toggleTurboMode function to its child.
+ * It also includes `turboMode` in the props passed to the children.
+ * It expects this child to be a function with the signature
+ *     function (toggleTurboMode, {turboMode, ...props}) {}
+ * The component can then be used to attach turbo mode setting functionality
+ * to any other component:
+ *
+ * <TurboMode>{(toggleTurboMode, props) => (
+ *     <MyCoolComponent
+ *         turboEnabled={props.turboMode}
+ *         onClick={toggleTurboMode}
+ *         {...props}
+ *     />
+ * )}</TurboMode>
+ */
+class TurboMode extends React.Component {
+    constructor (props) {
+        super(props);
+        bindAll(this, [
+            'toggleTurboMode'
+        ]);
+    }
+    toggleTurboMode () {
+        this.props.vm.setTurboMode(!this.props.turboMode);
+    }
+    render () {
+        const {
+            /* eslint-disable no-unused-vars */
+            children,
+            vm,
+            /* eslint-enable no-unused-vars */
+            ...props
+        } = this.props;
+        return this.props.children(this.toggleTurboMode, props);
+    }
+}
+
+TurboMode.propTypes = {
+    children: PropTypes.func,
+    turboMode: PropTypes.bool,
+    vm: PropTypes.shape({
+        setTurboMode: PropTypes.func
+    })
+};
+
+const mapStateToProps = state => ({
+    vm: state.scratchGui.vm,
+    turboMode: state.scratchGui.vmStatus.turbo
+});
+
+export default connect(
+    mapStateToProps,
+    () => ({}) // omit dispatch prop
+)(TurboMode);

src/containers/stage.jsx

@@ -85,7 +85,8 @@ class Stage extends React.Component {
             this.props.isFullScreen !== nextProps.isFullScreen ||
             this.state.question !== nextState.question ||
             this.props.micIndicator !== nextProps.micIndicator ||
-            this.props.isStarted !== nextProps.isStarted;
+            this.props.isStarted !== nextProps.isStarted ||
+            this.props.mysteryMode !== nextProps.mysteryMode;
     }
     componentDidUpdate (prevProps) {
         if (this.props.isColorPicking && !prevProps.isColorPicking) {
@@ -93,6 +94,11 @@ class Stage extends React.Component {
         } else if (!this.props.isColorPicking && prevProps.isColorPicking) {
             this.stopColorPickingLoop();
         }
+        if (this.props.mysteryMode && !prevProps.mysteryMode) {
+            this.renderer.setMysteryMode(true);
+        } else if (!this.props.mysteryMode && prevProps.mysteryMode) {
+            this.renderer.setMysteryMode(false);
+        }
         this.updateRect();
         this.renderer.resize(this.rect.width, this.rect.height);
     }
@@ -429,7 +435,8 @@ Stage.propTypes = {
     onDeactivateColorPicker: PropTypes.func,
     stageSize: PropTypes.oneOf(Object.keys(STAGE_DISPLAY_SIZES)).isRequired,
     useEditorDragStyle: PropTypes.bool,
-    vm: PropTypes.instanceOf(VM).isRequired
+    vm: PropTypes.instanceOf(VM).isRequired,
+    mysteryMode: PropTypes.bool
 };
 
 Stage.defaultProps = {
@@ -442,7 +449,8 @@ const mapStateToProps = state => ({
     isStarted: state.scratchGui.vmStatus.started,
     micIndicator: state.scratchGui.micIndicator,
     // Do not use editor drag style in fullscreen or player mode.
-    useEditorDragStyle: !(state.scratchGui.mode.isFullScreen || state.scratchGui.mode.isPlayerOnly)
+    useEditorDragStyle: !(state.scratchGui.mode.isFullScreen || state.scratchGui.mode.isPlayerOnly),
+    mysteryMode: state.scratchGui.mysteryMode
 });
 
 const mapDispatchToProps = dispatch => ({

src/reducers/gui.js

@@ -14,6 +14,7 @@ import modalReducer, {modalsInitialState} from './modals';
 import modeReducer, {modeInitialState} from './mode';
 import monitorReducer, {monitorsInitialState} from './monitors';
 import monitorLayoutReducer, {monitorLayoutInitialState} from './monitor-layout';
+import mysteryModeReducer, {mysteryModeInitialState} from './mystery-mode';
 import projectChangedReducer, {projectChangedInitialState} from './project-changed';
 import projectStateReducer, {projectStateInitialState} from './project-state';
 import projectTitleReducer, {projectTitleInitialState} from './project-title';
@@ -48,6 +49,7 @@ const guiInitialState = {
     modals: modalsInitialState,
     monitors: monitorsInitialState,
     monitorLayout: monitorLayoutInitialState,
+    mysteryMode: mysteryModeInitialState,
     projectChanged: projectChangedInitialState,
     projectState: projectStateInitialState,
     projectTitle: projectTitleInitialState,
@@ -146,6 +148,7 @@ const guiReducer = combineReducers({
     modals: modalReducer,
     monitors: monitorReducer,
     monitorLayout: monitorLayoutReducer,
+    mysteryMode: mysteryModeReducer,
     projectChanged: projectChangedReducer,
     projectState: projectStateReducer,
     projectTitle: projectTitleReducer,

src/reducers/mystery-mode.js

@@ -0,0 +1,26 @@
+const TOGGLE_MYSTERY_MODE = 'scratch-gui/mystery-mode/TOGGLE_MYSTERY_MODE';
+
+const initialState = false;
+
+const reducer = function (state, action) {
+    if (typeof state === 'undefined') state = initialState;
+
+    switch (action.type) {
+    case TOGGLE_MYSTERY_MODE:
+        return !state;
+    default:
+        return state;
+    }
+};
+
+const toggleMysteryMode = function () {
+    return {
+        type: TOGGLE_MYSTERY_MODE
+    };
+};
+
+export {
+    reducer as default,
+    initialState as mysteryModeInitialState,
+    toggleMysteryMode
+};