mumuki-laboratory 6.4.2 → 6.5.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: c70e70c721988ae2a17c12556ceb48438c3eb7d45e1c43f186f61f1db8a7eb68
-  data.tar.gz: 243fe0ce527986bbb37b0557cdfb1141762a183d139cebe670a9001fafc95e1d
+  metadata.gz: d9cea64bf4904a9498e737c16b6d4226651758c91bfcad1bde4bddfc43d9ff54
+  data.tar.gz: 8800bcf52002d2d2599a7a242ab8e0586f403e6daf3483992d01c833e01c54f0
 SHA512:
-  metadata.gz: 39077b3aabe2b22aa8c0e9aa4886e1ae1a9f196badbe84e5779c48fe85130870a13b499a27ee845160669231b60c7031957271d3407e247928f333f521699a00
-  data.tar.gz: ac16e9e2804ea667bf2cde6857b41bb7f11cdc3e759d058210bdd1e0075195f901d80b41a6cc9fb437f49d8933768fc64c03891f326942fdc52b304c650ef880
+  metadata.gz: d6d64cd6f38e107745341a051587ea4baa84886a9f3c631133ffb402ac88bd49e9263d077e29ec1f549f8ee13bba7e4ba80d19c2664730317cbca04df07189c0
+  data.tar.gz: 9bff547b106c4404cd615ce89d89d2bc5db23d97fdb6e746423dd98a90e07de38322c74f52312b7b15cff1fc0c666dcc4286c53792ad4a2d23ea264d7d693d4c

data/README.md

@@ -135,7 +135,67 @@ rails s
 bundle exec rspec
 ```
 
-## API Docs
+## JavaScript API Docs
+
+In order to be customized by runners, Laboratory exposes the following selectors and methods
+which are granted to be safe and stable.
+
+### Public Selectors
+
+* `.mu-final-state`
+* `.mu-initial-state-header`
+* `.mu-initial-state`
+* `.mu-kids-blocks`
+* `.mu-kids-context`
+* `.mu-kids-exercise-description`
+* `.mu-kids-exercise`
+* `.mu-kids-reset-button`
+* `.mu-kids-results-aborted`
+* `.mu-kids-results`
+* `.mu-kids-state-image`
+* `.mu-kids-state`
+* `.mu-kids-states`
+* `.mu-kids-submit-button`
+* `.mu-multiple-scenarios`
+* `.mu-scenarios`
+* `#mu-actual-state-text`
+* `#mu-custom-editor-default-value`
+* `#mu-custom-editor-extra`
+* `#mu-custom-editor-test`
+* `#mu-custom-editor-value`
+* `#mu-initial-state-text`
+
+### Deprecated Selectors
+
+* `.mu-kids-gbs-board-initial`: Use `.mu-initial-state` instead
+* `.mu-state-final`: Use `.mu-final-state` instead
+* `.mu-state-initial`: Use `.mu-initial-state` instead
+* `#kids-context`: Use `.mu-kids-context` instead
+* `#kids-results-aborted`: Use `.mu-kids-results-aborted` instead
+* `#kids-results`: Use `.mu-kids-results` instead
+
+### Methods
+
+* `mumuki.bridge.Laboratory`
+* `mumuki.kids.registerBlocksAreaScaler`
+* `mumuki.kids.registerStateScaler`
+* `mumuki.kids.restart`
+* `mumuki.kids.scaleBlocksArea`
+* `mumuki.kids.scaleState`
+* `mumuki.kids.showResult`
+* `mumuki.locale`
+* `mumuki.MultipleScenarios`
+* `mumuki.version`
+
+### Kids Call order
+
+0. Laboratory Kids API Initialization
+1. Runner Editor JS
+2. Laboratory Kids Layout Initialization
+3. Runner Editor HTML
+
+
+## REST API Docs
 
 Before using the API, you must create an `ApiClient` using `rails c`, which will generate a private JWT. Use it to authenticate API calls in any Platform application within a `Authorizaion: Bearer <TOKEN>`.
 

data/app/assets/javascripts/application.js

@@ -27,6 +27,7 @@
 //= require_tree ../../../vendor/assets/javascripts/codemirror-modes
 //= require analytics
 //= require hotjar
+//= require muvment
 
 //= require_tree ./application
 

data/app/assets/javascripts/application/characters.js

@@ -0,0 +1,26 @@
+mumuki.load(() => {
+  let characters = mumuki.characters || {};
+
+  muvment.loadCharacters(characters, '/character/animations.json').then((characterFinishedLoadingPromises) => {
+    Promise.all(characterFinishedLoadingPromises).then((characterIds) => {
+      mumuki.presenterCharacter = characters[atRandom(characterIds)];
+      placeKidsAnimations();
+    });
+  });
+
+  function placeKidsAnimations() {
+    placeAnimation('.mu-kids-character-animation', 'jump');
+    placeAnimation('.mu-kids-character-context', 'context');
+  }
+
+  function placeAnimation(selector, clip) {
+    let canvas = $(selector);
+    mumuki.presenterCharacter.playAnimation(clip, canvas);
+  }
+
+  function atRandom(array) {
+    return array[Math.floor(Math.random() * array.length)];
+  }  
+
+  mumuki.characters = characters;
+});

data/app/assets/javascripts/application/kids.js

@@ -26,46 +26,15 @@ mumuki.load(function () {
     showParagraph(paragraphIndex || newParagraphIndex);
   }
 
-  availableTabs.forEach(function (tabSelector) {
-    tabParagraphs(tabSelector).contents().unwrap().wrapAll('<p>');
-  });
-
   function tabParagraphs(selector) {
     return $('.mu-kids-character-speech-bubble > .mu-kids-character-speech-bubble-normal > div' + selector + ' > p');
   }
 
-  updateSpeechParagraphs();
   function updateSpeechParagraphs() {
     $speechParagraphs = tabParagraphs('.' + getSelectedTabName());
     resizeSpeechParagraphs(0);
   }
 
-  resizeSpeechParagraphs();
-
-  $speechTabs.each(function (i) {
-    var $tab = $($speechTabs[i]);
-    $tab.click(function () {
-      $speechTabs.removeClass('active');
-      $tab.addClass('active');
-      $texts.hide();
-      $bubble.children('.' + $tab.data('target')).show();
-      updateSpeechParagraphs();
-    })
-  });
-
-  if(paragraphCount > 1) {
-    nextSpeechBlinking = setInterval(() => $nextSpeech.fadeTo('slow', 0.1).fadeTo('slow', 1.0), 1000);
-  }
-
-  $nextSpeech.click(function () {
-    showParagraph(currentParagraphIndex + 1);
-    clearInterval(nextSpeechBlinking);
-  });
-
-  $prevSpeech.click(function () {
-    showParagraph(currentParagraphIndex - 1);
-  });
-
   function getSelectedTabName() {
     return $speechTabs.filter(".active").data('target') || $defaultSpeechTabName;
   }
@@ -85,95 +54,114 @@ mumuki.load(function () {
     isVisible ? element.show() : element.hide();
   }
 
-  mumuki.resize(function () {
-    var margin = 15;
-    var fullMargin = margin * 2;
-
-    var gbsBoard = $('.mu-kids-state');
-
-    var dimension = gbsBoard.height() * 1.25 - fullMargin;
-    gbsBoard.width(dimension);
-
-    var $muKidsExercise = $('.mu-kids-exercise');
-    var $muKidsExerciseDescription = $('.mu-kids-exercise-description');
+  mumuki.kids = {
 
-    $muKidsExerciseDescription.width($muKidsExercise.width() - gbsBoard.width() - margin);
+    // ==========
+    // Public API
+    // ==========
+
+    // Sets a function that will be called each
+    // time the states need to be resized. The function takes:
+    //
+    // * $state: a single state area
+    // * fullMargin
+    // * preferredWidth
+    // * preferredHeight
+    //
+    // Runners must call this method on within the runner's editor.js extension
+    registerStateScaler: function(scaler) {
+      this._stateScaler = scaler;
+    },
 
-    gbsBoard.each(function (i) {
-      gsBoardScale($(gbsBoard[i]));
-    });
+    // Sets a function that will be called each
+    // time the blocks area needs to be resized. The function takes:
+    //
+    // * $blocks: the blocks area
+    //
+    // Runners must call this method on within the runner's editor.js extension
+    registerBlocksAreaScaler: function(scaler) {
+      this._blocksAreaScaler = scaler;
+    },
 
-    var $muKidsBlocks = $('.mu-kids-blocks');
-    var $blockArea = $muKidsBlocks.find('#blocklyDiv');
-    var $blockSvg = $muKidsBlocks.find('.blocklySvg');
+    // Scales a single state.
+    //
+    // This method is called by the kids code, but the runner's editor.js extension may need
+    // to perform additional calls to it.
+    scaleState: function ($state, fullMargin) {
+      const preferredWidth = $state.width() - fullMargin * 2;
+      const preferredHeight = $state.height() - fullMargin * 2;
+      this._stateScaler($state, fullMargin, preferredWidth, preferredHeight);
+    },
 
-    $blockArea.width($muKidsBlocks.width());
-    $blockArea.height($muKidsBlocks.height());
+    // Scales the blocks area.
+    //
+    // This method is called by the kids code, but the runner's editor.js extension may need
+    // to perform additional calls to it.
+    scaleBlocksArea: function($blocks) {
+      this._blocksAreaScaler($blocks);
+    },
 
-    $blockSvg.width($muKidsBlocks.width());
-    $blockSvg.height($muKidsBlocks.height());
+    // Displays the kids results, updating the progress bar
+    // firing the modal and running appropriate animations.
+    //
+    // This method needs to be called by the runner's editor.html extension
+    // in order to finish an exercise
+    showResult: function (data) {
+      mumuki.updateProgressBarAndShowModal(data);
+      if (data.guide_finished_by_solution) return;
+      mumuki.kids.resultAction[data.status](data);
+    },
 
-    function gsBoardScale($element) {
-      var $table = $element.find('gs-board > table');
-      $table.css('transform', 'scale(1)');
-      var scaleX = ($element.width() - fullMargin * 2) / $table.width();
-      var scaleY = ($element.height() - fullMargin * 2) / $table.height();
-      $table.css('transform', 'scale(' + Math.min(scaleX, scaleY) + ')');
-    }
+    // Restarts the kids exercise.
+    //
+    // This method may need to be called by the runner's editor.html extension
+    // in order to recover from a failed submission
+    restart: function () {
+      mumuki.kids._hideMessageOnCharacterBubble();
+      var $bubble = mumuki.kids._getCharacterBubble();
+      Object.keys(mumuki.kids.resultAction).forEach($bubble.removeClass.bind($bubble));
+      mumuki.presenterCharacter.playAnimation('jump', mumuki.kids._getCharaterImage());
+    },
 
-    resizeSpeechParagraphs();
-  });
+    // ===========
+    // Private API
+    // ===========
 
-  mumuki.kids = {
+    _updateSubmissionResult: function (html) {
+      return $('.submission-results').html(html);
+    },
 
-    getResultsModal: function () {
+    _getResultsModal: function () {
       return $('#kids-results');
     },
 
-    getResultsAbortedModal: function () {
+    _getResultsAbortedModal: function () {
       return $('#kids-results-aborted');
     },
 
-    getCharaterImage: function () {
+    _getCharaterImage: function () {
       return $('.mu-kids-character > img');
     },
 
-    getCharacterBubble: function () {
+    _getCharacterBubble: function () {
       return $('.mu-kids-character-speech-bubble');
     },
 
-    getSubmissionResult: function () {
-      return $('.submission-results');
-    },
-
-    getOverlay: function () {
+    _getOverlay: function () {
       return $('.mu-kids-overlay');
     },
 
-    showResult: function (data) {  // This function is called by the custom runner
-      mumuki.updateProgressBarAndShowModal(data);
-      if (data.guide_finished_by_solution) return;
-      mumuki.kids.resultAction[data.status](data);
-    },
-
-    restart: function () {  // This function is called by the custom runner
-      mumuki.kids._hideMessageOnCharacterBubble();
-      var $bubble = mumuki.kids.getCharacterBubble();
-      Object.keys(mumuki.kids.resultAction).forEach($bubble.removeClass.bind($bubble));
-      mumuki.kids.getCharaterImage().attr('src', '/kibi_animated.svg');
-    },
-
     _hideMessageOnCharacterBubble: function () {
-      var $bubble = mumuki.kids.getCharacterBubble();
+      var $bubble = mumuki.kids._getCharacterBubble();
       $bubble.find('.mu-kids-character-speech-bubble-tabs').show();
       $bubble.find('.mu-kids-character-speech-bubble-normal').show();
       $bubble.find('.mu-kids-character-speech-bubble-failed').hide();
       Object.keys(mumuki.kids.resultAction).forEach($bubble.removeClass.bind($bubble));
-      mumuki.kids.getOverlay().hide();
+      mumuki.kids._getOverlay().hide();
     },
 
     _showMessageOnCharacterBubble: function (data) {
-      var $bubble = mumuki.kids.getCharacterBubble();
+      var $bubble = mumuki.kids._getCharacterBubble();
       $bubble.find('.mu-kids-character-speech-bubble-tabs').hide();
       $bubble.find('.mu-kids-character-speech-bubble-normal').hide();
       $bubble.find('.mu-kids-character-speech-bubble-failed').show().html(data.title_html);
@@ -181,73 +169,89 @@ mumuki.load(function () {
       if (data.status === 'passed_with_warnings') {
         $bubble.find('.mu-kids-character-speech-bubble-failed').append(data.expectations_html);
       }
-      mumuki.kids.getOverlay().show();
+      mumuki.kids._getOverlay().show();
     },
 
     _showOnSuccessPopup: function (data) {
-      mumuki.kids.getSubmissionResult().html(data.html);
-      mumuki.kids.getCharaterImage().attr('src', '/kibi_success.svg');
+      mumuki.kids._updateSubmissionResult(data.html);
+      mumuki.presenterCharacter.playAnimation('success_l', mumuki.kids._getCharaterImage());
       mumuki.kids._showMessageOnCharacterBubble(data);
+      mumuki.presenterCharacter.playAnimation('success2_l', $('.mu-kids-character-success'));
       setTimeout(function () {
-        var results_kids_modal = mumuki.kids.getResultsModal();
-        if (results_kids_modal) {
-          results_kids_modal.modal({
+        var $resultsKidsModal = mumuki.kids._getResultsModal();
+        if ($resultsKidsModal) {
+          $resultsKidsModal.modal({
             backdrop: 'static',
             keyboard: false
           });
-          results_kids_modal.find('.modal-header').first().html(data.title_html);
-          results_kids_modal.find('.modal-footer').first().html(data.button_html);
+          $resultsKidsModal.find('.modal-header').first().html(data.title_html);
+          $resultsKidsModal.find('.modal-footer').first().html(data.button_html);
           mumuki.kids._showCorollaryCharacter();
-          $('.mu-close-modal').click(() => $('#kids-results').modal('hide'));
+          $('.mu-close-modal').click(() => mumuki.kids._getResultsModal().modal('hide'));
         }
       }, 1000 * 4);
     },
 
     _showOnFailurePopup: function () {
       mumuki.kids.submitButton.disable();
-      mumuki.kids.getResultsAbortedModal().modal();
+      mumuki.kids._getResultsAbortedModal().modal();
       mumuki.submission.animateTimeoutError(mumuki.kids.submitButton);
     },
 
     _showOnCharacterBubble: function (data) {
-      mumuki.kids.getCharaterImage().attr('src', '/kibi_failure.svg');
+      mumuki.presenterCharacter.playAnimation('failure', mumuki.kids._getCharaterImage());
       mumuki.kids._showMessageOnCharacterBubble(data);
     },
 
     _showCorollaryCharacter: function () {
-      var image = $('#mu-kids-corollary-animation')[0];
-      image && setTimeout(function () {
-        image.src = mumuki.characters.magnifying_glass_apparition.url;
-        setTimeout(function () {
-          image.src = mumuki.characters.magnifying_glass_loop.url;
-        }, mumuki.characters.magnifying_glass_apparition.duration);
-      }, 500);
+      mumuki.characters.magnifying_glass.playAnimation('show', $('.mu-kids-corollary-animation'));
+    },
+
+    _stateScaler: function ($state, fullMargin, preferredWidth, preferredHeight) {
+      var $table = $state.find('gs-board > table');
+      if(!$table.length) return setTimeout(() => this.scaleState($state, fullMargin));
+
+      console.warn("You are using the default states scaler, which is gobstones-specific. Please register your own scaler in the future");
+
+      $table.css('transform', 'scale(1)');
+      var scaleX = preferredWidth / $table.width();
+      var scaleY = preferredHeight / $table.height();
+      $table.css('transform', 'scale(' + Math.min(scaleX, scaleY) + ')');
+    },
+
+    _blocksAreaScaler: function($blocks) {
+      console.warn("You are using the default blocks scaler, which is blockly-specific. Please register your own scaler in the future");
+
+      var $blockArea = $blocks.find('#blocklyDiv');
+      var $blockSvg = $blocks.find('.blocklySvg');
+
+      $blockArea.width($blocks.width());
+      $blockArea.height($blocks.height());
+
+      $blockSvg.width($blocks.width());
+      $blockSvg.height($blocks.height());
     },
 
     resultAction: {}
 
   };
 
-  _createSubmitButton = function () {
-    var submitButton = $('#kids-btn-retry');
-    var submissionControl = $('.submission_control');
-    return new mumuki.submission.SubmitButton(submitButton, submissionControl);
-  };
+  mumuki.kids.submitButton = new mumuki.submission.SubmitButton($('#kids-btn-retry'), $('.submission_control'));
 
-  mumuki.kids.submitButton = _createSubmitButton();
+  function showPrevParagraph() {
+    animateSpeech();
+    showParagraph(currentParagraphIndex - 1);
+  }
 
-  mumuki.showKidsResult = function (data) {
-    mumuki.updateProgressBarAndShowModal(data);
-    if (data.guide_finished_by_solution) return;
-    mumuki.kids.getSubmissionResult().html(data.html);
+  function showNextParagraph() {
+    animateSpeech();
+    showParagraph(currentParagraphIndex + 1);
+    clearInterval(nextSpeechBlinking);
+  }
 
-    var results_kids_modal = mumuki.kids.getResultsModal();
-    if (results_kids_modal) {
-      results_kids_modal.modal();
-      results_kids_modal.find('.modal-header').first().html(data.title_html);
-      results_kids_modal.find('.modal-footer').first().html(data.button_html);
-    }
-  };
+  function animateSpeech() {
+    mumuki.presenterCharacter.playAnimation('talk', mumuki.kids._getCharaterImage());
+  }
 
   mumuki.kids.resultAction.passed = mumuki.kids._showOnSuccessPopup;
   mumuki.kids.resultAction.passed_with_warnings = mumuki.kids._showOnCharacterBubble;
@@ -258,4 +262,56 @@ mumuki.load(function () {
   mumuki.kids.resultAction.errored = mumuki.kids._showOnCharacterBubble;
   mumuki.kids.resultAction.pending = mumuki.kids._showOnCharacterBubble;
 
+  $(document).ready(() => {
+    // Speech initialization
+
+    availableTabs.forEach(function (tabSelector) {
+      tabParagraphs(tabSelector).contents().unwrap().wrapAll('<p>');
+    });
+
+    updateSpeechParagraphs();
+
+    resizeSpeechParagraphs();
+
+    $speechTabs.each(function (i) {
+      var $tab = $($speechTabs[i]);
+      $tab.click(function () {
+        $speechTabs.removeClass('active');
+        $tab.addClass('active');
+        $texts.hide();
+        $bubble.children('.' + $tab.data('target')).show();
+        updateSpeechParagraphs();
+      })
+    });
+
+    if(paragraphCount > 1) {
+      nextSpeechBlinking = setInterval(() => $nextSpeech.fadeTo('slow', 0.1).fadeTo('slow', 1.0), 1000);
+    }
+
+    $nextSpeech.click(showNextParagraph);
+    $prevSpeech.click(showPrevParagraph);
+
+    // States initial resizing
+
+    mumuki.resize(function () {
+      var margin = 15;
+      var fullMargin = margin * 2;
+
+      var $muKidsStatesContainer = $('.mu-kids-states');
+      var $muKidsStates = $('.mu-kids-state');
+
+      var dimension = $muKidsStatesContainer.height() / 2 * 1.25 - fullMargin;
+      $muKidsStatesContainer.width(dimension);
+
+      var $muKidsExercise = $('.mu-kids-exercise');
+      var $muKidsExerciseDescription = $('.mu-kids-exercise-description');
+
+      $muKidsExerciseDescription.width($muKidsExercise.width() - $muKidsStatesContainer.width() - margin);
+
+      $muKidsStates.each((index, state) => mumuki.kids.scaleState($(state), fullMargin));
+      mumuki.kids.scaleBlocksArea($('.mu-kids-blocks'));
+
+      resizeSpeechParagraphs();
+    });
+  })
 });