Leopard: Edit Scratch projects as JavaScript code

ZZC12345

ego-lay_atman-bay wrote:
WesleyMcGinnOpen in Ocular wrote:
(#586)
This leopard converter is really cool! I am trying to learn more JavaScript with the manual translations page but I noticed that there was no translation available for a cloud variable. (Link) I also noticed that fixing this issue is not on the upcoming improvements list. What alternative methods are there for simple data transfer across the cloud in JavaScript? (Suppose I have a variable called “variable” and I want it to be set equal to 12 on all devices on a website. How would I do that?)
That's actually a lot more complicated than you think. You need a server in order to use cloud variables. I'd suggest that you don't worry about it.

Same.

WesleyMcGinn wrote:
This leopard converter is really cool! I am trying to learn more JavaScript with the manual translations page but I noticed that there was no translation available for a cloud variable. (Link) I also noticed that fixing this issue is not on the upcoming improvements list. What alternative methods are there for simple data transfer across the cloud in JavaScript? (Suppose I have a variable called “variable” and I want it to be set equal to 12 on all devices on a website. How would I do that?)

You should learn about the various protocols that power the internet. Here are the main ones that you would care about in your use case:

HTTP (wikipedia)
HTTP is a way for the server (the thing that keeps track of state across different computers) to communicate with the client (who requests state and updates it). It's on the beginning of every single URL (or at least most, discussed later) you visit: https/www.google.com (the “s” stands for secure, meaning the connection is encrypted). There are a couple widely used versions, but all of them share a common plain-text base request/response format:
Example Request (annotations marked with //)
```
POST /myform HTTP/1.1        // Start line (using HTTP 1.1, POSTing to http://localhost:8000/myform)
Host: localhost:8000         // Start headers
User-Agent: Mozilla/5.0 (Macintosh). Firefox/51.0
Accept: text/html,application/xhtml+xml,*/*;q=0.8 Accept-Language: en-US,en;q-0.5
Accept-Encoding: gzip, deflate
Connection: keep-alive
Upgrade-Insecure-Requests: 1
Content-Type: multipart/form-data; boundary=-12656974
Content-Length: 345          // End headers
                             // Empty line
-12656974                    // Content body (using boundary between multipart data as -12656974)
Datadatadata                 // Content body
```
Example response:
```
HTTP/1.1 403 Forbidden
Content-Type: text/html; charset-iso-8859-1
Date: Wed, 10 Aug 2016 09:23:25 GMT Keep-Alive: timeout-5, max-1000 Connection: Keep-Alive
Age: 3464
Date: Wed, 10 Aug 2016 09:46:25 GMT
X-Cache-Info: caching
Content-Length: 220

<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML2.0//EN">
(more data)
```
(from MDN web docs - link)
So basically, every webpage uses this format to send and receive information, even when you don't reload the page, via AJAX. Of course, under the hood, all of this is being sent in sockets and encoded in binary, but you shouldn't care about that.
However, you are asking for super-fast response times, something HTTP is not good at. So, you're going to have to use another protocol, which keeps a connection open for a long time to send information fast in the lifetime of the page.

WebSocket
WebSockets are slightly lower-level, but thankfully (or not!) JavaScript has a nice wrapper around them. This is how the Scratch website sends cloud vars, through a websocket to wss

/clouddata.scratch.mit.edu/ (note the different protocol, WSS = web socket secure). It uses up-down information handling (comments with //):

↑ {"method":"handshake","user":"ZZC12345","project_id":"--redacted--"} // Handshake: initial values are passed like user, project id
↑ {"method":"create","user":"ZZC12345","project_id":"--redacted--","name":"☁ test","value":0} // I created a cloud variable!
↓ {"method":"ack","name":"☁ test","reply":"OK"} // Scratch's server responded and said that the creation was successful.
↑ {"method":"set","user":"ZZC12345","project_id":"--redacted--","name":"☁ test","value":"0"} // I set a cloud variable to 0.
↓ {"method":"set","project_id":"--redacted--","name":"☁ test","value":"1"} // I opened another tab and set a cloud variable; note the down arrow saying the server sent that back.

Reference

Basically, don't try to do it for a Scratch project, just write your own game in JavaScript/something else and code your own server, but if you want that you've outgrown Scratch and Leopard.

PullJosh

WesleyMcGinn wrote:
This leopard converter is really cool! I am trying to learn more JavaScript with the manual translations page but I noticed that there was no translation available for a cloud variable. (Link) I also noticed that fixing this issue is not on the upcoming improvements list. What alternative methods are there for simple data transfer across the cloud in JavaScript? (Suppose I have a variable called “variable” and I want it to be set equal to 12 on all devices on a website. How would I do that?)

Yeah… As others have written, that is unfortunately much harder than you would expect.

The way Scratch does it is to use a server, which is basically a computer that is connected to the internet at all times. When you set a cloud variable, your computer notifies the server, and then the server goes and notifies everyone else who's currently viewing the project. All of this is done over websockets. If you don't need it to be completely instantaneous, you can ditch the websockets part, which will simplify your life a lot, but you still need a server of some kind.

It's all a bit more tricky than you would hope.

cyAn_5648

minor repost here, but I still don't understand why my project keeps giving me
Argument sandboxId for data.sandboxId is missing

whenever I try to convert it. Is there something I'm missing? I removed all the cloud variables, made sure all the lists work, had no variable or list have the same name - etc. the link is at https://scratch.mit.edu/projects/722167498/

I've tried most of my other projects, and they converted just fine, even though some of them… broke, especially ones involving clones. Someone help?

Last edited by cyAn_5648 (Aug. 18, 2022 01:15:49)

PullJosh

cyAn_5648 wrote:
minor repost here, but I still don't understand why my project keeps giving me
Argument sandboxId for data.sandboxId is missing

whenever I try to convert it. Is there something I'm missing? I removed all the cloud variables, made sure all the lists work, had no variable or list have the same name - etc. the link is at https://scratch.mit.edu/projects/722167498/

I've tried most of my other projects, and they converted just fine, even though some of them… broke, especially ones involving clones. Someone help?

Thanks for reposting! It helps me overcome my laziness.

I am looking at your project and although I'm not 100% sure, my guess is that the “Cloud List” sprite is causing the issue. You have some costumes with weird names. (For example, costume 90 is called =Ä.) I am sure there's a good reason for including those names, but I'm pretty sure that's what's breaking Codesandbox. Leopard creates one file for each costume, and it tries to name the file according to the costume name. I would bet that Codesandbox thinks that those characters are not valid in a file name.

I'm not 100% sure about this, but it's my best guess as to what's going wrong.

cyAn_5648

PullJosh wrote:
cyAn_5648 wrote:
minor repost here, but I still don't understand why my project keeps giving me
Argument sandboxId for data.sandboxId is missing

whenever I try to convert it. Is there something I'm missing? I removed all the cloud variables, made sure all the lists work, had no variable or list have the same name - etc. the link is at https://scratch.mit.edu/projects/722167498/

I've tried most of my other projects, and they converted just fine, even though some of them… broke, especially ones involving clones. Someone help?
Thanks for reposting! It helps me overcome my laziness.

I am looking at your project and although I'm not 100% sure, my guess is that the “Cloud List” sprite is causing the issue. You have some costumes with weird names. (For example, costume 90 is called =Ä.) I am sure there's a good reason for including those names, but I'm pretty sure that's what's breaking Codesandbox. Leopard creates one file for each costume, and it tries to name the file according to the costume name. I would bet that Codesandbox thinks that those characters are not valid in a file name.

I'm not 100% sure about this, but it's my best guess as to what's going wrong.

UPDATE:
As it turns out, you were right, lol. I deleted the cloud list sprites… and baam it converted. The project kinda broke (especially with the when this sprite clicked) but I can always try to debug it. Thx

Last edited by cyAn_5648 (Aug. 18, 2022 06:52:50)

jbthepig

PullJosh wrote:
Some Scratch blocks are not yet supported. Check the translations page to see which blocks have JavaScript equivalents using Leopard. More blocks will be supported over time.

Are you aware that this link leads to a 404 error?

gdxfor

When trying to convert Griffpatch's "The Luckiest Scratcher v1.0“ project, it tells me ”Argument sandboxId for data.sandboxId is missing".

Enigmatic22

Why doesn't this project work?

PullJosh

jbthepig wrote:
PullJosh wrote:
Some Scratch blocks are not yet supported. Check the translations page to see which blocks have JavaScript equivalents using Leopard. More blocks will be supported over time.
Are you aware that this link leads to a 404 error?

Good catch! Thank you. I will fix it in the original post.

IdiotMan123199

i got a error about “Cannot read properties of undefined (reading ‘SEQUENCE’)” my project is https://scratch.mit.edu/projects/715914050/

Last edited by IdiotMan123199 (Aug. 24, 2022 02:02:04)

ScratchAgent8

I tried and checked everything but Leopard couldn't convert my scratch project

my project : https://scratch.mit.edu/projects/723422182/
Leopard is saying “Argument sandboxId for data.sandboxId is missing.” - I have no idea what it means
please someone help me

Vedant_Jain

can u teach me how do I use leopard

slava-seattle

https://scratch.mit.edu/projects/724611476/editor/ doesn't work the error is “Cannot read properties of undefined (reading ‘0’)”

(((((((((((()+()))+((()+()))))+((((()+()))+((()+()))))))+((((((()+()))+((()+()))))+((((()+()))+((()+()))))))))+((((((((()+()))+((()+()))))+((((()+()))+((()+()))))))+((((((()+()))+((()+()))))+((((()+()))+((()+()))))))))))+((((((((((()+()))+((()+()))))+((((()+()))+((()+()))))))+((((((()+()))+((()+()))))+((((()+()))+((()+()))))))))+((((((((()+()))+((()+()))))+((((()+()))+((()+()))))))+((((((()+()))+((()+()))))+((((()+()))+((()+())))))))))))

Last edited by slava-seattle (Aug. 25, 2022 00:34:55)

underfanreal1

How would I import an sb3 into this?

jbthepig

Vedant_Jain wrote:
can u teach me how do I use leopard

Go to https://leopardjs.com/ and enter the URL of your Scratch project.

jbthepig

underfanreal1 wrote:
How would I import an sb3 into this?

Upload the file to your Scratch account, then use that URL.

CGFyt

why this appears? “Argument sandboxId for data.sandboxId is missing”

pixelperfect12

https://scratch.mit.edu/projects/712240768/ what script in which sprite causes this error: “Cannot read properties of undefined (reading ‘0’)”

CraylenGD

Please fix the “can't read 0” bug it was a new project made in scratch 3.0

Knightbot63

pixelperfect12 wrote:
https://scratch.mit.edu/projects/712240768/ what script in which sprite causes this error: “Cannot read properties of undefined (reading ‘0’)”

Experiencing the same thing too.

Discuss Scratch