catchup-library-web 1.20.35 → 1.21.0

package/src/components/activities/material-contents/MatchingActivityMaterialContent.tsx

@@ -1,11 +1,8 @@
 import { useEffect, useRef, useState } from "react";
-import { useDrop } from "react-dnd";
 import ShowMaterialMediaByContentType from "./ShowMaterialMediaByContentType";
 import { InlineMath } from "react-katex";
 import { constructInputWithSpecialExpressionList } from "../../../utilization/CatchtivityUtilization";
 import { IMatchingActivityMaterialProps } from "../../../properties/ActivityProperties";
-import DraggableItem from "../../dnds/DraggableItem";
-import DroppableItem from "../../dnds/DroppableItem";
 import DividerLine from "../../dividers/DividerLine";
 
 const MatchingActivityMaterialContent = ({
@@ -18,17 +15,22 @@ const MatchingActivityMaterialContent = ({
   isPreview,
   showCorrectAnswer,
 }: IMatchingActivityMaterialProps) => {
-  const [selectedValue, setSelectedValue] = useState(null);
-  const [selectedTargetKey, setSelectedTargetKey] = useState(null);
+  const [selectedValue, setSelectedValue] = useState<string | null>(null);
+  const [draggedValue, setDraggedValue] = useState<string | null>(null);
+  const [dropTargetKey, setDropTargetKey] = useState<string | null>(null);
+  const [draggedElement, setDraggedElement] = useState<HTMLElement | null>(
+    null
+  );
   const [isShuffled, setIsShuffled] = useState(false);
-  const [shuffledMaterialList, setShuffledMaterialList] = useState([]);
-  const [{ isOver, canDrop }, drop] = useDrop({
-    accept: "MATCHING",
-    drop: () => {},
-    collect: (monitor) => ({
-      isOver: monitor.isOver(),
-      canDrop: monitor.canDrop(),
-    }),
+  const [shuffledMaterialList, setShuffledMaterialList] = useState<any[]>([]);
+  const dragElementRef = useRef<HTMLDivElement>(null);
+  const [mousePosition, setMousePosition] = useState<{ x: number; y: number }>({
+    x: 0,
+    y: 0,
+  });
+  const [touchPosition, setTouchPosition] = useState<{ x: number; y: number }>({
+    x: 0,
+    y: 0,
   });
   const itemsRef = useRef<HTMLDivElement>(null);
 
@@ -50,32 +52,20 @@ const MatchingActivityMaterialContent = ({
       materialList.push(materialMap[materialKey]);
     });
     setShuffledMaterialList(shuffleArray(materialList));
-  }, []);
+  }, [materialMap, isShuffled]);
 
   useEffect(() => {
     if (!showCorrectAnswer) return;
     answer.data.find(
       (answerData: any) => answerData.type === "MATCHING"
     ).answerMap = materialMap;
-  }, [showCorrectAnswer]);
+  }, [showCorrectAnswer, answer, materialMap]);
 
   const retrieveAnswerMap = () => {
     const foundIndex = answer.data.findIndex(
       (answerData: any) => answerData.type === "MATCHING"
     );
     return answer.data[foundIndex].answerMap;
-    // const sortedAnswerMapKeys = Object.keys(answerMap).sort((a, b) =>
-    //   answerMap[a]
-    //     ? answerMap[b]
-    //       ? answerMap[a].localeCompare(answerMap[b])
-    //       : 1
-    //     : -1
-    // );
-    // const sortedAnswerMap: any = {};
-    // for (const answerMapKey of sortedAnswerMapKeys) {
-    //   sortedAnswerMap[answerMapKey] = answerMap[answerMapKey];
-    // }
-    // return sortedAnswerMap;
   };
 
   const retrieveFilteredMaterialList = (answerMap: any) => {
@@ -100,12 +90,99 @@ const MatchingActivityMaterialContent = ({
     return "INCORRECT";
   };
 
-  const handleMatchingActivityItemOnChange = (
-    selectedTargetKey: string,
-    selectedValue: string | null
-  ) => {
-    if (checkCanAnswerQuestion()) {
-      onChange(answer, selectedTargetKey, selectedValue);
+  // Mouse drag handlers
+  const handleMouseDown = (
+    e: React.MouseEvent,
+    materialValue: string
+  ): void => {
+    if (!checkCanAnswerQuestion()) return;
+    e.preventDefault();
+    setDraggedValue(materialValue);
+    setSelectedValue(null);
+    setMousePosition({ x: e.clientX, y: e.clientY });
+  };
+
+  const handleMouseMove = (e: React.MouseEvent): void => {
+    if (!draggedValue) return;
+
+    setMousePosition({ x: e.clientX, y: e.clientY });
+
+    // Find the element under the mouse point
+    const elementUnder = document.elementFromPoint(e.clientX, e.clientY);
+    const dropZone = elementUnder?.closest("[data-matching-drop-zone]");
+
+    if (dropZone) {
+      const dropKey = dropZone.getAttribute("data-matching-drop-zone");
+      setDropTargetKey(dropKey);
+    } else {
+      setDropTargetKey(null);
+    }
+  };
+
+  const handleMouseUp = (): void => {
+    if (dropTargetKey !== null && draggedValue !== null) {
+      onChange(answer, dropTargetKey, draggedValue);
+    }
+    setDraggedValue(null);
+    setDropTargetKey(null);
+    setMousePosition({ x: 0, y: 0 });
+  };
+
+  // Touch drag handlers
+  const handleTouchStart = (
+    e: React.TouchEvent,
+    materialValue: string,
+    element: HTMLElement
+  ): void => {
+    if (!checkCanAnswerQuestion()) return;
+    const touch = e.touches[0];
+    setDraggedValue(materialValue);
+    setDraggedElement(element);
+    setTouchPosition({ x: touch.clientX, y: touch.clientY });
+    setSelectedValue(null);
+  };
+
+  const handleTouchMove = (e: React.TouchEvent): void => {
+    if (!draggedValue) return;
+
+    const touch = e.touches[0];
+    setTouchPosition({ x: touch.clientX, y: touch.clientY });
+
+    // Find the element under the touch point
+    const elementUnder = document.elementFromPoint(
+      touch.clientX,
+      touch.clientY
+    );
+    const dropZone = elementUnder?.closest("[data-matching-drop-zone]");
+
+    if (dropZone) {
+      const dropKey = dropZone.getAttribute("data-matching-drop-zone");
+      setDropTargetKey(dropKey);
+    } else {
+      setDropTargetKey(null);
+    }
+  };
+
+  const handleTouchEnd = (): void => {
+    if (dropTargetKey !== null && draggedValue !== null) {
+      onChange(answer, dropTargetKey, draggedValue);
+    }
+    setDraggedValue(null);
+    setDropTargetKey(null);
+    setDraggedElement(null);
+    setTouchPosition({ x: 0, y: 0 });
+  };
+
+  // Click/tap to select (for easier mobile interaction)
+  const handleSelectItem = (materialValue: string): void => {
+    if (!checkCanAnswerQuestion()) return;
+    setSelectedValue(materialValue);
+    setDraggedValue(null);
+  };
+
+  const handleDropZoneClick = (answerMapKey: string): void => {
+    if (selectedValue !== null) {
+      onChange(answer, answerMapKey, selectedValue);
       setSelectedValue(null);
     }
   };
@@ -114,7 +191,103 @@ const MatchingActivityMaterialContent = ({
   const filteredMaterialList = retrieveFilteredMaterialList(answerMap);
 
   return (
-    <>
+    <div onMouseMove={handleMouseMove} onMouseUp={handleMouseUp}>
+      {/* Floating drag preview for mouse */}
+      {draggedValue && mousePosition.x > 0 && (
+        <div
+          className="fixed pointer-events-none z-50 opacity-80"
+          style={{
+            left: `${mousePosition.x}px`,
+            top: `${mousePosition.y}px`,
+            transform: "translate(-50%, -50%)",
+          }}
+        >
+          {contentMap.type === "TEXT" ? (
+            <div className="border-catchup-blue border-2 rounded-catchup-xlarge bg-white shadow-lg">
+              <div className="flex flex-col items-center justify-center m-2 min-w-[200px] px-4">
+                <p className="text-lg whitespace-pre-wrap">
+                  {constructInputWithSpecialExpressionList(draggedValue).map(
+                    (inputPart, index) => (
+                      <span
+                        key={index}
+                        className={`${inputPart.isBold ? "font-bold" : ""} ${
+                          inputPart.isUnderline ? "underline" : ""
+                        }`}
+                      >
+                        {inputPart.isEquation ? (
+                          <span className="text-xl">
+                            <InlineMath math={inputPart.value} />
+                          </span>
+                        ) : (
+                          inputPart.value
+                        )}
+                      </span>
+                    )
+                  )}
+                </p>
+              </div>
+            </div>
+          ) : (
+            <div className="border-catchup-blue border-2 rounded-catchup-xlarge bg-white shadow-lg">
+              <ShowMaterialMediaByContentType
+                key={`${uniqueValue}-drag-mouse`}
+                contentType={contentMap.type}
+                src={draggedValue}
+                canFullScreen={false}
+              />
+            </div>
+          )}
+        </div>
+      )}
+
+      {/* Floating drag preview for touch */}
+      {draggedValue && touchPosition.x > 0 && (
+        <div
+          className="fixed pointer-events-none z-50 opacity-80"
+          style={{
+            left: `${touchPosition.x}px`,
+            top: `${touchPosition.y}px`,
+            transform: "translate(-50%, -50%)",
+          }}
+        >
+          {contentMap.type === "TEXT" ? (
+            <div className="border-catchup-blue border-2 rounded-catchup-xlarge bg-white shadow-lg">
+              <div className="flex flex-col items-center justify-center m-2 min-w-[200px] px-4">
+                <p className="text-lg whitespace-pre-wrap">
+                  {constructInputWithSpecialExpressionList(draggedValue).map(
+                    (inputPart, index) => (
+                      <span
+                        key={index}
+                        className={`${inputPart.isBold ? "font-bold" : ""} ${
+                          inputPart.isUnderline ? "underline" : ""
+                        }`}
+                      >
+                        {inputPart.isEquation ? (
+                          <span className="text-xl">
+                            <InlineMath math={inputPart.value} />
+                          </span>
+                        ) : (
+                          inputPart.value
+                        )}
+                      </span>
+                    )
+                  )}
+                </p>
+              </div>
+            </div>
+          ) : (
+            <div className="border-catchup-blue border-2 rounded-catchup-xlarge bg-white shadow-lg">
+              <ShowMaterialMediaByContentType
+                key={`${uniqueValue}-drag-touch`}
+                contentType={contentMap.type}
+                src={draggedValue}
+                canFullScreen={false}
+              />
+            </div>
+          )}
+        </div>
+      )}
+
       {filteredMaterialList.length > 0 ? (
         <>
           <div
@@ -122,84 +295,68 @@ const MatchingActivityMaterialContent = ({
             className="flex-shrink-0 flex flex-row gap-x-4 gap-y-4 overflow-x-auto py-2"
           >
             {filteredMaterialList.map((materialValue, index) => (
-              <DraggableItem
+              <div
                 key={index}
-                item={{ index: materialValue }}
-                type={"MATCHING"}
-                component={
-                  <div
-                    className={`${
-                      selectedValue === materialValue
-                        ? "border-catchup-blue"
-                        : "border-catchup-lighter-gray"
-                    } ${
-                      contentMap.type === "TEXT"
-                        ? "h-catchup-activity-text-box-item"
-                        : "h-catchup-activity-media-box-item"
-                    } flex flex-col items-center justify-center border-2 rounded-catchup-xlarge cursor-pointer transition-all duration-300`}
-                    onMouseDown={() => {
-                      if (checkCanAnswerQuestion()) {
-                        setSelectedValue(materialValue);
-                      }
-                    }}
-                    onTouchEnd={() => {
-                      if (checkCanAnswerQuestion()) {
-                        setSelectedValue(materialValue);
-                      }
-                    }}
-                    onMouseUp={() => {
-                      if (checkCanAnswerQuestion()) {
-                        setSelectedValue(null);
-                      }
-                    }}
-                    onTouchStart={() => {
-                      if (checkCanAnswerQuestion()) {
-                        setSelectedValue(null);
-                      }
-                    }}
-                  >
-                    {contentMap.type === "TEXT" ? (
-                      <div className="flex flex-col items-center justify-center m-2 min-w-[200px] overflow-y-auto px-4">
-                        <p className="text-lg whitespace-pre-wrap">
-                          {constructInputWithSpecialExpressionList(
-                            materialValue
-                          ).map((inputPart, index) => (
-                            <span
-                              key={index}
-                              className={`${
-                                inputPart.isBold ? "font-bold" : ""
-                              } ${inputPart.isUnderline ? "underline" : ""}`}
-                            >
-                              {inputPart.isEquation ? (
-                                <span className="text-xl">
-                                  <InlineMath math={inputPart.value} />
-                                </span>
-                              ) : (
-                                inputPart.value
-                              )}
-                            </span>
-                          ))}
-                        </p>
-                      </div>
-                    ) : (
-                      <ShowMaterialMediaByContentType
-                        key={`${uniqueValue}-${index}`}
-                        contentType={contentMap.type}
-                        src={materialValue}
-                        canFullScreen={true}
-                      />
-                    )}
-                  </div>
+                ref={draggedValue === materialValue ? dragElementRef : null}
+                className={`${
+                  draggedValue === materialValue
+                    ? "opacity-40"
+                    : selectedValue === materialValue
+                    ? "ring-2 ring-blue-500"
+                    : "opacity-100"
+                } transition-all duration-200`}
+                onMouseDown={(e) => handleMouseDown(e, materialValue)}
+                onTouchStart={(e) =>
+                  handleTouchStart(e, materialValue, e.currentTarget)
                 }
-                moveCardHandler={() => {
-                  if (!selectedTargetKey) return;
-                  if (!selectedValue) return;
-                  handleMatchingActivityItemOnChange(
-                    selectedTargetKey,
-                    selectedValue
-                  );
-                }}
-              />
+                onTouchMove={handleTouchMove}
+                onTouchEnd={handleTouchEnd}
+              >
+                <div
+                  className={`${
+                    selectedValue === materialValue
+                      ? "border-catchup-blue"
+                      : "border-catchup-lighter-gray"
+                  } ${
+                    contentMap.type === "TEXT"
+                      ? "h-catchup-activity-text-box-item"
+                      : "h-catchup-activity-media-box-item"
+                  } flex flex-col items-center justify-center border-2 rounded-catchup-xlarge cursor-pointer transition-all duration-300`}
+                  onClick={() => handleSelectItem(materialValue)}
+                >
+                  {contentMap.type === "TEXT" ? (
+                    <div className="flex flex-col items-center justify-center m-2 min-w-[200px] overflow-y-auto px-4">
+                      <p className="text-lg whitespace-pre-wrap">
+                        {constructInputWithSpecialExpressionList(
+                          materialValue
+                        ).map((inputPart, index) => (
+                          <span
+                            key={index}
+                            className={`${
+                              inputPart.isBold ? "font-bold" : ""
+                            } ${inputPart.isUnderline ? "underline" : ""}`}
+                          >
+                            {inputPart.isEquation ? (
+                              <span className="text-xl">
+                                <InlineMath math={inputPart.value} />
+                              </span>
+                            ) : (
+                              inputPart.value
+                            )}
+                          </span>
+                        ))}
+                      </p>
+                    </div>
+                  ) : (
+                    <ShowMaterialMediaByContentType
+                      key={`${uniqueValue}-${index}`}
+                      contentType={contentMap.type}
+                      src={materialValue}
+                      canFullScreen={true}
+                    />
+                  )}
+                </div>
+              </div>
             ))}
           </div>
           <div className="flex-shrink-0">
@@ -260,11 +417,15 @@ const MatchingActivityMaterialContent = ({
               <div className="mx-4 w-[2px] bg-catchup-lighter-gray"></div>
               <div className="flex-1">
                 <div
+                  data-matching-drop-zone={answerMapKey}
+                  onMouseEnter={() =>
+                    draggedValue && setDropTargetKey(answerMapKey)
+                  }
+                  onMouseLeave={() => setDropTargetKey(null)}
+                  onClick={() => handleDropZoneClick(answerMapKey)}
                   className={`${
-                    canDrop
-                      ? selectedTargetKey === answerMapKey
-                        ? "bg-catchup-light-blue"
-                        : "bg-catchup-light-blue opacity-40"
+                    dropTargetKey === answerMapKey
+                      ? "bg-catchup-light-blue ring-2 ring-blue-400"
                       : ""
                   } ${
                     contentMap.type === "TEXT"
@@ -279,71 +440,56 @@ const MatchingActivityMaterialContent = ({
                       ? "border-catchup-red"
                       : "border-catchup-blue"
                   }`}
-                  onClick={() => {
-                    if (checkCanAnswerQuestion()) {
-                      setSelectedValue(null);
-                    }
-                  }}
                 >
-                  <DroppableItem
-                    key={index}
-                    item={{ index: answerMapKey }}
-                    type={"MATCHING"}
-                    target={selectedTargetKey}
-                    setTarget={setSelectedTargetKey}
-                    dropRef={drop}
-                    component={
-                      <div
-                        className="h-full flex-1 flex flex-row items-center justify-center px-4"
-                        onClick={(e) => {
-                          e.preventDefault();
-                          if (checkCanAnswerQuestion()) {
-                            handleMatchingActivityItemOnChange(
-                              answerMapKey,
-                              null
-                            );
-                          }
-                        }}
-                      >
-                        {contentMap.type === "TEXT" ? (
-                          <p className="text-lg whitespace-pre-wrap">
-                            {constructInputWithSpecialExpressionList(
-                              answerMap[answerMapKey]
-                            ).map((inputPart, index) => (
-                              <span
-                                key={index}
-                                className={`${
-                                  inputPart.isBold ? "font-bold" : ""
-                                } ${inputPart.isUnderline ? "underline" : ""}`}
-                              >
-                                {inputPart.isEquation ? (
-                                  <span className="text-xl">
-                                    <InlineMath math={inputPart.value} />
-                                  </span>
-                                ) : (
-                                  inputPart.value
-                                )}
-                              </span>
-                            ))}
-                          </p>
-                        ) : (
-                          <ShowMaterialMediaByContentType
-                            key={`${uniqueValue}-${index}`}
-                            contentType={contentMap.type}
-                            src={answerMap[answerMapKey]}
-                            canFullScreen={false}
-                          />
-                        )}
-                      </div>
-                    }
-                  />
+                  <div
+                    className="h-full flex-1 flex flex-row items-center justify-center px-4"
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      if (checkCanAnswerQuestion() && answerMap[answerMapKey]) {
+                        onChange(answer, answerMapKey, null);
+                        setSelectedValue(null);
+                      }
+                    }}
+                  >
+                    {answerMap[answerMapKey] ? (
+                      contentMap.type === "TEXT" ? (
+                        <p className="text-lg whitespace-pre-wrap">
+                          {constructInputWithSpecialExpressionList(
+                            answerMap[answerMapKey]
+                          ).map((inputPart, index) => (
+                            <span
+                              key={index}
+                              className={`${
+                                inputPart.isBold ? "font-bold" : ""
+                              } ${inputPart.isUnderline ? "underline" : ""}`}
+                            >
+                              {inputPart.isEquation ? (
+                                <span className="text-xl">
+                                  <InlineMath math={inputPart.value} />
+                                </span>
+                              ) : (
+                                inputPart.value
+                              )}
+                            </span>
+                          ))}
+                        </p>
+                      ) : (
+                        <ShowMaterialMediaByContentType
+                          key={`${uniqueValue}-${index}`}
+                          contentType={contentMap.type}
+                          src={answerMap[answerMapKey]}
+                          canFullScreen={false}
+                        />
+                      )
+                    ) : null}
+                  </div>
                 </div>
               </div>
             </div>
           );
         })}
       </div>
-    </>
+    </div>
   );
 };