leopard icon indicating copy to clipboard operation
leopard copied to clipboard

Support most Scratch blocks

Open PullJosh opened this issue 5 years ago • 16 comments

Built-in

✔ Motion

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

Looks

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

✔ Sound

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

✔ Events

  • [x] When green flag clicked
  • [x] When key pressed
  • [x] When this sprite clicked
  • [x] When backdrop switches to: #121
  • [x] When greater than: #122
  • [x] When I receive
  • [x] Broadcast
  • [x] Broadcast and wait

Control

  • [x] Wait secs
  • [x] Repeat
  • [x] Forever
  • [x] If
  • [x] If else
  • [x] Wait until
  • [x] Repeat until
  • [ ] Stop
    • [ ] All: #124
    • [x] This script
    • [ ] Other scripts in this sprite: #124
  • [x] When I start as a clone
  • [x] Create clone of
  • [x] Delete this clone

Sensing

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

✔ Operators

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

✔ Variables

Variables

  • [x] Get variable value
  • [x] Set variable to
  • [x] Change variable by
  • [x] Show variable
  • [x] Hide variable

Lists

  • [x] Get list value
  • [x] Add to list
  • [x] Delete of list
  • [x] Delete all of list
  • [x] Insert at position of list
  • [x] Replace item of list
  • [x] Item of list
  • [x] Item # of string in list
  • [x] Length of list
  • [x] List contains item
  • [x] Show list
  • [x] 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 #135
  • [ ] Play drum for beats
  • [ ] Rest for beats
  • [ ] Play note for beats
  • [ ] Set instrument
  • [ ] Set tempo
  • [ ] Change tempo
  • [ ] Tempo

✔ Pen

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

Other Extensions...

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

PullJosh avatar Nov 15 '19 21:11 PullJosh

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

micahlt avatar Nov 15 '19 22:11 micahlt

@micahlt That would be fantastic! :)

PullJosh avatar Nov 15 '19 22:11 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...

PullJosh avatar Nov 15 '19 22:11 PullJosh

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)

bates64 avatar Nov 16 '19 16:11 bates64

@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.

PullJosh avatar Nov 16 '19 16:11 PullJosh

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?

bates64 avatar Nov 16 '19 16:11 bates64

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 avatar Nov 16 '19 17:11 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

PullJosh avatar Nov 23 '19 04:11 PullJosh

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 :/

callowaysutton avatar Jan 13 '20 09:01 callowaysutton

Sound blocks can all be marked complete now!

towerofnix avatar Feb 11 '20 19:02 towerofnix

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!)

PullJosh avatar Feb 11 '20 20:02 PullJosh

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!!)

towerofnix avatar Feb 11 '20 20:02 towerofnix

  • If on edge, bounce: #59
  • Touching edge: #59
  • Loudness: #60
  • When backdrop switches to: #58
  • When greater than: #60

apple502j avatar Mar 21 '20 17:03 apple502j

(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?

BoomerScratch avatar Jul 08 '20 10:07 BoomerScratch

  • If on edge, bounce: #114
  • Touching edge: #114

HanClinto avatar Jul 16 '22 01:07 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.

HanClinto avatar Jul 16 '22 01:07 HanClinto