lido-player 0.0.2-beta-16-dev → 0.0.2-beta-17-dev

package/dist/collection/utils/utilsHandlers/slideHandler.js

@@ -1,6 +1,6 @@
 import { LIDO_INTERACTION_CLEANUP_EVENT, LidoContainer, SelectedValuesKey } from "../constants";
 import { findMostoverlappedElement, getElementScale } from "./dragDropHandler";
-import { calculateScale, executeActions, matchStringPattern, storingEachActivityScore } from "../utils";
+import { applyBorderToClickableCell, calculateScale, matchStringPattern, storingEachActivityScore, validateObjectiveStatus } from "../utils";
 import { removeHighlight } from "./highlightHandler";
 let numberOfSlides = 0;
 const slideNumbers = (element) => {
@@ -84,6 +84,9 @@ export function slidingWithScaling(element) {
     let verticalDistance;
     let horizontalDistance;
     const onStart = (event) => {
+        const templateId = container.getAttribute('template-id');
+        if ((templateId === 'arrangeLetters' || templateId === 'reorder') && container.getAttribute('game-completed') === 'true')
+            return;
         removeHighlight(element);
         isDragging = true;
         elementRect = element.getBoundingClientRect();
@@ -235,7 +238,7 @@ export function slidingWithScaling(element) {
         element.style.transform = 'translate(0, 0)';
         setTimeout(() => {
             if (overlapElement) {
-                slideCompleted(element);
+                void slideCompleted(element);
                 overlapElement = false;
             }
         }, 300);
@@ -259,37 +262,93 @@ export function slidingWithScaling(element) {
     element.addEventListener('touchstart', onStart);
     element.addEventListener(LIDO_INTERACTION_CLEANUP_EVENT, cleanup);
 }
-const slideCompleted = (slideElement) => {
+const isArrangeLettersContainer = (container) => container.getAttribute('template-id') === 'arrangeLetters';
+const isReorderContainer = (container) => container.getAttribute('template-id') === 'reorder';
+export const getSlideValuesForValidation = (container, slideElements) => {
+    if (isReorderContainer(container)) {
+        return slideElements.map(element => element.id);
+    }
+    return slideElements.map(element => element['value']);
+};
+export const updateArrangeLettersCorrectness = (container, slideValues, objectiveValues) => {
+    const slideElements = Array.from(container.querySelectorAll('[type="slide"]'));
+    slideElements.forEach((element, index) => {
+        const isCorrect = index < objectiveValues.length && slideValues[index] === objectiveValues[index].trim();
+        if (isCorrect) {
+            applyBorderToClickableCell(element, '#65BC46');
+        }
+        else {
+            element.style.removeProperty('box-shadow');
+        }
+    });
+};
+export const isArrangeLettersComplete = (slideValues, objectiveString) => {
+    if (!objectiveString)
+        return false;
+    const objectiveValues = objectiveString.split(',').map(value => value.trim());
+    return slideValues.length === objectiveValues.length
+        && slideValues.every((value, index) => value === objectiveValues[index]);
+};
+export const updateReorderCorrectness = (container, slideValues, objectiveValues) => {
+    const slideElements = Array.from(container.querySelectorAll('[type="slide"]'));
+    slideElements.forEach((element, index) => {
+        const isCorrect = index < objectiveValues.length && slideValues[index] === objectiveValues[index].trim();
+        if (isCorrect) {
+            applyBorderToClickableCell(element, '#65BC46');
+        }
+        else {
+            element.style.removeProperty('box-shadow');
+        }
+    });
+};
+export const isReorderComplete = (slideValues, objectiveString) => {
+    if (!objectiveString)
+        return false;
+    const objectiveValues = objectiveString.split(',').map(value => value.trim());
+    return slideValues.length === objectiveValues.length
+        && slideValues.every((value, index) => value === objectiveValues[index]);
+};
+const slideCompleted = async (slideElement) => {
     var _a;
     const container = document.getElementById(LidoContainer);
     const slideArr = JSON.parse((_a = container.getAttribute(SelectedValuesKey)) !== null && _a !== void 0 ? _a : '[]');
-    const allSlideElements = document.querySelectorAll("[type='slide']");
-    let index = 0;
-    allSlideElements.forEach(item => {
-        slideArr[index++] = item['value'];
+    const allSlideElements = Array.from(document.querySelectorAll("[type='slide']"));
+    const slideValues = getSlideValuesForValidation(container, allSlideElements);
+    slideValues.forEach((value, index) => {
+        slideArr[index] = value;
     });
     container.setAttribute(SelectedValuesKey, JSON.stringify(slideArr));
     const objectiveString = document.getElementById(LidoContainer)['objective'];
     const objectiveArray = objectiveString.split(',');
-    const elementIndex = slideArr.indexOf(slideElement['value']);
-    const isCorrect = matchStringPattern(slideElement['value'], [objectiveArray[elementIndex].trim()]);
+    const elementIndex = allSlideElements.indexOf(slideElement);
+    const isCorrect = elementIndex >= 0 && elementIndex < objectiveArray.length
+        ? matchStringPattern(slideValues[elementIndex], [objectiveArray[elementIndex].trim()])
+        : false;
+    if (isArrangeLettersContainer(container)) {
+        updateArrangeLettersCorrectness(container, slideValues, objectiveArray);
+    }
+    else if (isReorderContainer(container)) {
+        updateReorderCorrectness(container, slideValues, objectiveArray);
+    }
     if (container.getAttribute('is-continue-on-correct') === 'true') {
         storingEachActivityScore(true);
-        // validationForSlideHandler();
     }
     else {
         storingEachActivityScore(isCorrect);
     }
+    if (isArrangeLettersContainer(container) || isReorderContainer(container)) {
+        await validationForSlideHandler(slideValues);
+    }
 };
-const validationForSlideHandler = async () => {
-    var _a, _b;
+const validationForSlideHandler = async (slideValues) => {
     const container = document.getElementById(LidoContainer);
-    if (!container)
+    if (!container || (!isArrangeLettersContainer(container) && !isReorderContainer(container)) || container.getAttribute('game-completed') === 'true')
         return;
-    const objectiveArray = (_b = JSON.parse((_a = container.getAttribute(SelectedValuesKey)) !== null && _a !== void 0 ? _a : '[]')) !== null && _b !== void 0 ? _b : [];
     const objectiveString = document.getElementById(LidoContainer)['objective'];
-    const res = matchStringPattern(objectiveString, objectiveArray);
-    if (res) {
-        await executeActions(container.getAttribute('onCorrect'), container);
+    const isComplete = isArrangeLettersContainer(container)
+        ? isArrangeLettersComplete(slideValues, objectiveString)
+        : isReorderComplete(slideValues, objectiveString);
+    if (isComplete) {
+        await validateObjectiveStatus();
     }
 };