Last active
April 11, 2024 11:47
-
-
Save SheepTester/57b3daa3e227ad3fa085a2501fd331db to your computer and use it in GitHub Desktop.
To load a project file from a URL for a Scratch 3.0 mod (see comments)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import React from 'react'; | |
| import ReactDOM from 'react-dom'; | |
| import {compose} from 'redux'; | |
| import AppStateHOC from '../lib/app-state-hoc.jsx'; | |
| import GUI from '../containers/gui.jsx'; | |
| import HashParserHOC from '../lib/hash-parser-hoc.jsx'; | |
| import log from '../lib/log.js'; | |
| const onClickLogo = () => { | |
| window.location = 'https://scratch.mit.edu'; | |
| }; | |
| const handleTelemetryModalCancel = () => { | |
| log('User canceled telemetry modal'); | |
| }; | |
| const handleTelemetryModalOptIn = () => { | |
| log('User opted into telemetry'); | |
| }; | |
| const handleTelemetryModalOptOut = () => { | |
| log('User opted out of telemetry'); | |
| }; | |
| /* | |
| * Render the GUI playground. This is a separate function because importing anything | |
| * that instantiates the VM causes unsupported browsers to crash | |
| * {object} appTarget - the DOM element to render to | |
| */ | |
| export default appTarget => { | |
| GUI.setAppElement(appTarget); | |
| // note that redux's 'compose' function is just being used as a general utility to make | |
| // the hierarchy of HOC constructor calls clearer here; it has nothing to do with redux's | |
| // ability to compose reducers. | |
| const WrappedGui = compose( | |
| AppStateHOC, | |
| HashParserHOC | |
| )(GUI); | |
| // TODO a hack for testing the backpack, allow backpack host to be set by url param | |
| const backpackHostMatches = window.location.href.match(/[?&]backpack_host=([^&]*)&?/); | |
| const backpackHost = backpackHostMatches ? backpackHostMatches[1] : null; | |
| const scratchDesktopMatches = window.location.href.match(/[?&]isScratchDesktop=([^&]+)/); | |
| let simulateScratchDesktop; | |
| if (scratchDesktopMatches) { | |
| try { | |
| // parse 'true' into `true`, 'false' into `false`, etc. | |
| simulateScratchDesktop = JSON.parse(scratchDesktopMatches[1]); | |
| } catch { | |
| // it's not JSON so just use the string | |
| // note that a typo like "falsy" will be treated as true | |
| simulateScratchDesktop = scratchDesktopMatches[1]; | |
| } | |
| } | |
| // Include the (URI encoded) URL to a project file within the URL like | |
| // ?project_file=https://example.com/epic-project.sb3 | |
| const projectFileMatches = window.location.href.match(/[?&]project_file=([^&]*)&?/); | |
| const projectFile = projectFileMatches ? decodeURIComponent(projectFileMatches[1]) : null; | |
| const onVmInit = vm => { | |
| if (projectFile) { | |
| fetch(projectFile) | |
| .then(response => response.arrayBuffer()) | |
| .then(arrayBuffer => { | |
| vm.loadProject(arrayBuffer); | |
| }); | |
| } | |
| }; | |
| if (process.env.NODE_ENV === 'production' && typeof window === 'object') { | |
| // Warn before navigating away | |
| window.onbeforeunload = () => true; | |
| } | |
| ReactDOM.render( | |
| // important: this is checking whether `simulateScratchDesktop` is truthy, not just defined! | |
| simulateScratchDesktop ? | |
| <WrappedGui | |
| canEditTitle | |
| isScratchDesktop | |
| showTelemetryModal | |
| canSave={false} | |
| onTelemetryModalCancel={handleTelemetryModalCancel} | |
| onTelemetryModalOptIn={handleTelemetryModalOptIn} | |
| onTelemetryModalOptOut={handleTelemetryModalOptOut} | |
| /> : | |
| <WrappedGui | |
| canEditTitle | |
| backpackVisible | |
| showComingSoon | |
| backpackHost={backpackHost} | |
| canSave={false} | |
| onClickLogo={onClickLogo} | |
| onVmInit={onVmInit} | |
| />, | |
| appTarget); | |
| }; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Thank you sir, i did that by creating another react API, and i put the file 'cc.sb3' in the public folder, then i made this url
http://localhost:8601/?project_file=http://localhost:3000/cc.sb3
where localhost:8601 is my scratch 3.0 api
and localhost:3000 is a dom api to host the file
And actually it works, but i need a more sofisticated solution for this, like locating the public folder in scratch 3.0 or using easyphp web server or something like this;
if you have any suggestion it will be very helpfull, thanks and best regards