@gamelearn/arcade-components 3.12.0 → 3.12.2

package/dist/arcade-components.js

@@ -53039,28 +53039,53 @@ function WebBuilderPuzzleComponent({
     p && !u ? /* @__PURE__ */ jsxRuntimeExports.jsx(PublishButton, { onPublish: I, translate: G }) : null
   ] });
 }
-function Card({ card: o, handleClick: e, flipped: r, cardIndex: t, wrongOrder: n }) {
-  const a = () => !(o.img || o.text), l = () => {
-    const _ = (o.img || {}).url;
-    return /* @__PURE__ */ jsxRuntimeExports.jsx("img", { src: _, alt: "" });
-  }, u = () => o.text ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `card-selector-item__textbox ${o.img ? "" : "card-selector-item__textbox--noimage"}`, children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "card-selector-item__text", children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: o.text || "_" }) }) }) : null, f = () => !!(r && !o.correct || !r), c = () => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "card-selector-item__feedback card-selector-item__feedback--error", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "card-selector-item__feedbackicon", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "icon-error-circle-black" }) }) }), h = () => o.order ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "card-selector-item__order", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: o.order }) }) : null, v = () => /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "card-selector-item__feedback  card-selector-item__feedback--success  ", children: [
-    h(),
+function CardImage({ img: o }) {
+  const r = (o || {}).url;
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("img", { src: r, alt: "" });
+}
+function CardText({ text: o, hasImage: e }) {
+  return o ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `card-selector-item__textbox ${e ? "" : "card-selector-item__textbox--noimage"}`, children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "card-selector-item__text", children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: o || "_" }) }) }) : null;
+}
+function CardNumber({ order: o }) {
+  return o ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "card-selector-item__order", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: o }) }) : null;
+}
+function CardSuccess({ order: o }) {
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "card-selector-item__feedback  card-selector-item__feedback--success  ", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(CardNumber, { order: o }),
     /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "card-selector-item__feedbackicon", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "icon-check-circle-black" }) })
-  ] }), E = () => !a() && r && o.correct && !n ? v() : !a() && r ? c() : null;
+  ] });
+}
+function CardFail() {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "card-selector-item__feedback card-selector-item__feedback--error", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "card-selector-item__feedbackicon", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "icon-error-circle-black" }) }) });
+}
+function CardContainer({ flipped: o, correct: e, order: r, wrongOrder: t, isEmpty: n }) {
+  return !n && o && e && !t ? /* @__PURE__ */ jsxRuntimeExports.jsx(CardSuccess, { order: r }) : !n && o ? /* @__PURE__ */ jsxRuntimeExports.jsx(CardFail, {}) : null;
+}
+function Card({ card: o, handleClick: e, flipped: r, cardIndex: t, wrongOrder: n }) {
+  const a = () => !(o.img || o.text), l = () => !!(r && !o.correct || !r);
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(
     "button",
     {
       type: "button",
       order: o.order,
       onClick: () => {
-        !a() && f() && e(t);
+        !a() && l() && e(t);
       },
       className: `unset-button card-selector-item ${a() ? "card-selector-item--empty" : ""}`,
       "aria-label": o.text ? o.text : null,
       children: [
-        l(),
-        u(),
-        E()
+        /* @__PURE__ */ jsxRuntimeExports.jsx(CardImage, { img: o.img }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(CardText, { text: o.text, hasImage: !!o.img }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          CardContainer,
+          {
+            isEmpty: a(),
+            flipped: r,
+            wrongOrder: n,
+            order: o.order,
+            correct: o.correct
+          }
+        )
       ]
     }
   );
@@ -53107,9 +53132,9 @@ function Board({
       C();
     }, 1e3);
   };
-  function P(F) {
-    const G = Array.from(h);
-    G[F] = F, v(G);
+  function P(F, G = F) {
+    const H = Array.from(h);
+    H[F] = G, v(H);
   }
   const O = useCallback(() => {
     const F = [];
@@ -53129,18 +53154,17 @@ function Board({
     if (!x && !n)
       if (T("click-ui"), o[F].correct && !A)
         k(F);
-      else if (A)
+      else if (A) {
         if (o[F].order === e)
           r(e + 1), k(F);
-        else {
-          if (o[F].order !== e) {
-            const W = Array.from(E);
-            W[F] = F, g(W), t(((G = o[F]) == null ? void 0 : G.id) || null, o[F].correct), w();
-          }
-          P(F);
+        else if (P(F), o[F].order !== e) {
+          const W = Array.from(E);
+          W[F] = F, g(W), t(((G = o[F]) == null ? void 0 : G.id) || null, o[F].correct), w();
         }
-      else
-        t(((H = o[F]) == null ? void 0 : H.id) || null), w(), P(F);
+      } else
+        t(((H = o[F]) == null ? void 0 : H.id) || null), P(F), setTimeout(() => {
+          P(F, !1);
+        }, 1e3);
   };
   return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `cards-selector__content cards-selector__content-${o.length}`, children: o && o.map((F, G) => /* @__PURE__ */ jsxRuntimeExports.jsx(
     Card,
@@ -57349,13 +57373,13 @@ function BubbleWrapper({ currentMessage: o, translate: e }) {
       onOcclude: () => null,
       zIndexRange: [5, 5],
       portal: r ? { current: r } : void 0,
-      style: { width: "100vw", height: "100%", position: "static", outline: "1px solid yellow" },
+      style: { width: "100vw", height: "100%", position: "static" },
       calculatePosition: () => [0, 0],
       children: /* @__PURE__ */ jsxRuntimeExports.jsx(SpeechBubbleComponent$1, { translate: e, message: o })
     }
   ) });
 }
-const cleanStyle = { width: "100vw", height: "100vh", position: "static" };
+const cleanStyle = { width: "100vw", height: "100%", position: "static" };
 function DialogDecision(o) {
   const e = document.querySelector(".screens--container");
   return useEffect(() => (o.onMount && o.onMount(), () => {
@@ -57363,6 +57387,7 @@ function DialogDecision(o) {
   }), []), /* @__PURE__ */ jsxRuntimeExports.jsx(
     HtmlPro,
     {
+      wrapperClass: "htmlpro-wrap-100-h",
       zIndexRange: [6, 6],
       style: cleanStyle,
       portal: e ? { current: e } : void 0,