mumuki-gobstones-runner 2.8.4 → 2.8.5

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: b81904b19b4ecb207d1b52ffec98b8cd617b83f47eb02ec37b4fdd33f7087db4
-  data.tar.gz: ad185dffbfc9c311578b2f4ab5a71f0b42cf4bd2110563ede627e4050d1280d8
+  metadata.gz: 5a1f462df1de2aa09e7025bc39fb066ebae0cf95203e2863276e549c57b35550
+  data.tar.gz: b1e8fbb1a19f96b130b5a5a25b3d8e582932b5c1d4063ece0ddcfe5358394980
 SHA512:
-  metadata.gz: a9f6ac4c47444e5ff26c1151d19a120dd797bf16d394518399157be3eda926b869064b9536ee940c0587168bea17b2e492dad48678460cb9f5558fd5ecc1909f
-  data.tar.gz: 87e3b5464e1daf5027c0f84e9fe806076f343542e0bd4ce1ca3bdea61ee345e7f46bc066bca4ca8267a8dad8dd7c9ce8581c5e6cb3b81a35042b8c088f1fa643
+  metadata.gz: dbb901882298f1c889730748bfb60ba8016535198e2953d6f5b72f986f617c65230cdf06b7a7a6326459d9a11b2d46945df9dc1c9faf10c5b46f05fcab65fa8e
+  data.tar.gz: 3ce96b0e01751e64a831a56565352eb378b612aee687d074e116911d305004f97e7c9feacb5522b2582b264a1ad90c1a67fdb4ded965504c2a56aa1a427bfe5e

data/lib/render/editor/editor.html.erb

@@ -4,6 +4,12 @@
 <link href="./gobstones-code-runner.html" rel="import"/>
 <script src="./hammer.min.js"></script>
 
+<script>
+  function postpone(action) {
+    return setTimeout(action, 50);
+  }
+</script>
+
 <dom-module id="mu-gobstones-custom-editor">
 
   <template>
@@ -20,15 +26,6 @@
   </template>
 
   <script>
-    function postpone(action) {
-      return setTimeout(action, 50);
-    }
-
-    function gbsBoardRemoveBorder(board) {
-      board._setBorderOff();
-      board.updateStyles();
-    }
-
     const compilationModes = {
       gameFramework: {
         compile: ({ main, teacher, ...args }) => {
@@ -46,7 +43,9 @@
 
         scrollToMainBlock: (blockly) => {
           const mainBlock = blockly.getBlocksOfType('procedures_defnoreturnnoparams')[0];
-          blockly.scrollToBlock(mainBlock.id);
+          if (mainBlock) {
+            blockly.scrollToBlock(mainBlock.id);
+          }
         },
 
         defaultCode: `<%= @game_framework_default %>`
@@ -90,184 +89,228 @@
         }
       },
 
-      attached: function () {
-        const setBlocklySounds = () => {
-          Blockly.WorkspaceAudio.prototype.preload = () => {
-            for (var soundName in this.SOUNDS_) {
-              let sound = this.SOUNDS_[soundName];
-              sound.volume = 0.01;
-              let playPromise = sound.play();
-              playPromise && playPromise.then(sound.pause.bind(sound));
-              if (goog.userAgent.IPAD || goog.userAgent.IPHONE) break;
-            }
-          };
-        };
+      // ==== Polymer events
 
-        const setBlocklyColors = () => {
-          Blockly.HSV_SATURATION = 0.64;
-          Blockly.HSV_VALUE = 1;
+      attached() {
+        this.$exerciseContainer = $('.mu-kids-exercise');
 
-          Blockly.MUMUKI_COLORS = {
-            pink: "#FF5C82",
-            blue: "#5CBEFF",
-            yellow: "#FFC95C",
-            green: "#5CED71"
-          };
+        /*
+        https://polymer-library.polymer-project.org/1.0/docs/devguide/registering-elements#initialization-order
 
-          // reserved
-          Blockly.CUSTOM_COLORS.program = Blockly.MUMUKI_COLORS.pink;
-          Blockly.CUSTOM_COLORS.interactiveProgram = Blockly.MUMUKI_COLORS.pink;
-          Blockly.CUSTOM_COLORS.interactiveBinding = Blockly.MUMUKI_COLORS.pink;
-          Blockly.CUSTOM_COLORS.procedure = Blockly.MUMUKI_COLORS.pink;
-          Blockly.CUSTOM_COLORS.function = Blockly.MUMUKI_COLORS.pink;
-          Blockly.CUSTOM_COLORS.complete = Blockly.MUMUKI_COLORS.pink;
-
-          // control structures
-          Blockly.CUSTOM_COLORS.controlStructure = this._isKindergarten() ? Blockly.MUMUKI_COLORS.green : Blockly.MUMUKI_COLORS.yellow;
-
-          // commands
-          Blockly.CUSTOM_COLORS.primitiveCommand = Blockly.MUMUKI_COLORS.yellow;
-          Blockly.CUSTOM_COLORS.primitiveProcedure = Blockly.MUMUKI_COLORS.yellow;
-          Blockly.CUSTOM_COLORS.procedure_call = Blockly.MUMUKI_COLORS.yellow;
-          Blockly.CUSTOM_COLORS.assignation = Blockly.MUMUKI_COLORS.yellow;
-
-          // expressions
-          Blockly.Msg.MATH_HUE = Blockly.MUMUKI_COLORS.blue;
-          Blockly.CUSTOM_COLORS.literalExpression = Blockly.MUMUKI_COLORS.blue;
-          Blockly.CUSTOM_COLORS.primitiveExpression = Blockly.MUMUKI_COLORS.blue;
-          Blockly.CUSTOM_COLORS.operator = Blockly.MUMUKI_COLORS.blue;
-          Blockly.CUSTOM_COLORS.variable = Blockly.MUMUKI_COLORS.blue;
-          Blockly.CUSTOM_COLORS.parameter = Blockly.MUMUKI_COLORS.blue;
-          Blockly.CUSTOM_COLORS.primitiveFunction = Blockly.MUMUKI_COLORS.blue;
-          Blockly.CUSTOM_COLORS.function_call = Blockly.MUMUKI_COLORS.blue;
-
-          setTimeout(() => {
-            this.getBlockly().testColors(Blockly.CUSTOM_COLORS);
-          });
-        };
+        There are no guarantees with regard to initialization timing between sibling elements.
+        This means that siblings may become ready in any order.
+        For accessing sibling elements when an element initializes, you can call async from inside the attached callback.
+        */
+        this.async(() => {
+          this._configureBlocklyAppearance();
+          this._configureBlocklyBehavior();
+        });
+      },
 
-        const setBlocklyCustomSettings = () => {
-          if (typeof Blockly === 'undefined' || !Blockly.CUSTOM_COLORS) return postpone(setBlocklyCustomSettings);
+      // ==== Public methods (accesible from other components)
 
-          // The display mode configuration could be monkey-patched here, like this:
-          Blockly.displayModes.iconic.iconSize = 64;
-          Blockly.displayModes.iconic.procedureDefIcon = `${this.localMediaUrl}main-procedure.png`;
+      reset() {
+        const blockly = this._getBlockly();
+        blockly.workspaceXml = blockly.initialXml;
+        this._scrollToMainBlock();
+      },
 
-          Blockly.displayMode = this._isKindergarten() ? 'iconic' : 'text';
-          setBlocklySounds();
-          setBlocklyColors();
+      setToolbox(toolboxXml) {
+        this._getBlockly().toolbox = { defaultToolbox: toolboxXml };
+        // Blockly's workspace is destroyed when toolbox changes, so we initialize it here.
+        this._initializeBlocklyWorkspace();
+      },
 
-          // Removing "/" from the block id character set to avoid syntax errors
-          Blockly.utils.genUid.soup_ = Blockly.utils.genUid.soup_.replace("/", "");
-        };
+      compile(code) {
+        return this._compilationMode().compile(code);
+      },
 
-        const updateFields = () => {
-          const blockly = this.getBlockly();
+      hasInteractiveProgram() {
+        return this._getBlockly().initialXml.indexOf("block type=\"InteractiveProgram\"") !== -1;
+      },
 
-          const editorValue = this.getEditorValue();
-          if (editorValue) {
-            editorValue.value = blockly.workspaceXml;
-          }
+      hasCustomToolbox() {
+        return $('gs-toolbox').length;
+      },
 
-          if (this.teacherMode) {
-            const editorExtra = this.getEditorExtra();
-            if (editorExtra) {
-              editorExtra.value = blockly.workspaceXml;
-            }
-          }
+      toggleInteractiveMode() {
+        this.$exerciseContainer.toggleClass('play-mode');
+        this._triggerResize();
+      },
 
-          if (typeof angular !== 'undefined') {
-            angular.element(editorValue).triggerHandler("change");
-          }
+      getTeacherCode() {
+        const extraCode = this._getExtraCode();
+        if (!extraCode) return;
+        this.$.blocklyTmp.workspaceXml = extraCode;
+        return this.$.blocklyTmp.generateCode();
+      },
 
-          const submit = $("kids-submit-button")[0];
-          if (submit && submit.$.runner.isRunning) {
-            submit.$.runner.stop();
-          }
-        };
+      getStudentCode: function () {
+        return this
+          ._getBlockly()
+          .generateCode({withRegions: true, clearErrors: false});
+      },
 
-        this.$exerciseContainer = $('.mu-kids-exercise');
+      getStudentXml: function () {
+        return this._getStudentSolution() || "";
+      },
 
-        const setTrashPosition = () => {
-          var width = $('#blocklyDiv').width() - 68;
-          var height = $('#blocklyDiv').height() - 210;
-          $('.blocklyTrash').css("transform", `translate(${width}px, ${height}px)`);
-          $('.blocklyTrash').css("display", "unset");
-        };
+      getTestCode() {
+        return this._getEditorTest().value;
+      },
 
-        var setTrashTimeout;
+      removeBlockErrors() {
+        return this._getBlockly().workspace.removeBlockErrors();
+      },
 
-        const localOnResize = () => {
-          clearTimeout(setTrashTimeout);
-          setTrashTimeout = setTimeout(() => {
-            setTrashPosition();
-          });
-        };
+      showBlockError(region, error) {
+        this._getBlockly().scrollToBlock(region);
+        this._getBlockly().showBlockError(region, error.message);
+      },
 
-        const triggerResizeOnContextModalClose = () => {
-          $('.mu-kids-context, .mu-kids-results').on('hidden.bs.modal shown.bs.modal', function () {
-            localOnResize();
-          })
-        };
+      highlightBlock(region) {
+        this._getBlockly().highlightBlock(region);
+      },
 
-        const relocateTrash = (blockly) => {
-          blockly.workspace.trashcan.bottom_ = 150; //Setting vertical position programmatically to adjust the draggable area
-          $(window).resize((e) => localOnResize());
-          triggerResizeOnContextModalClose();
-        };
+      // ==== Private methods (only for internal usage)
 
-        const initialize = () => {
-          postpone(() => {
-            const blockly = this.getBlockly();
+      _configureBlocklyAppearance() {
+        this._getBlockly().showCategories = !this._isKindergarten();
+        this._setBlocklyDisplayMode();
+        this._setBlocklySounds();
+        this._setBlocklyColors();
 
-            if (!blockly || !blockly.workspace) return initialize();
+        if (!this.readOnly) {
+          this._relocateTrashOnResize();
+        }
 
-            blockly.showCategories = !this._isKindergarten();
+        // Removing "/" from the block id character set to avoid syntax errors
+        Blockly.utils.genUid.soup_ = Blockly.utils.genUid.soup_.replace("/", "");
+      },
 
-            if (!this.readOnly) {
-              relocateTrash(blockly);
-            }
+      _configureBlocklyBehavior() {
+        this._setTeacherActions();
+        this._setGameActions();
 
-            this.setTeacherActions(blockly);
-            this._setInitialXml(blockly);
-            this.interactiveMode = blockly.initialXml.indexOf("block type=\"InteractiveProgram\"") !== -1;
-            if (this.interactiveMode) this.setInteractiveLayout();
-            this._initializeWorkspace(blockly, () => {
-              localOnResize();
-              blockly._onresize();
+        // Blockly's workspace is destroyed when toolbox changes, so it doesn't make sense to initialize it here.
+        if (!this.hasCustomToolbox()) {
+          this._initializeBlocklyWorkspace();
+        }
 
-              this._subscribeToWorkspace(blockly, updateFields);
-            });
+        this._registerLayoutChangedEvent();
+      },
 
-            const hasCustomToolbox = $('gs-toolbox').length;
-            if(!hasCustomToolbox) this.enableContextButton();
+      _relocateTrashOnResize() {
+        $('.mu-kids-context, .mu-kids-results').on('hidden.bs.modal shown.bs.modal', () => {
+          this._relocateTrash();
+        });
 
-            this._registerLayoutChangedEvent();
-          });
+        $(window).resize(() => this._relocateTrash());
+      },
+
+      _initializeBlocklyWorkspace() {
+        this._setInitialXml();
+        this._initializeWorkspace();
+        this._subscribeToWorkspace(() => this._updateSolution());
+
+        if (this.hasInteractiveProgram()) {
+          this._setInteractiveLayout();
+        }
+
+        mumuki.assetsLoadedFor('editor');
+      },
+
+      _relocateTrash() {
+        const width = $('#blocklyDiv').width() - 68;
+        const height = $('#blocklyDiv').height() - 210;
+        $('.blocklyTrash').css("transform", `translate(${width}px, ${height}px)`);
+        $('.blocklyTrash').css("display", "unset");
+      },
+
+      _updateSolution() {
+        const blockly = this._getBlockly();
+
+        if (this.teacherMode) {
+          this._setExtraCode(blockly.workspaceXml);
+        } else {
+          this._setStudentSolution(blockly.workspaceXml);
+        }
+
+        // TODO: this hack enables Angular two-way binding for Bibliotheca. Should be replaced with Mumuki events system
+        if (typeof angular !== 'undefined') {
+          angular.element(this._getStudentEditor()).triggerHandler("change");
+          angular.element(this._getEditorExtra()).triggerHandler("change");
+        }
+
+        this._stopExecution();
+      },
+
+      _setBlocklySounds() {
+        Blockly.WorkspaceAudio.prototype.preload = () => {
+          for (const soundName in this.SOUNDS_) {
+            const sound = this.SOUNDS_[soundName];
+            sound.volume = 0.01;
+            const playPromise = sound.play();
+            playPromise && playPromise.then(sound.pause.bind(sound));
+            if (goog.userAgent.IPAD || goog.userAgent.IPHONE) break;
+          }
+        };
+      },
+
+      _setBlocklyColors() {
+        Blockly.HSV_SATURATION = 0.64;
+        Blockly.HSV_VALUE = 1;
+
+        Blockly.MUMUKI_COLORS = {
+          pink: "#FF5C82",
+          blue: "#5CBEFF",
+          yellow: "#FFC95C",
+          green: "#5CED71"
         };
 
-        setBlocklyCustomSettings();
-        initialize();
+        // reserved
+        Blockly.CUSTOM_COLORS.program = Blockly.MUMUKI_COLORS.pink;
+        Blockly.CUSTOM_COLORS.interactiveProgram = Blockly.MUMUKI_COLORS.pink;
+        Blockly.CUSTOM_COLORS.interactiveBinding = Blockly.MUMUKI_COLORS.pink;
+        Blockly.CUSTOM_COLORS.procedure = Blockly.MUMUKI_COLORS.pink;
+        Blockly.CUSTOM_COLORS.function = Blockly.MUMUKI_COLORS.pink;
+        Blockly.CUSTOM_COLORS.complete = Blockly.MUMUKI_COLORS.pink;
+
+        // control structures
+        Blockly.CUSTOM_COLORS.controlStructure = this._isKindergarten() ? Blockly.MUMUKI_COLORS.green : Blockly.MUMUKI_COLORS.yellow;
+
+        // commands
+        Blockly.CUSTOM_COLORS.primitiveCommand = Blockly.MUMUKI_COLORS.yellow;
+        Blockly.CUSTOM_COLORS.primitiveProcedure = Blockly.MUMUKI_COLORS.yellow;
+        Blockly.CUSTOM_COLORS.procedure_call = Blockly.MUMUKI_COLORS.yellow;
+        Blockly.CUSTOM_COLORS.assignation = Blockly.MUMUKI_COLORS.yellow;
+
+        // expressions
+        Blockly.Msg.MATH_HUE = Blockly.MUMUKI_COLORS.blue;
+        Blockly.CUSTOM_COLORS.literalExpression = Blockly.MUMUKI_COLORS.blue;
+        Blockly.CUSTOM_COLORS.primitiveExpression = Blockly.MUMUKI_COLORS.blue;
+        Blockly.CUSTOM_COLORS.operator = Blockly.MUMUKI_COLORS.blue;
+        Blockly.CUSTOM_COLORS.variable = Blockly.MUMUKI_COLORS.blue;
+        Blockly.CUSTOM_COLORS.parameter = Blockly.MUMUKI_COLORS.blue;
+        Blockly.CUSTOM_COLORS.primitiveFunction = Blockly.MUMUKI_COLORS.blue;
+        Blockly.CUSTOM_COLORS.function_call = Blockly.MUMUKI_COLORS.blue;
       },
 
-      toggleInteractiveMode() {
-        this.$exerciseContainer.toggleClass('play-mode');
-        this.triggerResize();
+      _setBlocklyDisplayMode() {
+        // The display mode configuration could be monkey-patched here, like this:
+        Blockly.displayModes.iconic.iconSize = 64;
+        Blockly.displayModes.iconic.procedureDefIcon = `${this.localMediaUrl}main-procedure.png`;
+
+        Blockly.displayMode = this._isKindergarten() ? 'iconic' : 'text';
       },
 
-      triggerResize() {
-        let event = document.createEvent('HTMLEvents');
+      _triggerResize() {
+        const event = document.createEvent('HTMLEvents');
         event.initEvent('resize', true, false);
         document.dispatchEvent(event);
       },
 
-      reset(code) {
-        const blockly = this.getBlockly();
-        blockly.workspaceXml = code || blockly.initialXml;
-        this._scrollToMainBlock();
-      },
-
-      setInteractiveLayout() {
+      _setInteractiveLayout() {
         this.$exerciseContainer.addClass('mu-kids-interactive');
         $('.mu-final-state').html('<gs-keyboard/>');
         $('.mu-editor').append($('<kids-interactive-submit-button/>'));
@@ -277,82 +320,86 @@
         })
       },
 
-      setTeacherActions(blockly) {
+      _setTeacherActions() {
         const teacherCode = this.getTeacherCode();
-        if (teacherCode) {
-          setTimeout(() => {
-            const actions = new Parser().getActionsFromSource(teacherCode);
-
-            blockly.primitiveProcedures = this._withDefaultIcons(actions, 'procedureDeclarations');
-            blockly.primitiveFunctions = this._withDefaultIcons(actions, 'functionDeclarations');
-          });
+        if (!teacherCode) {
+          return;
         }
+
+        const blockly = this._getBlockly();
+        const actions = new Parser().getActionsFromSource(teacherCode);
+        blockly.primitiveProcedures = this._withDefaultIcons(actions, 'procedureDeclarations');
+        blockly.primitiveFunctions = this._withDefaultIcons(actions, 'functionDeclarations');
       },
 
-      setGameActions(blockly) {
+      _setGameActions() {
+        const blockly = this._getBlockly();
         if (this._isGame()) {
           blockly.primitiveProcedures = blockly.primitiveProcedures || [];
           blockly.primitiveProcedures = blockly.primitiveProcedures.concat([
-            this.gamePrimitive('ShiftUp'),
-            this.gamePrimitive('ShiftDown'),
-            this.gamePrimitive('ShiftLeft'),
-            this.gamePrimitive('ShiftRight')
+            this._gamePrimitive('ShiftUp'),
+            this._gamePrimitive('ShiftDown'),
+            this._gamePrimitive('ShiftLeft'),
+            this._gamePrimitive('ShiftRight')
           ]);
         }
       },
 
-      gamePrimitive(name) {
-        return { alias: 'procedureDeclaration', name: name, attributes: {block_icon: `<%= @assets_url %>/media/${name}.png`} };
+      _gamePrimitive(name) {
+        return { alias: 'procedureDeclaration', name, attributes: {block_icon: `<%= @assets_url %>/media/${name}.png`} };
       },
 
-      enableContextButton() {
-        if(mumuki.kids && mumuki.assetsLoadedFor) {
-          return mumuki.assetsLoadedFor('editor');
-        } else {
-          return postpone(this.enableContextButton.bind(this));
-        }
+      _getBlockly() {
+        return this.$.blocklyElement;
+      },
 
+      _getStudentSolution() {
+        return this._getStudentEditor().value;
       },
 
-      getBlockly: function () {
-        return this.$.blocklyElement;
+      /**
+       * Sets the student solution xml, which corresponds
+       * to user content in laboratory, and default content in bibliotheca
+       */
+      _setStudentSolution(code) {
+        console.debug(`Setting student ${code}`)
+        this._getStudentEditor().value = code;
       },
 
-      getStudentCode: function () {
-        return this
-          .getBlockly()
-          .generateCode({withRegions: true, clearErrors: false});
+      _getDefaultCode() {
+        return this._getEditorDefaultValue().value;
       },
 
-      getStudentXml: function () {
-        return this.getEditorValue().value || "";
+      _getExtraCode() {
+        return this._getEditorExtra().value;
       },
 
-      getTeacherCode: function () {
-        const teacherXml = this.getEditorExtra();
-        if (!teacherXml || !teacherXml.value) return;
-        this.$.blocklyTmp.workspaceXml = teacherXml.value;
-        return this.$.blocklyTmp.generateCode();
+      _setExtraCode(code) {
+        console.debug(`Setting extra ${code}`)
+        this._getEditorExtra().value = code;
       },
 
-      getEditorValue: function() {
-        return $("#mu-custom-editor-value")[0];
+      _getEditorExtra: function() {
+        return $("#mu-custom-editor-extra")[0] || {};
       },
 
-      getEditorDefaultValue: function() {
-        return $("#mu-custom-editor-default-value")[0];
+      _getEditorTest: function() {
+        return $("#mu-custom-editor-test")[0];
       },
 
-      getEditorExtra: function() {
-        return $("#mu-custom-editor-extra")[0];
+      _getStudentEditor: function() {
+        return $("#mu-custom-editor-value")[0] || {};
       },
 
-      getEditorTest: function() {
-        return $("#mu-custom-editor-test")[0];
+      _getEditorDefaultValue: function() {
+        return $("#mu-custom-editor-default-value")[0] || {};
       },
 
-      compile(code) {
-        return this._compilationMode().compile(code);
+      _stopExecution() {
+        const submit = $("kids-submit-button")[0];
+        if (submit && submit.$.runner.isRunning) {
+          submit.$.runner.stop();
+        }
       },
 
       _registerLayoutChangedEvent() {
@@ -361,12 +408,13 @@
         }
 
         mumuki.events.on('layoutChanged', () => {
-          this.getEditorDefaultValue().value = this._compilationMode().defaultCode;
+          console.debug('layout changed');
+          this._setStudentSolution(this._compilationMode().defaultCode);
         });
       },
 
       _scrollToMainBlock() {
-        this._compilationMode().scrollToMainBlock(this.getBlockly());
+        this._compilationMode().scrollToMainBlock(this._getBlockly());
       },
 
       _withDefaultIcons(actions, type) {
@@ -400,35 +448,31 @@
         return this._isGame() ? compilationModes.gameFramework : compilationModes.classic;
       },
 
-      _setInitialXml: function (blockly) {
-        const editorDefaultContent = this.getEditorDefaultValue();
-        if (editorDefaultContent && editorDefaultContent.value) {
-          blockly.initialXml = editorDefaultContent.value;
+      _setInitialXml: function () {
+        const blockly = this._getBlockly();
+        const defaultCode = this._getDefaultCode();
+        if (defaultCode) {
+          blockly.initialXml = defaultCode;
         } else {
           blockly.initialXml = blockly.workspaceXml;
         }
       },
 
-      _initializeWorkspace: function(blockly, callback) {
-        postpone(() => {
-          const value = this.getEditorValue().value;
+      _initializeWorkspace() {
+        const blockly = this._getBlockly();
+        const value = this._getStudentSolution();
 
-          blockly.workspaceXml = value || (
-            this.teacherMode
-              ? "<xml></xml>"
-              : blockly.initialXml
-          );
-          this._scrollToMainBlock();
+        blockly.workspaceXml = value || (
+          this.teacherMode
+            ? "<xml></xml>"
+            : blockly.initialXml
+        );
 
-          callback();
-        });
+        this._scrollToMainBlock();
       },
 
-      _subscribeToWorkspace: function(blockly, action) {
-        setTimeout(() => {
-          blockly.workspace.addChangeListener(action);
-          action();
-        });
+      _subscribeToWorkspace: function(action) {
+        this._getBlockly().workspace.addChangeListener(action);
       }
     });
   </script>
@@ -796,16 +840,21 @@
           finalBoard.update(table, head);
         }
 
-        gbsBoardRemoveBorder(finalBoard);
+        this._removeBorder(finalBoard);
+      },
+
+      _removeBorder(board) {
+        board._setBorderOff();
+        board.updateStyles();
       },
 
       _highlight: function (region) {
-        this._getBlockly().highlightBlock(region);
+        this.$editor.highlightBlock(region);
       },
 
       _showError: function (region, error) {
         const expectsTimeout = /expect_endless_while *: *true/.test(
-          this.$editor.getEditorTest().value
+          this.$editor.getTestCode()
         );
 
         const isExpectedTimeout = (
@@ -815,8 +864,7 @@
 
         if (isExpectedTimeout) return;
 
-        this._getBlockly().scrollToBlock(region);
-        this._getBlockly().showBlockError(region, error.message);
+        this.$editor.showBlockError(region, error);
       },
 
       _cleanState: function () {
@@ -830,8 +878,8 @@
         finalBoard.boom = false;
       },
 
-      _removeBlockErrors: function () {
-        this._getBlockly().workspace.removeBlockErrors();
+      _removeBlockErrors() {
+        this.$editor.removeBlockErrors();
       },
 
       _getLastRegion: function (context = {}) {
@@ -839,10 +887,6 @@
         return regionStack && regionStack.filter(it => it).slice(-1)[0];
       },
 
-      _getBlockly: function () {
-        return this.$editor.getBlockly();
-      },
-
       _getInitialBoards: function () {
         return $(".mu-initial-state gs-board");
       },
@@ -869,7 +913,7 @@
       },
 
       _onResetState: function () {
-        this._getBlockly().workspace.removeBlockErrors();
+        this._removeBlockErrors();
         this._resetBoards();
         this._toggleInitialState();
         this.multipleScenarios.resetIndicators();
@@ -891,31 +935,19 @@
       is: 'gs-toolbox',
       properties: {
         toolboxUrl: Object,
-        observer: '_toolboxChanged'
+        observer: '_setEditorToolbox'
       },
 
       attached: function () {
-        this._setToolbox();
-      },
-      _toolboxChanged: function () {
-        this._setToolbox();
+        this.async(() => {
+          this._setEditorToolbox();
+        });
       },
-      _setToolbox: function () {
+
+      _setEditorToolbox: function () {
         const editor = $("mu-gobstones-custom-editor")[0];
-        const blockly = editor.getBlockly();
-        if(blockly.readOnly) return;
-        const previousCode = editor.getEditorValue().value;
         $.get(this.toolboxUrl, function (toolboxXml) {
-          blockly.toolbox = { defaultToolbox: toolboxXml };
-          editor.setTeacherActions(blockly);
-          editor.setGameActions(blockly);
-          // @faloi - I couldn't figure out why the workspace gets replaced with a generic code,
-          // so here I force a reset with the code previously saved. Sorry not sorry.
-          postpone(() => {
-            editor.reset(previousCode);
-          });
-        }).always(function () {
-          editor.enableContextButton();
+          editor.setToolbox(toolboxXml);
         });
       }
     });

data/lib/render/editor/hammer.min.js

@@ -1,3 +1,4 @@
+/* eslint-disable */
 /*! Hammer.JS - v2.0.8 - 2016-04-23
  * http://hammerjs.github.io/
  *

data/lib/version_hook.rb

@@ -1,3 +1,3 @@
 module GobstonesVersionHook
-  VERSION = '2.8.4'
+  VERSION = '2.8.5'
 end

metadata

@@ -1,14 +1,15 @@
 --- !ruby/object:Gem::Specification
 name: mumuki-gobstones-runner
 version: !ruby/object:Gem::Version
-  version: 2.8.4
+  version: 2.8.5
 platform: ruby
 authors:
 - Rodrigo Alfonso
+- Federico Aloi
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2020-09-24 00:00:00.000000000 Z
+date: 2020-10-16 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: gobstones-board
@@ -173,6 +174,7 @@ dependencies:
 description: 
 email:
 - rodri042@gmail.com
+- federico.aloi@gmail.com
 executables: []
 extensions: []
 extra_rdoc_files: []