@gamelearn/arcade-components 0.15.0 → 0.15.2

package/dist/components/arcade-render/scene/ConfigController.js

@@ -9,9 +9,9 @@ var _react = require("react");
 
 var _fiber = require("@react-three/fiber");
 
-var _helpers = require("../../../helpers");
+var _useCameraPan = _interopRequireDefault(require("./useCameraPan"));
 
-var _useWindowSize = require("../../../helpers/useWindowSize");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 
@@ -25,89 +25,28 @@ function _iterableToArrayLimit(arr, i) { var _i = arr && (typeof Symbol !== "und
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
-var STD_RESOLUTION = 16 / 9;
-var MOTION_LIMITER = 3.5;
-var SPEED = 3;
-
 var ConfigController = function ConfigController(_ref) {
   var current = _ref.current;
 
   var _useThree = (0, _fiber.useThree)(function (state) {
-    return [state.gl, state.scene, state.camera, state.invalidate];
+    return [state.gl, state.scene, state.invalidate];
   }),
-      _useThree2 = _slicedToArray(_useThree, 4),
+      _useThree2 = _slicedToArray(_useThree, 3),
       gl = _useThree2[0],
       scene = _useThree2[1],
-      camera = _useThree2[2],
-      invalidate = _useThree2[3];
-
-  var cameraRotation = (0, _react.useRef)({
-    left: 0,
-    center: 0,
-    right: 0
-  });
-  var movingCamera = (0, _react.useRef)(false);
-  var windowSize = (0, _useWindowSize.useWindowSize)();
-  var setCameraRotationView = (0, _react.useCallback)(function () {
-    var ratio = window.innerWidth / window.innerHeight;
-
-    if (ratio >= STD_RESOLUTION) {
-      return;
-    }
-
-    var threshold = (STD_RESOLUTION - ratio) / MOTION_LIMITER;
+      invalidate = _useThree2[2];
 
-    if (camera.rotation) {
-      var euler = camera.rotation.clone();
-      cameraRotation.current = {
-        center: (0, _helpers.roundFloat)(euler.y, 3),
-        left: (0, _helpers.roundFloat)(euler.y - threshold, 3),
-        right: (0, _helpers.roundFloat)(euler.y + threshold, 3)
-      };
-    }
-  }, [camera]);
-  var moveByStep = (0, _react.useCallback)(function (goal, current, increment, delta) {
-    var acceleration = delta * SPEED;
-
-    if (increment && goal + acceleration > current) {
-      camera.rotation.y += acceleration;
-    } else if (!increment && goal + acceleration < current) {
-      camera.rotation.y -= acceleration;
-    } else {
-      movingCamera.current = false;
-      return;
-    }
-  }, [camera]);
-  var moveCamera = (0, _react.useCallback)(function (delta) {
-    var goal = cameraRotation.current[current.lookingSide];
-    var value = (0, _helpers.roundFloat)(camera.rotation.y, 3);
-    var increment = goal > value;
-
-    if (camera.rotation) {
-      moveByStep(goal, value, increment, delta);
-    }
-  }, [camera.rotation, current.lookingSide, moveByStep]);
+  (0, _useCameraPan.default)(current.lookingSide);
   (0, _fiber.useFrame)(function (_ref2) {
     var gl = _ref2.gl,
         scene = _ref2.scene,
-        camera = _ref2.camera,
-        clock = _ref2.clock;
+        camera = _ref2.camera;
     gl.render(scene, camera);
 
-    if (movingCamera.current) {
-      moveCamera(clock.getDelta());
-    }
-
     if (!current.animate) {
       invalidate();
     }
-  }, 1);
-  (0, _react.useEffect)(function () {
-    movingCamera.current = true;
-  }, [current.lookingSide]);
-  (0, _react.useEffect)(function () {
-    setCameraRotationView();
-  }, [windowSize, setCameraRotationView]); // settings
+  }, 1); // settings
 
   (0, _react.useEffect)(function () {
     gl.shadowMap.enabled = current.shadows;

package/dist/components/arcade-render/scene/useCameraPan.js

@@ -0,0 +1,109 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _fiber = require("@react-three/fiber");
+
+var _react = require("react");
+
+var _three = require("three");
+
+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; }
+
+var STD_RESOLUTION = 16 / 9;
+var MOTION_LIMITER = 3.5;
+var SPEED = 50;
+var quad = new _three.Quaternion();
+var yAxis = new _three.Vector3(0, 1, 0);
+
+var rotateQuatY = function rotateQuatY(current, amount) {
+  var result = current.clone();
+  quad.setFromAxisAngle(yAxis, amount);
+  return result.multiply(quad);
+};
+
+var useCameraPan = function useCameraPan(lookingSide) {
+  var _useState = (0, _react.useState)(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      cameraLoaded = _useState2[0],
+      setCameraLoaded = _useState2[1];
+
+  var movingCamera = (0, _react.useRef)(false);
+
+  var _useThree = (0, _fiber.useThree)(function (state) {
+    return [state.camera, state.viewport];
+  }),
+      _useThree2 = _slicedToArray(_useThree, 2),
+      camera = _useThree2[0],
+      viewport = _useThree2[1];
+
+  var cameraRotation = (0, _react.useRef)({
+    left: camera.quaternion,
+    center: camera.quaternion,
+    right: camera.quaternion
+  });
+  var setCameraRotationView = (0, _react.useCallback)(function () {
+    if (viewport.aspect >= STD_RESOLUTION) {
+      return;
+    }
+
+    var threshold = (STD_RESOLUTION - viewport.aspect) / MOTION_LIMITER;
+
+    if (camera.rotation) {
+      cameraRotation.current = {
+        center: camera.quaternion.clone(),
+        left: rotateQuatY(camera.quaternion, threshold),
+        right: rotateQuatY(camera.quaternion, -threshold)
+      };
+      movingCamera.current = true;
+    }
+  }, [camera, viewport.aspect]);
+  var moveCamera = (0, _react.useCallback)(function (delta) {
+    var goal = cameraRotation.current[lookingSide];
+
+    if (camera.quaternion) {
+      if (!camera.quaternion.equals(goal)) {
+        camera.quaternion.rotateTowards(goal, delta * SPEED);
+      } else {
+        movingCamera.current = false;
+        return;
+      }
+    }
+  }, [camera, lookingSide]);
+  (0, _fiber.useFrame)(function (_ref) {
+    var clock = _ref.clock;
+
+    if (movingCamera.current) {
+      moveCamera(clock.getDelta());
+    }
+  }, 1);
+  (0, _react.useEffect)(function () {
+    if (camera.defaultCamera) {
+      setCameraLoaded(true);
+    }
+  }, [camera]);
+  (0, _react.useEffect)(function () {
+    movingCamera.current = true;
+  }, [lookingSide]);
+  (0, _react.useEffect)(function () {
+    if (cameraLoaded) {
+      setCameraRotationView();
+    }
+  }, [viewport, cameraLoaded, setCameraRotationView]);
+};
+
+var _default = useCameraPan;
+exports.default = _default;

package/dist/components/pattern-component/components/PatternComponent.js

@@ -0,0 +1,56 @@
+"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 PatternComponent = function PatternComponent(_ref) {
+  var img = _ref.img,
+      name = _ref.name,
+      viewed = _ref.viewed,
+      emitEvent = _ref.emitEvent;
+
+  if (!img) {
+    return null;
+  }
+
+  var imgUrl = img.url;
+
+  var close = function close() {
+    emitEvent({
+      type: 'emitSavePattern',
+      payload: {
+        imgId: img.imgId,
+        name: name,
+        viewed: true
+      }
+    });
+  };
+
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: viewed ? 'notes--results' : 'readings--container'
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: viewed ? 'notes--results__text' : 'readings readings--image'
+  }, imgUrl && /*#__PURE__*/_react.default.createElement("img", {
+    src: imgUrl,
+    alt: "pattern"
+  }), !viewed ? /*#__PURE__*/_react.default.createElement("div", {
+    className: "position--absolute top right"
+  }, /*#__PURE__*/_react.default.createElement("button", {
+    type: "button",
+    className: "gat--btn__round",
+    onClick: function onClick() {
+      return close();
+    }
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: "icon-close"
+  }))) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null)));
+};
+
+var _default = PatternComponent;
+exports.default = _default;

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

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

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

@@ -0,0 +1,35 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.mockProps2 = exports.mockProps = void 0;
+
+var emitEvent = function emitEvent() {
+  console.log('Emit event called');
+};
+
+var mockProps = {
+  emitEvent: emitEvent,
+  img: {
+    imgId: 'alfalfa',
+    url: 'https://min.int.gamelearn.io/cooked.gl-lms-storage/clients/58dccfba26561500117caf53/image/603fb8b1901f3e001238e297/gif.gif',
+    resourceId: '5e79e0c8f5b3a6000fd81472'
+  },
+  imgName: 'Hand gif',
+  name: 'pika pika pikachu',
+  nodeId: 'node'
+};
+exports.mockProps = mockProps;
+var mockProps2 = {
+  emitEvent: emitEvent,
+  img: {
+    imgId: 'space',
+    url: 'https://min.gamelearn.io/css-resources/gamelearn/resources/cosmos-bg.jpg',
+    resourceId: '5e79e0c8f5b3a6000fd81472'
+  },
+  imgName: 'Hand gif',
+  name: 'el espacio la ultima frontera',
+  nodeId: 'node2'
+};
+exports.mockProps2 = mockProps2;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@gamelearn/arcade-components",
   "license": "Gamelearn",
-  "version": "0.15.0",
+  "version": "0.15.2",
   "main": "dist/index.js",
   "files": [
     "dist",