custom achievements and a bunch of improvements

Author: Titanium2099

.gitignore

@@ -27,3 +27,4 @@ npm-*
 # for act
 .secrets
 .env
+.env.*

src/addons/addons/collaboration/helpers/DebugRecorder.js

@@ -1,5 +1,6 @@
 // helpers/DebugRecorder.js
 import * as constants from './constants.js';
+import storage from '../../../../lib/storage';
 
 export class DebugRecorder {
     constructor() {
@@ -10,6 +11,7 @@ export class DebugRecorder {
         this.projectId = null;
         this.ready = false;
         this.enabled = true;
+        this._accessToken = null;
 
         // Batching
         this.writeBuffer = [];
@@ -224,14 +226,12 @@ export class DebugRecorder {
                     }
                 }
 
-                const projectIdForUpload = match[1];
-
                 console.log(`[BlackBox] Found old session: ${name}. Initiating upload sequence...`);
 
                 try {
                     const dumpBlob = await this._exportDatabaseToBlob(name);
                     if (dumpBlob) {
-                        const uploaded = await this._uploadDump(dumpBlob, `${name}.json`, projectIdForUpload);
+                        const uploaded = await this._uploadDump(dumpBlob, `${name}.json`);
                         if (uploaded) {
                             console.log(`[BlackBox] Upload successful. Deleting local DB: ${name}`);
                             window.indexedDB.deleteDatabase(name);
@@ -327,21 +327,23 @@ export class DebugRecorder {
      * Uploads the exported database blob to the server.
      * @param {Blob} blob The blob containing the database dump.
      * @param {string} filename The filename for the upload.
-     * @param {string} roomUuidForUpload The project/room UUID for the API endpoint.
      */
-    async _uploadDump(blob, filename, roomUuidForUpload) {
+    async _uploadDump(blob, filename) {
+        if (this._accessToken == null) {
+            this._accessToken = await storage.loadAccessToken();
+        }
         const formData = new FormData();
         formData.append('file', blob, filename);
 
-        const token = window.collaborationOTT || '';
-        const roomUuid = roomUuidForUpload || 'unknown_project';
-
-        const url = `${constants.apiHostURL}/v1/feedback/black-box?ott=${encodeURIComponent(token)}&room_uuid=${encodeURIComponent(roomUuid)}`;
+        const url = `${constants.apiHostURL}/v1/feedback/black-box`;
 
         try {
             const response = await fetch(url, {
                 method: 'POST',
-                body: formData
+                body: formData,
+                headers: {
+                    Authorization: `Bearer ${this._accessToken}`
+                }
             });
 
             return response.ok;

src/addons/addons/collaboration/helpers/yProjectEvents.js

@@ -4,6 +4,8 @@ import * as assetSync from './assetSync.js';
 import * as helper from './helper.js';
 import CollaborationConsole from './CollaborationConsole.js';
 import { recorder } from './DebugRecorder.js'; 
+import storage from '../../../../lib/storage';
+import { API_HOST, TRUSTED_IFRAME_HOST } from '../../../../lib/brand.js';
 
 /**
  * Flag indicating whether project events can be processed immediately or if they should be queued.
@@ -407,8 +409,21 @@ export async function processSpecificEvent(item) {
         }
         if (constants.debugging) CollaborationConsole.log(`Collab RX (constants.mutableRefs.yProjectEvents) [${constants.CUSTOM_REMOTE_EXTENSION_LOADED_CALL_TYPE}]: Attempting to load extension from URL "${extensionURL}".`);
         try {
-            // Await the promise returned by `loadExtensionURL`. `false` prevents local re-emission.
-            await constants.mutableRefs.vm.extensionManager.loadExtensionURL(extensionURL, false);
+            const { accessToken, customAchievements } = await storage.loadCustomAchievementData();
+            let projectId = '0';
+            if (constants.mutableRefs.addon && constants.mutableRefs.addon.tab && constants.mutableRefs.addon.tab.redux) {
+                 projectId = constants.mutableRefs.addon.tab.redux.state.scratchGui.projectState.projectId;
+            }
+            const canSave = true; // you can't collab if you can't save // constants.mutableRefs.addon?.tab?.redux?.state?.scratchGui?.mode?.isPlayerOnly === false;
+            await constants.mutableRefs.vm.extensionManager.loadExtensionURL(extensionURL, false, {
+                        projectId: projectId,
+                        authToken: accessToken,
+                        API_HOST: API_HOST,
+                        TRUSTED_IFRAME_HOST: TRUSTED_IFRAME_HOST,
+                        customAchievements: customAchievements || [],
+                        canRecieveAchievement: false,
+                        canSave: canSave,
+                    });
             if (constants.debugging) CollaborationConsole.log(`Collab RX (constants.mutableRefs.yProjectEvents) [${constants.CUSTOM_REMOTE_EXTENSION_LOADED_CALL_TYPE}]: Extension loaded successfully.`);
         } catch (e) {
             CollaborationConsole.error(`Collab RX (constants.mutableRefs.yProjectEvents) [${constants.CUSTOM_REMOTE_EXTENSION_LOADED_CALL_TYPE}]: Error loading extension:`, e, item);
@@ -877,4 +892,4 @@ export async function processSpecificEvent(item) {
     else {
         CollaborationConsole.warn(`Collab RX (constants.mutableRefs.yProjectEvents): Received unhandled project event type: ${item.type}`, item);
     }
-}
+}

src/components/gui/gui.jsx

@@ -401,6 +401,7 @@ const GUIComponent = props => {
                                             onOpenCustomExtensionModal={onOpenCustomExtensionModal}
                                             theme={theme}
                                             vm={vm}
+                                            canSave={canSave}
                                         />
                                     </Box>
                                     <Box className={styles.extensionButtonContainer}>

src/containers/blocks.jsx

@@ -36,6 +36,9 @@ import {setConnectionModalExtensionId} from '../reducers/connection-modal';
 import {updateMetrics} from '../reducers/workspace-metrics';
 import {isTimeTravel2020} from '../reducers/time-travel';
 
+// eslint-disable-next-line import/no-commonjs
+const {TRUSTED_IFRAME_HOST} = require('../lib/brand.js');
+
 import {
     activateTab,
     SOUNDS_TAB_INDEX
@@ -191,6 +194,13 @@ class Blocks extends React.Component {
                 window.open(docsURI, '_blank');
             }
         });
+        toolboxWorkspace.registerButtonCallback('OPEN_ACHIEVEMENT_POPUP', () => {
+            const trustedOrigin = TRUSTED_IFRAME_HOST;
+            window.parent.postMessage(
+                {type: 'block-compiler-action', action: 'show_achievement_setup_popup', canSave: this.props.canSave}
+                , trustedOrigin);
+        });
+
         toolboxWorkspace.registerButtonCallback('OPEN_RETURN_DOCS', () => {
             window.open('https://docs.turbowarp.org/return', '_blank');
         });
@@ -589,7 +599,7 @@ class Blocks extends React.Component {
     setBlocks (blocks) {
         this.blocks = blocks;
     }
-    handlePromptStart (message, defaultValue = "", callback, optTitle, optVarType,noInput=false) {
+    handlePromptStart (message, defaultValue = '', callback, optTitle, optVarType, noInput = false) {
         const p = {prompt: {callback, message, defaultValue: defaultValue}}; // Set defaultValue to empty string or null
         p.prompt.title = optTitle ? optTitle :
             this.ScratchBlocks.Msg.VARIABLE_MODAL_TITLE;
@@ -672,6 +682,7 @@ class Blocks extends React.Component {
         const {
             anyModalVisible,
             canUseCloud,
+            canSave,
             customStageSize,
             customProceduresVisible,
             extensionLibraryVisible,
@@ -726,6 +737,7 @@ class Blocks extends React.Component {
                         onEnableProcedureReturns={this.handleEnableProcedureReturns}
                         onRequestClose={onRequestCloseExtensionLibrary}
                         onOpenCustomExtensionModal={onOpenCustomExtensionModal || reduxOnOpenCustomExtensionModal}
+                        canSave={canSave}
                     />
                 ) : null}
                 {customProceduresVisible ? (
@@ -745,6 +757,7 @@ Blocks.propTypes = {
     intl: intlShape,
     anyModalVisible: PropTypes.bool,
     canUseCloud: PropTypes.bool,
+    canSave: PropTypes.bool,
     customStageSize: PropTypes.shape({
         width: PropTypes.number,
         height: PropTypes.number

src/containers/controls.jsx

@@ -3,9 +3,10 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import VM from 'scratch-vm';
 import {connect} from 'react-redux';
+import {compose} from 'redux'; // Added compose
 
-import {showStandardAlert, showAlertWithTimeout} from '../reducers/alerts';
-
+import {showStandardAlert} from '../reducers/alerts';
+import ProjectAnalyticsHOC from '../lib/project-analytics-hoc.jsx'; // Import HOC
 
 import ControlsComponent from '../components/controls/controls.jsx';
 
@@ -20,12 +21,18 @@ class Controls extends React.Component {
             showedPopup: false
         };
     }
+
     handleGreenFlagClick (e) {
-        if(!this.props.disableCompiler && !this.state.showedPopup) {
+        // Controls-specific logic (Save Warning)
+        if (!this.props.disableCompiler && !this.state.showedPopup) {
             this.setState({showedPopup: true});
             this.props.onShowSaveErrorAlert();
         }
         e.preventDefault();
+
+        // Trigger Shared Analytics Logic
+        this.props.onGreenFlagClickAnalytics();
+
         // tw: implement alt+click and right click to toggle FPS
         if (e.shiftKey || e.altKey || e.type === 'contextmenu') {
             if (e.shiftKey) {
@@ -52,18 +59,21 @@ class Controls extends React.Component {
     render () {
         const {
             vm, // eslint-disable-line no-unused-vars
-            isStarted, // eslint-disable-line no-unused-vars
+            isStarted,
             projectRunning,
             turbo,
             disableCompiler,
             onShowSaveErrorAlert,
             ...props
         } = this.props;
+
         return (
             <ControlsComponent
                 {...props}
                 active={projectRunning && isStarted}
                 turbo={turbo}
+                disableCompiler={disableCompiler}
+                onShowSaveErrorAlert={onShowSaveErrorAlert}
                 onGreenFlagClick={this.handleGreenFlagClick}
                 onStopAllClick={this.handleStopAllClick}
             />
@@ -78,7 +88,10 @@ Controls.propTypes = {
     framerate: PropTypes.number.isRequired,
     interpolation: PropTypes.bool.isRequired,
     isSmall: PropTypes.bool,
-    vm: PropTypes.instanceOf(VM)
+    vm: PropTypes.instanceOf(VM).isRequired,
+    disableCompiler: PropTypes.bool.isRequired,
+    onShowSaveErrorAlert: PropTypes.func.isRequired,
+    onGreenFlagClickAnalytics: PropTypes.func.isRequired
 };
 
 const mapStateToProps = state => ({
@@ -89,9 +102,12 @@ const mapStateToProps = state => ({
     turbo: state.scratchGui.vmStatus.turbo,
     disableCompiler: !state.scratchGui.tw.compilerOptions.enabled
 });
-// no-op function to prevent dispatch prop being passed to component
+
 const mapDispatchToProps = dispatch => ({
-    onShowSaveErrorAlert: () => dispatch(showStandardAlert('LiveReloadDisabledNotice')),
+    onShowSaveErrorAlert: () => dispatch(showStandardAlert('LiveReloadDisabledNotice'))
 });
 
-export default connect(mapStateToProps, mapDispatchToProps)(Controls);
+export default compose(
+    connect(mapStateToProps, mapDispatchToProps),
+    ProjectAnalyticsHOC
+)(Controls);

src/containers/extension-library.jsx

@@ -4,8 +4,10 @@ import React from 'react';
 import VM from 'scratch-vm';
 import {defineMessages, injectIntl, intlShape} from 'react-intl';
 import log from '../lib/log';
+import {connect} from 'react-redux'; // Import connect
 // eslint-disable-next-line import/no-commonjs
-const {EXTENSION_HOST} = require('../lib/brand');
+const {EXTENSION_HOST, TRUSTED_IFRAME_HOST, API_HOST} = require('../lib/brand');
+import storage from '../lib/storage';
 
 import extensionLibraryContent, {
     galleryError,
@@ -123,7 +125,7 @@ class ExtensionLibrary extends React.PureComponent {
                 });
         }
     }
-    handleItemSelect (item) {
+    handleItemSelect = async item => {
         if (item.href) {
             return;
         }
@@ -140,13 +142,46 @@ class ExtensionLibrary extends React.PureComponent {
             this.props.onCategorySelected('myBlocks');
             return;
         }
+        
+        const additionalData = {};
+
+        // SPECIAL CHECK FOR CUSTOM ACHIEVEMENTS EXTENSION
+        if (extensionId === 'customAchievements') {
+            // Check if project ID exists and is not the default '0' (unsaved)
+            if (!this.props.projectId || this.props.projectId === '0') {
+                window.parent.postMessage({
+                    type: 'block-compiler-action',
+                    action: 'extension-error',
+                    error: 'login_required'
+                }, '*');
+                return;
+            }
+
+            // Check if user owns the project (canSave)
+            if (!this.props.canSave) {
+                window.parent.postMessage({
+                    type: 'block-compiler-action',
+                    action: 'extension-error',
+                    error: 'not_owner'
+                }, '*');
+                return;
+            }
+            const {accessToken, customAchievements} = await storage.loadCustomAchievementData();
+            additionalData.projectId = this.props.projectId;
+            additionalData.customAchievements = customAchievements;
+            additionalData.authToken = accessToken;
+            additionalData.API_HOST = API_HOST;
+            additionalData.TRUSTED_IFRAME_HOST = TRUSTED_IFRAME_HOST;
+            additionalData.canRecieveAchievement = false; // you are in editor without a doubt...
+            additionalData.canSave = this.props.canSave;
+        }
 
         const url = item.extensionURL ? item.extensionURL : extensionId;
         if (!item.disabled) {
             if (this.props.vm.extensionManager.isExtensionLoaded(extensionId)) {
                 this.props.onCategorySelected(extensionId);
             } else {
-                this.props.vm.extensionManager.loadExtensionURL(url)
+                this.props.vm.extensionManager.loadExtensionURL(url, true, additionalData)
                     .then(() => {
                         this.props.onCategorySelected(extensionId);
                     })
@@ -157,7 +192,8 @@ class ExtensionLibrary extends React.PureComponent {
                     });
             }
         }
-    }
+    };
+
     render () {
         let library = null;
         if (this.state.gallery || this.state.galleryError || this.state.galleryTimedOut) {
@@ -201,7 +237,15 @@ ExtensionLibrary.propTypes = {
     onOpenCustomExtensionModal: PropTypes.func,
     onRequestClose: PropTypes.func,
     visible: PropTypes.bool,
-    vm: PropTypes.instanceOf(VM).isRequired // eslint-disable-line react/no-unused-prop-types
+    vm: PropTypes.instanceOf(VM).isRequired, // eslint-disable-line react/no-unused-prop-types
+    projectId: PropTypes.string,
+    canSave: PropTypes.bool
 };
 
-export default injectIntl(ExtensionLibrary);
+const mapStateToProps = state => ({
+    projectId: state.scratchGui.projectState.projectId
+});
+
+export default injectIntl(connect(
+    mapStateToProps
+)(ExtensionLibrary));