代碼審查與反思

• DOM 操作與資料驅動的反思
• 功能模組化與流程
• 觸控事件的優化
• 卡片排列與動畫優化

DOM 操作與資料驅動的反思

在當前的實現中，我們主要透過直接操作 DOM 來實現卡片的移動。具體來說，這包括以下三個步驟：

1. 提取當前的提示卡片

currentClueCardEl.value = clueCardEl.value[cardIndex];
document.body.appendChild(currentClueCardEl.value);

2. 將卡片回原到當前的提示卡片區塊

setCurrentClueCardMove(0, 0);
clueCardContainerEl.value.append(currentClueCardEl.value);

3. 將卡片放置到作答區域

currentClueCardEl.value.remove();

這樣的實現方式是否可以改用資料驅動的方式來處理動畫，以減少直接操作 DOM 的需求？

功能模組化與流程

為了更好地組織代碼，我們可以將功能拆分為不同的模組。以下是一些主要的功能：

1. 處理動畫開關

toggleShowTip();
// 切換 isShowTip 的狀態
const toggleShowTip = () => {
    isShowTip.value = !isShowTip.value;
};

2.初始化卡片和手指的位置

// 初始化卡片和手指的位置
const initCardAndFingerPosition = (ev) => {
    const x = ev.touches ? ev.touches[0]?.pageX : ev.pageX;
    const y = (ev.touches ? ev.touches[0]?.pageY : ev.pageY) - currentClueCardEl.value.offsetHeight / 2;
    setCurrentClueCardMove(x, y);
};

觸控事件的優化

為了提供更好的用戶體驗，我們在細節上加入了對觸控事件的支持。然後將 touch 與 mousedown 事件處理進行整合，增加程式的複用跟維護性。

1. 加上 touch cancel 狀態
   避免手機突然的打斷拖曳功能，造成到錯

@touchcancel.stop="handleClueCardTouchOff(index, $event)"

2. 整合 mouse move 跟 touch move

@mousedown.stop="handleClueCardTouch(index, $event)"
@mouseup.stop="handleClueCardTouchOff(index, $event)" 
@touchstart.stop="handleClueCardTouch(index, $event)"
@touchend.stop="handleClueCardTouchOff(index, $event)"

卡片排列與動畫優化

使用 translate3d 優化動畫

即使是使用 z-index 也會產生卡片重疊的問題。考慮使用 translate3d() 將卡片在 Z 軸上稍微提高，以避免卡片重疊的不適感。

案例參考

優化卡片的 Y 軸移動

當滑鼠 hover 到卡片上時，卡片會沿 Y 軸向上移動，以解決卡片相疊和遮擋事件說明文字的問題。

希望這樣的整理能讓代碼更容易理解和維護。