@gamelearn/arcade-components 2.32.0 → 2.33.1

package/dist/components/dialog-component/components/BubbleWrapper.js

@@ -13,6 +13,7 @@ var BubbleWrapper = function BubbleWrapper(_ref) {
     translate = _ref.translate;
   var container = document.querySelector('.screens--container');
   return /*#__PURE__*/_react.default.createElement("group", null, /*#__PURE__*/_react.default.createElement(_arcadeThreeCore.HtmlPro, {
+    wrapperClass: "htmlpro-wrap-100-h",
     onOcclude: function onOcclude() {
       return null;
     },
@@ -22,8 +23,9 @@ var BubbleWrapper = function BubbleWrapper(_ref) {
     } : undefined,
     style: {
       width: '100vw',
-      height: '100vh',
-      position: 'static'
+      height: '100%',
+      position: 'static',
+      outline: '1px solid yellow'
     },
     calculatePosition: function calculatePosition() {
       return [0, 0];

package/dist/components/dialog-component/components/DialogComponent.js

@@ -730,9 +730,10 @@ var DialogComponent = function DialogComponent(_ref) {
     translate: translate,
     currentMessage: currentMessage
   }) : null, /*#__PURE__*/_react.default.createElement(_arcadeThreeCore.HtmlPro, {
+    wrapperClass: "htmlpro-wrap-100-h",
     style: {
       width: '100vw',
-      height: '100vh',
+      height: '100%',
       position: 'static'
     },
     portal: container ? {

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

@@ -17,14 +17,16 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
 function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; } /* eslint-disable react/no-array-index-key */
 var SingleElectionRender = function SingleElectionRender(_ref) {
-  var opt = _ref.opt,
+  var decisionInspected = _ref.decisionInspected,
+    opt = _ref.opt,
     index = _ref.index,
     setCurrentDecisionSelected = _ref.setCurrentDecisionSelected,
-    setCurrentDecisionHovered = _ref.setCurrentDecisionHovered,
+    setCurrentDecisionInspected = _ref.setCurrentDecisionInspected,
     soundActions = _ref.soundActions;
   return opt && opt.fullText && opt.fullText !== '' ? /*#__PURE__*/_react.default.createElement(_SingleElection.default, {
+    decisionInspected: decisionInspected,
     setCurrentDecisionSelected: setCurrentDecisionSelected,
-    setCurrentDecisionHovered: setCurrentDecisionHovered,
+    setCurrentDecisionInspected: setCurrentDecisionInspected,
     option: opt,
     soundActions: soundActions,
     index: index
@@ -37,13 +39,13 @@ var ElectionComponent = function ElectionComponent(_ref2) {
     soundActions = _ref2.soundActions;
   var _useState = (0, _react.useState)(''),
     _useState2 = _slicedToArray(_useState, 2),
-    decisionHovered = _useState2[0],
-    setCurrentDecisionHovered = _useState2[1];
+    decisionInspected = _useState2[0],
+    setCurrentDecisionInspected = _useState2[1];
   (0, _react.useEffect)(function () {
     printed();
   }, [printed]);
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: "elections-box ".concat(decisionHovered)
+    className: "elections-box pos".concat(decisionInspected + 1)
   }, textWithOpts && textWithOpts.map(function (opt, index) {
     return /*#__PURE__*/_react.default.createElement(SingleElectionRender, {
       opt: opt,
@@ -51,7 +53,8 @@ var ElectionComponent = function ElectionComponent(_ref2) {
       index: index,
       key: index,
       setCurrentDecisionSelected: setCurrentDecisionSelected,
-      setCurrentDecisionHovered: setCurrentDecisionHovered
+      setCurrentDecisionInspected: setCurrentDecisionInspected,
+      decisionInspected: decisionInspected
     });
   }));
 };

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

@@ -1,56 +1,27 @@
 "use strict";
 
-function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 var _htmlReactParser = _interopRequireDefault(require("html-react-parser"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && 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 = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-var useHover = function useHover() {
-  var ref = (0, _react.useRef)();
-  var _useState = (0, _react.useState)(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    hovered = _useState2[0],
-    setHovered = _useState2[1];
-  var enter = function enter() {
-    return setHovered(true);
-  };
-  var leave = function leave() {
-    return setHovered(false);
-  };
-  (0, _react.useEffect)(function () {
-    var current = ref.current;
-    current.addEventListener('mouseenter', enter);
-    current.addEventListener('mouseleave', leave);
-    return function () {
-      current.removeEventListener('mouseenter', enter);
-      current.removeEventListener('mouseleave', leave);
-    };
-  }, [ref]);
-  return [ref, hovered];
-};
 var SingleElection = function SingleElection(_ref) {
   var option = _ref.option,
+    decisionInspected = _ref.decisionInspected,
     setCurrentDecisionSelected = _ref.setCurrentDecisionSelected,
     index = _ref.index,
-    setCurrentDecisionHovered = _ref.setCurrentDecisionHovered,
+    setCurrentDecisionInspected = _ref.setCurrentDecisionInspected,
     soundActions = _ref.soundActions;
   var _soundActions = _slicedToArray(soundActions, 1),
     playSound = _soundActions[0];
-  var _useHover = useHover(),
-    _useHover2 = _slicedToArray(_useHover, 2),
-    ref = _useHover2[0],
-    hovered = _useHover2[1];
   var useText = function useText(opt) {
     if (opt.previewText !== '') {
       return (0, _htmlReactParser.default)(opt.previewText);
@@ -68,12 +39,20 @@ var SingleElection = function SingleElection(_ref) {
     playSound('click-ui');
     setCurrentDecisionSelected(index);
   };
-  var moveEyeArrow = function moveEyeArrow() {
-    setCurrentDecisionHovered("pos".concat(index + 1));
+  var onKeyDownInspect = function onKeyDownInspect(ev) {
+    if (ev.keyCode === 13) {
+      onInspect(ev);
+    }
   };
-  var changeEyeBack = function changeEyeBack(e) {
-    e.target.style.background = '';
-    setCurrentDecisionHovered('');
+  var onInspect = function onInspect(ev) {
+    ev.preventDefault();
+    ev.stopPropagation();
+    if (decisionInspected === index) {
+      ev.target.style.background = '';
+      setCurrentDecisionInspected('');
+    } else {
+      setCurrentDecisionInspected(index);
+    }
   };
   return /*#__PURE__*/_react.default.createElement("div", {
     className: "single-election"
@@ -86,18 +65,19 @@ var SingleElection = function SingleElection(_ref) {
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "single-election__btn"
   }, useText(option)), /*#__PURE__*/_react.default.createElement("div", {
-    onMouseOver: moveEyeArrow,
-    onFocus: moveEyeArrow,
-    onMouseLeave: changeEyeBack,
-    ref: ref,
-    className: fullTextIcon(option)
-  })), hovered && /*#__PURE__*/_react.default.createElement("div", {
+    onClick: onInspect,
+    onKeyDown: onKeyDownInspect,
+    className: fullTextIcon(option),
+    "aria-label": "Inspect",
+    role: "button",
+    tabIndex: 0
+  })), decisionInspected === index && /*#__PURE__*/_react.default.createElement("div", {
     className: "single-election__complete"
   }, /*#__PURE__*/_react.default.createElement("div", null, (0, _htmlReactParser.default)(option.fullText))));
 };
 SingleElection.defaultProps = {
   setCurrentDecisionSelected: function setCurrentDecisionSelected() {},
-  setCurrentDecisionHovered: function setCurrentDecisionHovered() {},
+  setCurrentDecisionInspected: function setCurrentDecisionInspected() {},
   option: {},
   index: 0
 };

package/package.json

@@ -2,7 +2,7 @@
   "name": "@gamelearn/arcade-components",
   "author": "Gamelearn",
   "license": "unlicense",
-  "version": "2.32.0",
+  "version": "2.33.1",
   "main": "dist/index.js",
   "files": [
     "dist",
@@ -14,7 +14,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.18.6",
-    "@gamelearn/arcade-styles": "2.18.1",
+    "@gamelearn/arcade-styles": "2.18.2",
     "@gamelearn/arcade-three-core": "1.24.3",
     "@react-three/a11y": "^3.0.0",
     "@react-three/drei": "9.4.3",