@gamelearn/arcade-components 0.2.0

package/dist/components/hacker-puzzle-component/components/languages.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _default = {
+  js: ["var rows = prompt('How many rows for your multiplication table?');", "var cols = prompt('How many columns for your multiplication table?');", ' ', "if(rows == '' || rows == null)", '     rows = 10;', ' ', "if(cols== '' || cols== null)", '     cols = 10;', ' ', 'createTable(rows, cols);', ' ', 'function createTable(rows, cols)', '{', '  var j=1;', "  var output = '<table border='1' width='500' cellspacing='0'cellpadding='5'>';", ' ', '  for(i=1;i<=rows;i++)', '  {', "   output = output + '<tr>';", '     while(j<=cols)', '     {', "       output = output + '<td>' + i*j + '</td>';", '       j = j+1;', '     }', "   output = output + '</tr>';", '   j = 1;', '  }', ' ', "  output = output + '</table>';", '  document.write(output);', '}'],
+  lua: ['-- Ensure that that the element at i is in the right position,', '-- and return a closure which can be used for continuing the sort.', ' ', 'function quicksorter(i, vec, low, high)', '  if low >= high then', '    return quicksorter', '  else -- low < high', '    -- partition the vector and initialize the child closures', '    local middle = partition(vec, low, high)', '    local left, right = quicksorter', ' ', '-- Create the promise', '    local function self(i, vec, low, high)', '      if i < middle then', '        left = left(i, vec, low, middle-1)', '        return self', '      elseif i > middle then', '        right = right(i, vec, middle+1, high)', '        return self', '      end', '    end', ' ', '-- Force the promise until i is in the right position', '    return self(i, vec, low, high)', '  end', 'end', ' ', 'function lazysort(vec, low, high)', '  local sorter = quicksorter', '  return function(i)', '    sorter = sorter(i, vec, low, high)', '    return vec[i]', '  end', 'end'],
+  python: ['#ask the user to enter four pieces of information', ' ', "firstname = input('Enter your first name: ')", "surname = input('Enter your surname: ')", "email = input('Enter your email: ')", "yearsteaching = input('Enter the number of years teaching: ')", ' ', "file = open('staff.csv','r') #opens the file in read mode", 'found=False #sets whether the user is found to False', ' ', 'for line in file: #reads each line in the file', "    staff = line.split(',') #splits the line into the list called staff", '    if staff[2] == email: #checks if the email entered is in the list', '        found=True #if it is changes found to True', ' ', 'file.close() #closes the file', ' ', 'if found==True: #after the loop checks if the user is found', "    print('Staff member already exists in the file') #displays on screen", 'else:', '  #if the email was not in the file', "    writefile=open('staff.csv','a') #open the file in append mode", "    writefile.write(firstname + ',' + surname + ',' + email + ',' + yearsteaching) #write the new information to the file", '    writefile.close() #close the file', "    print('Staff member added to file')"]
+};
+exports.default = _default;

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

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

package/dist/components/hacker-puzzle-component/mocks/mockForStory.js

@@ -0,0 +1,101 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.mockProps3 = exports.mockProps2 = exports.mockProps = void 0;
+
+var emitEvent = function emitEvent() {
+  console.log('Emit event called');
+};
+
+var mockProps = {
+  emitEvent: emitEvent,
+  disableExit: function disableExit() {},
+  setResolveAction: function setResolveAction() {},
+  type: 'js',
+  writingSpeed: 5,
+  info: {
+    hint: {
+      active: false,
+      desc: 'hint',
+      rewards: []
+    },
+    resolve: {
+      rewards: []
+    },
+    solution: {
+      right: {
+        desc: 'correctSolution',
+        rewards: []
+      },
+      wrong: {
+        desc: 'wrongSolution',
+        rewards: []
+      }
+    },
+    instructions: 'instructions',
+    description: 'description'
+  }
+};
+exports.mockProps = mockProps;
+var mockProps2 = {
+  emitEvent: emitEvent,
+  disableExit: function disableExit() {},
+  setResolveAction: function setResolveAction() {},
+  type: 'python',
+  writingSpeed: 5,
+  info: {
+    hint: {
+      active: false,
+      desc: 'hint',
+      rewards: []
+    },
+    resolve: {
+      rewards: []
+    },
+    solution: {
+      right: {
+        desc: 'correctSolution',
+        rewards: []
+      },
+      wrong: {
+        desc: 'wrongSolution',
+        rewards: []
+      }
+    },
+    instructions: 'instructions',
+    description: 'description'
+  }
+};
+exports.mockProps2 = mockProps2;
+var mockProps3 = {
+  emitEvent: emitEvent,
+  disableExit: function disableExit() {},
+  setResolveAction: function setResolveAction() {},
+  type: 'lua',
+  writingSpeed: 5,
+  info: {
+    hint: {
+      active: false,
+      desc: 'hint',
+      rewards: []
+    },
+    resolve: {
+      rewards: []
+    },
+    solution: {
+      right: {
+        desc: 'correctSolution',
+        rewards: []
+      },
+      wrong: {
+        desc: 'wrongSolution',
+        rewards: []
+      }
+    },
+    instructions: 'instructions',
+    description: 'description'
+  }
+};
+exports.mockProps3 = mockProps3;

package/dist/components/image-component/components/ImageComponent.js

@@ -0,0 +1,66 @@
+"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"));
+
+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; }
+
+var ImageComponent = function ImageComponent(_ref) {
+  var emitEvent = _ref.emitEvent,
+      img = _ref.img,
+      imgName = _ref.imgName,
+      documentType = _ref.documentType,
+      visible = _ref.visible,
+      viewed = _ref.viewed;
+  var imgUrl = img.url;
+  var close = (0, _react.useCallback)(function () {
+    var item = {
+      img: img,
+      name: imgName,
+      imgName: img.imgName,
+      documentType: documentType,
+      type: 'image'
+    };
+    emitEvent({
+      type: 'finishMedia',
+      payload: item
+    });
+  }, [img, imgName, emitEvent, documentType]);
+  (0, _react.useEffect)(function () {
+    if (!visible) {
+      close();
+    }
+  }, [close, visible]);
+
+  if (!visible) {
+    return null;
+  }
+
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: viewed ? 'notes--results' : 'readings--container readings--container--darkopacity'
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: viewed ? 'notes--results__text' : 'readings readings--image'
+  }, imgUrl && /*#__PURE__*/_react.default.createElement("img", {
+    src: imgUrl,
+    alt: imgName
+  }), !viewed ? /*#__PURE__*/_react.default.createElement("div", {
+    className: !imgUrl ? 'position--absolute top right' : 'readings--image--closeBtn'
+  }, /*#__PURE__*/_react.default.createElement("button", {
+    type: "button",
+    className: "gat--btn__round",
+    onClick: close
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: "icon-close"
+  }))) : null));
+};
+
+var _default = ImageComponent;
+exports.default = _default;

package/dist/components/image-component/index.js

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

package/dist/components/image-component/mocks/mockForStory.js

@@ -0,0 +1,50 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.mockWithImageNotViewed = exports.mockWithNotVisible = exports.mockProps = void 0;
+
+var emitEvent = function emitEvent() {
+  console.log('Emit Event');
+};
+
+var mockProps = {
+  emitEvent: emitEvent,
+  img: {
+    imgId: 'alfalfa',
+    url: 'https://s3-eu-west-1.amazonaws.com/gl-lms-storage/development/clients/58dccfba26561500117caf53/image/603fb8b1901f3e001238e297/gif.gif',
+    resourceId: '5e79e0c8f5b3a6000fd81472'
+  },
+  imgName: 'Hand gif',
+  documentType: 'lesson',
+  visible: true,
+  viewed: false
+};
+exports.mockProps = mockProps;
+var mockWithNotVisible = {
+  emitEvent: emitEvent,
+  img: {
+    imgId: 'alfalfa2',
+    url: 'https://s3-eu-west-1.amazonaws.com/gl-lms-storage/development/clients/58dccfba26561500117caf53/image/603fb8b1901f3e001238e297/gif.gif',
+    resourceId: '5e79e0c8f5b3a6000fd81472'
+  },
+  imgName: 'Hand gif',
+  documentType: 'lesson',
+  visible: false,
+  viewed: false
+};
+exports.mockWithNotVisible = mockWithNotVisible;
+var mockWithImageNotViewed = {
+  emitEvent: emitEvent,
+  img: {
+    imgId: 'alfalfa2',
+    url: 'https://s3-eu-west-1.amazonaws.com/gl-lms-storage/development/clients/58dccfba26561500117caf53/image/603fb8b1901f3e001238e297/gif.gif',
+    resourceId: '5e79e0c8f5b3a6000fd81472'
+  },
+  imgName: 'Hand gif',
+  documentType: 'lesson',
+  visible: true,
+  viewed: true
+};
+exports.mockWithImageNotViewed = mockWithImageNotViewed;

package/dist/components/index.js

@@ -0,0 +1,163 @@
+"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
+});
+Object.defineProperty(exports, "Scene", {
+  enumerable: true,
+  get: function get() {
+    return _scene.default;
+  }
+});
+Object.defineProperty(exports, "NoticeComponent", {
+  enumerable: true,
+  get: function get() {
+    return _noticeComponent.default;
+  }
+});
+Object.defineProperty(exports, "InventoryItem", {
+  enumerable: true,
+  get: function get() {
+    return _inventoryItem.default;
+  }
+});
+Object.defineProperty(exports, "PdfComponent", {
+  enumerable: true,
+  get: function get() {
+    return _pdfComponent.default;
+  }
+});
+Object.defineProperty(exports, "PdfVisor", {
+  enumerable: true,
+  get: function get() {
+    return _pdfComponent.PdfVisor;
+  }
+});
+Object.defineProperty(exports, "UrlComponent", {
+  enumerable: true,
+  get: function get() {
+    return _urlComponent.default;
+  }
+});
+Object.defineProperty(exports, "VideoComponent", {
+  enumerable: true,
+  get: function get() {
+    return _videoComponent.default;
+  }
+});
+Object.defineProperty(exports, "VideoVisor", {
+  enumerable: true,
+  get: function get() {
+    return _videoVisor.default;
+  }
+});
+Object.defineProperty(exports, "LecturesComponent", {
+  enumerable: true,
+  get: function get() {
+    return _lecturesComponent.default;
+  }
+});
+Object.defineProperty(exports, "DecisionComponent", {
+  enumerable: true,
+  get: function get() {
+    return _decisionComponent.default;
+  }
+});
+Object.defineProperty(exports, "ImageComponent", {
+  enumerable: true,
+  get: function get() {
+    return _imageComponent.default;
+  }
+});
+Object.defineProperty(exports, "ConversationalProComponent", {
+  enumerable: true,
+  get: function get() {
+    return _conversationalProComponent.default;
+  }
+});
+Object.defineProperty(exports, "ConversationalComponent", {
+  enumerable: true,
+  get: function get() {
+    return _conversationalComponent.default;
+  }
+});
+Object.defineProperty(exports, "ComicComponent", {
+  enumerable: true,
+  get: function get() {
+    return _comicComponent.default;
+  }
+});
+Object.defineProperty(exports, "CartelComponent", {
+  enumerable: true,
+  get: function get() {
+    return _cartelComponent.default;
+  }
+});
+Object.defineProperty(exports, "HackerPuzzleComponent", {
+  enumerable: true,
+  get: function get() {
+    return _hackerPuzzleComponent.default;
+  }
+});
+Object.defineProperty(exports, "LoginPuzzleComponent", {
+  enumerable: true,
+  get: function get() {
+    return _loginPuzzleComponent.default;
+  }
+});
+Object.defineProperty(exports, "KeyboardPuzzleComponent", {
+  enumerable: true,
+  get: function get() {
+    return _keyboardPuzzleComponent.default;
+  }
+});
+Object.defineProperty(exports, "CrackerPuzzleComponent", {
+  enumerable: true,
+  get: function get() {
+    return _crackerPuzzleComponent.default;
+  }
+});
+
+var _scene = _interopRequireDefault(require("./arcade-render/scene"));
+
+var _noticeComponent = _interopRequireDefault(require("./notice-component"));
+
+var _inventoryItem = _interopRequireDefault(require("./inventory-item"));
+
+var _pdfComponent = _interopRequireWildcard(require("./pdf-component"));
+
+var _urlComponent = _interopRequireDefault(require("./url-component"));
+
+var _videoComponent = _interopRequireDefault(require("./video-component"));
+
+var _videoVisor = _interopRequireDefault(require("./video-visor"));
+
+var _lecturesComponent = _interopRequireDefault(require("./lectures-component"));
+
+var _decisionComponent = _interopRequireDefault(require("./decision-component"));
+
+var _imageComponent = _interopRequireDefault(require("./image-component"));
+
+var _conversationalProComponent = _interopRequireDefault(require("./conversational-pro-component"));
+
+var _conversationalComponent = _interopRequireDefault(require("./conversational-component"));
+
+var _comicComponent = _interopRequireDefault(require("./comic-component"));
+
+var _cartelComponent = _interopRequireDefault(require("./cartel-component"));
+
+var _hackerPuzzleComponent = _interopRequireDefault(require("./hacker-puzzle-component"));
+
+var _loginPuzzleComponent = _interopRequireDefault(require("./login-puzzle-component"));
+
+var _keyboardPuzzleComponent = _interopRequireDefault(require("./keyboard-puzzle-component"));
+
+var _crackerPuzzleComponent = _interopRequireDefault(require("./cracker-puzzle-component"));
+
+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 _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/dist/components/inventory-item/components/InventoryItem.js

@@ -0,0 +1,100 @@
+"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 _fiber = require("@react-three/fiber");
+
+var _drei = require("@react-three/drei");
+
+var _helpers = require("../../../helpers");
+
+var _element = _interopRequireDefault(require("../../arcade-render/element"));
+
+var _LightSet = _interopRequireDefault(require("../../../helpers/LightSet"));
+
+var _drawLOD = _interopRequireDefault(require("../../../helpers/drawLOD"));
+
+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; }
+
+var InventoryItem = function InventoryItem(_ref) {
+  var name = _ref.name,
+      description = _ref.description,
+      element = _ref.element,
+      onFinish = _ref.onFinish;
+  var orbit = (0, _react.useRef)();
+
+  if (!element) {
+    onFinish();
+    return null;
+  }
+
+  var handleOnCreate = function handleOnCreate(_ref2) {
+    var gl = _ref2.gl;
+    gl.physicallyCorrectLights = true;
+  };
+
+  var onLoad = function onLoad(model, scene, camera) {
+    if (model && orbit.current) {
+      model.position.set(0, 0, 0);
+      camera.position.z += 10;
+      camera.fov = 35;
+      camera.updateProjectionMatrix();
+      (0, _helpers.cameraFitAnyObject)(model, camera, null, orbit.current);
+      (0, _drawLOD.default)(scene);
+    }
+  };
+
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "inventory--layer__info"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "inventory--layer__info--popup fadeIn--animation"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "inventory--info__close",
+    onClick: onFinish
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: "icon-close"
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: "inventory--layer__info--image"
+  }, /*#__PURE__*/_react.default.createElement(_fiber.Canvas, {
+    style: {
+      height: '100%'
+    },
+    mode: "concurrent",
+    shadows: true,
+    onCreated: handleOnCreate
+  }, /*#__PURE__*/_react.default.createElement(_LightSet.default, null), /*#__PURE__*/_react.default.createElement(_react.Suspense, {
+    fallback: null
+  }, /*#__PURE__*/_react.default.createElement(_element.default, {
+    key: "".concat(element.uid),
+    url: element.url,
+    position: [0, 0, 0],
+    rotation: [0, 0, 0],
+    scale: [1, 1, 1],
+    material: element.material || {},
+    name: element.name,
+    onLoad: onLoad
+  })), /*#__PURE__*/_react.default.createElement(_drei.OrbitControls, {
+    ref: orbit,
+    enableKeys: false,
+    enableZoom: false,
+    enablePan: false
+  }), /*#__PURE__*/_react.default.createElement(_drei.Preload, {
+    all: true
+  }))), /*#__PURE__*/_react.default.createElement("div", {
+    className: "inventory--layer__info--description"
+  }, /*#__PURE__*/_react.default.createElement("h1", null, name), /*#__PURE__*/_react.default.createElement("p", null, description))));
+};
+
+var _default = InventoryItem;
+exports.default = _default;

package/dist/components/inventory-item/index.js

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

package/dist/components/inventory-item/mocks/mockForStory.js

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.mockProps = void 0;
+
+var _mocks = require("../../arcade-render/mocks");
+
+var emitEvent = function emitEvent() {
+  console.log('Emit event called');
+};
+
+var mockProps = {
+  emitEvent: emitEvent,
+  name: 'Avocado',
+  description: 'El que tengo aqui condimentado',
+  element: {
+    url: _mocks.taxi,
+    type: 'object',
+    position: [0, -5, 0],
+    rotation: [0, 0, 0],
+    scale: [100, 100, 100],
+    uid: 'avocado1',
+    name: 'avocado'
+  }
+};
+exports.mockProps = mockProps;

package/dist/components/keyboard-puzzle-component/components/FeedbackMessage.js

@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var FeedbackMessage = function FeedbackMessage(_ref) {
+  var info = _ref.info,
+      passClass = _ref.passClass,
+      finished = _ref.finished;
+  if (!passClass) return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null);
+  if (finished) return /*#__PURE__*/_react.default.createElement("div", {
+    className: "puzzle--image__result bottom ".concat(passClass)
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: "title"
+  }, info.solution.right.desc ? /*#__PURE__*/_react.default.createElement("span", null, info.solution.right.desc) : null));
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "puzzle--keyboard__failed feedback puzzle--image__result bottom ".concat(passClass)
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: "title"
+  }, info.solution.wrong.desc ? /*#__PURE__*/_react.default.createElement("span", null, info.solution.wrong.desc) : null));
+};
+
+var _default = FeedbackMessage;
+exports.default = _default;