Add a message about the new compiler

Author: GarboMuffin

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

@@ -32,6 +32,7 @@ import FramerateChanger from '../../containers/tw-framerate-changer.jsx';
 import ChangeUsername from '../../containers/tw-change-username.jsx';
 import CloudVariablesToggler from '../../containers/tw-cloud-toggler.jsx';
 import TWSaveStatus from './tw-save-status.jsx';
+import TWNews from './tw-news.jsx';
 
 import {openTipsLibrary, openSettingsModal, openRestorePointModal} from '../../reducers/modals';
 import {setPlayer} from '../../reducers/mode';
@@ -482,7 +483,7 @@ class MenuBar extends React.Component {
         );
         // Show the About button only if we have a handler for it (like in the desktop app)
         const aboutButton = this.buildAboutMenu(this.props.onClickAbout);
-        return (
+        const menuBar = (
             <Box
                 className={classNames(
                     this.props.className,
@@ -1042,6 +1043,13 @@ class MenuBar extends React.Component {
                 {aboutButton}
             </Box>
         );
+
+        return (
+            <React.Fragment>
+                {menuBar}
+                <TWNews />
+            </React.Fragment>
+        );
     }
 }
 

src/components/menu-bar/tw-news.css

@@ -0,0 +1,24 @@
+@import "../../css/colors.css";
+
+.news {
+    background: $pen-primary;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0.375rem 0;
+}
+
+.text {
+    flex-grow: 1;
+    color: white;
+    text-align: center;
+}
+
+.text a {
+    color: inherit;
+}
+
+.close {
+    margin-right: 0.5rem;
+}

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

@@ -0,0 +1,66 @@
+import React from 'react';
+import {APP_NAME} from '../../lib/brand';
+import {isScratchDesktop} from '../../lib/isScratchDesktop';
+import CloseButton from '../close-button/close-button.jsx';
+import styles from './tw-news.css';
+
+const LOCAL_STORAGE_KEY = 'tw:closedNews';
+const NEWS_ID = 'new-compiler';
+
+const getIsClosedInLocalStorage = () => {
+    try {
+        return localStorage.getItem(LOCAL_STORAGE_KEY) === NEWS_ID;
+    } catch (e) {
+        return false;
+    }
+};
+
+const markAsClosedInLocalStorage = () => {
+    try {
+        localStorage.setItem(LOCAL_STORAGE_KEY, NEWS_ID);
+    } catch (e) {
+        // ignore
+    }
+};
+
+class TWNews extends React.Component {
+    constructor (props) {
+        super(props);
+        this.state = {
+            closed: getIsClosedInLocalStorage()
+        };
+        this.handleClose = this.handleClose.bind(this);
+    }
+    handleClose () {
+        markAsClosedInLocalStorage();
+        this.setState({
+            closed: true
+        });
+    }
+    render () {
+        if (this.state.closed || isScratchDesktop()) {
+            return null;
+        }
+        return (
+            <div className={styles.news}>
+                <div className={styles.text}>
+                    {/* eslint-disable-next-line max-len */}
+                    {`We rewrote the ${APP_NAME} compiler to make projects run even faster. Bugs are possible. `}
+                    <a
+                        href="https://docs.turbowarp.org/new-compiler"
+                        target="_blank"
+                        rel="noreferrer"
+                    >
+                        {'Learn more.'}
+                    </a>
+                </div>
+                <CloseButton
+                    className={styles.close}
+                    onClick={this.handleClose}
+                />
+            </div>
+        );
+    }
+}
+
+export default TWNews;