-
-
Save SheepTester/57b3daa3e227ad3fa085a2501fd331db to your computer and use it in GitHub Desktop.
| 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); | |
| }; |
First i wanna thank you sir for the fast answe, but this is not what i need.
Actually, i am running the open source version of Scratch 3.0 on my local machine at (localhost:8601), and i want to find a way to open local projects without usign (file->open project). my idea is to use links like
<a href=''localhost:8601?project_url=my_local_project.sb3>
So when i click on this link Scratch will load and open automatically the project
Thank you very much
Web pages, even on localhost or file:// URLs, cannot load local files on your computer without consent from the user via a file selection prompt
What you could do is set up a local HTTP server that statically serves the files in some folder, then load project files from the server
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
the solution from @jaafreitas works for me.
This is an example using a remixed code https://jaafreitas.github.io/scratch-dataviewer/?project_url=/scratch/SixeYColors.sb3