昨天先把累積到 100% 之後的抽卡流程整理好，今天就準備開始把它真的做出來。

原本《時間就是金錢》已經做過一批梗圖卡和生活挑戰卡，加起來大約有 50 張。
不過這次沒有打算一開始就把全部卡片都放進去，而是先從原本的卡牌裡挑三張作為測試，確認隨機抽卡功能本身可以正常運作，再慢慢把剩下的卡牌補進去。

下的Prompt

請先讀取目前《時間就是金錢》專案的相關 HTML、CSS、JavaScript，以及 image/cards/ 中的圖片，了解 >現有的番茄鐘、任務與進度條功能。
先不要修改任何檔案，先分析目前程式結構與實作方式。
這次只實作「進度達到 100% 後的抽卡功能」，暫時不做抽卡圖鑑、收藏、稀有度、動畫等其他功能。
抽卡流程
完整完成一次番茄鐘後，目前進度會增加 10%。
當進度達到 100%：
100% → 完成番茄鐘回到主畫面 → 自動顯示 Modal → 顯示「恭喜達成 100%，獲得一次抽卡機會」→ 使用者按下>「抽卡」→ 隨機抽出一張卡片 → 在 Modal 顯示卡片 → 抽卡完成後進度重設為 0%。

功能規則

• 100% 為進度上限，不可出現 110%、120%。
• Modal 可以自動出現，但不能自動抽卡，必須由使用者自己按下「抽卡」。
• 如果已達 100% 但尚未抽卡，重新整理後仍要維持 100% 並保留抽卡機會。
• 尚未使用目前的抽卡機會前，不可重複產生新的抽卡機會。
• 抽卡完成後，localStorage 的進度更新為 0，畫面上的進度條與百分比也立即更新為 0%。
• 不要影響目前已正常運作的 TODAY'S GOALS、番茄鐘、任務完成狀態、localStorage 與進度條功能。
  卡片資料
  目前 image/cards/ 中只有三張測試卡片：
• image/cards/3.png
• image/cards/9.png
• image/cards/14.png
  請先確認這三張圖片實際存在。
  JavaScript 的 cardList 只能使用這三張圖片，所有卡片抽取機率相同，不需要權重或稀有度。

修改前請先告訴我

1. 目前番茄鐘完成後 +10% 的邏輯在哪裡。
2. 目前進度如何透過 localStorage 保存、讀取，以及限制最高 100%。
3. 是否可以直接利用 progress === 100 判斷尚未抽卡，還是需要額外狀態，並說明理由。
4. 預計修改哪些檔案，是否需要新增檔案。
5. Modal 準備如何加入 index.html，以及如何在 100% 時自動顯示但不自動抽卡。
6. cardList 準備如何建立，以及如何等機率隨機抽出其中一張。
7. 按下「抽卡」後的程式執行順序，以及何時將進度重設為 0%。
8. 如何確保現有番茄鐘、任務、進度條與 TODAY'S GOALS 功能不受影響。
   現在先完成讀取與分析，不要修改、刪除、重建或重構任何現有檔案。等我確認方案後再開始修改。

實際把抽卡接進去

Cline 讀完目前的專案後，這次實際需要修改的主要是：

• index.html
• style.css
• main.js

原本的 pomodoro.js 不需要再修改。
因為前面已經完成「完整番茄鐘結束後 +10%，最高累積至 100%」的功能，所以這次不再去動番茄鐘本身，而是直接從主畫面判斷目前的進度是不是已經到達 100%。
這次也沒有另外新增一個「是否擁有抽卡機會」的資料，而是直接利用原本的進度判斷。
只要 pomodoroProgress 還維持在 100，就代表這次抽卡機會還沒有使用；成功抽卡並將進度歸 0 後，這次抽卡機會也就結束。
確認修改方式之後，才讓 Cline 正式開始加入抽卡功能。

完成第一版之後，接下來就是實際測試。
但如果真的要從 0% 開始完成十次番茄鐘，光測試一次就要花很久，所以這次直接透過瀏覽器開發者工具的 Console，將 localStorage 中的 pomodoroProgress 設成 100，再重新整理頁面，直接測試達到 100% 之後的流程。

localStorage.setItem('pomodoroProgress', '100')

重新整理之後，進度顯示為 100%，抽卡的 Modal 也成功自動出現。

不過這時候還不會直接抽卡，而是要由使用者自己按下「抽卡」，才會真正開始隨機選擇卡片。

第一次真的抽到卡了

這次先把三張測試卡放進 cardList，沒有另外設定稀有度或權重。
按下抽卡後，透過 Math.random() 產生隨機值，再搭配 Math.floor() 取得 cardList 中其中一個索引。

const randomIndex = Math.floor(Math.random() * cardList.length);
const card = cardList[randomIndex];

這裡還有一個原本沒有特別想到的小細節。
程式並不是在使用者按下「抽卡」的瞬間，就直接把進度從 100% 清成 0%，而是等抽到的卡片圖片成功載入後，才真正把 pomodoroProgress 重設為 0。
也就是：

按下抽卡 → 隨機選擇卡片 → 圖片成功載入 → 顯示卡片 → 進度歸 0%

這樣如果圖片沒有成功載入，就不會發生「卡片沒有出現，但抽卡機會已經被消耗掉」的情況。
實際抽卡成功後，進度也會從 100% 回到 0%，重新整理後仍然維持在 0%，不會再次跳出抽卡提示。

從 D14 開始慢慢做：

完成番茄鐘 → +10% → 累積進度

到今天終於把 100% 後面的流程接上去了。
不過功能雖然跑起來，第一眼看到抽卡結果後，還是有一些畫面上的地方需要調整。

卡是抽出來了，但有點小

第一版的抽卡結果已經可以正常顯示，不過卡片放在 Modal 裡看起來比預期小很多。
所以後來又調整了抽出卡片的 CSS，讓卡片在 Modal 裡顯示得更大一點。

.gacha-result .card-image {
    max-width: 350px;
    max-height: 500px;
    display: block;
    margin: 10px auto;
    border-radius: 10px;
}

調整之後，卡片本身已經比較清楚，但原本 .gacha-content 的背景還留在卡片後面，看起來有點多餘。
一開始原本想直接把背景拿掉，但這樣連「恭喜達成 100%」的抽卡提示也會一起失去背景。

所以最後改成只有在卡片成功顯示後，才替 .gacha-content 加上 card-revealed class。

// 圖片載入成功: 顯示卡片並重置進度
cardImage.onload = function() {
    if (gachaResult) gachaResult.style.display = 'block';

    const gachaContent = document.querySelector('.gacha-content');
    if (gachaContent) {
        gachaContent.classList.add('card-revealed');
    }

再針對這個狀態修改 CSS

.gacha-content.card-revealed {
    background-color: transparent;
    padding: 0;
}

這樣抽卡前的提示仍然會保留原本的背景，抽到卡片之後才會切換成透明，保留外層 Modal 的半透明遮罩，讓畫面中央只留下真正抽到的卡片。

到這裡，原本預計的抽卡流程已經可以正常運作：

100% 自動出現提示、自己按下抽卡、隨機顯示卡片、抽卡完成後進度回到 0%。

不過測到最後，又發現一個前面完全沒有注意到的小問題。

抽到了，然後我要怎麼回去？