昨天把 TODAY'S GOALS 加入日期的概念後，今天回到前幾天建立的時間頁。
D25 建立時間頁時，當時先留下了兩個功能：

時間紀錄｜共同時間罐

前面的時間紀錄已經開始有實際資料，但切到「共同時間罐」，目前裡面還是空的。
所以今天就來處理這個從一開始就先留著的位置。

共同時間罐要放什麼？

「共同時間罐」原本的想法，是希望把大家投入的專注時間累積在同一個地方。
但它不是排行榜，也不會顯示誰今天專注最久，而是把每個人的時間一起累積起來，用比較視覺化的方式呈現。
【共同時間罐 UI 概念圖】

左邊放時間罐和代表專注時間的兔子金幣，右邊則分成「本月總累積」和「我的投入」。
這次也不需要再建立新的頁面，而是直接把內容放進原本 time.html 已經留下來的 shared-content。

時間變成一罐金幣

時間罐裡會放入代表專注時間的兔子金幣。
因為罐子和金幣本身比較偏視覺素材，如果全部用 HTML 和 CSS 組成，反而會把不少時間花在調整造型上。
所以這次準備把視覺素材和程式分開處理：

時間罐素材
→ 空的時間罐

兔子金幣素材
→ 單一兔子金幣

罐子和金幣本身先做成圖片，頁面的排版和資料再交給 HTML、CSS 和 JavaScript 處理。
這樣之後如果真的要讓時間影響金幣數量，也可以重複把 coin.png 放進罐子裡，而不需要重新畫不同狀態的時間罐。

「我的投入」可以直接用真的資料

雖然共同時間目前還沒有真正的多人資料，但「我的投入」已經有資料可以使用。
前面建立的 timeRecords 已經保存每一次實際投入的專注時間，所以這次可以直接利用它計算本月累積：

讀取 timeRecords
↓
取得目前年份與月份
↓
篩選本月的紀錄
↓
加總 focusedSeconds
↓
換算成 HR / MIN

和 DAILY FOCUS 不同的是，前面計算的是某一天的專注時間，這次則是把範圍擴大成整個月份。
例如本月累積的專注時間換算後是 2 小時 3 分鐘，畫面就會顯示：

YOUR CONTRIBUTION
我的投入

2 HR | 3 MIN

這樣前面記錄下來的 timeRecords，除了可以拿來查看每天的專注狀況，也開始可以用在不同的統計方式上。

共同的時間目前先用示意資料

不過右上角的「本月總累積」就不一樣了。
目前這個網站還沒有後端、帳號系統，也沒有其他使用者的專注資料，所以現在還沒有辦法真的計算所有人的共同時間，因此這一部分目前先以示意資料呈現：

THIS MONTH
本月總累積

128 HR | 35 MIN

自己的投入時間會直接從 timeRecords 計算，但共同累積的數字目前只是用來確認畫面和功能概念。
等未來真的有多人資料來源後，這裡才有辦法換成真正的共同累積時間。

金幣要怎麼代表時間？

既然時間罐裡的金幣代表大家投入的時間，原本也有想過要不要直接讓時間和金幣數量一對一增加。
但如果真的設定成：

1 MIN = 1 枚金幣

一個月累積 128 小時，就會變成 7680 枚金幣。

先不說網站，罐子應該也裝不下。
所以目前不打算讓分鐘數直接對應金幣數量，而是把金幣當成共同投入時間的視覺代表。
第一版先用固定數量確認整體畫面，等之後真的有共同資料，再考慮要不要根據累積時間設計不同的金幣數量或顯示層級。
這樣今天要處理的內容就先集中在：

建立共同時間罐版面
↓
放入時間罐與兔子金幣
↓
建立本月總累積／我的投入
↓
從 timeRecords 計算本月個人時間
↓
換算成 HR / MIN

先讓原本空白的「共同時間罐」有基本的樣子，也讓前面累積下來的時間資料多一個可以被使用的地方。