Repository files navigation

• git clonegit@github.com:geolonia/geo-scratch.git
• npm install
• npm start *
• openhttp://127.0.0.1:8080
• set token in the browser cookie:
  • go topostman collection then select production environment variable
  • runToken (temp) API, it will generateaccess_token andrefresh_token
  • In the browser open devtools application>cookies>http://localhost:8080 then add the tokens generate in the previous step.
• reload the page. If still does not work and shows an error indication an invalid token, open the project in a new tab

(*) If you see this error:Error: error:0308010C:digital envelope routines::unsupported, it means your Node.js version has additional security checks. As a workaround you can addNODE_OPTIONS=--openssl-legacy-provider to your package.json scripts (example below) or use Node.js v16.

package.json:

"start": "NODE_OPTIONS=--openssl-legacy-provider webpack-dev-server"

• in thetakamatsu-scratch repo runnpm run build
• copyprojects folder
• in theadventure-lab-cms repo, replace folder web/projects with generated folder in previous step
• commit the changes and push to remote
• once merged into main branch, usually it takes 1~2 minutes to be reflected in productionhttps://chizubouken-lab.jp/app

Example to show project id 19(access CMS dashboard to check existing projects id):

In the filehash-parser-hoc.jsx

comment these two lines, then add assign project id tohashProjectId variable

handleHashChange () {    // const hashMatch = window.location.pathname.match(/\/(\d+)$/);    // const hashProjectId = hashMatch === null ? defaultProjectId : hashMatch[1];    const hashProjectId = "19";    this.props.setProjectId(hashProjectId.toString());}

No change needed.

This requires you to have Git and Node.js installed.

In your own node environment/application:

npm install https://github.com/LLK/scratch-gui.git

If you want to edit/play yourself:

git clone https://github.com/LLK/scratch-gui.gitcd scratch-guinpm install

You may want to add--depth=1 to thegit clone command because there are somelarge files in the git repository history.

Running the project requires Node.js to be installed.

Open a Command Prompt or Terminal in the repository and run:

npm start

Then go tohttp://localhost:8601/ - the playground outputs the default GUI component

If you wish to developscratch-gui alongside other scratch repositories that depend on it, you may wishto have the other repositories use your localscratch-gui build instead of fetching the current productionversion of the scratch-gui that is found by default usingnpm install.

Here's how to link your localscratch-gui code to another project'snode_modules/scratch-gui.

1. In your localscratch-gui repository's top level:

   1. Make sure you have runnpm install
   2. Build thedist directory by runningBUILD_MODE=dist npm run build
   3. Establish a link to this repository by runningnpm link

2. From the top level of each repository (such asscratch-www) that depends onscratch-gui:

   1. Make sure you have runnpm install
   2. Runnpm link scratch-gui
   3. Build or run the repository

Instead ofBUILD_MODE=dist npm run build, you can useBUILD_MODE=dist npm run watch instead. This will watch for changes to yourscratch-gui code, and automatically rebuild when there are changes. Sometimes this has been unreliable; if you are having problems, try going back toBUILD_MODE=dist npm run build until you resolve them.

If you can't get linking to work right, try:

• Follow the recipe above step by step and don't change the order. It is especially important to runnpm installbeforenpm link, because installing after the linking will reset the linking.
• Make sure the repositories are siblings on your machine's file tree, like.../.../MY_SCRATCH_DEV_DIRECTORY/scratch-gui/ and.../.../MY_SCRATCH_DEV_DIRECTORY/scratch-www/.
• Consistent node.js version: If you have multiple Terminal tabs or windows open for the different Scratch repositories, make sure to use the same node version in all of them.
• If nothing else works, unlink the repositories by runningnpm unlink in both, and start over.

You may want to review the documentation forJest andEnzyme as you write your tests.

Seejest cli docs for more options.

NOTE: If you're a windows user, please run these scripts in Windowscmd.exe instead of Git Bash/MINGW64.

Before running any tests, make sure you have runnpm install from this (scratch-gui) repository's top level.

To run linter, unit tests, build, and integration tests, all at once:

npmtest

To run unit tests in isolation:

npm run test:unit

To run unit tests in watch mode (watches for code changes and continuously runs tests):

npm run test:unit -- --watch

You can run a single file of integration tests (in this example, thebutton tests):

$(npm bin)/jest --runInBand test/unit/components/button.test.jsx

Integration tests use a headless browser to manipulate the actual html and javascript that the repoproduces. You will not see this activity (though you can hear it when sounds are played!).

Note that integration tests require you to first create a build that can be loaded in a browser:

npm run build

Then, you can run all integration tests:

npm run test:integration

Or, you can run a single file of integration tests (in this example, thebackpack tests):

$(npm bin)/jest --runInBand test/integration/backpack.test.js

If you want to watch the browser as it runs the test, rather than running headless, use:

USE_HEADLESS=no$(npm bin)/jest --runInBand test/integration/backpack.test.js

When runningnpm install, you can get warnings about optionsl dependencies:

npm WARN optional Skipping failed optional dependency /chokidar/fsevents:npm WARN notsup Not compatible with your operating system or architecture: fsevents@1.2.7

You can suppress them by adding theno-optional switch:

npm install --no-optional

Further reading:Stack Overflow

When installing for the first time, you can get warnings which need to be resolved:

npm WARN eslint-config-scratch@5.0.0 requires a peer of babel-eslint@^8.0.1 but none was installed.npm WARN eslint-config-scratch@5.0.0 requires a peer of eslint@^4.0 but none was installed.npm WARN scratch-paint@0.2.0-prerelease.20190318170811 requires a peer of react-intl-redux@^0.7 but none was installed.npm WARN scratch-paint@0.2.0-prerelease.20190318170811 requires a peer of react-responsive@^4 but none was installed.

You can check which versions are available:

npm view react-intl-redux@0.* version

You will neet do install the required version:

npm install  --no-optional --save-dev react-intl-redux@^0.7

The dependency itself might have more missing dependencies, which will show up like this:

user@machine:~/sources/scratch/scratch-gui (491-translatable-library-objects)$ npm install  --no-optional --save-dev react-intl-redux@^0.7scratch-gui@0.1.0 /media/cuideigin/Linux/sources/scratch/scratch-gui├── react-intl-redux@0.7.0└── UNMET PEER DEPENDENCY react-responsive@5.0.0

You will need to install those as well:

npm install  --no-optional --save-dev react-responsive@^5.0.0

Further reading:Stack Overflow

If you run into npm install errors, try these steps:

1. runnpm cache clean --force
2. Delete the node_modules directory
3. Delete package-lock.json
4. runnpm install again

You can publish the GUI to github.io so that others on the Internet can view it.Read the wiki for a step-by-step guide.

Since so much code throughout scratch-gui depends on the state of the project, which goes through many different phases of loading, displaying and saving, we created a "finite state machine" to make it clear which state it is in at any moment. This is contained in the file src/reducers/project-state.js .

It can be hard to understand the code in src/reducers/project-state.js . There are several types of data and functions used, which relate to each other:

These include state constant strings like:

• NOT_LOADED (the default state),
• ERROR,
• FETCHING_WITH_ID,
• LOADING_VM_WITH_ID,
• REMIXING,
• SHOWING_WITH_ID,
• SHOWING_WITHOUT_ID,
• etc.

These are names for the action which causes a state change. Some examples are:

• START_FETCHING_NEW,
• DONE_FETCHING_WITH_ID,
• DONE_LOADING_VM_WITH_ID,
• SET_PROJECT_ID,
• START_AUTO_UPDATING,

As this diagram of the project state machine shows, various transition actions can move us from one loading state to another:

Note: for clarity, the diagram above excludes states and transitions relating to error handling.

Here's an example of how states transition.

Suppose a user clicks on a project, and the page starts to load with urlhttps://scratch.mit.edu/projects/123456 .

Here's what will happen in the project state machine:

1. When the app first mounts, the project state isNOT_LOADED.
2. TheSET_PROJECT_ID redux action is dispatched (from src/lib/project-fetcher-hoc.jsx), withprojectId set to123456. This transitions the state fromNOT_LOADED toFETCHING_WITH_ID.
3. TheFETCHING_WITH_ID state. In src/lib/project-fetcher-hoc.jsx, theprojectId value123456 is used to request the data for that project from the server.
4. When the server responds with the data, src/lib/project-fetcher-hoc.jsx dispatches theDONE_FETCHING_WITH_ID action, withprojectData set. This transitions the state fromFETCHING_WITH_ID toLOADING_VM_WITH_ID.
5. TheLOADING_VM_WITH_ID state. In src/lib/vm-manager-hoc.jsx, we load theprojectData into Scratch's virtual machine ("the vm").
6. When loading is done, src/lib/vm-manager-hoc.jsx dispatches theDONE_LOADING_VM_WITH_ID action. This transitions the state fromLOADING_VM_WITH_ID toSHOWING_WITH_ID
7. TheSHOWING_WITH_ID state. Now the project appears normally and is playable and editable.

We provideScratch free of charge, and want to keep it that way! Please consider making adonation to support our continued engineering, design, community, and resource development efforts. Donations of any size are appreciated. Thank you!