Merge branch 'develop' of https://github.com/PenguinMod/penguinmod.gi…

…thub.io into develop

README.md

@@ -1,4 +1,4 @@
-scratch-gui modified for use in [TurboWarp](https://turbowarp.org/) then modified for use in [PenguinMod](https://jwklong.github.io/penguinmod.github.io) 😀
+scratch-gui modified for use in [TurboWarp](https://turbowarp.org/) then modified for use in [PenguinMod](https://studio.penguinmod.com) 😀
 [![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/PenguinMod/penguinmod.github.io/)
 ## Setup
 

package.json

@@ -63,9 +63,9 @@
     "protobufjs": "^7.3.2",
     "query-string": "^5.1.1",
     "raw-loader": "^0.5.1",
-    "react": "^16.0.0",
+    "react": "^16.14.0",
     "react-contextmenu": "2.9.4",
-    "react-dom": "^16.0.0",
+    "react-dom": "^16.14.0",
     "react-draggable": "3.0.5",
     "react-ga": "2.5.3",
     "react-intl": "2.9.0",

src/addons/addons/editor-extra-keys/userscript.js

@@ -78,13 +78,13 @@ export default async function ({ addon, msg }) {
     return keys;
   }
 
-  for (const opcode of ["sensing_keyoptions", "event_whenkeypressed"]) {
+  for (const opcode of ["sensing_keyoptions", "event_whenkeypressed", "event_whenkeyhit"]) {
     const block = ScratchBlocks.Blocks[opcode];
     const originalInit = block.init;
     block.init = function (...args) {
       const originalJsonInit = this.jsonInit;
       this.jsonInit = function (obj) {
-        appendKeys(obj.args0[0].options, opcode === "event_whenkeypressed");
+        appendKeys(obj.args0[0].options, opcode === "event_whenkeypressed" || opcode === "event_whenkeyhit");
         return originalJsonInit.call(this, obj);
       };
       return originalInit.call(this, ...args);
@@ -97,7 +97,7 @@ export default async function ({ addon, msg }) {
     if (workspace && flyout) {
       const allBlocks = [...workspace.getAllBlocks(), ...flyout.getWorkspace().getAllBlocks()];
       for (const block of allBlocks) {
-        if (block.type !== "event_whenkeypressed" && block.type !== "sensing_keyoptions") {
+        if (block.type !== "event_whenkeypressed" && block.type !== "event_whenkeyhit" && block.type !== "sensing_keyoptions") {
           continue;
         }
         const input = block.inputList[0];
@@ -110,7 +110,7 @@ export default async function ({ addon, msg }) {
         }
         field.menuGenerator_ = appendKeys(
           defaultKeys ? [...defaultKeys] : field.menuGenerator_,
-          block.type === "event_whenkeypressed"
+          block.type === "event_whenkeypressed" || block.type === "event_whenkeyhit"
         );
       }
     }

src/addons/addons/gamepad/userscript.js

@@ -35,7 +35,7 @@ export default async function ({ addon, console, msg }) {
     const result = new Set();
     for (const blocks of allBlocks) {
       for (const block of Object.values(blocks._blocks)) {
-        if (block.opcode === "event_whenkeypressed" || block.opcode === "sensing_keyoptions") {
+        if (block.opcode === "event_whenkeypressed" || block.opcode === "event_whenkeyhit" || block.opcode === "sensing_keyoptions") {
           // For blocks like "key (my variable) pressed?", the sensing_keyoptions still exists but has a null parent.
           if (block.opcode === "sensing_keyoptions" && !block.parent) {
             continue;

src/components/custom-procedures/custom-procedures.jsx

@@ -4,7 +4,7 @@ import Modal from '../../containers/modal.jsx';
 import Box from '../box/box.jsx';
 import { defineMessages, injectIntl, intlShape, FormattedMessage } from 'react-intl';
 
-import plusIcon from './icon--plus.svg';
+import dropperIcon from './icon--dropper.svg';
 
 import booleanInputIcon from './icon--boolean-input.svg';
 import textInputIcon from './icon--text-input.svg';
@@ -153,7 +153,7 @@ const BlockColorSection = props => (
                     onChange={props.onBlockColorChange}
                 />
                 <img
-                    src={plusIcon}
+                    src={dropperIcon}
                     className={styles.customPlus}
                 />
             </div>
@@ -224,6 +224,32 @@ const CustomProcedures = props => (
                         />
                     </div>
                 </div>
+                <div
+                    className={styles.optionCard}
+                    role="button"
+                    tabIndex="0"
+                    onClick={props.onAddCommand}
+                    style={{display: "none"}} //shhh
+                >
+                    <img
+                        className={styles.optionIcon}
+                        src={stackBlockIcon}
+                    />
+                    <div className={styles.optionTitle}>
+                        <FormattedMessage
+                            defaultMessage="Add an input"
+                            description="Label for button to add a command input"
+                            id="gui.customProcedures.addAnInputCommand"
+                        />
+                    </div>
+                    <div className={styles.optionDescription}>
+                        <FormattedMessage
+                            defaultMessage="command"
+                            description="Description of the command input type"
+                            id="gui.customProcedures.commandType"
+                        />
+                    </div>
+                </div>
                 <div
                     className={styles.optionCard}
                     role="button"
@@ -396,6 +422,7 @@ CustomProcedures.propTypes = {
     componentRef: PropTypes.func.isRequired,
     intl: intlShape,
     onAddBoolean: PropTypes.func.isRequired,
+    onAddCommand: PropTypes.func.isRequired,
     onAddLabel: PropTypes.func.isRequired,
     onAddTextNumber: PropTypes.func.isRequired,
     onCancel: PropTypes.func.isRequired,

src/components/library-item/library-item.css

@@ -34,20 +34,28 @@
     padding: 0.25rem;
     padding-bottom: 0;
 }
-.library-item-new {
+.library-item-sound.library-item-new {
+    /*
+        we have to use hue-rotate,
+        since the waveforms have their color baked in by design
+        & the play button styling would be annoying
+    */
     filter: hue-rotate(60deg);
 }
 .library-item-new-badge {
     border-radius: 1024px;
     color: white;
     font-size: 10px;
     font-weight: bold;
-    background-color: $sound-primary;
+    background-color: #EB6566;
     padding: 1px 5px;
     position: absolute;
     left: -8px;
     top: -8px;
 }
+.library-item-sound .library-item-new-badge {
+    background-color: $sound-primary;
+}
 
 .library-item-extension {
     align-self: stretch;
@@ -60,6 +68,12 @@
 .library-item-sound:hover {
     border-color: $sound-primary;
 }
+.library-item-new:hover {
+    border-color: #EB6566;
+}
+.library-item-new.library-item-sound:hover {
+    border-color: $sound-primary;
+}
 
 .library-item-favorite {
     background: transparent;

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

@@ -61,7 +61,7 @@ class ShareButton extends React.Component {
     }
     async handleMessageEvent(e) {
         if (!e.origin.startsWith(`https://penguinmod.com`)) {
-            //return; // BTODO: uncomment this line for prod (also change the link)
+            return;
         }
 
         if (!e.data.p4) {

src/components/prompt/prompt.jsx

@@ -147,7 +147,7 @@ const PromptComponent = props => (
                         values={{
                             packager: (
                                 <a
-                                    href="https://jwklong.github.io/penguinmod.github.io/PenguinMod-Packager"
+                                    href="https://studio.penguinmod.com/PenguinMod-Packager"
                                     target="_blank"
                                     rel="noopener noreferrer"
                                 >

src/components/tw-custom-extension-modal/custom-extension-modal.jsx

@@ -181,17 +181,20 @@ const CustomExtensionModal = props => (
                             />
                         </p>
                     )}
-                    <p>
-                        <FormattedMessage
-                            // eslint-disable-next-line max-len
-                            defaultMessage="Your browser may not allow PenguinMod to access certain sites. If this is causing issues for you, try loading from a file or text instead."
-                            description="Message that appears in custom extension prompt"
-                            id="pm.customExtensionModal.corsProblem"
-                        />
-                    </p>
                 </React.Fragment>
             )}
 
+            {props.type === 'url' && (
+                <p>
+                    <FormattedMessage
+                        // eslint-disable-next-line max-len
+                        defaultMessage="Your browser may not allow PenguinMod to access certain sites. If this is causing issues for you, try loading from a file or text instead."
+                        description="Message that appears in custom extension prompt"
+                        id="pm.customExtensionModal.corsProblem"
+                    />
+                </p>
+            )}
+
             <label className={styles.checkboxContainer}>
                 <FancyCheckbox
                     className={styles.basicCheckbox}

src/components/tw-description/description.jsx

@@ -228,7 +228,7 @@ class Renderer {
         if (/^\d{6,}$/.test(id)) {
             return (
                 <a
-                    href={`https://jwklong.github.io/penguinmod.github.io/#${id}`}
+                    href={`https://studio.penguinmod.com/#${id}`}
                 >
                     {`#${id}`}
                 </a>

src/components/tw-restore-point-modal/restore-point-modal.css

@@ -122,6 +122,16 @@
     background-color: $ui-black-transparent;
 }
 
+.export-button {
+    margin: 0 4px;
+    padding: 2px 4px;
+    background-color: $data-primary;
+    border: 1px solid $ui-black-transparent;
+    border-radius: 0.25rem;
+    font-size: small;
+    color: $ui-white;
+}
+
 .disabled {
     padding: 0.5rem;
     border-radius: 0.5rem;

src/components/tw-restore-point-modal/restore-point-modal.jsx

@@ -167,6 +167,7 @@ const RestorePointModal = props => (
                                 key={restorePoint.id}
                                 onClickDelete={props.onClickDelete}
                                 onClickLoad={props.onClickLoad}
+                                onClickExport={props.onClickExport}
                                 {...restorePoint}
                             />
                         ))}
@@ -222,6 +223,7 @@ RestorePointModal.propTypes = {
     onClickDelete: PropTypes.func.isRequired,
     onClickDeleteAll: PropTypes.func.isRequired,
     onClickLoad: PropTypes.func.isRequired,
+    onClickExport: PropTypes.func.isRequired,
     isLoading: PropTypes.bool.isRequired,
     totalSize: PropTypes.number.isRequired,
     restorePoints: PropTypes.arrayOf(PropTypes.shape({})),

src/components/tw-restore-point-modal/restore-point.jsx

@@ -16,7 +16,8 @@ class RestorePoint extends React.Component {
         super(props);
         bindAll(this, [
             'handleClickDelete',
-            'handleClickLoad'
+            'handleClickLoad',
+            'handleClickExport'
         ]);
         this.state = {
             thumbnail: null,
@@ -73,6 +74,11 @@ class RestorePoint extends React.Component {
         this.props.onClickLoad(this.props.id);
     }
 
+    handleClickExport (e) {
+        e.stopPropagation();
+        this.props.onClickExport(this.props.id);
+    }
+
     render () {
         const createdDate = new Date(this.props.created * 1000);
         return (
@@ -125,6 +131,13 @@ class RestorePoint extends React.Component {
                                 n: Object.keys(this.props.assets).length
                             }}
                         />
+
+                        <button
+                            className={styles.exportButton}
+                            onClick={this.handleClickExport}
+                        >
+                            Export
+                        </button>
                     </div>
                 </div>
 
@@ -151,7 +164,8 @@ RestorePoint.propTypes = {
     thumbnailSize: PropTypes.number.isRequired,
     assets: PropTypes.shape({}).isRequired, // Record<string, number>
     onClickDelete: PropTypes.func.isRequired,
-    onClickLoad: PropTypes.func.isRequired
+    onClickLoad: PropTypes.func.isRequired,
+    onClickExport: PropTypes.func.isRequired
 };
 
 export default RestorePoint;

src/components/tw-settings-modal/settings-modal.jsx

@@ -294,6 +294,27 @@ const EnableDangerousOptimizations = props => (
     />
 );
 
+const DisableOffscreenRendering = props => (
+    <BooleanSetting
+        {...props}
+        label={
+            <FormattedMessage
+                defaultMessage="Disable Off Screen Rendering"
+                description="Disable Out of Bounds Rendering setting"
+                id="pm.settingsModal.oobRendering"
+            />
+        }
+        help={
+            <FormattedMessage
+                defaultMessage="When enabled all sprites that are off screen will not be rendered."
+                description="Out of Bounds Rendering setting help"
+                id="pm.settingsModal.oobRenderingHelp"
+            />
+        }
+        // slug="out-of-bounds-rendering"
+    />
+);
+
 const WarpTimer = props => (
     <BooleanSetting
         {...props}
@@ -517,6 +538,10 @@ const SettingsModalComponent = props => (
                     id="pm.settingsModal.optimizations"
                 />
             </Header>
+            <DisableOffscreenRendering
+                value={props.disableOffscreenRendering}
+                onChange={props.onDisableOffscreenRenderingChange}
+            />
             <EnableDangerousOptimizations
                 value={props.dangerousOptimizations}
                 onChange={props.onEnableDangerousOptimizationsChange}
@@ -588,7 +613,9 @@ SettingsModalComponent.propTypes = {
     disableCompiler: PropTypes.bool,
     dangerousOptimizations: PropTypes.bool,
     onDisableCompilerChange: PropTypes.func,
-    onEnableDangerousOptimizationsChange: PropTypes.func
+    onEnableDangerousOptimizationsChange: PropTypes.func,
+    disableOffscreenRendering: PropTypes.bool,
+    onDisableOffscreenRenderingChange: PropTypes.func
 };
 
 export default injectIntl(SettingsModalComponent);

src/components/tw-studioview/studioview.js

@@ -307,7 +307,7 @@ StudioView.THUMBNAIL_SRC = 'https://projects.penguinmod.com/api/v1/projects/getp
 
 // The URL for project pages.
 // $id is replaced with the project ID.
-StudioView.PROJECT_PAGE = 'https://jwklong.github.io/penguinmod.github.io/#$id';
+StudioView.PROJECT_PAGE = 'https://studio.penguinmod.com/#$id';
 
 // The amount of "placeholders" to insert before the next page loads.
 StudioView.PLACEHOLDER_COUNT = 9;