@gamelearn/arcade-components 0.2.0 → 0.4.0

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

@@ -0,0 +1,307 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.mockProps4 = exports.mockProps3 = exports.mockProps2 = exports.mockProps = void 0;
+
+var emitEvent = function emitEvent() {
+  console.log('Emit event called');
+};
+
+var soundActions = [function (sound) {
+  console.log('PlaySound called :', sound);
+}, function () {}];
+var mockProps = {
+  emitEvent: emitEvent,
+  disableExit: function disableExit() {},
+  setResolveAction: function setResolveAction() {},
+  soundActions: soundActions,
+  transitionEffects: null,
+  audioId: '',
+  itemOrder: 1,
+  info: {
+    hint: {
+      active: true,
+      desc: 'hint',
+      rewards: []
+    },
+    resolve: {
+      rewards: []
+    },
+    solution: {
+      right: {
+        desc: 'correctSolution',
+        desc_labelId: 'alfalfa01',
+        rewards: []
+      },
+      wrong: {
+        desc: 'wrongSolution',
+        desc_labelId: 'fabada01',
+        rewards: [{
+          id: 'grade',
+          name: 'grade',
+          points: -17,
+          type: 'grade'
+        }]
+      }
+    },
+    instructions: 'instructions'
+  },
+  image: {
+    imgName: 'gato5.jpg',
+    img: {
+      url: 'https://min.gamelearn.io/css-resources/gamelearn/resources/image-click.jpg',
+      imgName: 'gato5.jpg',
+      resourceId: '6007f80eac41ad001120f135'
+    },
+    width: 1280,
+    height: 720
+  },
+  areas: [{
+    id: '1601910616179',
+    name: 'a',
+    x: 0,
+    y: 0,
+    draggable: true,
+    points: [74.1584158415841, 423.99133663366337, 229.20792079207916, 366.96163366336634, 516.1386138613861, 482.8032178217822, 644.4554455445544, 710.9220297029703, 56.33663366336629, 712.7042079207921],
+    strokeWidth: 2,
+    stroke: '#44d7ab',
+    fill: 'rgba(68, 215, 171, 0.56)',
+    closed: true
+  }, {
+    id: '1601910626254',
+    name: 'b',
+    x: 0,
+    y: 0,
+    draggable: true,
+    points: [607.0297029702971, 343.79331683168317, 783.4653465346535, 388.3477722772277, 865.4455445544554, 539.8329207920792, 1138.118811881188, 593.2982673267327, 1262.871287128713, 358.0507425742574, 1262.871287128713, 46.16955445544554, 1193.3663366336634, 12.308168316831683, 1018.7128712871288, 19.43688118811881, 746.0396039603961, 213.69430693069307, 555.3465346534654, 268.94183168316835],
+    strokeWidth: 2,
+    stroke: '#44d7ab',
+    fill: 'rgba(68, 215, 171, 0.56)',
+    closed: true
+  }],
+  badAreas: [],
+  hasClickOrder: true,
+  hasHighlights: true
+};
+exports.mockProps = mockProps;
+var mockProps2 = {
+  emitEvent: emitEvent,
+  disableExit: function disableExit() {},
+  setResolveAction: function setResolveAction() {},
+  transitionEffects: null,
+  audioId: '',
+  itemOrder: 1,
+  info: {
+    hint: {
+      active: true,
+      desc: 'hint',
+      rewards: []
+    },
+    resolve: {
+      rewards: []
+    },
+    solution: {
+      right: {
+        desc: 'correctSolution',
+        desc_labelId: 'alfalfa01',
+        rewards: []
+      },
+      wrong: {
+        desc: 'wrongSolution',
+        desc_labelId: 'fabada01',
+        rewards: [{
+          id: 'grade',
+          name: 'grade',
+          points: -17,
+          type: 'grade'
+        }]
+      }
+    },
+    instructions: 'instructions'
+  },
+  image: {
+    imgName: 'gato5.jpg',
+    img: {
+      url: 'https://min.gamelearn.io/css-resources/gamelearn/resources/image-click.jpg',
+      imgName: 'gato5.jpg',
+      resourceId: '6007f80eac41ad001120f135'
+    },
+    width: 1280,
+    height: 720
+  },
+  areas: [{
+    id: '1601910616179',
+    name: 'a',
+    x: 0,
+    y: 0,
+    draggable: true,
+    points: [74.1584158415841, 423.99133663366337, 229.20792079207916, 366.96163366336634, 516.1386138613861, 482.8032178217822, 644.4554455445544, 710.9220297029703, 56.33663366336629, 712.7042079207921],
+    strokeWidth: 2,
+    stroke: '#44d7ab',
+    fill: 'rgba(68, 215, 171, 0.56)',
+    closed: true
+  }, {
+    id: '1601910626254',
+    name: 'b',
+    x: 0,
+    y: 0,
+    draggable: true,
+    points: [607.0297029702971, 343.79331683168317, 783.4653465346535, 388.3477722772277, 865.4455445544554, 539.8329207920792, 1138.118811881188, 593.2982673267327, 1262.871287128713, 358.0507425742574, 1262.871287128713, 46.16955445544554, 1193.3663366336634, 12.308168316831683, 1018.7128712871288, 19.43688118811881, 746.0396039603961, 213.69430693069307, 555.3465346534654, 268.94183168316835],
+    strokeWidth: 2,
+    stroke: '#44d7ab',
+    fill: 'rgba(68, 215, 171, 0.56)',
+    closed: true
+  }],
+  badAreas: [],
+  hasClickOrder: true,
+  hasHighlights: false
+};
+exports.mockProps2 = mockProps2;
+var mockProps3 = {
+  emitEvent: emitEvent,
+  disableExit: function disableExit() {},
+  setResolveAction: function setResolveAction() {},
+  transitionEffects: null,
+  audioId: '',
+  itemOrder: 1,
+  info: {
+    hint: {
+      active: true,
+      desc: 'hint',
+      rewards: []
+    },
+    resolve: {
+      rewards: []
+    },
+    solution: {
+      right: {
+        desc: 'correctSolution',
+        desc_labelId: 'alfalfa01',
+        rewards: []
+      },
+      wrong: {
+        desc: 'wrongSolution',
+        desc_labelId: 'fabada01',
+        rewards: [{
+          id: 'grade',
+          name: 'grade',
+          points: -17,
+          type: 'grade'
+        }]
+      }
+    },
+    instructions: 'instructions'
+  },
+  image: {
+    imgName: 'gato5.jpg',
+    img: {
+      url: 'https://min.gamelearn.io/css-resources/gamelearn/resources/image-click.jpg',
+      imgName: 'gato5.jpg',
+      resourceId: '6007f80eac41ad001120f135'
+    },
+    width: 1280,
+    height: 720
+  },
+  areas: [{
+    id: '1601910616179',
+    name: 'a',
+    x: 0,
+    y: 0,
+    draggable: true,
+    points: [74.1584158415841, 423.99133663366337, 229.20792079207916, 366.96163366336634, 516.1386138613861, 482.8032178217822, 644.4554455445544, 710.9220297029703, 56.33663366336629, 712.7042079207921],
+    strokeWidth: 2,
+    stroke: '#44d7ab',
+    fill: 'rgba(68, 215, 171, 0.56)',
+    closed: true
+  }, {
+    id: '1601910626254',
+    name: 'b',
+    x: 0,
+    y: 0,
+    draggable: true,
+    points: [607.0297029702971, 343.79331683168317, 783.4653465346535, 388.3477722772277, 865.4455445544554, 539.8329207920792, 1138.118811881188, 593.2982673267327, 1262.871287128713, 358.0507425742574, 1262.871287128713, 46.16955445544554, 1193.3663366336634, 12.308168316831683, 1018.7128712871288, 19.43688118811881, 746.0396039603961, 213.69430693069307, 555.3465346534654, 268.94183168316835],
+    strokeWidth: 2,
+    stroke: '#44d7ab',
+    fill: 'rgba(68, 215, 171, 0.56)',
+    closed: true
+  }],
+  badAreas: [],
+  hasClickOrder: false,
+  hasHighlights: true
+};
+exports.mockProps3 = mockProps3;
+var mockProps4 = {
+  emitEvent: emitEvent,
+  disableExit: function disableExit() {},
+  setResolveAction: function setResolveAction() {},
+  transitionEffects: null,
+  audioId: '',
+  itemOrder: 1,
+  info: {
+    hint: {
+      active: true,
+      desc: 'hint',
+      rewards: []
+    },
+    resolve: {
+      rewards: []
+    },
+    solution: {
+      right: {
+        desc: 'correctSolution',
+        desc_labelId: 'alfalfa01',
+        rewards: []
+      },
+      wrong: {
+        desc: 'wrongSolution',
+        desc_labelId: 'fabada01',
+        rewards: [{
+          id: 'grade',
+          name: 'grade',
+          points: -17,
+          type: 'grade'
+        }]
+      }
+    },
+    instructions: 'instructions'
+  },
+  image: {
+    imgName: 'gato5.jpg',
+    img: {
+      url: 'https://min.gamelearn.io/css-resources/gamelearn/resources/image-click.jpg',
+      imgName: 'gato5.jpg',
+      resourceId: '6007f80eac41ad001120f135'
+    },
+    width: 1280,
+    height: 720
+  },
+  areas: [{
+    id: '1601910616179',
+    name: 'a',
+    x: 0,
+    y: 0,
+    draggable: true,
+    points: [74.1584158415841, 423.99133663366337, 229.20792079207916, 366.96163366336634, 516.1386138613861, 482.8032178217822, 644.4554455445544, 710.9220297029703, 56.33663366336629, 712.7042079207921],
+    strokeWidth: 2,
+    stroke: '#44d7ab',
+    fill: 'rgba(68, 215, 171, 0.56)',
+    closed: true
+  }, {
+    id: '1601910626254',
+    name: 'b',
+    x: 0,
+    y: 0,
+    draggable: true,
+    points: [607.0297029702971, 343.79331683168317, 783.4653465346535, 388.3477722772277, 865.4455445544554, 539.8329207920792, 1138.118811881188, 593.2982673267327, 1262.871287128713, 358.0507425742574, 1262.871287128713, 46.16955445544554, 1193.3663366336634, 12.308168316831683, 1018.7128712871288, 19.43688118811881, 746.0396039603961, 213.69430693069307, 555.3465346534654, 268.94183168316835],
+    strokeWidth: 2,
+    stroke: '#44d7ab',
+    fill: 'rgba(68, 215, 171, 0.56)',
+    closed: true
+  }],
+  badAreas: [],
+  hasClickOrder: false,
+  hasHighlights: false
+};
+exports.mockProps4 = mockProps4;

package/dist/components/index.js

@@ -113,12 +113,24 @@ Object.defineProperty(exports, "KeyboardPuzzleComponent", {
     return _keyboardPuzzleComponent.default;
   }
 });
+Object.defineProperty(exports, "ImageClickPuzzleComponent", {
+  enumerable: true,
+  get: function get() {
+    return _imageClickPuzzleComponent.default;
+  }
+});
 Object.defineProperty(exports, "CrackerPuzzleComponent", {
   enumerable: true,
   get: function get() {
     return _crackerPuzzleComponent.default;
   }
 });
+Object.defineProperty(exports, "HangedPuzzleComponent", {
+  enumerable: true,
+  get: function get() {
+    return _hangedPuzzleComponent.default;
+  }
+});
 
 var _scene = _interopRequireDefault(require("./arcade-render/scene"));
 
@@ -154,8 +166,12 @@ var _loginPuzzleComponent = _interopRequireDefault(require("./login-puzzle-compo
 
 var _keyboardPuzzleComponent = _interopRequireDefault(require("./keyboard-puzzle-component"));
 
+var _imageClickPuzzleComponent = _interopRequireDefault(require("./image-click-puzzle-component"));
+
 var _crackerPuzzleComponent = _interopRequireDefault(require("./cracker-puzzle-component"));
 
+var _hangedPuzzleComponent = _interopRequireDefault(require("./hanged-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; }

package/dist/helpers/useGLB.js

@@ -13,40 +13,27 @@ var _DRACOLoader = require("three/examples/jsm/loaders/DRACOLoader");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-// We need this to reuse GLTF and DRACO loaders for Arcade working 
+// We need this to reuse GLTF and DRACO loaders for Arcade working
 // in Mobile devices, drei.useGLTF instances new loaders every time is
 // used
 var dracoDecoderPath = 'https://www.gstatic.com/draco/versioned/decoders/1.4.1/'; // TODO: Maybe download those files to statics.gamelearn
 
-var whiteImage = new Image();
-whiteImage.src = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP8/x8AAwMCAO+ip1sAAAAASUVORK5CYII=';
 var dracoLoader = new _DRACOLoader.DRACOLoader();
 var gltfLoader = new _GLTFLoader.GLTFLoader();
 dracoLoader.setDecoderPath(dracoDecoderPath);
 gltfLoader.setDRACOLoader(dracoLoader);
 
-var treatGeometry = function treatGeometry(res) {
-  res.scene.traverse(function (obj) {
-    if (obj.isMesh || obj.isSkinnedMesh) {
-      var keys = Object.keys(obj.material);
-      keys.forEach(function (key) {
-        var value = obj.material[key];
-
-        if (value && value.isTexture) {
-          obj.material[key].image = whiteImage;
-        }
-      });
-      obj.material.needsUpdate = true;
-    }
-  });
-};
-
 var fetchGlb = function fetchGlb(originalUrl) {
-  var isTexturableObject = originalUrl.includes('/character/') || originalUrl.includes('/object/');
-  var url = isTexturableObject ? originalUrl.replace('.glb', '.geometry.glb') : originalUrl;
+  var takeGeometry = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+  var url = originalUrl;
+
+  if (takeGeometry) {
+    var isTexturableObject = url.includes('/character/') || url.includes('/object/');
+    url = isTexturableObject ? url.replace('.glb', '.geometry.glb') : url;
+  }
+
   return new Promise(function (resolve, reject) {
     gltfLoader.load(url, function (result) {
-      treatGeometry(result);
       resolve(result);
     }, null, function (error) {
       return reject(error);

package/package.json

@@ -1,6 +1,7 @@
 {
   "name": "@gamelearn/arcade-components",
-  "version": "0.2.0",
+  "license": "Gamelearn",
+  "version": "0.4.0",
   "main": "dist/index.js",
   "files": [
     "dist",
@@ -11,13 +12,15 @@
     "url": "https://github.com/gamelearn/arcade-components"
   },
   "dependencies": {
-    "@react-three/drei": "4.3.2",
+    "@react-three/drei": "^5.1.6",
     "@react-three/fiber": "6.0.16",
     "@testing-library/jest-dom": "5.11.4",
     "@testing-library/react": "11.1.0",
     "@testing-library/user-event": "12.1.10",
     "hls.js": "0.12.4",
+    "konva": "^7.2.5",
     "prop-types": "15.7.2",
+    "react-konva": "^17.0.2-0",
     "react-pdf": "5.2.0",
     "react-promise-suspense": "0.3.3",
     "react-typist": "^2.0.5",
@@ -33,7 +36,9 @@
     "eject": "react-scripts eject",
     "storybook": "start-storybook -p 6006 -s public",
     "build-storybook": "build-storybook -s public",
-    "generate": "plop"
+    "generate": "plop",
+    "postinstall": "husky install",
+    "pre-commit": "lint-staged"
   },
   "browserslist": {
     "production": [
@@ -52,6 +57,7 @@
     "@babel/preset-env": "7.12.11",
     "@babel/preset-react": "7.12.10",
     "@gamelearn/ui-components-core": "5.10.1",
+    "@gamelearn/version": "^1.0.3",
     "@react-three/test-renderer": "6.0.6",
     "@storybook/addon-actions": "6.1.11",
     "@storybook/addon-essentials": "6.1.11",
@@ -61,6 +67,8 @@
     "@storybook/react": "6.1.11",
     "babel-loader": "8.2.2",
     "cross-env": "7.0.3",
+    "husky": "^6.0.0",
+    "lint-staged": "^11.0.0",
     "plop": "^2.7.4",
     "react": "0.0.0-experimental-27659559e",
     "react-dom": "0.0.0-experimental-27659559e",
@@ -71,5 +79,10 @@
     "moduleNameMapper": {
       "^react-pdf$": "react-pdf/dist/umd/entry.jest"
     }
+  },
+  "lint-staged": {
+    "src/**/*.{js,jsx,ts,tsx,json,css,scss,md}": [
+      "prettier --write"
+    ]
   }
 }

package/dist/components/pikachu-component/components/PikachuComponent.js

@@ -1,24 +0,0 @@
-"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 }; }
-
-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 PikachuComponent = function PikachuComponent(_ref) {
-  var emitEvent = _ref.emitEvent,
-      props = _objectWithoutProperties(_ref, ["emitEvent"]);
-
-  return /*#__PURE__*/React.createElement("div", null, "Pikachu Component");
-};
-
-var _default = PikachuComponent;
-exports.default = _default;

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

@@ -1,15 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.mockProps = void 0;
-
-var emitEvent = function emitEvent() {
-  console.log('Emit event called');
-};
-
-var mockProps = {
-  emitEvent: emitEvent
-};
-exports.mockProps = mockProps;