From dfad233fbb6c5ab5b40448cded1ca17f843f8a71 Mon Sep 17 00:00:00 2001 From: Tomas Floxo Date: Mon, 4 Sep 2023 17:36:33 -0300 Subject: [PATCH] moving blockly files --- src/App.tsx | 4 +- src/blockly.ts | 73 +++++++++++ src/components/BlocklyPrueba.tsx | 113 ------------------ .../ToolboxPreview.tsx | 49 ++++++++ .../ChallengeDetailsEdition}/prueba.css | 0 5 files changed, 124 insertions(+), 115 deletions(-) create mode 100644 src/blockly.ts delete mode 100644 src/components/BlocklyPrueba.tsx create mode 100644 src/components/creator/Editor/ChallengeDetailsEdition/ToolboxPreview.tsx rename src/components/{ => creator/Editor/ChallengeDetailsEdition}/prueba.css (100%) diff --git a/src/App.tsx b/src/App.tsx index ea6807db..1ff8bf7e 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -16,7 +16,7 @@ import { useLocation } from 'react-router-dom'; import ReactGA from "react-ga4"; import { CreatorViewMode } from './components/creator/Editor/CreatorViewMode'; import { useThemeContext } from './theme/ThemeContext'; -import { BlocklyPrueba } from './components/BlocklyPrueba'; +import { ToolboxPreview } from './components/creator/Editor/ChallengeDetailsEdition/ToolboxPreview'; const AnalyticsComponent = () => { const location = useLocation(); @@ -84,7 +84,7 @@ const router = createHashRouter([{ }, { path: "/blocklyPrueba", - element: + element: } ]}]); diff --git a/src/blockly.ts b/src/blockly.ts new file mode 100644 index 00000000..124253f6 --- /dev/null +++ b/src/blockly.ts @@ -0,0 +1,73 @@ +import Blockly from "blockly" +import { BlockType } from "./components/blocks" + +type BlocklyBlockDefinition = { + message0: string + args0: any[] + colour: string + previousStatement?: boolean + nextStatement?: boolean +} + +type Toolbox = { kind: "categoryToolbox" | "flyoutToolbox", contents: ToolboxItem[]} + + +type ToolboxItem = ToolboxBlock | ToolBoxCategory +type ToolboxBlock = {kind: "block", type: string} +type ToolBoxCategory = {kind: "category", name: string, contents: ToolboxItem[]} + +const blockTypeToToolboxBlock = (block: BlockType): ToolboxBlock => ({kind: "block", type: block.id}) + +const createPrimitiveBlock = (id: string, message: string, icon?: string) => { + const colour = '#4a6cd4' + + const jsonInit: BlocklyBlockDefinition = { + message0: message, + colour, + args0: [], + previousStatement: true, + nextStatement: true + } + + if(icon) { + jsonInit.message0 = `%1 ${message}` + jsonInit.args0.push({ + "type": "field_image", + "src": `imagenes/iconos/${icon}`, + "width": 16, + "height": 16, + "alt": "*" + }) + } + + Blockly.Blocks[id] = { + init: function () { + this.jsonInit(jsonInit) + }} + } + + +export const categoryToolboxFromBlocks = (blocks: BlockType[]): Toolbox => ({ + kind: "categoryToolbox", + contents: [ + { + kind: "category", + name: "Primitivas", + contents: blocks.filter(block => block.categoryId === "primitives").map(blockTypeToToolboxBlock) + } + ] +}) + +export const uncategorizedToolboxFromBlocks = (blocks: BlockType[]): Toolbox => ({ + kind: "flyoutToolbox", + contents: blocks.map(blockTypeToToolboxBlock) +}) + +export const setupBlocklyBlocks = (t: (key: string) => string) => { + + createPrimitiveBlock("MoverACasillaArriba", t("blocks.blocks.moveUp"), "icono.arriba.png") + createPrimitiveBlock("MoverACasillaAbajo", t("blocks.blocks.moveDown"), "icono.abajo.png") + createPrimitiveBlock("MoverACasillaIzquierda", t("blocks.blocks.moveLeft"), "icono.izquierda.png") + createPrimitiveBlock("MoverACasillaDerecha", t("blocks.blocks.moveRight"), "icono.derecha.png") + +} \ No newline at end of file diff --git a/src/components/BlocklyPrueba.tsx b/src/components/BlocklyPrueba.tsx deleted file mode 100644 index 6e4ba2ab..00000000 --- a/src/components/BlocklyPrueba.tsx +++ /dev/null @@ -1,113 +0,0 @@ -import "./prueba.css"; -import { BlocklyWorkspace } from "react-blockly"; -import Blockly from "blockly"; -import { useTranslation } from "react-i18next"; -import { BlockType } from "./blocks"; - -type BlocklyBlockDefinition = { - message0: string - args0: any[] - colour: string - previousStatement?: boolean - nextStatement?: boolean -} - -type Toolbox = { kind: "categoryToolbox" | "flyoutToolbox", contents: ToolboxItem[]} - -type ToolboxItem = ToolboxBlock | ToolBoxCategory - -type ToolboxBlock = {kind: "block", type: string} -type ToolBoxCategory = {kind: "category", name: string, contents: ToolboxItem[]} - - -const createPrimitiveBlock = (id: string, message: string, icon?: string) => { - const colour = '#4a6cd4' - - const jsonInit: BlocklyBlockDefinition = { - message0: message, - colour, - args0: [], - previousStatement: true, - nextStatement: true - } - - if(icon) { - jsonInit.message0 = `%1 ${message}` - jsonInit.args0.push({ - "type": "field_image", - "src": `imagenes/iconos/${icon}`, - "width": 16, - "height": 16, - "alt": "*" - }) - } - - Blockly.Blocks[id] = { - init: function () { - this.jsonInit(jsonInit) - }} -} - - -const categoryToolboxFromBlocks = (blocks: BlockType[]): Toolbox => ({ - kind: "categoryToolbox", - contents: [ - { - kind: "category", - name: "Primitivas", - contents: blocks.filter(block => block.categoryId === "primitives").map(blockTypeToToolboxBlock) - } - ] -}) - -const uncategorizedToolboxFromBlocks = (blocks: BlockType[]): Toolbox => ({ - kind: "flyoutToolbox", - contents: blocks.map(blockTypeToToolboxBlock) -}) - -const blockTypeToToolboxBlock = (block: BlockType): ToolboxBlock => ({kind: "block", type: block.id}) - -export const BlocklyPrueba = () => { - const {t} = useTranslation("blocks") - - createPrimitiveBlock("MoverACasillaArriba", t("blocks.moveUp"), "icono.arriba.png") - createPrimitiveBlock("MoverACasillaAbajo", t("blocks.moveDown"), "icono.abajo.png") - createPrimitiveBlock("MoverACasillaIzquierda", t("blocks.moveLeft"), "icono.izquierda.png") - createPrimitiveBlock("MoverACasillaDerecha", t("blocks.moveRight"), "icono.derecha.png") - - const toolboxBlocks: BlockType[] = [ - { - id: 'MoverACasillaDerecha', - intlId: 'moveRight', - categoryId: 'primitives' - }, - { - id: 'MoverACasillaIzquierda', - intlId: 'moveLeft', - categoryId: 'primitives' - }, - { - id: 'MoverACasillaArriba', - intlId: 'moveUp', - categoryId: 'primitives' - }, - { - id: 'MoverACasillaAbajo', - intlId: 'moveDown', - categoryId: 'primitives' - }, - ] - - return ( - <> -
- {Blockly.getMainWorkspace().clear()}} - /> -
- - ); -}; diff --git a/src/components/creator/Editor/ChallengeDetailsEdition/ToolboxPreview.tsx b/src/components/creator/Editor/ChallengeDetailsEdition/ToolboxPreview.tsx new file mode 100644 index 00000000..b3edb954 --- /dev/null +++ b/src/components/creator/Editor/ChallengeDetailsEdition/ToolboxPreview.tsx @@ -0,0 +1,49 @@ +import "./prueba.css"; +import { BlocklyWorkspace } from "react-blockly"; +import Blockly from "blockly"; +import { useTranslation } from "react-i18next"; +import { BlockType } from "../../../blocks"; +import { categoryToolboxFromBlocks, setupBlocklyBlocks } from "../../../../blockly"; + + +export const ToolboxPreview = () => { + const {t} = useTranslation() + + setupBlocklyBlocks(t) + + const toolboxBlocks: BlockType[] = [ + { + id: 'MoverACasillaDerecha', + intlId: 'moveRight', + categoryId: 'primitives' + }, + { + id: 'MoverACasillaIzquierda', + intlId: 'moveLeft', + categoryId: 'primitives' + }, + { + id: 'MoverACasillaArriba', + intlId: 'moveUp', + categoryId: 'primitives' + }, + { + id: 'MoverACasillaAbajo', + intlId: 'moveDown', + categoryId: 'primitives' + }, + ] + + return ( + <> +
+ {Blockly.getMainWorkspace().clear()}} + /> +
+ + ); +}; diff --git a/src/components/prueba.css b/src/components/creator/Editor/ChallengeDetailsEdition/prueba.css similarity index 100% rename from src/components/prueba.css rename to src/components/creator/Editor/ChallengeDetailsEdition/prueba.css