@gamelearn/arcade-components 0.4.0 → 0.4.1-beta-terminal

package/dist/components/writer-puzzle-component/components/WriterPuzzleComponent.js

@@ -0,0 +1,552 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _FixedComponent = _interopRequireDefault(require("./FixedComponent"));
+
+var _ElectionComponent = _interopRequireDefault(require("./ElectionComponent"));
+
+var _FeedbackComponent = _interopRequireDefault(require("./FeedbackComponent"));
+
+var _FinishedTextComponent = _interopRequireDefault(require("./FinishedTextComponent"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr && (typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]); if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+var WriterPuzzleComponent = function WriterPuzzleComponent(_ref) {
+  var emitEvent = _ref.emitEvent,
+      info = _ref.info,
+      styles = _ref.styles,
+      nodeId = _ref.nodeId,
+      retry = _ref.retry,
+      skip = _ref.skip,
+      type = _ref.type,
+      documentTitle = _ref.documentTitle,
+      texts = _ref.texts,
+      props = _objectWithoutProperties(_ref, ["emitEvent", "info", "styles", "nodeId", "retry", "skip", "type", "documentTitle", "texts"]);
+
+  var translate = function translate(id) {
+    return emitEvent({
+      type: 'translate',
+      payload: id
+    });
+  };
+
+  var automaticScroll = (0, _react.useRef)();
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      finished = _useState2[0],
+      setFinished = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      failed = _useState4[0],
+      _setFailed = _useState4[1];
+
+  var _useState5 = (0, _react.useState)(0),
+      _useState6 = _slicedToArray(_useState5, 2),
+      currenTextParagraph = _useState6[0],
+      setCurrentTextParagraph = _useState6[1];
+
+  var _useState7 = (0, _react.useState)(_defineProperty({}, "text_".concat(currenTextParagraph), _objectSpread(_objectSpread({}, texts[currenTextParagraph]), {}, {
+    id: "text_".concat(currenTextParagraph),
+    correct: ''
+  }))),
+      _useState8 = _slicedToArray(_useState7, 2),
+      textHolder = _useState8[0],
+      setTextHolder = _useState8[1];
+
+  var _useState10 = (0, _react.useState)(false),
+      _useState11 = _slicedToArray(_useState10, 2),
+      doneTyping = _useState11[0],
+      setDoneTyping = _useState11[1];
+
+  var _useState12 = (0, _react.useState)([]),
+      _useState13 = _slicedToArray(_useState12, 2),
+      decisionsList = _useState13[0],
+      setDecisionsList = _useState13[1];
+
+  var _useState14 = (0, _react.useState)(false),
+      _useState15 = _slicedToArray(_useState14, 2),
+      reviewDone = _useState15[0],
+      setReviewDone = _useState15[1];
+
+  var _useState16 = (0, _react.useState)(false),
+      _useState17 = _slicedToArray(_useState16, 2),
+      showFeedback = _useState17[0],
+      setShowFeedback = _useState17[1];
+
+  var _useState18 = (0, _react.useState)(false),
+      _useState19 = _slicedToArray(_useState18, 2),
+      feedbackScreen = _useState19[0],
+      setFeedbackScreen = _useState19[1];
+
+  var _useState20 = (0, _react.useState)(false),
+      _useState21 = _slicedToArray(_useState20, 2),
+      feedbackScreenDone = _useState21[0],
+      setFeedbackScreenDone = _useState21[1];
+
+  var _useState22 = (0, _react.useState)(true),
+      _useState23 = _slicedToArray(_useState22, 2),
+      isActive = _useState23[0],
+      setIsActive = _useState23[1];
+
+  var _useState24 = (0, _react.useState)([]),
+      _useState25 = _slicedToArray(_useState24, 2),
+      rewardsStack = _useState25[0],
+      setRewardsStack = _useState25[1];
+
+  var _useState26 = (0, _react.useState)(true),
+      _useState27 = _slicedToArray(_useState26, 2),
+      disableExit = _useState27[0],
+      setDisableExit = _useState27[1];
+
+  (0, _react.useEffect)(function () {
+    if (finished) {
+      setDisableExit(false);
+    }
+  }, [finished]);
+
+  var getCorrectElection = function getCorrectElection(element) {
+    var electionIndex;
+    element.electionTexts.forEach(function (election, index) {
+      if (election.correct) {
+        electionIndex = index;
+      }
+    });
+    return electionIndex;
+  };
+
+  var getFullTextFormDecisionList = function getFullTextFormDecisionList(indexOfText) {
+    var currentDecision = decisionsList.filter(function (obj) {
+      return obj.currenTextParagraph === indexOfText;
+    });
+    return currentDecision[0].fullText;
+  };
+
+  var createLecture = function createLecture() {
+    return texts.map(function (element, indexOfText) {
+      if (element.type === 'fixed') {
+        if (element.fullText) {
+          return element.fullText;
+        }
+      } else if (element.type === 'election') {
+        var correctElection = getCorrectElection(element);
+
+        if (correctElection) {
+          return element.electionTexts[correctElection].fullText;
+        } // If there is no correct Election then it should pick the election of student
+
+
+        return getFullTextFormDecisionList(indexOfText);
+      }
+
+      return '';
+    });
+  };
+
+  var fixedDelay = 2;
+
+  var checkAllDecisionsRightWrong = function checkAllDecisionsRightWrong() {
+    if (decisionsList) {
+      var maxCounter = decisionsList.length;
+      var rightCounter = 0;
+
+      for (var i = 0; i < maxCounter; i += 1) {
+        if (decisionsList[i].isCorrect === 'none') {
+          rightCounter += 1;
+        }
+      }
+
+      return !!(rightCounter === maxCounter);
+    }
+
+    return true;
+  };
+
+  var checkAllDecisionsAreCorrect = function checkAllDecisionsAreCorrect() {
+    if (decisionsList) {
+      var maxCounter = decisionsList.length;
+      var rightCounter = 0;
+
+      for (var i = 0; i < maxCounter; i += 1) {
+        if (decisionsList[i].isCorrect === 'green') {
+          rightCounter += 1;
+        }
+      }
+
+      return !!(rightCounter === maxCounter);
+    }
+
+    return true;
+  };
+
+  var checkIfFeedbackNeeded = function checkIfFeedbackNeeded() {
+    return !!(decisionsList && decisionsList.length);
+  };
+
+  var checkFeedbackScreen = function checkFeedbackScreen() {
+    return decisionsList.find(function (decision) {
+      var feedback = texts[decision.currenTextParagraph].electionTexts[decision.index].feedback;
+      return feedback.body !== null || feedback.rewards && feedback.rewards.length > 0;
+    });
+  };
+
+  var handleLectures = function handleLectures() {
+    var text = createLecture();
+    emitEvent({
+      type: 'finishLecture??',
+      payload: {
+        name: documentTitle,
+        text: text,
+        documentType: type
+      }
+    });
+  };
+
+  var endPoints = function endPoints() {
+    var accumulatedRewards;
+
+    if (info.solution && info.solution.right) {
+      var rewards = info.solution.right.rewards;
+
+      if (rewards && Array.isArray(rewards) && rewards.length) {
+        accumulatedRewards = Array.from(rewards.concat(rewardsStack));
+      } else {
+        accumulatedRewards = Array.from(rewardsStack);
+      }
+    } else {
+      accumulatedRewards = Array.from(rewardsStack);
+    }
+
+    var wrongRewards = info.solution.wrong.rewards;
+    var rightRewards = info.solution.right.rewards;
+    var AllDecisionsCorrect = checkAllDecisionsAreCorrect(); // if any is wrong count as wrong if  there are no individual points assigned
+
+    var pointsToEmit = [];
+
+    if (failed) {
+      pointsToEmit = accumulatedRewards;
+    } else {
+      pointsToEmit = AllDecisionsCorrect ? rightRewards : wrongRewards;
+    }
+
+    emitEvent({
+      type: 'addPoints',
+      payload: pointsToEmit
+    });
+  };
+
+  var endGame = function endGame() {
+    if (type !== 'view') {
+      handleLectures();
+      endPoints();
+    } else {
+      endPoints();
+    }
+  };
+
+  var handleFinish = function handleFinish() {
+    if (checkAllDecisionsRightWrong()) {
+      // if all Decisions are right or wrong we just skip to end
+      setReviewDone(true);
+      setFeedbackScreenDone(true);
+      endGame();
+    }
+
+    if (!checkIfFeedbackNeeded()) {
+      // THis case is for when we do not have any Decision
+      setReviewDone(true);
+      setFeedbackScreen(true);
+      endGame();
+    }
+
+    if (!reviewDone) {
+      // Shows the decision text red or green regarding the selecions
+      setReviewDone(true);
+
+      if (checkFeedbackScreen()) {
+        // CHECK IF THERE IS NEED OF FEEDBACK SCREEN
+        setFeedbackScreen(true);
+      } else {
+        setFeedbackScreenDone(true);
+      }
+    }
+
+    if (reviewDone && !feedbackScreenDone) {
+      setIsActive(false); // Second EXECUTION  shows Feedback Screen
+
+      if (feedbackScreen) {
+        setShowFeedback(true);
+      }
+    } // Third EXECUTION  Give Points
+
+
+    if (feedbackScreenDone) {
+      endGame();
+    }
+  };
+
+  var retryPuzzle = function retryPuzzle() {
+    setDecisionsList([]);
+    setCurrentTextParagraph(0);
+    setDoneTyping(false);
+    setFinished(false);
+    setShowFeedback(false);
+    setReviewDone(false);
+    setTextHolder({});
+    setTextHolder(_defineProperty({}, "text_".concat(0), _objectSpread(_objectSpread({}, texts[0]), {}, {
+      id: "text_".concat(0),
+      correct: ''
+    })));
+    setIsActive(true);
+  };
+
+  var noColor = function noColor() {
+    var correctTexts = texts[currenTextParagraph].electionTexts.filter(function (e) {
+      return e.correct;
+    }).length;
+    var electionTextsLength = texts[currenTextParagraph].electionTexts;
+    return correctTexts === 0 || correctTexts === electionTextsLength;
+  };
+
+  var handleSelectedOption = function handleSelectedOption(index) {
+    var currentRewards = texts[currenTextParagraph].electionTexts[index].feedback.rewards;
+
+    if (currentRewards && currentRewards[0] && currentRewards[0].points) {
+      setRewardsStack([].concat(_toConsumableArray(rewardsStack), _toConsumableArray(currentRewards)));
+    }
+
+    var checkColor = function checkColor() {
+      if (noColor()) {
+        return 'none';
+      }
+
+      return texts[currenTextParagraph].electionTexts[index].correct ? 'green' : 'red';
+    };
+
+    var decision = {
+      currenTextParagraph: currenTextParagraph,
+      fullText: texts[currenTextParagraph].electionTexts[index].fullText,
+      index: index,
+      isCorrect: checkColor()
+    };
+    setTextHolder(_objectSpread(_objectSpread({}, textHolder), {}, _defineProperty({}, "text_".concat(currenTextParagraph), {
+      type: 'fixed',
+      fullText: texts[currenTextParagraph].electionTexts[index].fullText,
+      correct: decision.isCorrect
+    })));
+    setDecisionsList([].concat(_toConsumableArray(decisionsList), [decision]));
+  };
+
+  var printedElection = function printedElection() {
+    automaticScroll.current.scrollTop = automaticScroll.current.scrollHeight + 100;
+  };
+
+  var onIsWriting = function onIsWriting() {
+    automaticScroll.current.scrollTop += automaticScroll.current.scrollTop + 1;
+  };
+
+  var handleFixed = function handleFixed(text, length, index) {
+    var textToPrint = text.fullText;
+    var nextParagraphType = texts[index + 1] ? texts[index + 1].type : '';
+    var nextType = // its magic
+    textHolder["text_".concat(index + 1)] && textHolder["text_".concat(index + 1)].type ? textHolder["text_".concat(index + 1)].type : nextParagraphType;
+    return /*#__PURE__*/_react.default.createElement(_FixedComponent.default, {
+      length: length,
+      doneTyping: doneTyping,
+      index: index,
+      key: index.toString(),
+      delay: fixedDelay,
+      setDoneTyping: setDoneTyping,
+      nextParagraphType: nextType,
+      isWriting: onIsWriting,
+      textToPrint: textToPrint
+    });
+  };
+
+  var handleShownText = function handleShownText(text) {
+    var textToPrint = text.fullText;
+    return /*#__PURE__*/_react.default.createElement(_FinishedTextComponent.default, {
+      textToPrint: textToPrint,
+      correct: text.correct,
+      key: textToPrint
+    });
+  };
+
+  var handleElection = function handleElection(text) {
+    return /*#__PURE__*/_react.default.createElement(_ElectionComponent.default, {
+      textWithOpts: text.electionTexts,
+      setCurrentDecisionSelected: handleSelectedOption,
+      printed: printedElection,
+      disableExit: disableExit,
+      key: text.electionTexts
+    });
+  };
+
+  var handleText = function handleText(text, length, index) {
+    var currentType = text.type;
+
+    if (currentType === 'fixed') {
+      return handleFixed(text, length, index);
+    }
+
+    return handleElection(text);
+  };
+
+  (0, _react.useEffect)(function () {
+    var nextParagraph = function nextParagraph() {
+      if (texts[currenTextParagraph + 1]) {
+        setTextHolder(_objectSpread(_objectSpread({}, textHolder), {}, _defineProperty({}, "text_".concat(currenTextParagraph + 1), _objectSpread(_objectSpread({}, texts[currenTextParagraph + 1]), {}, {
+          id: "text_".concat(currenTextParagraph + 1),
+          correct: ''
+        }))));
+        setCurrentTextParagraph(currenTextParagraph + 1);
+        setDoneTyping(false);
+      } else {
+        setFinished(true);
+      }
+    };
+
+    if (doneTyping === true) {
+      nextParagraph();
+    }
+  }, [doneTyping, currenTextParagraph, textHolder, texts]);
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "writer-puzzle writer-puzzle--".concat(styles)
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "writer-puzzle__overlay"
+  }, showFeedback && /*#__PURE__*/_react.default.createElement(_FeedbackComponent.default, {
+    emitEvent: emitEvent,
+    texts: texts,
+    setFailed: function setFailed() {
+      return _setFailed(true);
+    },
+    decisionsList: decisionsList,
+    closingAction: function closingAction() {
+      return setShowFeedback(false);
+    },
+    feedbackIsDone: function feedbackIsDone() {
+      return setFeedbackScreenDone(true);
+    },
+    retry: retry,
+    skip: skip,
+    checkCorrect: checkAllDecisionsAreCorrect,
+    retryAction: function retryAction() {
+      return retryPuzzle();
+    },
+    rewardsStack: rewardsStack,
+    nodeId: nodeId
+  }), !showFeedback && /*#__PURE__*/_react.default.createElement("div", {
+    className: "writer-puzzle__container"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "writer-puzzle__title"
+  }, documentTitle !== '' && documentTitle), /*#__PURE__*/_react.default.createElement("div", {
+    className: "writer-puzzle__body"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "writer-puzzle__scroll",
+    ref: automaticScroll
+  }, isActive && !reviewDone && Object.values(textHolder).map(function (text, i) {
+    return handleText(text, Object.values(textHolder).length - 1, i);
+  }), reviewDone && Object.values(textHolder).map(function (text) {
+    return handleShownText(text);
+  }))), finished && /*#__PURE__*/_react.default.createElement("div", {
+    className: "writer-puzzle__footer"
+  }, /*#__PURE__*/_react.default.createElement("button", {
+    type: "button",
+    className: "gat--btn gat--btn__primary",
+    onClick: handleFinish
+  }, translate('screens.continue')))))));
+};
+
+WriterPuzzleComponent.defaultProps = {
+  emitEvent: function emitEvent() {},
+  info: {},
+  styles: '',
+  nodeId: '0',
+  retry: false,
+  skip: false,
+  type: '',
+  documentTitle: '',
+  texts: []
+};
+WriterPuzzleComponent.propTypes = {
+  emitEvent: _propTypes.default.func,
+  info: _propTypes.default.shape({
+    description: _propTypes.default.string,
+    instructions: _propTypes.default.string,
+    resolve: _propTypes.default.shape({}),
+    solution: _propTypes.default.shape({
+      right: _propTypes.default.shape({
+        rewards: _propTypes.default.arrayOf(_propTypes.default.shape({}))
+      }),
+      wrong: _propTypes.default.shape({
+        rewards: _propTypes.default.arrayOf(_propTypes.default.shape({}))
+      })
+    }),
+    hint: _propTypes.default.shape({})
+  }),
+  styles: _propTypes.default.string,
+  nodeId: _propTypes.default.string,
+  retry: _propTypes.default.bool,
+  skip: _propTypes.default.bool,
+  type: _propTypes.default.string,
+  documentTitle: _propTypes.default.string,
+  texts: _propTypes.default.arrayOf(_propTypes.default.shape({
+    type: _propTypes.default.string,
+    fullText: _propTypes.default.string,
+    electionTexts: _propTypes.default.arrayOf(_propTypes.default.shape({
+      previewText: _propTypes.default.string,
+      correct: _propTypes.default.bool,
+      fullText: _propTypes.default.string,
+      feedback: _propTypes.default.shape({
+        rewards: _propTypes.default.arrayOf(_propTypes.default.shape({}))
+      })
+    }))
+  }))
+};
+var _default = WriterPuzzleComponent;
+exports.default = _default;

package/dist/components/writer-puzzle-component/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _WriterPuzzleComponent = _interopRequireDefault(require("./components/WriterPuzzleComponent"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _default = _WriterPuzzleComponent.default;
+exports.default = _default;