+ import { createEventDispatcher } from "svelte";
+
+ const dispatch = createEventDispatcher();
+
+ function event() {
+ dispatch("click");
+ }
+
+
+
+
+
diff --git a/src/resources/compiler/index.js b/src/resources/compiler/index.js
index f4af192..11f1ea0 100644
--- a/src/resources/compiler/index.js
+++ b/src/resources/compiler/index.js
@@ -6,11 +6,12 @@ import javascriptGenerator from '../javascriptGenerator';
class Compiler {
/**
- * Generates JavaScript code from the provided workspace.
+ * Generates JavaScript code from the provided workspace & image info.
* @param {Blockly.Workspace} workspace
+ * @param {object} imageStates
* @returns {string} Generated code.
*/
- compile(workspace) {
+ compile(workspace, imageStates) {
const code = javascriptGenerator.workspaceToCode(workspace);
const headerCode = [
@@ -19,16 +20,30 @@ class Compiler {
` https://turbobuilder.vercel.app/`,
`*/`,
`(function (Scratch) {`,
- `const variables = {};`,
- raw_compileVarSection,
- raw_randomNumberGen
+ `const variables = {};`
];
+ const classRegistry = {
+ top: [
+ `class Extension {`
+ ],
+ bottom: [
+ `}`
+ ]
+ }
const footerCode = [
`Scratch.extensions.register(new Extension());`,
`})(Scratch);`
];
- return [].concat(headerCode, code, footerCode).join('\n');
+ if (imageStates) {
+ if (imageStates.icon.image) {
+ // add icon uri
+ const url = imageStates.icon.image;
+ headerCode.push(`const categoryIconURI = ${JSON.stringify(url)};`);
+ }
+ }
+
+ return [].concat(headerCode, classRegistry.top, classRegistry.bottom, code, footerCode).join('\n');
}
}
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 9bdb8fb..bf6bbd0 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -3,11 +3,16 @@
// Components
import NavigationBar from "$lib/NavigationBar/NavigationBar.svelte";
+ import NavigationDivider from "$lib/NavigationBar/Divider.svelte";
+ import NavigationButton from "$lib/NavigationBar/Button.svelte";
+ import StyledButton from "$lib/StyledComponents/ToolboxButton.svelte";
// Toolbox
import Toolbox from "$lib/Toolbox/Toolbox.xml?raw";
import JSZip from "jszip";
+ import beautify from "js-beautify";
+ import Prism from "prismjs";
import * as FileSaver from "file-saver";
import fileDialog from "../resources/fileDialog";
@@ -74,16 +79,26 @@
let compiler;
let lastGeneratedCode = "";
+ const extensionImageStates = {
+ icon: {
+ failed: false,
+ square: false,
+ loading: false,
+ image: "",
+ },
+ };
+
+ function updateGeneratedCode() {
+ const code = compiler.compile(workspace, extensionImageStates);
+ lastGeneratedCode = code;
+ }
onMount(() => {
console.log("ignore the warnings above we dont care about those");
window.onbeforeunload = () => "";
compiler = new Compiler(workspace);
// workspace was changed
- workspace.addChangeListener(() => {
- const code = compiler.compile(workspace);
- lastGeneratedCode = code;
- });
+ workspace.addChangeListener(updateGeneratedCode);
});
let fileMenu;
@@ -174,9 +189,71 @@
});
});
}
+
+ // code display & handling
+ function beautifyGeneratedCode(code) {
+ const beautified = beautify.js(code, {
+ indent_size: 4,
+ space_in_empty_paren: true,
+ });
+ return beautified;
+ }
+ function displayGeneratedCode(code) {
+ const beautified = beautifyGeneratedCode(code);
+ const highlighted = Prism.highlight(
+ beautified,
+ Prism.languages.javascript
+ );
+ return highlighted;
+ }
+
+ // image importing
+ function extensionIconAdded(event) {
+ console.log(event);
+ const filePicker = event.target;
+ // check if we have a file
+ if (!filePicker.files || !filePicker.files[0]) {
+ // remove the image
+ extensionImageStates.icon.failed = false;
+ extensionImageStates.icon.square = false;
+ extensionImageStates.icon.loading = false;
+ extensionImageStates.icon.image = "";
+ updateGeneratedCode();
+ return;
+ }
+ const file = filePicker.files[0];
+
+ extensionImageStates.icon.loading = true;
+ const fileReader = new FileReader();
+ fileReader.onload = () => {
+ // file finished loading
+ const url = fileReader.result;
+ extensionImageStates.icon.image = url;
+ updateGeneratedCode();
+ // start checking the other stuff
+ const image = new Image();
+ image.onload = () => {
+ extensionImageStates.icon.failed = false;
+ extensionImageStates.icon.square = image.width === image.height;
+ // mark as loading finished
+ extensionImageStates.icon.loading = false;
+ };
+ image.onerror = () => {
+ extensionImageStates.icon.failed = true;
+ extensionImageStates.icon.square = false;
+ // mark as loading finished
+ extensionImageStates.icon.loading = false;
+ };
+ image.src = url;
+ };
+ fileReader.readAsDataURL(file);
+ }
Assets
- {#if projectName} -{projectName} extension
- {:else} -Extension
- {/if}
- These things are not required, you can leave them empty if
- you want!
+ Extra things that will appear under
+ {#if projectName}
+ "{projectName}"
+ {:else}
+ "Extension"
+ {/if}
+ in the block list.
+
+ These things are not required, so you can leave them empty if
+ you do not need them.
Documentation URL:
Extension Icon: - +
- + {#if !extensionImageStates.icon.loading && !extensionImageStates.icon.failed && extensionImageStates.icon.image} ++ The extension icon is not an image, this may appear + broken in the category list. +
+ {/if} + {#if !extensionImageStates.icon.square} ++ The image is not square, this may appear broken in + the category list. +
+ {/if} + {/if} +Extra Icons
+
+ Blocks can use their own icons instead of the Extension
+ icon.
+
+ Add more images here to use them.
+