cloud variable notice

Author: Titanium2099

src/components/stage/stage.css

@@ -132,7 +132,6 @@ stage doesn't "spill" out from under its rounded corners. instead, shift these o
     pointer-events: all;
     cursor: pointer;
 }
-
 .green-flag-overlay {
     padding: 1rem;
     border-radius: 100%;
@@ -146,6 +145,35 @@ stage doesn't "spill" out from under its rounded corners. instead, shift these o
     height: 5rem;
 }
 
+.green-flag-overlay-with-warning {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+}
+
+.cloud-warning-content {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    color: $text-primary-default;
+
+    position: absolute;
+    top: 0px;
+    padding: 20px;
+    background-color: $ui-white-default;
+    margin: 20px;
+    border-radius: 0.5rem;
+}
+
+.cloud-warning-text {
+    font-size: 0.85rem;
+    font-weight: normal;
+}
+.cloud-warning-text .cloud-warning-text-red{
+    color: $looks-secondary;
+    font-weight: bold;
+}
+
 .green-flag-overlay > img {
     width: 100%;
     object-fit: contain;

src/containers/green-flag-overlay.jsx

@@ -1,12 +1,16 @@
 import bindAll from 'lodash.bindall';
 import React from 'react';
 import PropTypes from 'prop-types';
+import classNames from 'classnames';
 
 import {connect} from 'react-redux';
 import VM from 'scratch-vm';
 import Box from '../components/box/box.jsx';
 import greenFlag from '../components/green-flag/icon--green-flag.svg';
 import {setStartedState} from '../reducers/vm-status.js';
+import {FormattedMessage} from 'react-intl';
+
+import styles from '../components/stage/stage.css';
 
 class GreenFlagOverlay extends React.Component {
     constructor (props) {
@@ -27,11 +31,36 @@ class GreenFlagOverlay extends React.Component {
     }
 
     render () {
+        // Check if project has cloud vars and user is generic 'player' or empty string (not logged in)
+        const isGuest = !this.props.username || this.props.username === 'player';
+        const showCloudWarning = this.props.hasCloudVariables && isGuest;
+
         return (
             <Box
-                className={this.props.wrapperClass}
+                className={classNames(
+                    this.props.wrapperClass,
+                    {[styles.greenFlagOverlayWithWarning]: showCloudWarning}
+                )}
                 onClick={this.handleClick}
             >
+                {showCloudWarning && (
+                    <div className={styles.cloudWarningContent}>
+                        <div className={styles.cloudWarningText}>
+                            <span className={styles.cloudWarningTextRed}>
+                                <FormattedMessage
+                                    defaultMessage="Multiplayer Features: "
+                                    id="gui.greenFlagOverlay.cloudTitle"
+                                />
+                            </span>
+                            <span>
+                                <FormattedMessage
+                                    defaultMessage="This project uses cloud variables. To play online or interact with others, you must log in."
+                                    id="gui.greenFlagOverlay.cloudWarning"
+                                />
+                            </span>
+                        </div>
+                    </div>
+                )}
                 <div className={this.props.className}>
                     <img
                         draggable={false}
@@ -48,11 +77,15 @@ GreenFlagOverlay.propTypes = {
     className: PropTypes.string,
     vm: PropTypes.instanceOf(VM),
     wrapperClass: PropTypes.string,
-    onStarted: PropTypes.func
+    onStarted: PropTypes.func,
+    hasCloudVariables: PropTypes.bool,
+    username: PropTypes.string
 };
 
 const mapStateToProps = state => ({
-    vm: state.scratchGui.vm
+    vm: state.scratchGui.vm,
+    hasCloudVariables: state.scratchGui.tw.hasCloudVariables,
+    username: state.scratchGui.tw.username
 });
 
 const mapDispatchToProps = dispatch => ({