mumuki-gobstones-runner 2.8.4 → 2.10.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: b81904b19b4ecb207d1b52ffec98b8cd617b83f47eb02ec37b4fdd33f7087db4
-  data.tar.gz: ad185dffbfc9c311578b2f4ab5a71f0b42cf4bd2110563ede627e4050d1280d8
+  metadata.gz: 2438326f59bc9d3a85086e5bf5c11edc44cb2907d64fda30c23a9dcd8f952f16
+  data.tar.gz: 16ea0ef08aed78f7f24b67d21088b7ab3f0b6bee8fd4d42798010ef5915000b5
 SHA512:
-  metadata.gz: a9f6ac4c47444e5ff26c1151d19a120dd797bf16d394518399157be3eda926b869064b9536ee940c0587168bea17b2e492dad48678460cb9f5558fd5ecc1909f
-  data.tar.gz: 87e3b5464e1daf5027c0f84e9fe806076f343542e0bd4ce1ca3bdea61ee345e7f46bc066bca4ca8267a8dad8dd7c9ce8581c5e6cb3b81a35042b8c088f1fa643
+  metadata.gz: f762dc032fd7d2f32cadf4d88fb4d2c14659e270af017bc498bb2dfcd65e91f38c1314fb23c44d05f87ef1e2c3bbc681f45c08de444769d2e60d009ecff62e0c
+  data.tar.gz: 5fa4241b9d422bba3ac77803fefe331958830d0c110fa80cec8b2dd80cf544b31447cc4b73e1188b2a46dfca3585aebc13f3719a415406b101d65bed00766751

data/lib/assets_server.rb

@@ -54,6 +54,8 @@ class Mumukit::Server::App < Sinatra::Base
 
   get '/assets/editor/editor.html' do
     cross_origin
+    content_type 'text/html'
+
     @game_framework_extra = Gobstones::CompilationMode::GameFramework.extra_code
     @game_framework_program = Gobstones::CompilationMode::GameFramework.program_code
     @game_framework_default = Gobstones::CompilationMode::GameFramework.default_code

data/lib/checker.rb

@@ -113,6 +113,7 @@ module Gobstones
       return "no_stones" if code == 'cannot-remove-stone'
       return "out_of_board" if code == 'cannot-move-to'
       return "unassigned_variable" if code == 'undefined-variable'
+      return "boom_called" if code == 'boom-called'
       return "wrong_argument_type" if has_wrong_argument_type? code
       return "wrong_arguments_quantity" if code.include? 'arity-mismatch'
 

data/lib/render/editor/editor.css

@@ -116,7 +116,6 @@
   }
 }
 
-
 .mu-kids-exercise.mu-kindergarten .gbs_boom {
   display: none;
 }
@@ -124,3 +123,13 @@
 .mu-kids-exercise.mu-kindergarten .mu-scenario.active table.gbs_board {
   display: block !important;
 }
+
+.mu-kids-exercise.mu-kindergarten .gbs_gh {
+  outline: 0 !important;
+}
+
+.mu-kids-exercise.mu-kindergarten .mu-kids-state .mu-kids-state-image gs-board>table {
+    background-color: #6D6E70!important;
+    border: 1px solid #6D6E70 !important;
+    border-radius: 4px;
+}

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

@@ -4,6 +4,35 @@
 <link href="./gobstones-code-runner.html" rel="import"/>
 <script src="./hammer.min.js"></script>
 
+<script>
+  Blockly.FieldImage.prototype.__setValue__ = Blockly.FieldImage.prototype.setValue;
+  Blockly.FieldImage.prototype.setValue = function(a) {
+    if (a && a.startsWith("undefined")) {
+      console.debug(`Ignoring unavailable image ${a}`);
+    } else if (a) {
+      const absoluteUrl = a
+        .replace("../media/", "../local-media/")
+        .replace("../local-media/", "<%= @assets_url %>/local-media/");
+      this.__setValue__(absoluteUrl);
+    } else {
+      this.__setValue__(a);
+    }
+  }
+
+  Blockly.FieldImage.prototype.__setTooltip__ = Blockly.FieldImage.prototype.setTooltip;
+  Blockly.FieldImage.prototype.setTooltip = function(a) {
+    try {
+      this.__setTooltip__(a);
+    } catch (_e) {
+      console.debug('Could not set tooltip');
+    }
+  }
+
+  function postpone(action) {
+    return setTimeout(action, 50);
+  }
+</script>
+
 <dom-module id="mu-gobstones-custom-editor">
 
   <template>
@@ -20,15 +49,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 +66,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 +112,270 @@
         }
       },
 
-      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();
+      /**
+       * Configures a custom toolbox using a toolbox url
+       * This method does nothing if editor is read-only, but
+       * assumes a gs-toolbox element is present - otherwise it would
+       * have no sense to have a toolboxUrl.
+       */
+      configureCustomToolboxFromUrl(toolboxUrl) {
+        if (this.readOnly) return;
 
-          // Removing "/" from the block id character set to avoid syntax errors
-          Blockly.utils.genUid.soup_ = Blockly.utils.genUid.soup_.replace("/", "");
-        };
+        console.debug('Configuring custom toolbox');
 
-        const updateFields = () => {
-          const blockly = this.getBlockly();
+        $.get(toolboxUrl, (toolboxXml) => {
+          this._initializeCustomToolboxBlocklyWorkspace(toolboxXml);
+        });
+      },
 
-          const editorValue = this.getEditorValue();
-          if (editorValue) {
-            editorValue.value = blockly.workspaceXml;
-          }
+      /**
+       * Wether a custom toolbox is required. Read only editors and gs-toolbox-less context
+       * don't require it
+       */
+      hasCustomToolbox() {
+        return !this.readOnly && $('gs-toolbox').length;
+      },
 
-          if (this.teacherMode) {
-            const editorExtra = this.getEditorExtra();
-            if (editorExtra) {
-              editorExtra.value = blockly.workspaceXml;
-            }
-          }
+      compile(code) {
+        return this._compilationMode().compile(code);
+      },
 
-          if (typeof angular !== 'undefined') {
-            angular.element(editorValue).triggerHandler("change");
-          }
+      hasInteractiveProgram() {
+        return this._getBlockly().initialXml.indexOf("block type=\"InteractiveProgram\"") !== -1;
+      },
 
-          const submit = $("kids-submit-button")[0];
-          if (submit && submit.$.runner.isRunning) {
-            submit.$.runner.stop();
-          }
-        };
+      toggleInteractiveMode() {
+        this.$exerciseContainer.toggleClass('play-mode');
+        this._triggerResize();
+      },
 
-        this.$exerciseContainer = $('.mu-kids-exercise');
+      getTeacherCode() {
+        const extraCode = this._getExtraCode();
+        if (!extraCode) return;
+        this.$.blocklyTmp.workspaceXml = extraCode;
+        return this.$.blocklyTmp.generateCode();
+      },
 
-        const setTrashPosition = () => {
-          var width = $('#blocklyDiv').width() - 68;
-          var height = $('#blocklyDiv').height() - 210;
-          $('.blocklyTrash').css("transform", `translate(${width}px, ${height}px)`);
-          $('.blocklyTrash').css("display", "unset");
-        };
+      getStudentCode: function () {
+        return this
+          ._getBlockly()
+          .generateCode({withRegions: true, clearErrors: false});
+      },
 
-        var setTrashTimeout;
+      getStudentXml: function () {
+        return this._getStudentSolution() || "";
+      },
 
-        const localOnResize = () => {
-          clearTimeout(setTrashTimeout);
-          setTrashTimeout = setTimeout(() => {
-            setTrashPosition();
-          });
-        };
+      getTestCode() {
+        return this._getEditorTest().value;
+      },
 
-        const triggerResizeOnContextModalClose = () => {
-          $('.mu-kids-context, .mu-kids-results').on('hidden.bs.modal shown.bs.modal', function () {
-            localOnResize();
-          })
-        };
+      removeBlockErrors() {
+        return this._getBlockly().workspace.removeBlockErrors();
+      },
 
-        const relocateTrash = (blockly) => {
-          blockly.workspace.trashcan.bottom_ = 150; //Setting vertical position programmatically to adjust the draggable area
-          $(window).resize((e) => localOnResize());
-          triggerResizeOnContextModalClose();
-        };
+      showBlockError(region, error) {
+        this._getBlockly().scrollToBlock(region);
+        this._getBlockly().showBlockError(region, error.message);
+      },
 
-        const initialize = () => {
-          postpone(() => {
-            const blockly = this.getBlockly();
+      highlightBlock(region) {
+        this._getBlockly().highlightBlock(region);
+      },
 
-            if (!blockly || !blockly.workspace) return initialize();
+      // ==== Private methods (only for internal usage)
 
-            blockly.showCategories = !this._isKindergarten();
+      _configureBlocklyAppearance() {
+        this._getBlockly().showCategories = !this._isKindergarten();
+        this._setBlocklyDisplayMode();
+        this._setBlocklySounds();
+        this._setBlocklyColors();
 
-            if (!this.readOnly) {
-              relocateTrash(blockly);
-            }
+        if (!this.readOnly) {
+          this._relocateTrashOnResize();
+        }
 
-            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();
+        // Removing "/" from the block id character set to avoid syntax errors
+        Blockly.utils.genUid.soup_ = Blockly.utils.genUid.soup_.replace("/", "");
+      },
 
-              this._subscribeToWorkspace(blockly, updateFields);
-            });
+      _configureBlocklyBehavior() {
+        this._setTeacherActions();
+        this._setGameActions();
+        this._initializeNonCustomToolboxBlocklyWorkspace();
+        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());
+      },
+
+
+      /**
+       * Initializes a workspace using a custom toolbox.
+       *
+       * Blockly's workspace is destroyed when toolbox changes, so initialization
+       * is performed here
+       */
+      _initializeCustomToolboxBlocklyWorkspace(toolboxXml) {
+        this._getBlockly().toolbox = { defaultToolbox: toolboxXml };
+        this._initializeBlocklyWorkspace();
+      },
+
+      /**
+       * Initializes a workspace using a non-custom toolbox.
+       *
+       * Blockly's workspace is destroyed when toolbox changes,
+       * so this method will initialize it only if a there is a custom toolbox
+       * that will be called later.
+       */
+      _initializeNonCustomToolboxBlocklyWorkspace() {
+        if (!this.hasCustomToolbox()) {
+          this._initializeBlocklyWorkspace();
+        }
+      },
+
+      _initializeBlocklyWorkspace() {
+        console.debug('Initializing Blockly Workspace');
+
+        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() {
+        console.debug("Updating solution");
+        const blockly = this._getBlockly();
+        let changed;
+        if (this.teacherMode) {
+          changed = this._setExtraCode(blockly.workspaceXml);
+        } else {
+          changed = this._setStudentSolution(blockly.workspaceXml);
+        }
+
+        if (!changed) {
+          console.debug("No solution update required")
+          return;
+        }
+
+        // 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;
+          }
         };
+      },
 
-        setBlocklyCustomSettings();
-        initialize();
+      _setBlocklyColors() {
+        Blockly.HSV_SATURATION = 0.64;
+        Blockly.HSV_VALUE = 1;
+
+        Blockly.MUMUKI_COLORS = {
+          pink: "#FF5C82",
+          blue: "#5CBEFF",
+          yellow: "#FFC95C",
+          green: "#5CED71"
+        };
+
+        // 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 +385,116 @@
         })
       },
 
-      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;
         }
+
+        console.debug("Set teacher actions");
+        const actions = new Parser().getActionsFromSource(teacherCode);
+
+        this._setPrimitiveProcedures(this._withDefaultIcons(actions, 'procedureDeclarations'));
+        this._setPrimitiveFunctions(this._withDefaultIcons(actions, 'functionDeclarations'));
       },
 
-      setGameActions(blockly) {
-        if (this._isGame()) {
-          blockly.primitiveProcedures = blockly.primitiveProcedures || [];
-          blockly.primitiveProcedures = blockly.primitiveProcedures.concat([
-            this.gamePrimitive('ShiftUp'),
-            this.gamePrimitive('ShiftDown'),
-            this.gamePrimitive('ShiftLeft'),
-            this.gamePrimitive('ShiftRight')
-          ]);
+      _setGameActions() {
+        if (!this._isGame()) {
+          return;
         }
+
+        console.debug("Set game actions");
+        const blockly = this._getBlockly();
+
+        this._setPrimitiveProcedures((blockly.primitiveProcedures || []).concat([
+          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`} };
+      _setPrimitiveProcedures(procedures) {
+        this._setBlocklyActions("primitiveProcedures", procedures);
       },
 
-      enableContextButton() {
-        if(mumuki.kids && mumuki.assetsLoadedFor) {
-          return mumuki.assetsLoadedFor('editor');
-        } else {
-          return postpone(this.enableContextButton.bind(this));
+      _setPrimitiveFunctions(functions) {
+        this._setBlocklyActions("primitiveFunctions", functions);
+      },
+
+      _setBlocklyActions(key, actions) {
+        try {
+          this._getBlockly()[key] = actions
+        } catch (e) {
+          if (this._getBlockly()[key] !== actions) {
+            throw e;
+          }
         }
+      },
 
+      _gamePrimitive(name) {
+        return { alias: 'procedureDeclaration', name, attributes: {block_icon: `<%= @assets_url %>/media/${name}.png`} };
       },
 
-      getBlockly: function () {
+      _getBlockly() {
         return this.$.blocklyElement;
       },
 
-      getStudentCode: function () {
-        return this
-          .getBlockly()
-          .generateCode({withRegions: true, clearErrors: false});
+      _getStudentSolution() {
+        return this._getStudentEditor().value;
       },
 
-      getStudentXml: function () {
-        return this.getEditorValue().value || "";
+      /**
+       * Sets the student solution xml, which corresponds
+       * to user content in laboratory, and default content in bibliotheca
+       */
+      _setStudentSolution(code) {
+        if (this._getStudentEditor().value !== code) {
+          console.debug(`Setting student ${code}`)
+          this._getStudentEditor().value = code;
+          return true;
+        }
+        return false;
       },
 
-      getTeacherCode: function () {
-        const teacherXml = this.getEditorExtra();
-        if (!teacherXml || !teacherXml.value) return;
-        this.$.blocklyTmp.workspaceXml = teacherXml.value;
-        return this.$.blocklyTmp.generateCode();
+      _getDefaultCode() {
+        return this._getEditorDefaultValue().value;
       },
 
-      getEditorValue: function() {
-        return $("#mu-custom-editor-value")[0];
+      _getExtraCode() {
+        return this._getEditorExtra().value;
       },
 
-      getEditorDefaultValue: function() {
-        return $("#mu-custom-editor-default-value")[0];
+      _setExtraCode(code) {
+        if (this._getEditorExtra().value !== code) {
+          console.debug(`Setting extra ${code}`)
+          this._getEditorExtra().value = code;
+          return true;
+        }
+        return false;
       },
 
-      getEditorExtra: function() {
-        return $("#mu-custom-editor-extra")[0];
+      _getEditorExtra: function() {
+        return $("#mu-custom-editor-extra")[0] || {};
       },
 
-      getEditorTest: function() {
+      _getEditorTest: function() {
         return $("#mu-custom-editor-test")[0];
       },
 
-      compile(code) {
-        return this._compilationMode().compile(code);
+      _getStudentEditor: function() {
+        return $("#mu-custom-editor-value")[0] || {};
+      },
+
+      _getEditorDefaultValue: function() {
+        return $("#mu-custom-editor-default-value")[0] || {};
+      },
+
+      _stopExecution() {
+        const submit = $("kids-submit-button")[0];
+        if (submit && submit.$.runner.isRunning) {
+          submit.$.runner.stop();
+        }
       },
 
       _registerLayoutChangedEvent() {
@@ -361,12 +503,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 +543,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 +935,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 +959,7 @@
 
         if (isExpectedTimeout) return;
 
-        this._getBlockly().scrollToBlock(region);
-        this._getBlockly().showBlockError(region, error.message);
+        this.$editor.showBlockError(region, error);
       },
 
       _cleanState: function () {
@@ -830,8 +973,8 @@
         finalBoard.boom = false;
       },
 
-      _removeBlockErrors: function () {
-        this._getBlockly().workspace.removeBlockErrors();
+      _removeBlockErrors() {
+        this.$editor.removeBlockErrors();
       },
 
       _getLastRegion: function (context = {}) {
@@ -839,10 +982,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 +1008,7 @@
       },
 
       _onResetState: function () {
-        this._getBlockly().workspace.removeBlockErrors();
+        this._removeBlockErrors();
         this._resetBoards();
         this._toggleInitialState();
         this.multipleScenarios.resetIndicators();
@@ -891,32 +1030,22 @@
       is: 'gs-toolbox',
       properties: {
         toolboxUrl: Object,
-        observer: '_toolboxChanged'
+        observer: '_setEditorToolbox'
       },
 
       attached: function () {
-        this._setToolbox();
-      },
-      _toolboxChanged: function () {
-        this._setToolbox();
-      },
-      _setToolbox: 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();
+        this.async(() => {
+          this._setEditorToolbox();
         });
+      },
+
+      _setEditorToolbox: function () {
+        const $editor = $("mu-gobstones-custom-editor")[0];
+
+        // there is no editor to configure
+        if (!$editor) return;
+
+        $editor.configureCustomToolboxFromUrl(this.toolboxUrl);
       }
     });
   </script>

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.10.1'
 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.10.1
 platform: ruby
 authors:
 - Rodrigo Alfonso
+- Federico Aloi
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2020-09-24 00:00:00.000000000 Z
+date: 2020-11-06 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: []