mumuki-gobstones-runner 1.5.2 → 1.6.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 289b1fba60258212ef4efa4fc364df70c15f698099489f19ad5f998f49624b77
-  data.tar.gz: 0a86e4ecc8f3f681fa8a278d731d0455c2767878e767b250c4f5f99eab4dd218
+  metadata.gz: 9496d7c5a67e0f21e32ad029f1ea57d3e247d2a355fca98d9dedb8ce02e323ac
+  data.tar.gz: 0d42d8bf920dd649f54ac2705012f3ab4a23ffc1b07249fd1ad99efa8a07dce2
 SHA512:
-  metadata.gz: 80a8270ef03432d73cb97e18f41dfff0402c1d3ee1865657638f8e42aa6c40ef7d224a1431ff9225cd35affd4cba84b6cdec6c9443d6faf1d03e83cd80e8ea69
-  data.tar.gz: 77486fc3d384b1ce6af00b823363659f1c3f908a5c5aa44f06421ed139aad0e254feffaafdec23c083d50076fde784294cb0f7b249fb0d73f8dce1a5d168a61a
+  metadata.gz: 8800718454321a1533216d96bc66df34ffed2e751385a9e387f867608a902a33ec67ca1630918e3df03b9e08182df621c48b0f9b3a4adcd3893166b420ef9371
+  data.tar.gz: 87a9e6c0001cf61fd910c59eca4dffb40858eb716f774aa21ef282dc71839fd7764879e6dcf6e9bc7141b95be6cc066fbd4f9a03368948099d0817a67d8239a3

data/lib/assets_server.rb

@@ -11,7 +11,7 @@ class Mumukit::Server::App < Sinatra::Base
 
   def self.get_asset(route, absolute_path, type)
     get "/assets/#{route}" do
-      send_file absolute_path, { type: type }
+      send_file absolute_path, type: type
     end
   end
 
@@ -23,15 +23,24 @@ class Mumukit::Server::App < Sinatra::Base
     get_asset route, Gobstones::Blockly.assets_path_for(path), type
   end
 
+  def self.get_submit_asset(route, path, type)
+    get_asset route, Gobstones::CodeRunner.assets_path_for(path), type
+  end
+
   def self.get_local_asset(route, path, type)
-    get_asset route, File.join(__dir__, '..' , path), type
+    get_asset route, File.join(__dir__, '..', path), type
   end
 
-  get_local_asset  'editor/editor.js',     'lib/render/editor/editor.js',               'application/javascript'
-  get_board_asset  'polymer.html',         'htmls/vendor/polymer.html',                 'text/html'
-  get_board_asset  'polymer-mini.html',    'htmls/vendor/polymer-mini.html',            'text/html'
-  get_board_asset  'polymer-micro.html',   'htmls/vendor/polymer-micro.html',           'text/html'
-  get_board_asset  'gs-board.html',        'htmls/gs-board.html',                       'text/html'
-  get_editor_asset 'editor/editor.html',   'htmls/gs-element-blockly.html',             'text/html'
-  get_local_asset  'editor/editor.css',    'lib/render/editor/editor.css',              'text/css'
+  get_board_asset 'polymer.html', 'htmls/vendor/polymer.html', 'text/html'
+  get_board_asset 'polymer-mini.html', 'htmls/vendor/polymer-mini.html', 'text/html'
+  get_board_asset 'polymer-micro.html', 'htmls/vendor/polymer-micro.html', 'text/html'
+  get_board_asset 'gs-board.html', 'htmls/gs-board.html', 'text/html'
+
+  get_editor_asset 'editor/gs-element-blockly.html', 'htmls/gs-element-blockly.html', 'text/html'
+
+  get_submit_asset 'editor/gobstones-code-runner.html', 'htmls/gobstones-code-runner.html', 'text/html'
+
+  get_local_asset 'editor/editor.js', 'lib/render/editor/editor.js', 'application/javascript'
+  get_local_asset 'editor/editor.css', 'lib/render/editor/editor.css', 'text/css'
+  get_local_asset 'editor/editor.html', 'lib/render/editor/editor.html', 'text/html'
 end

data/lib/gobstones.rb

@@ -1,5 +1,6 @@
 require 'gobstones/board'
 require 'gobstones/blockly'
+require 'gobstones/code-runner'
 
 module Gobstones
 

data/lib/gobstones/batch.rb

@@ -29,7 +29,8 @@ class Gobstones::Batch
   def example_base_json(example)
     {initialBoard: example[:preconditions][:initial_board],
      originalCode: content,
-     code: "#{example_code(example)}\n#{extra}"}
+     code: example_code(example),
+     extraCode: extra}
   end
 
   def example_code(example)

data/lib/gobstones_runner.rb

@@ -5,7 +5,7 @@ I18n.load_translations_path File.join(__dir__, 'locales', '*.yml')
 
 Mumukit.runner_name = 'gobstones'
 Mumukit.configure do |config|
-  config.docker_image = 'mumuki/mumuki-gobstones-worker:1.1'
+  config.docker_image = 'mumuki/mumuki-gobstones-worker:1.8'
   config.content_type = 'html'
   config.structured = true
 end

data/lib/render/boards.html.erb

@@ -38,7 +38,7 @@
       <p class="title"><%=I18n.t it.title %></p>
       <p>
         <% if it.board.boom %>
-          <img src="<%= @boom_image %>" />
+          <img src=<%= "#{Mumukit.runner_url}/boom.png" %> />
         <% else %>
           <gs-board>
             <%= it.board.gbb %>

data/lib/render/editor/editor.css

@@ -1,8 +1,3 @@
-#blocklyDiv {
-  height: 400px !important;
-  width: 555px !important;
-}
-
 .blocklyTrash {
   display: none;
 }
@@ -10,3 +5,24 @@
 .blocklyZoom {
   display: none;
 }
+
+.blocklyText {
+  fill: black !important;
+  stroke-width: 0.10px !important;
+  stroke: black !important;
+}
+
+.blocklyEditableText > rect {
+  fill-opacity: 0;
+}
+
+.blocklyEditableText > text > tspan {
+  fill: black !important;
+}
+
+.blocklyHighlightedConnectionPath,
+.blocklySelected > .blocklyPath {
+  stroke: white;
+  stroke-width: 3px;
+  stroke-opacity: 0.5;
+}

data/lib/render/editor/editor.html

@@ -0,0 +1,405 @@
+<link href="./gs-element-blockly.html" rel="import" />
+<link href="./gobstones-code-runner.html" rel="import" />
+
+<dom-module id="mu-gobstones-custom-editor">
+  <template>
+    <gs-element-blockly read-only="{{readOnly}}" id="blocklyElement" media="https://github.com/Program-AR/blockly-package/raw/v0.0.15/media/"></gs-element-blockly>
+    <gs-element-blockly id="blocklyTmp" style="display: none" media="https://github.com/Program-AR/blockly-package/raw/v0.0.15/media/"></gs-element-blockly>
+  </template>
+
+  <script>
+    Polymer({
+      is: 'mu-gobstones-custom-editor',
+      properties: {
+        readOnly: {
+          type: Boolean,
+          value: false
+        }
+      },
+
+      attached: function() {
+        const setBlocklyColors = () => {
+          if (typeof Blockly === 'undefined' || !Blockly.GOBSTONES_COLORS) return setTimeout(setBlocklyColors, 50);
+          Blockly.HSV_SATURATION = 0.64;
+          Blockly.HSV_VALUE = 1;
+
+          Blockly.MUMUKI_COLORS = {
+            pink: 346,
+            blue: 204,
+            yellow: 40
+          };
+
+          Blockly.Msg.MATH_HUE =                        Blockly.MUMUKI_COLORS.blue;
+          Blockly.GOBSTONES_COLORS.literalExpression =  Blockly.MUMUKI_COLORS.blue;
+
+          Blockly.GOBSTONES_COLORS.program =            Blockly.MUMUKI_COLORS.pink;
+          Blockly.GOBSTONES_COLORS.interactiveProgram = Blockly.MUMUKI_COLORS.pink;
+          Blockly.GOBSTONES_COLORS.interactiveBinding = Blockly.MUMUKI_COLORS.pink;
+
+          Blockly.GOBSTONES_COLORS.controlStructure =   Blockly.MUMUKI_COLORS.yellow;
+          Blockly.GOBSTONES_COLORS.primitiveCommand =   Blockly.MUMUKI_COLORS.yellow;
+          Blockly.GOBSTONES_COLORS.complete =           Blockly.MUMUKI_COLORS.yellow;
+          Blockly.GOBSTONES_COLORS.expression =         Blockly.MUMUKI_COLORS.yellow;
+          Blockly.GOBSTONES_COLORS.assignation =        Blockly.MUMUKI_COLORS.yellow;
+        }
+
+        const updateFields = () => {
+          const blockly = this.getBlockly();
+          const editorValue = $("#mu-custom-editor-value")[0];
+          if (editorValue) {
+            editorValue.value = blockly.workspaceXml;
+          }
+          if (typeof angular !== 'undefined'){
+            angular.element(editorValue).triggerHandler("change");
+          }
+
+          const submit = $("kids-submit-button")[0];
+          if (submit && submit.$.runner.isRunning) {
+            submit.$.runner.stop();
+          }
+        };
+
+        const initialize = () => {
+          setTimeout(() => {
+            const blockly = this.getBlockly();
+
+            if (!blockly || !blockly.workspace) return initialize();
+
+            const teacherCode = this.getTeacherCode();
+            if (teacherCode) {
+              setTimeout(() => {
+                const actions = new Parser().getActionsFromSource(teacherCode);
+                blockly.primitiveProcedures = actions.procedureDeclarations;
+                blockly.primitiveFunctions = actions.functionDeclarations;
+              });
+            }
+
+            var value = $("#mu-custom-editor-value")[0].value;
+            if (value) {
+              blockly.workspaceXml = value;
+            }
+
+            blockly.workspace.addChangeListener(updateFields);
+            updateFields();
+          }, 50);
+        };
+
+        setBlocklyColors();
+        initialize();
+      },
+
+      getBlockly: function() {
+        return this.$.blocklyElement;
+      },
+
+      getStudentCode: function() {
+        return this
+          .getBlockly()
+          .generateCode({ withRegions: true, clearErrors: false });
+      },
+
+      getStudentXml: function() {
+        return $("#mu-custom-editor-value")[0].value || "";
+      },
+      getTeacherCode: function() {
+        const teacherXml = $("#mu-custom-editor-extra")[0];
+        if (!teacherXml || !teacherXml.value) return;
+        this.$.blocklyTmp.workspaceXml = teacherXml.value;
+        return this.$.blocklyTmp.generateCode();
+      }
+    });
+  </script>
+</dom-module>
+
+<dom-module id="waiting-spinner">
+  <style>
+    .spinner {
+      width: 60px;
+      height: 60px;
+    }
+
+    .double-bounce1, .double-bounce2 {
+      width: 100%;
+      height: 100%;
+      border-radius: 50%;
+      background-color: #ff4081;
+      opacity: 0.6;
+      position: absolute;
+      top: 0;
+      left: 0;
+
+      -webkit-animation: sk-bounce 2.0s infinite ease-in-out;
+      animation: sk-bounce 2.0s infinite ease-in-out;
+    }
+
+    .double-bounce2 {
+      -webkit-animation-delay: -1.0s;
+      animation-delay: -1.0s;
+    }
+
+    @-webkit-keyframes sk-bounce {
+      0%, 100% { -webkit-transform: scale(0.0) }
+      50% { -webkit-transform: scale(1.0) }
+    }
+
+    @keyframes sk-bounce {
+      0%, 100% {
+        transform: scale(0.0);
+        -webkit-transform: scale(0.0);
+      } 50% {
+        transform: scale(1.0);
+        -webkit-transform: scale(1.0);
+      }
+    }
+  </style>
+
+  <template>
+    <div class="spinner">
+      <div class="double-bounce1"></div>
+      <div class="double-bounce2"></div>
+    </div>
+  </template>
+
+  <script>
+    Polymer({
+      is: "waiting-spinner"
+    });
+  </script>
+</dom-module>
+
+<dom-module id="kids-submit-button">
+  <style>
+    .hidden { visibility: hidden; }
+    .visible { visibility: visible; }
+    .spinner {
+      position: absolute;
+      top: 0;
+      left: 0;
+      transform: translate(-2px, -2px);
+    }
+  </style>
+
+  <template>
+    <div style="position: relative">
+      <gobstones-code-runner id="runner" class$="{{_getSubmitCss(isWaiting)}}"></gobstones-code-runner>
+      <waiting-spinner class$="spinner {{_getSpinnerCss(isWaiting)}}"></waiting-spinner>
+    </div>
+  </template>
+
+  <script>
+    Polymer({
+      is: "kids-submit-button",
+      listeners: {
+        "gbs-run-request": "_onRunRequest",
+        "gbs-stop": "_onStop"
+      },
+      properties: {
+        serverPromise: Object,
+        serverResponse: Object,
+        isWaiting: {
+          type: Boolean,
+          value: false
+        }
+      },
+
+      ready: function() {
+
+        const setInitialState = () => {
+          const initialBoard = this._getTargetBoard();
+          if(!initialBoard.size) return setTimeout(setInitialState, 50);
+
+          this.initialState = {
+            size: initialBoard.size,
+            table: initialBoard.table,
+            header: initialBoard.header
+          };
+
+          this._resetBoardOnClose(this.initialState, initialBoard);
+        }
+
+        setInitialState();
+      },
+
+      _onRunRequest: function(event) {
+        const { detail: controller } = event;
+
+        const editor = this._getEditor();
+        const xml = editor.getStudentXml();
+        const code = editor.getStudentCode();
+        const teacherCode = editor.getTeacherCode() || "";
+        const finalBoard = this._getTargetBoard();
+        const solution = { content: xml };
+
+        this._cleanState();
+        this._cleanErrors(finalBoard);
+
+        const promise = new mumuki.bridge.Laboratory()
+          .runTests(solution)
+          .then((results) => {
+            if (promise !== this.serverPromise) return;
+
+            this._onRemoteExecutionStop(results)
+          });
+        this.serverPromise = promise;
+
+        controller.start({
+          initialState: this.initialState,
+          code: {
+            main: code,
+            library: "",
+            teacher: teacherCode
+          }
+        }, {
+          onResult: (state, fullState) => {
+            const region = this._getLastRegion(fullState);
+            if (region) this._highlight(region);
+
+            this._updateBoard(state, finalBoard);
+          },
+          onCompilationError: (error) => {
+            const { region } = error.on;
+            if (region) this._showError(region, error);
+          }
+        });
+      },
+
+      _onStop: function(event) {
+        const reason = event.detail;
+
+        if (reason === "end") this._onLocalExecutionStop();
+        else this.serverPromise = undefined;
+      },
+
+      _onLocalExecutionStop: function() {
+        if (!this.serverResponse) this.isWaiting = true;
+        else this._onExecutionStop(this.serverResponse);
+      },
+
+      _onRemoteExecutionStop: function(serverResponse) {
+        this.serverResponse = serverResponse;
+
+        if (!this.$.runner.isRunning) this._onExecutionStop(serverResponse);
+      },
+
+      _onExecutionStop: function(data) {
+        this._cleanState();
+        mumuki.showKidsResult(data);
+      },
+
+      _updateBoard: function(state, finalBoard) {
+        const { error, table, head } = state;
+
+        finalBoard.boom = error != null;
+
+        if (error) {
+          const region = this._getLastRegion(error.on);
+          if (region) this._showError(region, error);
+        } else {
+          finalBoard.update(table, head);
+        }
+      },
+
+      _highlight: function(region) {
+        this._getBlockly().highlightBlock(region);
+      },
+
+      _showError: function(region, error) {
+        this._getBlockly().showBlockError(region, error.message);
+      },
+
+      _cleanState: function() {
+        this.serverPromise = undefined;
+        this.serverResponse = undefined;
+        this.isWaiting = false;
+      },
+
+      _cleanErrors: function(finalBoard) {
+        this._getBlockly().workspace.removeBlockErrors();
+        finalBoard.boom = false;
+      },
+
+      _getLastRegion: function(context = {}) {
+        const { regionStack } = context;
+        return regionStack && regionStack.filter(it => it).slice(-1)[0];
+      },
+
+      _getBlockly: function() {
+        return this._getEditor().getBlockly();
+      },
+
+      _getEditor: function() {
+        return $("mu-gobstones-custom-editor")[0];
+      },
+
+      _getTargetBoard: function() {
+        return $(".mu-kids-gbs-board-initial gs-board")[0];
+      },
+
+      _getSubmitCss: function(isWaiting) {
+        return isWaiting ? "hidden" : "visible";
+      },
+
+      _getSpinnerCss: function(isWaiting) {
+        return isWaiting ? "visible" : "hidden";
+      },
+
+      _resetBoardOnClose: function(initialState, initialBoard){
+        const modal = mumuki.getKidsResultsModal();
+
+        modal.on("hidden.bs.modal", function () {
+          initialBoard.update(initialState.table, initialState.header);
+          initialBoard.boom = false;
+        });
+      }
+    });
+  </script>
+</dom-module>
+
+<dom-module id="gs-attire">
+  <script>
+    Polymer({
+      is: 'gs-attire',
+      properties: {
+        attireUrl: Object,
+        observer: '_attireChanged'
+      },
+
+      attached: function() {
+        this._setAttire();
+      },
+      _attireChanged: function() {
+        this._setAttire();
+      },
+      _setAttire: function() {
+        $.getJSON(this.attireUrl, function(attire) {
+          GobstonesBoard && GobstonesBoard.setDefaultAttire(attire);
+        });
+      }
+    });
+  </script>
+</dom-module>
+
+<dom-module id="gs-toolbox">
+  <script>
+    Polymer({
+      is: 'gs-toolbox',
+      properties: {
+        toolboxUrl: Object,
+        observer: '_toolboxChanged'
+      },
+
+      attached: function() {
+        this._setToolbox();
+      },
+      _toolboxChanged: function() {
+        this._setToolbox();
+      },
+      _setToolbox: function() {
+        $.get(this.toolboxUrl, function(toolboxXml) {
+          const blockly = $("mu-gobstones-custom-editor")[0].getBlockly();
+          blockly.setDefaultToolbox(toolboxXml);
+        });
+      }
+    });
+  </script>
+</dom-module>

data/lib/render/editor/editor.js

@@ -1,9 +1,14 @@
-$(document).ready(() => {
-  $("#custom-editor").html("<gs-element-blockly />");
+$(document).ready(function () {
+  $(".mu-kids-submit-button").html("<kids-submit-button></kids-submit-button>");
 
-  const blockly = $("gs-element-blockly")[0];
+  Blockly.WorkspaceAudio.prototype.preload = function () {
+    for (var soundName in this.SOUNDS_) {
+      var sound = this.SOUNDS_[soundName];
+      sound.volume = 0.01;
+      var playPromise = sound.play();
+      playPromise && playPromise.then(sound.pause.bind(sound));
+      if (goog.userAgent.IPAD || goog.userAgent.IPHONE) break;
+    }
+  };
 
-  blockly.workspace.addChangeListener(() => {
-    $("#custom-editor-value")[0].value = blockly.generateCode();
-  });
 });

data/lib/render/html_renderer.rb

@@ -4,7 +4,6 @@ module Gobstones
   class HtmlRenderer
     def initialize(options)
       @options = options
-      @boom_image = encode_image_png 'boom'
     end
 
     def render_success(result)
@@ -80,11 +79,6 @@ module Gobstones
       end
     end
 
-    def encode_image_png(file_name)
-      base64 = Base64.strict_encode64 File.read(Gobstones::Board.assets_path_for("htmls/components/#{file_name}.png"))
-      "data:image/png;base64,#{base64}"
-    end
-
     def bind_result(result)
       @result = { boards: [] }.merge result
       template_file.result binding

data/lib/version_hook.rb

@@ -1,3 +1,3 @@
 module GobstonesVersionHook
-  VERSION = '1.5.2'
+  VERSION = '1.6.0'
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: mumuki-gobstones-runner
 version: !ruby/object:Gem::Version
-  version: 1.5.2
+  version: 1.6.0
 platform: ruby
 authors:
 - Rodrigo Alfonso
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2018-02-27 00:00:00.000000000 Z
+date: 2018-04-01 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: mumukit
@@ -16,14 +16,14 @@ dependencies:
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: '2.20'
+        version: '2.21'
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: '2.20'
+        version: '2.21'
 - !ruby/object:Gem::Dependency
   name: sinatra-cross_origin
   requirement: !ruby/object:Gem::Requirement
@@ -44,28 +44,42 @@ dependencies:
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: '1.8'
+        version: '1.14'
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: '1.8'
+        version: '1.14'
 - !ruby/object:Gem::Dependency
   name: gobstones-blockly
   requirement: !ruby/object:Gem::Requirement
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: '0.6'
+        version: '0.10'
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: '0.6'
+        version: '0.10'
+- !ruby/object:Gem::Dependency
+  name: gobstones-code-runner
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '0.0'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '0.0'
 - !ruby/object:Gem::Dependency
   name: bundler
   requirement: !ruby/object:Gem::Requirement
@@ -143,7 +157,6 @@ executables: []
 extensions: []
 extra_rdoc_files: []
 files:
-- lib/assets/boom.png
 - lib/assets_server.rb
 - lib/checker.rb
 - lib/expectations_hook.rb
@@ -160,8 +173,10 @@ files:
 - lib/metadata_hook.rb
 - lib/multiple_executions_runner.rb
 - lib/precompile_hook.rb
+- lib/public/boom.png
 - lib/render/boards.html.erb
 - lib/render/editor/editor.css
+- lib/render/editor/editor.html
 - lib/render/editor/editor.js
 - lib/render/html_board.rb
 - lib/render/html_renderer.rb