@moarhaus/scratch-browser-snapshots

Snapshots - A Scratch project management extension for TurboWarp

• Autosaving and autoloading using your browser's long term storage system (IndexedDB)
• Save, load, and update unlimited snapshots within a single project and file
• Exports to .snaps.sb3 which is compatible with Scratch (though you'll only see the active snapshot)

Video Demo

https://user-images.githubusercontent.com/69949201/223190423-109484d7-a764-48d8-9ad7-ef421da6825e.mp4

---

Features & Use Cases

• Works offline
• Project histories
• Code organization
• New workflows
• Collaboration

---

Notes

Scratch compatible (but...)

Without this extension Scratch will treat .snaps.sb3 as a regular .sb3, loading and saving just the active snapshot. When you export from Scratch you'll get the usual .sb3 with no snapshots but you can always use this extension to load the changes back into your snapshots.

---

Roadmap

graph TD;
snapshots -.-> soon[Coming Soon]
snapshots[[Snapshots]] ==> future[[Future extensions]] --> blocks[Snapshot Blocks] & cloud[Snapshot Cloud]

Coming soon

• Make it so that snapshots are maintained on Scratch even without the extension
• Allow broadcasts to trigger events across snapshots
• Ability to import and merge snapshots together, allowing for a kind of templating system
• Markdown notes for snapshots

Future extensions

• Snapshot Blocks to programmatically load and transition snapshots, allowing you to organize your code across snapshots in addition to across Sprites. Other blocks can allow for running multiple snapshots at once and "stacking" their outputs.
• Snapshots Cloud to save snapshots to a private cloud (provided by Dexie Cloud)

---

Local development

Requirements

• NodeJS

Setup

# Install dependencies
npm i

# Start a local server at http://localhost:8000
npm start

Developing

• Visit any of these to develop the extension live:
  • http://localhost:8000
  • https://scratchmoar.netlify.app/editor.html?extension=http://localhost:8000/src/index.js
  • https://turbowarp.org/editor/?extension=http://localhost:8000/src/index.js

Troubleshooting

• If you get any weirdness in the npm console, try clearing .parcel-cache
• Add &reset to URL to force clear everything incase you accidently corrupt IndexedDB while developing

---