move project title & author ontop of stage

PenguinMod · Oct 4, 2023 · a98d1ef · a98d1ef
1 parent 6822f06
commit a98d1ef
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 11 deletions.
diff --git a/src/components/menu-bar/menu-bar.jsx b/src/components/menu-bar/menu-bar.jsx
@@ -824,6 +824,16 @@ class MenuBar extends React.Component {
                         </div>
                     </div>
                     <Divider className={classNames(styles.divider)} />
+                    {/* {(this.props.authorUsername && this.props.authorUsername !== this.props.username) ? (
+                        <AuthorInfo
+                            className={styles.authorInfo}
+                            imageUrl={this.props.authorThumbnailUrl}
+                            projectId={this.props.projectId}
+                            // projectTitle={this.props.projectTitle}
+                            userId={this.props.authorId}
+                            username={this.props.authorUsername}
+                        />
+                    ) : null} */}
                     {this.props.canEditTitle ? (
                         <div className={classNames(styles.menuBarItem, styles.growable)}>
                             <MenuBarItemTooltip
@@ -835,16 +845,7 @@ class MenuBar extends React.Component {
                                 />
                             </MenuBarItemTooltip>
                         </div>
-                    ) : ((this.props.authorUsername && this.props.authorUsername !== this.props.username) ? (
-                        <AuthorInfo
-                            className={styles.authorInfo}
-                            imageUrl={this.props.authorThumbnailUrl}
-                            projectId={this.props.projectId}
-                            projectTitle={this.props.projectTitle}
-                            userId={this.props.authorId}
-                            username={this.props.authorUsername}
-                        />
-                    ) : null)}
+                    ) : null}
                     <div className={classNames(styles.menuBarItem)}>
                         {this.props.canRemix ? remixButton : []}
                     </div>
@@ -877,7 +878,6 @@ class MenuBar extends React.Component {
                             />
                         ) : []))}
                     </div>
-                    {/* tw: add a feedback button */}
                     <div className={styles.menuBarItem}>
                         {this.props.isShowingProject && this.props.canEditTitle ?
                             (<ShareButton

diff --git a/src/playground/interface.css b/src/playground/interface.css
@@ -173,6 +173,34 @@ a {
     border-radius: 4px;
 }
 
+.project-details {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    margin: 8px 0;
+}
+.project-metadata {
+    display: flex;
+    flex-direction: column;
+}
+.project-author-image {
+    width: 50px;
+    height: 50px;
+    border-radius: 4px;
+    margin-right: 8px;
+}
+.project-metadata h2 {
+    line-height: 1.4em;
+}
+.project-metadata p {
+    font-size: 0.85rem;
+}
+.project-metadata p a,
+.project-metadata a {
+    text-decoration: none;
+    font-weight: bold;
+}
+
 .remixList {
     overflow-x: auto;
     display: flex;

diff --git a/src/playground/render-interface.jsx b/src/playground/render-interface.jsx
@@ -218,6 +218,7 @@ class Interface extends React.Component {
             /* eslint-disable no-unused-vars */
             intl,
             hasCloudVariables,
+            title,
             description,
             extraProjectInfo,
             remixedProjectInfo,
@@ -258,6 +259,20 @@ class Interface extends React.Component {
                     }) : null}
                 >
                     {isHomepage && announcement ? <DOMElementRenderer domElement={announcement} /> : null}
+                    {isHomepage && projectId !== '0' && title && extraProjectInfo && extraProjectInfo.author && <div className={styles.projectDetails}>
+                        <a target='_blank' href={`https://penguinmod.site/profile?user=${extraProjectInfo.author}`}>
+                            <img
+                                className={styles.projectAuthorImage}
+                                title={extraProjectInfo.author}
+                                alt={extraProjectInfo.author}
+                                src={`https://trampoline.turbowarp.org/avatars/by-username/${extraProjectInfo.author}`}
+                            />
+                        </a>
+                        <div className={styles.projectMetadata}>
+                            <h2>{title}</h2>
+                            <p>by <a target='_blank' href={`https://penguinmod.site/profile?user=${extraProjectInfo.author}`}>{extraProjectInfo.author}</a></p>
+                        </div>
+                    </div>}
                     <GUI
                         onClickAddonSettings={handleClickAddonSettings}
                         onClickTheme={onClickTheme}
@@ -397,6 +412,7 @@ Interface.propTypes = {
 const mapStateToProps = state => ({
     hasCloudVariables: state.scratchGui.tw.hasCloudVariables,
     customStageSize: state.scratchGui.customStageSize,
+    title: state.scratchGui.projectTitle,
     description: state.scratchGui.tw.description,
     extraProjectInfo: state.scratchGui.tw.extraProjectInfo,
     remixedProjectInfo: state.scratchGui.tw.remixedProjectInfo,