所以……我要怎麼把卡片關掉？

也就是卡片抽出來了、進度也成功歸 0%，但畫面會一直停留在抽到的卡片上。
原本唯一的解決方法居然是——重新整理網頁。
所以後來又補上點擊 Modal 外圍關閉的功能，讓使用者抽完卡片後，可以直接點卡片旁邊的空白區域回到主畫面。

不過這裡又多考慮了一個情況 -
如果還沒抽卡就可以直接把 Modal 關掉，那使用者可能會在進度還是 100% 的時候，把抽卡提示關掉。
所以最後加入條件，只有在抽卡成功、pomodoroProgress 已經變成 0 之後，才能透過點擊外圍把 Modal 關閉。

if (gachaModal) {
    gachaModal.addEventListener('click', (event) => {
        if (
            event.target === gachaModal &&
            localStorage.getItem('pomodoroProgress') === '0'
        ) {
            gachaModal.style.display = 'none';
        }
    });
}

最後的流程就變成：

抽卡成功 → 點擊外圍 → 回到主畫面

進度條歸零了，怎麼旁邊還是 100%？

抽完卡片、關掉 Modal 回到主畫面後，進度條確實已經空了。
但旁邊的數字竟然還停在： 100% ???
更奇怪的是，只要重新整理一次網頁，它又會正常變回 0%。
這也代表 localStorage 裡面的資料其實已經成功更新成 0，問題出在畫面上的百分比文字沒有跟著更新。

後來檢查才發現，原本取得 .progress-text 的 progressText 是在前面的程式區塊中用 const 宣告，因此它的使用範圍只在那個區塊裡，後面的抽卡程式不能直接使用。
所以最後在抽卡成功時，重新取得一次 .progress-text：

const currentProgressText = document.querySelector('.progress-text');

if (currentProgressText) {
    currentProgressText.textContent = '0%';
}

重新在測試後

localStorage → 0
進度條 → 0%
百分比文字 → 0%
三個終於一起同步了。

功能能跑之後，才開始看到問題

原本以為昨天把抽卡功能做出來之後，這段流程應該差不多完成了。
但真的開始操作才發現，卡片能不能抽出來只是一部分。

抽完之後怎麼回到主畫面、畫面上的狀態有沒有一起更新，這些都是實際操作之後才發現的問題。
而且今天處理的都不是什麼大功能。

• 卡片關不掉，就補上關閉 Modal 的條件。
• 百分比沒有同步，就去找是哪一段沒有更新。

比起一次叫 AI 把所有東西重新改掉，這次比較像是發現一個問題，就只處理那一個問題，再重新測一次。