@gamelearn/arcade-components 0.12.0 → 0.14.0

package/dist/components/arcade-render/loading/LoadingLogic.js

@@ -28,7 +28,8 @@ function _iterableToArrayLimit(arr, i) { var _i = arr && (typeof Symbol !== "und
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
 function LoadingLogic(_ref) {
-  var onFinish = _ref.onFinish;
+  var onFinish = _ref.onFinish,
+      lodSettings = _ref.lodSettings;
   var progress = (0, _drei.useProgress)(function (state) {
     return state.progress;
   });
@@ -44,9 +45,9 @@ function LoadingLogic(_ref) {
   (0, _react.useEffect)(function () {
     if (percentage === 100) {
       onFinish();
-      (0, _drawLOD.default)(scene, camera);
+      (0, _drawLOD.default)(scene, camera, lodSettings);
     }
-  }, [onFinish, percentage, scene, camera]);
+  }, [onFinish, percentage, scene, camera, lodSettings]);
   return null;
 }
 

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

@@ -9,6 +9,10 @@ var _react = require("react");
 
 var _fiber = require("@react-three/fiber");
 
+var _helpers = require("../../../helpers");
+
+var _useWindowSize = require("../../../helpers/useWindowSize");
+
 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."); }
@@ -21,27 +25,89 @@ 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.invalidate];
+    return [state.gl, state.scene, state.camera, state.invalidate];
   }),
-      _useThree2 = _slicedToArray(_useThree, 3),
+      _useThree2 = _slicedToArray(_useThree, 4),
       gl = _useThree2[0],
       scene = _useThree2[1],
-      invalidate = _useThree2[2];
+      camera = _useThree2[2],
+      invalidate = _useThree2[3];
+
+  var windowSize = (0, _useWindowSize.useWindowSize)();
+  var cameraRotation = (0, _react.useRef)({
+    left: 0,
+    center: 0,
+    right: 0
+  });
+  var movingCamera = (0, _react.useRef)(false);
+  var setCameraRotationView = (0, _react.useCallback)(function () {
+    var ratio = window.innerWidth / window.innerHeight;
+
+    if (ratio >= STD_RESOLUTION) {
+      return;
+    }
+
+    var threshold = (STD_RESOLUTION - ratio) / MOTION_LIMITER;
+
+    if (camera.rotation) {
+      cameraRotation.current = {
+        center: (0, _helpers.roundFloat)(camera.rotation.y, 3),
+        left: (0, _helpers.roundFloat)(camera.rotation.y + threshold, 3),
+        right: (0, _helpers.roundFloat)(camera.rotation.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, _fiber.useFrame)(function (_ref2) {
     var gl = _ref2.gl,
         scene = _ref2.scene,
-        camera = _ref2.camera;
+        camera = _ref2.camera,
+        clock = _ref2.clock;
     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
+
   (0, _react.useEffect)(function () {
     gl.shadowMap.enabled = current.shadows;
 

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

@@ -50,8 +50,11 @@ var Scene = function Scene(_ref) {
       loadingText = _ref$loadingText === void 0 ? '' : _ref$loadingText,
       _ref$toggleShadows = _ref.toggleShadows,
       toggleShadows = _ref$toggleShadows === void 0 ? true : _ref$toggleShadows,
+      _ref$lodSettings = _ref.lodSettings,
+      lodSettings = _ref$lodSettings === void 0 ? {} : _ref$lodSettings,
       _ref$stopAnimate = _ref.stopAnimate,
       stopAnimate = _ref$stopAnimate === void 0 ? false : _ref$stopAnimate,
+      lookingSide = _ref.lookingSide,
       _ref$emitEvent = _ref.emitEvent,
       emitEvent = _ref$emitEvent === void 0 ? function () {} : _ref$emitEvent;
 
@@ -80,7 +83,7 @@ var Scene = function Scene(_ref) {
   }, [emitEvent]);
   (0, _react.useEffect)(function () {
     setShowLoad(true);
-  }, [backgroundData, elements]);
+  }, [backgroundData, elements, lodSettings.currentLOD]);
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_fiber.Canvas, {
     className: "main-canvas",
     style: {
@@ -99,14 +102,16 @@ var Scene = function Scene(_ref) {
   }, /*#__PURE__*/_react.default.createElement(_ConfigController.default, {
     current: {
       shadows: toggleShadows,
-      animate: stopAnimate
+      animate: stopAnimate,
+      lookingSide: lookingSide
     }
   }), /*#__PURE__*/_react.default.createElement(_react.Suspense, {
     fallback: /*#__PURE__*/_react.default.createElement(_loading.default, {
       text: loadingText
     })
   }, showLoad && /*#__PURE__*/_react.default.createElement(_loading.LoadingLogic, {
-    onFinish: handleLoadFinish
+    onFinish: handleLoadFinish,
+    lodSettings: lodSettings
   }), elements.length ? /*#__PURE__*/_react.default.createElement(_elementsList.default, {
     elements: elements,
     eventHandler: emitEvent

package/dist/components/cards-selector-puzzle-component/components/CardsSelectorPuzzleComponent.js

@@ -44,7 +44,8 @@ var CardsSelectorPuzzleComponent = function CardsSelectorPuzzleComponent(_ref) {
       info = _ref.info,
       cards = _ref.cards,
       disableExit = _ref.disableExit,
-      setResolveAction = _ref.setResolveAction;
+      setResolveAction = _ref.setResolveAction,
+      soundActions = _ref.soundActions;
 
   var _useState = (0, _react.useState)(false),
       _useState2 = _slicedToArray(_useState, 2),
@@ -81,6 +82,9 @@ var CardsSelectorPuzzleComponent = function CardsSelectorPuzzleComponent(_ref) {
       feedBackText = _useState14[0],
       setFeedBackText = _useState14[1];
 
+  var _soundActions = _slicedToArray(soundActions, 1),
+      playSound = _soundActions[0];
+
   var _endPuzzle = function endPuzzle() {
     setFeedbackResult(true);
     setFeedBackText(info.solution.right.desc);
@@ -89,6 +93,7 @@ var CardsSelectorPuzzleComponent = function CardsSelectorPuzzleComponent(_ref) {
     var rewards = info.solution.right.rewards;
     var rewardsData = [].concat(_toConsumableArray(accRewards), _toConsumableArray(rewards));
     setTimeout(function () {
+      playSound('score');
       emitEvent({
         type: 'addPoints',
         payload: _toConsumableArray(rewardsData)
@@ -103,6 +108,7 @@ var CardsSelectorPuzzleComponent = function CardsSelectorPuzzleComponent(_ref) {
     disableExit(true);
     setRewards([].concat(_toConsumableArray(accRewards), _toConsumableArray(info.solution.wrong.rewards)));
     setTimeout(function () {
+      playSound('fail');
       setFeedbackResult(false);
       disableExit(false);
       setFeedbackIsShown(false);

package/dist/components/cards-selector-puzzle-component/mocks/mockForStory.js

@@ -11,6 +11,7 @@ var emitEvent = function emitEvent() {
 
 var mockProps = {
   emitEvent: emitEvent,
+  soundActions: [function () {}, function () {}],
   disableExit: function disableExit() {},
   setResolveAction: function setResolveAction() {},
   cards: [{

package/dist/components/cartel-component/components/CartelComponent.js

@@ -13,11 +13,29 @@ function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return
 
 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 _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 CartelComponent = function CartelComponent(_ref) {
   var img = _ref.img,
       text = _ref.text,
       audio = _ref.audio,
-      emitEvent = _ref.emitEvent;
+      emitEvent = _ref.emitEvent,
+      soundActions = _ref.soundActions;
+  var textBox = (0, _react.useRef)();
+  var picture = (0, _react.useRef)();
+
+  var _soundActions = _slicedToArray(soundActions, 1),
+      playSound = _soundActions[0];
 
   var close = function close() {
     emitEvent({
@@ -25,9 +43,6 @@ var CartelComponent = function CartelComponent(_ref) {
     });
   };
 
-  var textBox = (0, _react.useRef)();
-  var picture = (0, _react.useRef)();
-
   var assignValueByMediaQuery = function assignValueByMediaQuery(valueMobile, valueDesktop) {
     if (window.matchMedia('(min-width: 1280px)').matches) {
       /* Screen >= 1200  */
@@ -68,8 +83,11 @@ var CartelComponent = function CartelComponent(_ref) {
       resizeObserver.observe(picture.current);
     }
   });
-  (0, _react.useEffect)(function () {// PLAY SOUND
-  }, []);
+  (0, _react.useEffect)(function () {
+    if (audio.url) {
+      playSound(audio.url);
+    }
+  }, [playSound, audio]);
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
     className: "cartel"
   }, /*#__PURE__*/_react.default.createElement("div", {

package/dist/components/chained-image-click-puzzle-component/components/CurrentImagePuzzle.js

@@ -58,6 +58,10 @@ var CurrentImageClickPuzzle = function CurrentImageClickPuzzle(_ref) {
       setIndex = _useState2[1];
 
   var puzzleId = "chained-image-click-puzzle_".concat(index, "_").concat(nodeId);
+
+  var _soundActions = _slicedToArray(soundActions, 1),
+      playSound = _soundActions[0];
+
   var currentPuzzleStatus = (0, _react.useMemo)(function () {
     return emitEvent({
       type: 'loadObjectStatus',
@@ -70,11 +74,12 @@ var CurrentImageClickPuzzle = function CurrentImageClickPuzzle(_ref) {
   };
 
   var handleFinish = (0, _react.useCallback)(function (rewards) {
+    playSound('score');
     emitEvent({
       type: 'addPoints',
       payload: [].concat(_toConsumableArray(accRewards.current), _toConsumableArray(rewards))
     });
-  }, [emitEvent]);
+  }, [emitEvent, playSound]);
   var handleResolve = (0, _react.useCallback)(function () {
     emitEvent({
       type: 'puzzleAction',
@@ -106,6 +111,7 @@ var CurrentImageClickPuzzle = function CurrentImageClickPuzzle(_ref) {
   }, [index, list.length, selected, currentImageProps.areas.length, handleFinish, handleResolve, setSelected]);
 
   var onResolve = function onResolve(resolve) {
+    playSound('score');
     resolve(false);
     setTimeout(function () {
       onComplete(info.resolve.rewards || [], false);
@@ -119,7 +125,6 @@ var CurrentImageClickPuzzle = function CurrentImageClickPuzzle(_ref) {
     var timeout;
 
     if (currentPuzzleStatus) {
-      alert('TEST');
       timeout = setTimeout(function () {
         onComplete([], false);
       }, 2000);

package/dist/components/conversational-component/components/ConversationalComponent.js

@@ -44,7 +44,8 @@ var ConversationalComponent = function ConversationalComponent(_ref) {
       messages = _ref.messages,
       characters = _ref.characters,
       alias = _ref.alias,
-      background = _ref.background;
+      background = _ref.background,
+      lodSettings = _ref.lodSettings;
 
   var _useState = (0, _react.useState)(0),
       _useState2 = _slicedToArray(_useState, 2),
@@ -87,6 +88,7 @@ var ConversationalComponent = function ConversationalComponent(_ref) {
     } : {}
   }, /*#__PURE__*/_react.default.createElement(_SlotList.default, {
     characters: parsedCharacters,
+    lodSettings: lodSettings,
     currentMessage: currentMessage,
     slots: parsedCharacters,
     flex: true

package/dist/components/conversational-pro-component/components/ConversationalProComponent.js

@@ -48,7 +48,8 @@ var ConversationProViewer = function ConversationProViewer(_ref) {
       lines = _ref.lines,
       characters = _ref.characters,
       background = _ref.background,
-      soundActions = _ref.soundActions;
+      soundActions = _ref.soundActions,
+      lodSettings = _ref.lodSettings;
 
   var _useState = (0, _react.useState)(0),
       _useState2 = _slicedToArray(_useState, 2),
@@ -165,6 +166,7 @@ var ConversationProViewer = function ConversationProViewer(_ref) {
   var decisionPayload = _objectSpread(_objectSpread({}, currentLineData.payload), {}, {
     onFinish: handleClickNext,
     emitEvent: emitEvent,
+    soundActions: soundActions,
     inheritProps: {
       characters: characters,
       background: backgroundImage,
@@ -185,7 +187,8 @@ var ConversationProViewer = function ConversationProViewer(_ref) {
       backgroundImage: "url(\"".concat(backgroundImage, "\")")
     } : {}
   }, /*#__PURE__*/_react.default.createElement(_SlotList.default, _extends({}, listProps, {
-    characters: characters
+    characters: characters,
+    lodSettings: lodSettings
   })), /*#__PURE__*/_react.default.createElement("div", {
     className: "conversation--body"
   }, currentMessage ? /*#__PURE__*/_react.default.createElement(_Message.default, {

package/dist/components/conversational-pro-component/components/SlotList.js

@@ -19,6 +19,7 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 
 var SlotList = function SlotList(_ref) {
   var characters = _ref.characters,
+      lodSettings = _ref.lodSettings,
       currentMessage = _ref.currentMessage,
       flex = _ref.flex,
       slots = _ref.slots,
@@ -86,7 +87,8 @@ var SlotList = function SlotList(_ref) {
     characters: currentChars,
     slots: slots,
     flex: flex,
-    currentMessage: currentMessage
+    currentMessage: currentMessage,
+    lodSettings: lodSettings
   }), children && children.ref ? children : /*#__PURE__*/_react.default.createElement(Slots, null));
 };
 

package/dist/components/conversational-pro-component/components/scene/Panel.js

@@ -35,7 +35,8 @@ function Panel(_ref) {
   var _character$resource, _character$resource$a;
 
   var character = _ref.character,
-      active = _ref.active;
+      active = _ref.active,
+      lodSettings = _ref.lodSettings;
   var cameraRef = (0, _react.useRef)(null);
   var sceneRef = (0, _react.useRef)(null);
   var isCharacter = character.type === 'character';
@@ -58,9 +59,9 @@ function Panel(_ref) {
       }
 
       cameraRef.current.updateProjectionMatrix();
-      (0, _drawLOD.default)(sceneRef.current, cameraRef.current);
+      (0, _drawLOD.default)(sceneRef.current, cameraRef.current, lodSettings);
     }
-  }, [character]);
+  }, [character, lodSettings]);
   (0, _fiber.useFrame)(function (_ref2) {
     var gl = _ref2.gl;
 

package/dist/components/conversational-pro-component/components/scene/Panels.js

@@ -15,7 +15,8 @@ var Panels = function Panels(_ref) {
   var characters = _ref.characters,
       slots = _ref.slots,
       activeIndex = _ref.activeIndex,
-      flex = _ref.flex;
+      flex = _ref.flex,
+      lodSettings = _ref.lodSettings;
   return characters.map(function (char, index) {
     var notFlexedPosition = slots.findIndex(function (s) {
       return s.uid === char.uid;
@@ -26,7 +27,8 @@ var Panels = function Panels(_ref) {
     return /*#__PURE__*/_react.default.createElement(_Panel.default, {
       key: index,
       character: char,
-      active: activeIndex === currentSlot
+      active: activeIndex === currentSlot,
+      lodSettings: lodSettings
     });
   });
 };

package/dist/components/conversational-pro-component/components/scene/index.js

@@ -38,7 +38,8 @@ function Renderer(_ref) {
       slots = _ref.slots,
       slotRefs = _ref.slotRefs,
       flex = _ref.flex,
-      currentMessage = _ref.currentMessage;
+      currentMessage = _ref.currentMessage,
+      lodSettings = _ref.lodSettings;
 
   var _useState = (0, _react.useState)(),
       _useState2 = _slicedToArray(_useState, 2),
@@ -59,7 +60,8 @@ function Renderer(_ref) {
     slots: slots,
     slotRefs: slotRefs,
     flex: flex,
-    activeIndex: currentMessage.position
+    activeIndex: currentMessage.position,
+    lodSettings: lodSettings
   }) : null;
 }