mirror of
https://github.com/scratchfoundation/scratch-render.git
synced 2025-08-28 22:30:04 -04:00
53 lines
2.3 KiB
HTML
53 lines
2.3 KiB
HTML
<body>
|
|
<script src="../../node_modules/scratch-vm/dist/web/scratch-vm.js"></script>
|
|
<script src="../../node_modules/scratch-storage/dist/web/scratch-storage.js"></script>
|
|
<script src="../../node_modules/scratch-svg-renderer/dist/web/scratch-svg-renderer.js"></script>
|
|
<!-- note: this uses the BUILT version of scratch-render! make sure to npm run build -->
|
|
<script src="../../dist/web/scratch-render.js"></script>
|
|
|
|
<canvas id="test" width="480" height="360" style="width: 480px"></canvas>
|
|
<input type="file" id="file" name="file">
|
|
|
|
<script>
|
|
// These variables are going to be available in the "window global" intentionally.
|
|
// Allows you easy access to debug with `vm.greenFlag()` etc.
|
|
window.devicePixelRatio = 1;
|
|
|
|
var canvas = document.getElementById('test');
|
|
var render = new ScratchRender(canvas);
|
|
var vm = new VirtualMachine();
|
|
var storage = new ScratchStorage();
|
|
var mockMouse = data => vm.runtime.postIOData('mouse', {
|
|
canvasWidth: canvas.width,
|
|
canvasHeight: canvas.height,
|
|
...data,
|
|
});
|
|
|
|
vm.attachStorage(storage);
|
|
vm.attachRenderer(render);
|
|
vm.attachV2SVGAdapter(new ScratchSVGRenderer.SVGRenderer());
|
|
vm.attachV2BitmapAdapter(new ScratchSVGRenderer.BitmapAdapter());
|
|
|
|
document.getElementById('file').addEventListener('click', e => {
|
|
document.body.removeChild(document.getElementById('loaded'));
|
|
});
|
|
|
|
document.getElementById('file').addEventListener('change', e => {
|
|
const reader = new FileReader();
|
|
const thisFileInput = e.target;
|
|
reader.onload = () => {
|
|
vm.start();
|
|
vm.loadProject(reader.result)
|
|
.then(() => {
|
|
// we add a `#loaded` div to our document, the integration suite
|
|
// waits for that element to show up to assume the vm is ready
|
|
// to play!
|
|
const div = document.createElement('div');
|
|
div.id='loaded';
|
|
document.body.appendChild(div);
|
|
});
|
|
};
|
|
reader.readAsArrayBuffer(thisFileInput.files[0]);
|
|
});
|
|
</script>
|
|
</body>
|