mumuki-laboratory 7.11.1 → 8.1.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 903851981f51f22780009e65ff573bddce2b56e08beb8275fa72697234d28677
-  data.tar.gz: b3b792488e50dda3738fcf4ad0927f18ad3648c240d2391d77504b823ae6a8d2
+  metadata.gz: '09a264d9715c09e4cae736ed4e03396ce77befb1a1cd6c4f78834288ec8c1e3a'
+  data.tar.gz: d03d848615882618547802ebb1904b706e730007e9ba13e0633aa13e789dd562
 SHA512:
-  metadata.gz: b2d82a1055c55db3410f36e594932c9f8a17e3ae2cd145c844066e3897018f2699fa1b399b5ca26dd96f772a356c509e7153c41f0ed635fec34e7f8499b0770e
-  data.tar.gz: 891fd97d04e4192d74b6b96990c481064f431eadb0a27a4b828ac660f24f11263c1f07fdf99f246a6a14f16b35aef6a21783bda98c1d67d78b94ce5f369aaaea
+  metadata.gz: f6bf1f52891c8714f6d1176dbfe11a603620d6d6fd1b4bbd772c90f0c31054e7159354f83c1bc6aa04703892d04c66d019d0158f5da070b65ac27c0705086e68
+  data.tar.gz: 3076de824027e2950c5be6604901cc2e09193ee9959b16791047454c9ee06ca978f8da8fce9eb31d95d0c2a9fedac3b92ae7532dccc4c809982b500d2d986977

data/README.md

@@ -1,6 +1,5 @@
-[![Build Status](https://travis-ci.org/mumuki/mumuki-laboratory.svg?branch=master)](https://travis-ci.org/mumuki/mumuki-laboratory)
+[![Build Status](https://travis-ci.com/mumuki/mumuki-laboratory.svg?branch=master)](https://travis-ci.com/mumuki/mumuki-laboratory)
 [![Code Climate](https://codeclimate.com/github/mumuki/mumuki-laboratory/badges/gpa.svg)](https://codeclimate.com/github/mumuki/mumuki-laboratory)
-[![Test Coverage](https://codeclimate.com/github/mumuki/mumuki-laboratory/badges/coverage.svg)](https://codeclimate.com/github/mumuki/mumuki-laboratory)
 [![Issue Count](https://codeclimate.com/github/mumuki/mumuki-laboratory/badges/issue_count.svg)](https://codeclimate.com/github/mumuki/mumuki-laboratory)
 
 <img width="60%" src="https://raw.githubusercontent.com/mumuki/mumuki-laboratory/master/laboratory-screenshot.png"></img>

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

@@ -9,8 +9,10 @@ mumuki.load(() => {
   });
 
   function placeKidsAnimations() {
+    placeAnimation('.mu-kids-character-result-aborted', 'failure');
     placeAnimation('.mu-kids-character-animation', 'blink');
     placeAnimation('.mu-kids-character-context', 'context');
+    placeAnimation('.mu-kids-character-result', 'blink');
   }
 
   function placeAnimation(selector, clip) {
@@ -20,7 +22,7 @@ mumuki.load(() => {
 
   function atRandom(array) {
     return array[Math.floor(Math.random() * array.length)];
-  }  
+  }
 
   mumuki.characters = characters;
 });

data/app/assets/javascripts/mumuki_laboratory/application/gamification.js

@@ -5,9 +5,22 @@ mumuki.gamification = (() => {
     static get CONSTANT_TERM()          { return -125; }
   }
 
+  class DummyLevelProgression {
+    setExpMessage() {}
+
+    registerLevelUpAction() {}
+
+    registerGainedExperienceAction() {}
+
+    updateLevel() {}
+  }
+
   class LevelProgression {
     constructor(currentExp) {
       this.currentExp = currentExp;
+      this.lastEarnedExp = 0;
+      this._levelUpAction = this.defaultLevelUpAction;
+      this._gainedExperienceAction = this.defaultGainedExperienceAction;
     }
 
     expToLevelUp() {
@@ -38,8 +51,8 @@ mumuki.gamification = (() => {
       return Math.floor((-b + Math.sqrt(Math.pow(b, 2) - 4 * a * (c - exp))) / (2 * a));
     }
 
-    triggersLevelChange(exp) {
-      return this.levelFor(exp) !== this.currentLevel();
+    triggersLevelChange(newExp) {
+      return this.levelFor(this.currentExp + newExp) !== this.currentLevel();
     }
 
     currentLevelProgress() {
@@ -50,23 +63,87 @@ mumuki.gamification = (() => {
       return this.expFor(this.currentLevel());
     }
 
-    setExpMessage(exp) {
-      let expGained = exp - this.currentExp;
+    exercisesToNextLevel() {
+      return Math.ceil(this.expToLevelUp() / 100);
+    }
+
+    setExpMessage(data) {
+      const exp = data.current_exp;
+      this.lastEarnedExp = exp - this.currentExp;
+
+      if (this.lastEarnedExp > 0) {
+        this.levelUpActionIfLevelUp(data.level_up_html);
+        this._gainedExperienceAction();
 
-      if (expGained > 0) {
         this.currentExp = exp;
-        $('#mu-exp-points').html(expGained);
-        $('#mu-level-number').html(this.currentLevel());
+        this.updateLevel();
+      }
+    }
+
+    defaultGainedExperienceAction() {
+      $('#mu-exp-points').html(this.lastEarnedExp);
+      $('#mu-exp-earned-message').removeClass('hidden');
+    }
+
+    defaultLevelUpAction(_levelUpHtml) {
+      $('#mu-level-up').modal();
+    }
+
+    registerLevelUpAction(action) {
+      this._levelUpAction = action;
+    }
+
+    registerGainedExperienceAction(action) {
+      this._gainedExperienceAction = action;
+    }
+
+    levelUpActionIfLevelUp(levelUpHtml) {
+      if (this.triggersLevelChange(this.lastEarnedExp)) {
+        this._levelUpAction(levelUpHtml);
       }
     }
+
+    animateExperienceCounter(selector) {
+      mumuki.animateNumberCounter(selector, this.lastEarnedExp);
+    }
+
+    updateLevel() {
+      const $muLevelProgress = $('#mu-level-progress');
+
+      $('#mu-solve-more-exercises span').text(this.exercisesToNextLevel());
+      $('.mu-level-number').html(this.currentLevel());
+      $('.mu-level-tooltip').attr("title", (_, value) => `${value} ${this.currentLevel()}`);
+
+      if (this.currentLevelProgress() === 0) {
+        $muLevelProgress.attr("display", "none");
+      }
+
+      $muLevelProgress.animate(
+        {'progress': this.currentLevelProgress() * 250},
+        {
+          step: function(progress) {
+            let pattern = progress + ", 999";
+            $(this).attr("stroke-dasharray", pattern);
+          },
+          duration: 1000
+        });
+    }
   }
 
   function _setUpCurrentLevelProgression() {
-    mumuki.gamification._currentLevelProgression = new LevelProgression(currentExp());
+    if (_gamificationEnabled()) {
+      mumuki.gamification.currentLevelProgression = new LevelProgression(currentExp());
+    } else {
+      mumuki.gamification.currentLevelProgression = new DummyLevelProgression();
+    }
+  }
+
+  function _gamificationEnabled() {
+    return $('#mu-current-exp').length;
   }
 
   function currentExp() {
-    return $('#mu-current-exp').val();
+    return parseInt($('#mu-current-exp').val());
   }
 
   return {
@@ -75,11 +152,12 @@ mumuki.gamification = (() => {
 
     _setUpCurrentLevelProgression,
 
-    /** @type {LevelProgression} */
-    _currentLevelProgression: null
+    /** @type {LevelProgression|DummyLevelProgression} */
+    currentLevelProgression: null
   };
 })();
 
 mumuki.load(() => {
   mumuki.gamification._setUpCurrentLevelProgression();
+  mumuki.gamification.currentLevelProgression.updateLevel();
 });

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

@@ -1,379 +1,217 @@
-mumuki.load(() => {
-  let $bubble = $('.mu-kids-character-speech-bubble').children('.mu-kids-character-speech-bubble-normal');
-
-  let availableTabs = ['.description', '.hint'];
-  let $speechParagraphs, paragraphHeight, scrollHeight, nextSpeechBlinking;
-  let currentParagraphIndex = 0;
-  let paragraphCount = 1;
-  let paragraphsLines = 2;
-  let $prevSpeech = $('.mu-kids-character-speech-bubble-normal > .mu-kids-prev-speech').hide();
-  let $nextSpeech = $('.mu-kids-character-speech-bubble-normal > .mu-kids-next-speech');
-  let $speechTabs = $('.mu-kids-character-speech-bubble-tabs > li:not(.separator)');
-  let $defaultSpeechTabName = 'description';
-  let $texts = $bubble.children(availableTabs.join(", "));
-  let $hint = $('.mu-kids-hint');
-  let $description = $('.mu-kids-description');
-  let discussionsLinkHtml = $('#mu-kids-discussion-link-html').html();
-  let $kidsContext = $('#mu-kids-context');
-  let contextModalButton = new mumuki.Button($('.mu-kids-context .modal-footer button'));
-
-  // It is important that context is shown as early as possible
-  // in order to display the loading animation
-  function showContext() {
-    $kidsContext.modal({
-      backdrop: 'static',
-      keyboard: false
-    });
+mumuki.Kids = class {
+
+  constructor() {
+    this.initialize();
+    this.showContext();
+    $(document).ready(this.onReady.bind(this));
   }
 
-  $kidsContext.on('hidden.bs.modal', function () {
-    animateSpeech();
-  });
+  // ================
+  // == Public API ==
+  // ================
+
+  initialize() {
+    this.submitButton = new mumuki.submission.SubmitButton($('#kids-btn-retry'), $('.submission_control'));
+    this.resultActions = {};
+    this.$states = $('.mu-kids-states');
+    this.$state = $('.mu-kids-state');
+    this.$blocks = $('.mu-kids-blocks');
+    this.$exercise = $('.mu-kids-exercise');
+    this.$exerciseDescription = $('.mu-kids-exercise-description');
+    this.$stateImage = $('.mu-kids-state-image');
+    this.$contextModal = $('#mu-kids-context');
+    this.$resultsModal = $('#kids-results');
+    this.resultsCarrousel = new mumuki.ModalCarrousel('.mu-kids-results-carrousel');
+    this.$resultsAbortedModal = $('#kids-results-aborted');
+    this.$bubbleCharacterAnimation = $('.mu-kids-character-animation');
+    this.$submissionResult =  $('.submission-results');
+    mumuki.gamification.currentLevelProgression.registerLevelUpAction(this.levelUpAction);
+    mumuki.gamification.currentLevelProgression.registerGainedExperienceAction(this.gainedExperienceAction);
+  }
 
-  showContext();
+  gainedExperienceAction() {
+    mumuki.gamification.currentLevelProgression.animateExperienceCounter('.mu-kids-results .mu-experience');
+  }
 
-  function floatFromPx(value) {
-    return parseFloat(value.substring(0, value.length - 2));
+  levelUpAction(levelUpHtml) {
+    $('.mu-kids-results-carrousel').append(levelUpHtml);
   }
 
-  function resizeSpeechParagraphs(paragraphIndex) {
-    var previousParagraphCount = paragraphCount;
-    scrollHeight = $bubble[0].scrollHeight;
-    paragraphHeight = floatFromPx($speechParagraphs.css('line-height')) * paragraphsLines;
-    paragraphCount = Math.ceil(scrollHeight / paragraphHeight);
-    var newParagraphIndex = Math.floor((paragraphCount / previousParagraphCount) * currentParagraphIndex);
-    showParagraph(paragraphIndex || newParagraphIndex);
+  showContext() {
+    this.$contextModal.modal({
+      backdrop: 'static',
+      keyboard: false
+    });
   }
 
-  function tabParagraphs(selector) {
-    return $('.mu-kids-character-speech-bubble > .mu-kids-character-speech-bubble-normal > div' + selector + ' > p');
+  showNonAbortedPopup(data, animation_name, open_modal_delay_ms = 0) {
+    this.$submissionResult.html(data.html);
+    mumuki.presenterCharacter.playAnimation(animation_name, $('.mu-kids-character-result'));
+    setTimeout(() => this._openSubmissionResultModal(data), open_modal_delay_ms);
+    this.onNonAbortedPopupCall(data);
   }
 
-  function updateSpeechParagraphs() {
-    $speechParagraphs = tabParagraphs('.' + getSelectedTabName());
-    resizeSpeechParagraphs(0);
+  showAbortedPopup(_data) {
+    this.submitButton.disable();
+    this.$resultsAbortedModal.modal();
   }
 
-  function getSelectedTabName() {
-    return $speechTabs.filter(".active").data('target') || $defaultSpeechTabName;
+  // ==================
+  // == Hook Methods ==
+  // ==================
+
+  _showSuccessPopup() {
+    this._mustImplementThisMethod()
   }
 
-  function showParagraph(index) {
-    $bubble[0].scrollTop = index * paragraphHeight;
-    currentParagraphIndex = index;
-    checkArrowsSpeechVisibility();
+  _showFailurePopup() {
+    this._mustImplementThisMethod()
   }
 
-  function checkArrowsSpeechVisibility() {
-    setVisibility($prevSpeech, currentParagraphIndex !== 0);
-    setVisibility($nextSpeech, currentParagraphIndex !== paragraphCount - 1);
+  // ====================
+  // == Event Callback ==
+  // ====================
+
+  onReady() {
+    // SubClasses may override this method
   }
 
-  function setVisibility(element, isVisible) {
-    isVisible ? element.show() : element.hide();
+  onResize() {
+    // SubClasses may override this method
   }
 
-  /**
-   * Assigns propert widths to the states and blocks areas
-   * depending on the presence and type of available states
-   *
-   * @param {*} $muKidsStateImage
-   * @param {*} $muKidsStatesContainer
-   * @param {*} $muKidsBlocks
-   * @param {number} fullMargin
-   */
-  function distributeAreas($muKidsStateImage, $muKidsStatesContainer, $muKidsBlocks, fullMargin) {
-    if ($muKidsStateImage.children().length) {
-      var ratio = $muKidsStatesContainer.hasClass('mu-kids-single-state') ? 1 : 2;
-      $muKidsStatesContainer.width($muKidsStatesContainer.height() / ratio * 1.25 - fullMargin);
-    } else {
-      $muKidsStatesContainer.width(0);
-      $muKidsBlocks.width('100%');
-    }
+  onNonAbortedPopupCall(_data) {
+    // SubClasses may override this method
   }
 
-  mumuki.kids = {
-
-    // ==========
-    // 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;
-    },
-
-    // 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;
-    },
-
-    // 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);
-    },
-
-    // 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);
-    },
-
-    // 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);
-    },
-
-    // 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('talk', mumuki.kids._getCharacterImage());
-    },
-
-    disableContextModalButton: function () {
-      contextModalButton.setWaiting();
-    },
-
-    enableContextModalButton: function () {
-      contextModalButton.enable();
-    },
-
-    showContext,
-
-    // ===========
-    // Private API
-    // ===========
-
-    _updateSubmissionResult: function (html) {
-      return $('.submission-results').html(html);
-    },
-
-    _getResultsModal: function () {
-      return $('#kids-results');
-    },
-
-    _getResultsAbortedModal: function () {
-      return $('#kids-results-aborted');
-    },
-
-    _getCharacterImage: function () {
-      return $('.mu-kids-character > img');
-    },
-
-    _getCharacterBubble: function () {
-      return $('.mu-kids-character-speech-bubble');
-    },
-
-    _getOverlay: function () {
-      return $('.mu-kids-overlay');
-    },
-
-    _hideMessageOnCharacterBubble: function () {
-      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();
-      $bubble.find('.mu-kids-discussion-link').remove();
-      Object.keys(mumuki.kids.resultAction).forEach($bubble.removeClass.bind($bubble));
-      mumuki.kids._getOverlay().hide()
-    },
-
-    _showMessageOnCharacterBubble: function (data) {
-      const renderer = new mumuki.renderers.SpeechBubbleRenderer(mumuki.kids._getCharacterBubble());
-      renderer.setDiscussionsLinkHtml(discussionsLinkHtml);
-      renderer.setResponseData(data);
-      renderer.render();
-      mumuki.kids._getOverlay().show();
-    },
-
-    _showOnSuccessPopup: function (data) {
-      mumuki.kids._updateSubmissionResult(data.html);
-      mumuki.presenterCharacter.playAnimation('success_l', mumuki.kids._getCharacterImage());
-      mumuki.kids._showMessageOnCharacterBubble(data);
-      mumuki.presenterCharacter.playAnimation('success2_l', $('.mu-kids-character-success'));
-      setTimeout(function () {
-        var $resultsKidsModal = mumuki.kids._getResultsModal();
-        if ($resultsKidsModal) {
-          $resultsKidsModal.modal({
-            backdrop: 'static',
-            keyboard: false
-          });
-          $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(() => mumuki.kids._getResultsModal().modal('hide'));
-        }
-      }, 1000 * 4);
-    },
-
-    _showOnFailurePopup: function () {
-      mumuki.kids.submitButton.disable();
-      mumuki.kids._getResultsAbortedModal().modal();
-      mumuki.submission.animateTimeoutError(mumuki.kids.submitButton);
-    },
-
-    _showOnCharacterBubble: function (data) {
-      mumuki.presenterCharacter.playAnimation('failure', mumuki.kids._getCharacterImage());
-      mumuki.kids._showMessageOnCharacterBubble(data);
-    },
-
-    _showCorollaryCharacter: function () {
-      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: {}
-
-  };
-
-  mumuki.kids.submitButton = new mumuki.submission.SubmitButton($('#kids-btn-retry'), $('.submission_control'));
-
-  function showPrevParagraph() {
-    animateSpeech();
-    showParagraph(currentParagraphIndex - 1);
+  onSubmissionResultModalOpen(_data) {
+    this.resultsCarrousel.show();
   }
 
-  function showNextParagraph() {
-    animateSpeech();
-    showParagraph(currentParagraphIndex + 1);
-    clearInterval(nextSpeechBlinking);
+  // =================
+  // == Private API ==
+  // =================
+
+  _openSubmissionResultModal(data) {
+    this.$resultsModal.modal({ backdrop: 'static', keyboard: false });
+    this.$resultsModal.find('.modal-header').first().html(data.title_html);
+    mumuki.gamification.currentLevelProgression.setExpMessage(data);
+    this.$resultsModal.find('.modal-footer').first().html(data.button_html);
+    $('.mu-close-modal').click(() => this.$resultsModal.modal('hide'));
+    this.onSubmissionResultModalOpen(data);
   }
 
-  function animateSpeech() {
-    mumuki.presenterCharacter.playAnimation('talk', mumuki.kids._getCharacterImage());
+  // ==========================
+  // == Called by the runner ==
+  // ==========================
+
+  // Displays the exercise 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(data) {
+    mumuki.progress.updateProgressBarAndShowModal(data);
+    if (data.guide_finished_by_solution) return;
+    this.resultActions[data.status](data);
   }
 
-  function animateHint() {
-    mumuki.presenterCharacter.playAnimation('hint', mumuki.kids._getCharacterImage());
+  // 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() {
+    this._mustImplementThisMethod();
   }
 
-  mumuki.kids.resultAction.passed = mumuki.kids._showOnSuccessPopup;
-  mumuki.kids.resultAction.passed_with_warnings = mumuki.kids._showOnCharacterBubble;
+  // =================================
+  // == Called by the assets loader ==
+  // =================================
 
-  mumuki.kids.resultAction.aborted = mumuki.kids._showOnFailurePopup;
+  disableContextModalButton() {
+    this.$contextModalButton.setWaiting();
+  }
 
-  mumuki.kids.resultAction.failed = mumuki.kids._showOnCharacterBubble;
-  mumuki.kids.resultAction.errored = mumuki.kids._showOnCharacterBubble;
-  mumuki.kids.resultAction.pending = mumuki.kids._showOnCharacterBubble;
+  enableContextModalButton() {
+    this.$contextModalButton.enable();
+  }
 
+  // ============
+  // == Helper ==
+  // ============
 
-  $(document).ready(() => {
-    // Speech initialization
-    if (!$bubble.length) return;
+  _mustImplementThisMethod() {
+    throw new Error('TODO: implement method')
+  }
 
-    availableTabs.forEach(function (tabSelector) {
-      tabParagraphs(tabSelector).contents().unwrap().wrapAll('<p>');
-    });
+  // ============
+  // == Scaler ==
+  // ============
+
+  // 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(scaler) {
+    this._stateScaler = scaler;
+  }
 
-    updateSpeechParagraphs();
-
-    resizeSpeechParagraphs();
-
-    $speechTabs.each(function (i) {
-      var $tab = $($speechTabs[i]);
-      if ($tab.data('target')) {
-        $tab.click(function () {
-          $speechTabs.removeClass('active');
-          $tab.addClass('active');
-          $texts.hide();
-          $bubble.children('.' + $tab.data('target')).show();
-          updateSpeechParagraphs();
-        })
-      }
-    });
+  // 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(scaler) {
+    this._blocksAreaScaler = scaler;
+  }
 
-    if (paragraphCount > 1) {
-      nextSpeechBlinking = mumuki.setInterval(() => $nextSpeech.fadeTo('slow', 0.1).fadeTo('slow', 1.0), 1000);
-    }
+  // 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($state, fullMargin) {
+    const preferredWidth = $state.width() - fullMargin * 2;
+    const preferredHeight = $state.height() - fullMargin * 2;
+    this._stateScaler($state, fullMargin, preferredWidth, preferredHeight);
+  }
 
-    $nextSpeech.click(showNextParagraph);
-    $prevSpeech.click(showPrevParagraph);
-    $description.click(animateSpeech);
+  // 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($blocks) {
+    this._blocksAreaScaler($blocks);
+  }
 
-    $hint.click(function () {
-      animateHint();
-      this.classList.remove('blink');
-    });
+  _stateScaler($state, fullMargin, preferredWidth, preferredHeight) {
+    const $table = $state.find('gs-board > table');
+    if (!$table.length) return setTimeout(() => this.scaleState($state, fullMargin));
 
-    // States initial resizing
-    mumuki.resize(function () {
-      var margin = 15;
-      var fullMargin = margin * 2;
+    console.warn("You are using the default states scaler, which is gobstones-specific. Please register your own scaler in the future");
 
-      let $muKidsStatesContainer = $('.mu-kids-states');
-      let $muKidsStates = $('.mu-kids-state');
-      let $muKidsBlocks = $('.mu-kids-blocks');
-      let $muKidsExercise = $('.mu-kids-exercise');
-      let $muKidsExerciseDescription = $('.mu-kids-exercise-description');
-      let $muKidsStateImage = $('.mu-kids-state-image');
+    $table.css('transform', 'scale(1)');
+    const scaleX = preferredWidth / $table.width();
+    const scaleY = preferredHeight / $table.height();
+    $table.css('transform', 'scale(' + Math.min(scaleX, scaleY) + ')');
+  }
 
-      distributeAreas($muKidsStateImage, $muKidsStatesContainer, $muKidsBlocks, fullMargin);
+  _blocksAreaScaler($blocks) {
+    console.warn("You are using the default blocks scaler, which is blockly-specific. Please register your own scaler in the future");
 
-      if (!$muKidsExerciseDescription.hasClass('mu-kids-exercise-description-fixed')) {
-        $muKidsExerciseDescription.width($muKidsExercise.width() - $muKidsStatesContainer.width() - margin);
-      }
+    const $blockArea = $blocks.find('#blocklyDiv');
+    const $blockSvg = $blocks.find('.blocklySvg');
 
-      $muKidsStates.each((index, state) => mumuki.kids.scaleState($(state), fullMargin));
-      mumuki.kids.scaleBlocksArea($muKidsBlocks);
+    $blockArea.width($blocks.width());
+    $blockArea.height($blocks.height());
 
-      if (paragraphCount <= 1) clearInterval(nextSpeechBlinking);
+    $blockSvg.width($blocks.width());
+    $blockSvg.height($blocks.height());
+  }
 
-      resizeSpeechParagraphs();
-    });
-  })
-});
+}