mumuki-laboratory 7.11.0 → 7.11.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: d0c77cebf0a256067e6efb7ddedae850ca3814d7b725e6cefeb97d5e6c3138eb
-  data.tar.gz: 615167b22bf23364403a9cf08d5145d82016cc5bbec63105597e9336e237a021
+  metadata.gz: 903851981f51f22780009e65ff573bddce2b56e08beb8275fa72697234d28677
+  data.tar.gz: b3b792488e50dda3738fcf4ad0927f18ad3648c240d2391d77504b823ae6a8d2
 SHA512:
-  metadata.gz: 20880cefe1e04d4211805e23fb59c3601747ad5e7d6136ac3dcf0128fe8b7fcda7e83444fb8a7029857bb9d092a456141a9c5a29e932995cb824a6f6fd9ee53a
-  data.tar.gz: 315d127e5cec996dacae62360c427391ae46a20a59d7f403eef164f030ddf78a5854a93eb2fe11362851f8558136d88b327982b1e4ffb80cf377e18337b8c15c
+  metadata.gz: b2d82a1055c55db3410f36e594932c9f8a17e3ae2cd145c844066e3897018f2699fa1b399b5ca26dd96f772a356c509e7153c41f0ed635fec34e7f8499b0770e
+  data.tar.gz: 891fd97d04e4192d74b6b96990c481064f431eadb0a27a4b828ac660f24f11263c1f07fdf99f246a6a14f16b35aef6a21783bda98c1d67d78b94ce5f369aaaea

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

@@ -0,0 +1,144 @@
+mumuki.load(() => {
+  mumuki.kindergarten = {
+    initialize() {
+      this.speech.verifyBrowserSupport();
+      this.hint.showOrHideExpandHintButton();
+      this.context.showNextOrCloseButton();
+      this.result.configureCallbacks();
+    },
+    speech: {
+      _isPlaying: false,
+      click(selector, locale) {
+        if (this._isPlaying) {
+          this.stop();
+        } else {
+          this.play(selector, locale);
+        }
+      },
+      play(selector, locale) {
+        const msg = new SpeechSynthesisUtterance();
+        msg.text = $(selector).text();
+        msg.lang = locale.split('_')[0];
+        msg.pitch = 0;
+        msg.onend = () => this.stop();
+        this._action('play', 'stop', true, (speech) => speech.speak(msg))
+      },
+      stop() {
+        this._action('stop', 'play', false, (speech) => speech.cancel())
+      },
+      _action(add, remove, isPlaying, callback = () => {}) {
+        callback(window.speechSynthesis);
+        const $button = $('.mu-kindergarten-play-description')
+        $button.find(`.mu-kindergarten-${add}`).addClass('hidden');
+        $button.find(`.mu-kindergarten-${remove}`).removeClass('hidden');
+        this._isPlaying = isPlaying;
+      },
+      verifyBrowserSupport() {
+        if (!window.speechSynthesis) {
+          const $button = $('.mu-kindergarten-play-description')
+          $button.prop('disabled', true);
+          $button.css('cursor', 'not-allowed');
+          this._action('play', 'stop', false)
+        }
+      }
+    },
+    hint: {
+      toggle() {
+        $('.mu-kindergarten-light-speech-bubble').toggleClass('open');
+      },
+      toggleMedia() {
+        const $hintMedia = $('.mu-kindergarten-hint-media');
+        const $i = $('.expand-or-collapse-hint-media').children('i');
+        $i.toggleClass('fa-caret-up').toggleClass('fa-caret-down');
+        $hintMedia.toggleClass('closed');
+      },
+      showOrHideExpandHintButton() {
+        const $button = $('.expand-or-collapse-hint-media');
+        const $hintMedia = $('.mu-kindergarten-hint-media');
+        if (!$hintMedia.get(0)) $button.addClass('hidden');
+      },
+    },
+    context: {
+      showContext() {
+        mumuki.kids.showContext();
+        this._showFirstSlideImage();
+      },
+      nextSlide() {
+        this._clickButton('next');
+      },
+      prevSlide() {
+        this._clickButton('prev');
+      },
+      _imageSlides() {
+        return $('.mu-kindergarten-context-image-slides');
+      },
+      _activeSlideImage() {
+        return this._imageSlides().find('.active');
+      },
+      _clickButton(prevOrNext) {
+        this._activeSlideImage().removeClass('active')[prevOrNext]().addClass('active');
+        this.showNextOrCloseButton();
+        this._hidePreviousButtonIfFirstImage();
+      },
+      showNextOrCloseButton() {
+        const $next = $('.mu-kindergarten-modal-button.mu-next');
+        const $close = $('.mu-kindergarten-modal-button.mu-close');
+        const isLastChild = this._activeSlideImage().is(':last-child');
+        this._addClassIf($next, 'hidden', () => isLastChild);
+        this._addClassIf($close, 'hidden', () => !isLastChild);
+      },
+      _hidePreviousButtonIfFirstImage() {
+        const $prev = $('.mu-kindergarten-modal-button.mu-previous');
+        this._addClassIf($prev, 'hidden', () => this._activeSlideImage().is(':first-child'))
+      },
+      _showFirstSlideImage() {
+        this._imageSlides().find('img').each((i, el) => this._addClassIf($(el), 'active', () => i === 0))
+        this.showNextOrCloseButton();
+        this._hidePreviousButtonIfFirstImage();
+      },
+      _addClassIf(element, clazz, criteria) {
+        if (criteria()) {
+          element.addClass(clazz)
+        } else {
+          element.removeClass(clazz);
+        }
+      }
+    },
+    result: {
+      configureCallbacks() {
+        mumuki.kids.resultAction.passed = this._showOnSuccessPopup;
+        mumuki.kids.resultAction.passed_with_warnings = this._showOnSuccessPopup;
+
+        mumuki.kids.resultAction.failed = this._showOnFailurePopup;
+        mumuki.kids.resultAction.errored = this._showOnFailurePopup;
+        mumuki.kids.resultAction.pending = this._showOnFailurePopup;
+      },
+      _showOnSuccessPopup(data) {
+        $('.submission-results').html(data.title_html);
+        mumuki.kids._showOnSuccessPopup(data);
+        $('#kids-results .modal-content').addClass(data.status);
+      },
+      _showOnFailurePopup() {
+        mumuki.kids.submitButton.disable();
+        mumuki.kids._getResultsAbortedModal().modal();
+        mumuki.presenterCharacter.playAnimation('failure', mumuki.kids._getCharacterImage());
+      }
+    }
+  };
+
+  $(document).ready(() => {
+
+    if ($('.mu-kindergarten').get(0)) {
+
+      mumuki.resize(() => {
+        mumuki.kids.scaleState($('.mu-kids-states'), 100);
+        mumuki.kids.scaleBlocksArea($('.mu-kids-blocks'));
+      })
+
+      mumuki.kindergarten.initialize()
+
+    }
+
+  })
+
+});

data/app/assets/stylesheets/mumuki_laboratory/application/modules/_kindergarten.scss

@@ -1,3 +1,6 @@
+$modal-header-height: 95px;
+$modal-footer-height: 95px;
+
 .mu-kids-exercise.mu-kindergarten {
 
   // layout
@@ -8,14 +11,38 @@
   .mu-kids-exercise-workspace {
     display: flex;
     flex-flow: row;
-    height: calc(100% - #{$kids-characters-height});
+    height: calc(100% - #{$kids-characters-height} - 15px);
     width: 100%;
-  }
 
-  .mu-kids-single-state,
-  .mu-kids-blocks {
-    width: 50%;
-    height: 100%
+    .konvajs-content {
+      width: unset !important;
+      height: unset !important;
+      canvas {
+        width: unset !important;
+        height: unset !important;
+      }
+    }
+
+    .mu-kids-single-state,
+    .mu-kids-blocks {
+      width: 50%;
+      height: 100%;
+    }
+
+    .mu-kids-blocks {
+      padding-bottom: 15px;
+    }
+
+    &.mu-full-workspace {
+      .mu-kids-single-state {
+        display: none
+      }
+      .mu-kids-blocks {
+        width: 100%;
+        height: 100%
+      }
+    }
+
   }
 
   .mu-kids-blocks {
@@ -39,18 +66,377 @@
   // no final state,
   // initial state fills its area
 
-  .mu-kids-state.mu-state-initial {
-    height: 100%;
-    width: 100%;
+  .mu-kids-state {
+    &.mu-state-initial {
+      height: 100%;
+      width: 100%;
+    }
+    &.mu-state-final {
+      display: none;
+    }
+    .mu-kids-state-image {
+      padding: 30px;
+      img {
+        padding: 0;
+        border: 5px solid black;
+        border-radius: 30px;
+      }
+    }
   }
 
-  .mu-kids-state.mu-state-final {
+  .mu-kids-compass-rose {
     display: none;
   }
+}
 
-  .mu-kids-compass-rose {
-    display: none;
+.mu-kindergarten.container-fluid {
+  .mu-kids-exercise-description,
+  .mu-kids-exercise-description-fixed {
+    padding: 0;
   }
 }
 
+.mu-kindergarten-context {
+
+  .modal-dialog {
+
+    height: 100vh;
+    width: 100vw;
+    margin: 0;
+
+    .modal-content {
+      position: absolute;
+
+      $width: 800px;
+      $height: $width * 0.625;
+
+      width: $width;
+      height: $height;
+
+      top: calc(50vh - #{$height} / 2);
+      left: calc(50vw - #{$width} / 2);
+
+      $border-width: 16px;
+      border-width: $border-width;
+      border-style: solid;
+      border-color: $mu-color-link;
+      border-radius: $border-width;
+      box-shadow: none;
+
+      .modal-body {
+        height: 100%;
+        div, p {
+          height: 100%;
+          .mu-kindergarten-context-image-slides {
+            img:not(.active) {
+              display: none;
+            }
+          }
+          img {
+            width: 100%;
+            height: 100%;
+            object-position: center;
+            object-fit: contain;
+          }
+        }
+      }
+
+      .mu-kindergarten-modal-button {
+        $diameter: 64px;
+        position: absolute;
+        border-radius: 50%;
+        height: $diameter;
+        width: $diameter;
+        color: white;
+        font-weight: bold;
+        border: none;
+        padding: 0;
+        background: $mu-color-link;
+        &.mu-next,
+        &.mu-close {
+          top: - $diameter / 2 - $border-width / 2;
+          right: - $diameter / 2 - $border-width / 2;
+        }
+        &.mu-previous {
+          top: - $diameter / 2 - $border-width / 2;
+          left: - $diameter / 2 - $border-width / 2;
+        }
+      }
+
+      $mu-statuses-colors: (
+        'broken': $mu-color-broken,
+        'danger': $mu-color-danger,
+        'success': $mu-color-success,
+        'warning': $mu-color-warning,
+        'passed': $mu-color-success,
+        'passed-with-warnings': $mu-color-warning,
+        'failed': $mu-color-danger,
+        'aborted': $mu-color-broken,
+        'pending': $mu-color-info
+      );
+
+      @each $class, $color in $mu-statuses-colors {
+        &.#{$class} {
+          border-color: $color;
+          .mu-kindergarten-modal-button {
+            background: $color;
+          }
+        }
+        .submission-results {
+          width: 100%;
+          height: 100%;
+          .mu-kids-callout-#{$class},
+          p {
+            display: none;
+          }
+          .mu-kids-default-#{$class} {
+            width: 100%;
+            height: 100%;
+            img {
+              width: 100%;
+              height: 100%;
+              object-position: center;
+              object-fit: contain;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+#kids-results.mu-kindergarten-context {
+  .modal-body{
+    height: calc(100% - #{$modal-header-height} - #{$modal-footer-height});
+  }
+}
+#kids-results-aborted.mu-kindergarten-context {
+  .modal-body{
+    height: calc(100% - #{$modal-header-height});
+  }
+}
+
+$bubble-border-width: 3px;
+$bubble-height: 90px;
+$bubble-border: $bubble-border-width solid $kids-speech-border-color;
+$bubble-ballon-size: 24px;
+
+$bubble-background-color: white;
+$bubble-padding: 30px;
+
+.mu-kindergarten-header {
+  @include display-flex(row nowrap, flex-start, flex-start);
+
+  align-self: flex-start;
+
+  width: 100%;
+
+  .mu-kindergarten-character {
+    @include display-flex(row nowrap, flex-start, flex-start);
+
+    margin-right: 15px;
+
+    width: 50%;
+
+    $bubble-border-width: 3px;
+    $bubble-height: 90px;
+    $bubble-border: $bubble-border-width solid $kids-speech-border-color;
+    $bubble-ballon-size: 24px;
+
+    $bubble-background-color: white;
+    $bubble-padding: 30px;
+
+    .mu-kindergarten-character-speech-bubble {
+      @include display-flex(row, flex-start, center);
+      position: relative;
 
+      padding: $bubble-padding;
+      padding-right: $bubble-height / 2 + $bubble-padding;
+
+      color: #333;
+      border-radius: 10px;
+      background: white;
+      border: $bubble-border;
+      height: $bubble-height;
+      min-height: $bubble-height;
+      max-height: $bubble-height;
+
+      width: 100%;
+      max-width: 100%;
+
+      margin-top: 10px;
+
+      p {
+        margin: 0;
+      }
+
+      &:before {
+        content: "";
+        position: absolute;
+        bottom: -20px;
+        top: $bubble-height / 2 - $bubble-ballon-size / 2;
+        left: -$bubble-ballon-size / 2;
+        width: $bubble-ballon-size;
+        height: $bubble-ballon-size;
+        background: white;
+        border: $bubble-border;
+        border-left-color: $bubble-background-color;
+        border-top-color: $bubble-background-color;
+        transform: rotate(135deg);
+        border-radius: 50%;
+      }
+    }
+
+    .mu-kindergarten-buttons {
+      display: flex;
+      flex-flow: column;
+      position: absolute;
+      top: -$bubble-border-width;
+      right: -$bubble-border-width;
+      height: calc(100% + #{$bubble-border-width} * 3);
+      border-radius: 10px;
+
+      .mu-kindergarten-show-context,
+      .mu-kindergarten-play-description {
+        border: $bubble-border;
+        height: calc(50% - #{$bubble-border-width} / 2);
+        width: $bubble-height / 2;
+      }
+
+      .mu-kindergarten-show-context {
+        border-top-right-radius: 10px;
+        border-bottom-width: $bubble-border-width * 2/3;
+      }
+
+      .mu-kindergarten-play-description {
+        border-bottom-right-radius: 10px;
+        border-top-width: $bubble-border-width * 2/3;
+      }
+
+      .mu-kindergarten-button-image {
+        width: 100%;
+      }
+
+    }
+  }
+
+  .mu-kindergarten-hint {
+
+    $light-bubble-color: #FAD59F;
+    $light-bubble-border: $bubble-border-width solid $light-bubble-color;
+
+    @include display-flex(row-reverse nowrap, flex-start, flex-start);
+
+    width: 50%;
+    margin-left: 15px;
+
+    margin-top: 10px;
+
+    button {
+      background: none;
+      border: none;
+      outline: none;
+    }
+
+    .mu-hint-light {
+      $light-height: 80px;
+      padding-left: 15px;
+
+      &.off {
+        height: $light-height * 0.75;
+        margin-right: 11px;
+        margin-top: 21px;
+      }
+      &.on {
+        cursor: pointer;
+        height: $light-height;
+        &:hover {
+          filter: brightness(1.15);
+        }
+      }
+    }
+
+    .mu-kindergarten-light-speech-bubble {
+      @include display-flex(column, center, flex-start);
+
+      position: relative;
+
+      padding: $bubble-padding;
+
+      color: #333;
+      border-radius: 10px;
+      background: $light-bubble-color;
+      border: $light-bubble-border;
+      min-height: $bubble-height;
+      z-index: 1;
+
+      width: 75%;
+      max-width: 100%;
+
+      p {
+        margin: 0;
+        text-align: center;
+      }
+
+      &:after {
+        content: "";
+        position: absolute;
+        bottom: -20px;
+        top: $bubble-height / 2 - $bubble-ballon-size / 2;
+        right: -$bubble-ballon-size / 2;
+        width: $bubble-ballon-size;
+        height: $bubble-ballon-size;
+        background: $light-bubble-color;
+        border: $light-bubble-border;
+        border-radius: 50%;
+      }
+
+      .mu-kindergarten-exercise-hint {
+        width: 100%;
+      }
+
+      .mu-kindergarten-hint-media {
+
+        @include display-flex(column, center, center);
+
+        background: white;
+        width: calc(100% + #{$bubble-padding} * 10/6);
+        margin: $bubble-padding (-$bubble-padding * 5/6) (-$bubble-padding * 5/6) (-$bubble-padding * 5/6);
+        padding: $bubble-padding * 5/6;
+
+        &.closed {
+          display: none;
+        }
+
+        .media-object {
+          height: 100%;
+          width: 100%;
+          object-fit: cover;
+        }
+      }
+
+      .expand-or-collapse-hint-media {
+        $button-width: 60px;
+
+        position: absolute;
+        width: $button-width;
+        height: $button-width / 2;
+        bottom: 3px;
+        left: calc(50% - #{$button-width / 2});
+
+        .fa-caret-down {
+          color: white;
+        }
+
+        .fa-caret-up {
+          color: $light-bubble-color;
+        }
+      }
+
+      &:not(.open) {
+        display: none;
+      }
+    }
+
+  }
+}