Support most Scratch blocks

[PullJosh]

Built-in

✔ Motion

• Move steps
• Turn right
• Turn left
• Go to [menu]
  • Random position
  • Mouse
  • Sprite
• Go to x y
• Glide secs to [menu]
  • Random position
  • Mouse
  • Sprite
• Glide secs to x y
• Point in direction
• Point towards
  • Mouse
  • Sprite
• Change x by
• Set x to
• Change y by
• Set y to
• If on edge, bounce: Support Scratch block: "if on edge, bounce" #120
• Set rotation style
• x position
• y position
• direction

Looks

• Say for secs
• Say
• Think for secs
• Think
• Switch costume to
• Next costume
• Switch backdrop to
  • Name
  • Next
  • Previous
  • Random
• Switch backdrop and wait
• Next backdrop
• Change size by
• Set size to
• Change effect by
• Set effect to
  • Color
  • Fisheye
  • Whirl
  • Pixelate
  • Mosaic
  • Brightness
  • Ghost
• Clear graphic effects
• show
• hide
• go to front/back layer
• go forward/backward layers
• costume number/name
• backdrop number/name
• size

✔ Sound

• Play sound until done
• Play sound
• Stop all sounds
• Change effect by
• Set effect to
  • Pitch
  • Pan
• Clear sound effects
• Change volume by
• Set volume to
• volume

✔ Events

• When green flag clicked
• When key pressed
• When this sprite clicked
• When backdrop switches to: Support Scratch block: "When backdrop switches to" #121
• When greater than: Support Scratch blocks: "when greater than" & "loudness" #122
• When I receive
• Broadcast
• Broadcast and wait

Control

• Wait secs
• Repeat
• Forever
• If
• If else
• Wait until
• Repeat until
• Stop
  • All: Support Scratch blocks: "stop all", "stop other scripts in sprite" #124
  • This script
  • Other scripts in this sprite: Support Scratch blocks: "stop all", "stop other scripts in sprite" #124
• When I start as a clone
• Create clone of
• Delete this clone

Sensing

• Touching
  • Mouse
  • Edge: Support Scratch block: "touching edge?" #125
  • Sprite
• Touching color
• Color is touching color
• Distance to
  • Mouse
  • Sprite
• Ask and wait
• Answer
• Key pressed
• Mouse down
• Mouse x
• Mouse y
• Set drag mode: Support Scratch block: "set drag mode" #123
• Loudness: Support Scratch blocks: "when greater than" & "loudness" #122
• Timer: this.timer
• Reset timer
• [property] of [object]
• Current
  • Year
  • Month
  • Date
  • Day of week
  • Hour
  • Minute
  • Second
• Days since 2000
• Username (N/A)

✔ Operators

• Add
• Subtract
• Multiply
• Divide
• Pick random
• Greater than
• Less than
• Equal to
• And
• Or
• Not
• Join
• Letter of
• Length of
• Contains
• Mod
• Round
• Math "of"
  • abs
  • floor
  • ceiling
  • sqrt
  • sin
  • cos
  • tan
  • asin
  • acos
  • atan
  • ln
  • log
  • e ^
  • 10 ^

✔ Variables

Variables

• Get variable value
• Set variable to
• Change variable by
• Show variable
• Hide variable

Lists

• Get list value
• Add to list
• Delete of list
• Delete all of list
• Insert at position of list
• Replace item of list
• Item of list
• Item # of string in list
• Length of list
• List contains item
• Show list
• Hide list

✔ My Blocks

Custom blocks are a feature. There aren't any predefined blocks to support, because... well. You know.

Extensions

Music

• Overall support tracked in Support Music extension blocks #135
• Play drum for beats
• Rest for beats
• Play note for beats
• Set instrument
• Set tempo
• Change tempo
• Tempo

✔ Pen

• Erase all
• Stamp
• Pen down
• Pen up
• Set pen color
• Change pen [property]
• Set pen [property]
• Change pen size
• Set pen size

Other Extensions...

Supporting hardware/api scratch extensions natively is out of the scope of Leopard.

[micahlt]

Looks like you’ve done a lot recently! Loads of compatibility. :D Looks like I can keep writing documentation!

[PullJosh]

@micahlt That would be fantastic! :)

[PullJosh]

Many blocks are straightforward to implement, but a few pose questions:

• Say and ask: Do we implement proper speech bubbles, or rely on alert() and propmpt()?
• How do we handle blocks with sprite-selection dropdowns? We can...
  1. Pass a string with the sprite name
     • Easier (and makes code generation with sb-edit simpler too)
  2. Import the sprite class and pass that
     • Less prone to bugs and might even allow smart IDEs to give errors when a sprite's name changes, is deleted, etc...

[bates64]

Do we implement proper speech bubbles

Yes. Especially because window.alert() completely pauses all JavaScript, which is completely different to the way the say et al. blocks work. What would the sayForNSecs block even do?

How do we handle blocks with sprite-selection dropdowns?

Import the sprite class! Magic strings are

• bad
• not good
• confusing, because we've just learnt that a 'string' is just text - why does it suddenly refer to Cat? Cat != "Cat"!
• very bad

(You could also provide a String.prototype.toSprite or something, like

import Cat from './cat.mjs'

createCloneOf("Cat".toSprite())
createCloneOf(Cat)

but ehhhh)

[PullJosh]

@nanaian Agree on speech bubbles.

You're right that magic strings are a bad plan. Thanks for making it clear.

One thing that's kind of weird about passing the class directly is that it feels like we should be passing the instance instead. If I run this.goto(Dog), I expect to go to the coordinates of a specific instance of the Dog sprite. Although Scratch has a clear hierarchy with one "parent" sprite and many clones, it seems unnecessarily restrictive to carry this idea over to scratch-js. (Instead, all sprites should be treated the same, whether they were present when the project began or created as a clone.)

The tricky part is allowing one sprite to get its hands on an instance of another. Currently, all sprites are instantiated once and then passed to the new Project constructor. We could have a funky method like project.find(Dog) that returns one (or an array or something), but I don't feel great about it.

[bates64]

it seems unnecessarily restrictive to carry this idea over to scratch-js

So something more like

const meowth = new Cat() // ie. not automagically instanciated by Project
meowth.myVariable // 'original'
meowth.myVariable = 'somethingElse'

const persian = clone(meowth) // inherits variables of meowth
meowth.myVariable // 'somethingElse'

const skitty = new Cat()
skitty.myVariable // 'original'

is on the table?

If we did the scope thing currently being discussed in #19, we would likely encourage doing global.meowth = meowth etc to share instances globally. More dissimilar to Scratch, but... better?

[PullJosh]

Yeah, that's totally an option. It definitely feels like there could be a nice two-in-one solution to both the scope problem and the accessing instances problem. I just don't know what it is. :P

Edit: To nitpick, we would probably do

const persian = meowth.clone()

but it's the same idea.

[PullJosh]

I've been testing the compiler with a bunch of projects pulled from the Scratch "explore" page (and some from the home page). It seems like the most commonly used features which are still missing are, in roughly decending order, the following:

1. The touching blocks (a sprite, the mouse, or a color)
2. When this sprite clicked (we get this almost for free after adding a "touching mouse" option)
3. Sprite layering
4. Clones
5. Ghost effect

[callowaysutton]

Using the Tone.js library would make adding drums, sound effects, and general audio a lot easier but I think it would mess with the whole concept of not having to build/install anything :/

[towerofnix]

Sound blocks can all be marked complete now!

[PullJosh]

Sound blocks can all be marked complete now!

Good call! I just updated the docs as well.

(We're getting startlingly close to supporting every Scratch block!)

[towerofnix]

I just updated the docs as well.

Oh nice! I was just procrastinating on figuring out how the site repo works and making a PR for that, lol. (Yess!!)

[apple502j]

• If on edge, bounce: Add if on edge, bounce #59
• Touching edge: Add if on edge, bounce #59
• Loudness: Loudness related thing support #60
• When backdrop switches to: Should scratch-js implement compatibility functions? #58
• When greater than: Loudness related thing support #60

[BoomerScratch]

(wow this issue is inactive for a pretty long time I guess)
Scratch's soundbank is available here. I think we can use the Web Audio API for adding pitch and speed effects to the instruments/drums.
The for ... beats is basically something like the wait ... seconds block (unless you are using instruments, and play it for 0 beats).
If it's still hard to do, maybe take a look at the source code of the music extension?

[HanClinto]

• If on edge, bounce: Fix for #59: Add if on edge, bounce #114
• Touching edge: Fix for #59: Add if on edge, bounce #114

[HanClinto]

Cloud variables could be supported with this (extremely simple) Javascript library that seems to be very Scratch-inspired:
https://kihtrak.com/cloud_variable/

Looking through the author's other projects, it appears that he's a lifelong Scratcher. :)

The code for the client is quite minimalistic, and the server code isn't much larger. We could either link to this project or copy / adapt it more wholesale -- there is no license attached to the code, so we may want to inquire about it.