JSFiddle - React, Tailwind, and code Playground

by Josh Pullen

JavaScript

import { Project, Sprite, Costume, Script, Blocks, DefaultCostumeFile, DefaultSoundFile } from "sb-edit";

/*
Problems:
- Need to filter 
*/

const project = new Project({
	sprites: [
  	new Sprite({
      name: "Sprite1",
      costumes: [
        new Costume({
          name: "costume1",
          file: new DefaultCostumeFile("Cat-a")
        }),
        new Costume({
          name: "costume2",
          file: new DefaultCostumeFile("Cat-b")
        })
      ],
      sounds: [
        new Sound({
          name: "Meow",
          file: new DefaultSoundFile("Meow")
        })
      ]
    })
  ]
});

const script = new Script({
	hat: new Blocks.WhenGreenFlagClicked(),
	blocks: [
  	new Blocks.Forever([
    	new Blocks.MoveSteps(10),
      new Blocks.TurnRight(15),
      new Blocks.IfOnEdgeBounce(),
      new Blocks.If(null, [
      	new Blocks.GoTo("random"),
        new Blocks.SwitchCostume("costume2") // Needs to be updated later
      ])
    ])
  ]
});

project.sprites[0].scripts.push(script);

project.sprites[0].costumes[1].rename("costume1", true); // Should cause `script` to be updated

// This can be achieved by emitting an event that `project` has already subscribed to
// as soon as the costume was added to the sprite in the project

// This system makes it possible to attach one script to multiple sprites/projects/etc
// and have everything update as expected. You can also pop a script out of one project/sprite
// and drop it into another relatively seamlessly. All the plumbing is pretty much automatic.

// We can also have APIs for introspecting a project/sprite/etc to see if its structure contains
// any errors (such as blocks that point to nonexistant costumes or sounds).



// It should be possible for anyone (including 3rd parties) to register new block types. Of course
// not all I/O formats will agree on which block types are valid, but blocks should define themselves
// such that they