time-runner 1.1.5 → 1.1.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/README.md +8 -0
  2. package/README.zh-CN.md +7 -0
  3. package/dist/TimeRunner.d.ts +3 -1
  4. package/dist/Tools.d.ts +13 -0
  5. package/dist/index.css +1 -1
  6. package/dist/time-runner.es.js +281 -264
  7. package/dist/time-runner.umd.js +14 -14
  8. package/package.json +1 -1
package/README.md CHANGED
@@ -97,6 +97,7 @@ showType?: string;
97
97
  * cube-h: horizontal flip
98
98
  * drift: floating
99
99
  * cut: cut
100
+ * erase: erase the numeric
100
101
  */
101
102
  mode?: TransMode;
102
103
  /** Callback function executed when countdown finishes */
@@ -107,6 +108,8 @@ size?: number;
107
108
  className?: string;
108
109
  /** Background color */
109
110
  bgColor?: string;
111
+ /** Numeric font color */
112
+ numColor?: string;
110
113
  /** Border color */
111
114
  borderColor?: string;
112
115
  /** Text shadow color */
@@ -132,6 +135,11 @@ textShadowColor?: string;
132
135
 
133
136
  # Changelog
134
137
 
138
+ ## [1.1.6] - 2026-06-20
139
+ ### Changes
140
+ - Added mode = "erase" animation
141
+ - Add property "numColor" for customizing numeric font color
142
+
135
143
  ## [1.1.5] - 2026-05-24
136
144
  ### Changes
137
145
  - Added mode = "cut" animation
package/README.zh-CN.md CHANGED
@@ -105,6 +105,8 @@ size?: number;
105
105
  className?: string;
106
106
  /** 背景颜色 */
107
107
  bgColor?: string;
108
+ /** 数字颜色 */
109
+ numColor?: string;
108
110
  /** 边框颜色 */
109
111
  borderColor?: string;
110
112
  /** 文字阴影颜色值 */
@@ -130,6 +132,11 @@ textShadowColor?: string;
130
132
 
131
133
  # 更新日志
132
134
 
135
+ ## [1.1.6] - 2026-06-20
136
+ ### Changes
137
+ - 新增 mode = "erase"
138
+ - 增加 numColor: 数字颜色
139
+
133
140
  ## [1.1.5] - 2026-05-24
134
141
  ### 更新内容
135
142
  - 增加 mode = "cut" 效果
package/dist/TimeRunner.d.ts CHANGED
@@ -7,7 +7,7 @@
7
7
  * drift: 漂浮
8
8
  *
9
9
  */
10
- type TransMode = "card" | "cube-v" | "cube-h" | "drift" | "cut";
10
+ type TransMode = "card" | "cube-v" | "cube-h" | "drift" | "cut" | "erase";
11
11
  interface PropsType {
12
12
  /**
13
13
  * 显示模式，默认：default
@@ -31,6 +31,8 @@ interface PropsType {
31
31
  className?: string;
32
32
  /** 背景颜色 */
33
33
  bgColor?: string;
34
+ /** 数字颜色 */
35
+ numColor?: string;
34
36
  /** 边框颜色 */
35
37
  borderColor?: string;
36
38
  /** 文字阴影颜色值 */
package/dist/Tools.d.ts CHANGED
@@ -13,3 +13,16 @@ export declare const getRandomClip: (dom: HTMLDivElement) => {
13
13
  lTranslate: string;
14
14
  rTranslate: string;
15
15
  };
16
+ /**
17
+ * 根据传入的颜色色值的深浅比例，返回一个较深或较浅的颜色色值。
18
+ * 在0-255之间，就以128为分界线，大于128为亮色系，返回较深的色值，小于128为深色系，返回较浅的色值。
19
+ * 因为传入的内容格式不固定，所以这里通过浏览器来获取最终的颜色色值，反正也都是在浏览器里运行，减少心智负担。
20
+ *
21
+ * @param color 颜色值，
22
+ * @param ratio 变化比例，越大，差别就越大。
23
+ */
24
+ export declare const getMaskColor: (color: string, ratio?: number) => string;
25
+ /**
26
+ * 获取[0, 360]之间的随机角度
27
+ */
28
+ export declare const getRandomDeg: () => number;
package/dist/index.css CHANGED
@@ -1 +1 @@
1
- @font-face{font-family:DIN-num-font;src:url(data:font/woff2;base64,d09GMgABAAAAAAa4AA4AAAAAC5AAAAZkAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGhYbIBwgBmAAPBEICookiQYLHgABNgIkAyYEIAWGfgc+G9sJUZRNUo3sIzHdzijbJEnSygHv+4G/+X9O+TYijWhymJtbTWoMw12bn8mWvgCer25v/+ydpBpLAlmWeGIVUNT/v9+s/4E30WoXyZQCsX0u+ENEkk7a+AnJ00ha6NvpIhq9Rg8xbkHPwkrhnQBsAAHYEbClQMj+s0MABC4+XPPkCmChAYD//wcAAHnnUruCch3ogIoGgGIfTAOdOQhAWegAiiMiwhCQ+6VO0X/1WM6cg6/y80C/UORaKEAk1K4bKrTlNKGEUUSUyjgQF8bErv//4//NXQQwYgcBAOCwPxeAM8ADgLLjhBYBANoxVNG/OhWlaYQLi5fomBDvw3biOokeyYsz4TymJLZkTViVZgXNUm1TGbS6jbOsGs3TzApOYlVedwJRxRkj2KqRW4JdOKdyRrm0/LWCgEhVlrmzFd2O4DQBb1aZ0JrhJH+eMCtsKZg5S5VWJcdS8gJEVHmCqK9wrVF7KofCAQIIdJhwBgcK2jjs/Exj9Q6/PVA2V35bvHX1svRrMacC9qFNeTLtKrE05bKCmFh23KwYvY7ZEi0SmK3f7rZ+t1mhMFtlgn22uGATi0NKjM2JPU158fH128e3w+w9e87csHAu2G6dOrVrwhlGiQk7wGqWCmMf60vLXzdUYMFrWHFC3kWDMRZGVblBZbzIWWpTjDGHzUlWDs7ZOmeX56Z9Ykpl61+I27MUd71QUIzPjl27+sKzW7dO7cKte/eevWmV3TebT28F+tm/9Wep7/hC9gVEzHegv/WQ+ohKfauX+s4jfIj0d3oM+GRaY+g7cBQZGNVQn8yjPh4N1o/gfqTZxH9WfAycTzLhvZcbjUA/a7SA+H7KI+L8oKAyUt6CyoUHifbXzAsDhsGhQ3gNyWEDiedWq/Tm4ihjNnjMkxf0HT1cj/VHDzegtHera63Rcc+grl+7HR8iOakfwwMKXol/SW1GfXpoVXBVAz6fHB4fvY0bBpsHm/0uGH0LIrOUDd/9hRrU/fNVaw147eCTbl/yzW5T+4z7yAfkm8Y3W4ChPss2yopAXTavCnN9xfzlz3xK32psaljpWuxWxD5cEV0Wq8X146rJWt5jo9+hk1j84rgDP8k9HidDSxQH9uSkfvlVoOQBxCy4g0UBhTHNCT1JfXGtYWW22wWMH2XYGVEoji33lRMSV4YwhGnPOMotT2xQVU6lKxl1zGUh6kJpS7DarjG23F7ukusp/T01oChBK54nlJbsaLlrFxgRTK8PrlSll9MrLb8K9Zs53tzjm/8u8k25LfH67H17BTAWnM0y8j/58Eu++cN5JiM4n+dhxyfWCoX1PnZg1/0ZRcXMJ9++hTNHyJyUwMJwWTNeGDUMDJ/Dizg0TBrwQnOwLLQwJ+UIiTN4f3p49uhVvIKTo3OHXz7E9txsiaSlXSKRZmM7qqXZkqw2bEZJVm42vIEBBalD+Styl2QMCSe6nRjbIvLFMeVcuR3COG7NYxzmlSXWKcumU5VMJL80qD1rtjmwjdOAbp3mX5jQmzVXKJZva7qF6IQhzMajqtKKqRXWX2N0m+xY9qe2IlyvwZnS5CipAJS0Yj/yeyNxc7Njxq8sDgsA9w+L1AA80qbtf3/070uCYH0uDsRCUWGAuf0nAiDOHOadKYAUG/pogK3S+ON/EvVV6iYJX97kinSLkQgBOOjENIbZQIS2VI39llZpAD4gew1AQdMDVKG0QONiA9CxHAIGZ6eAiXAb2Bw8pS7V9qPCZgPAZW+ggHxqNVCw6ihQlddZoAkMBeicEgwM/kkCJrfUABs3mpALOvRXrMn2sE/Nwc1NvM28Ke/R6XcVvIcSOvnatoLICxcimmT8HoiyWKM5bO974G5NVlj6AQB4OfNoJCQkt0gXiuKjYzvi1SIXN103ECUSRcWlQHyUK9VPRKLqW1jV3j3Y00kWRBMsFiJ3FT5MnA9Sev3GDOrRpRtJKFS7MEIiqVKkiPSVqUT3jxMrVjwhuR46eqQx/dSxdptBrXhwTJDn09KCKnREnRZNI8yP1k5Pa1sLiWlohodCh0JBNUbU+xuodYgmU6gUSsnUkk6ru7kSehoduTEhTdMn1Y4XLTYkj6eOpE+uLZIsSpSLRC06pamxzXjhEyhRlDe3W6Vd93RtO5EKRFMJViF1g7DTVj4KJfF/PDYR7ToAwE2rm7hy486DJy/efPjiAgAAAA==)}.font-num{font-family:DIN-num-font}.time-runner{width:max-content;display:flex;justify-content:space-between;align-items:center;margin:0 auto;-webkit-user-select:none;user-select:none;position:relative;font-variant-numeric:tabular-nums}.time-runner span{font-size:var(--card-size, 40px);margin:0 3px;padding-bottom:3px;display:inline-block}.time-runner>p{margin:0 3px}.time-runner>div{font-size:var(--card-size, 40px)}.time-runner>div>p{color:#333;text-shadow:var(--textShadow)}.clock-card{position:relative;height:var(--card-h, 80px);width:var(--card-w, 50px);box-shadow:0 1px 5px #333;border-radius:6px}.clock-card:before{content:"";position:absolute;top:50%;left:0;background-color:#999;width:100%;height:1.5px;z-index:3;overflow:hidden}.clock-card .clock-f,.clock-card .clock-b{width:100%;height:100%;position:absolute;top:0;left:0}.clock-card .clock-f p,.clock-card .clock-b p{position:absolute;left:0;height:50%;width:100%;margin-bottom:0;text-align:center;font-size:var(--card-size, 40px);background-color:var(--bgColor, #333);color:#fff;text-shadow:var(--textShadow);overflow:hidden;border-left:solid 1px var(--borderColor, #999);border-right:solid 1px var(--borderColor, #999)}.clock-card .clock-f p:nth-child(1),.clock-card .clock-b p:nth-child(1){top:0;border-top:solid 1px var(--borderColor, #999)}.clock-card .clock-f p:nth-child(2),.clock-card .clock-b p:nth-child(2){bottom:0;border-bottom:solid 1px var(--borderColor, #999)}.clock-card .clock-f p:nth-child(1){line-height:var(--card-h, 80px);transform-origin:bottom;backface-visibility:hidden;border-radius:6px 6px 0 0}.clock-card .clock-f p:nth-child(2){line-height:3px;border-radius:0 0 6px 6px}.clock-card .clock-f.run p:nth-child(1){transition:var(--delay) ease-in-out;transform:perspective(50px) rotateX(-180deg)}.clock-card .clock-b p:nth-child(1){line-height:var(--card-h, 80px);border-radius:6px 6px 0 0}.clock-card .clock-b p:nth-child(2){line-height:3px;transform-origin:top;transform:perspective(50px) rotateX(179.99deg);backface-visibility:hidden;border-radius:0 0 6px 6px}.clock-card .clock-b.run p:nth-child(2){transition:var(--delay) ease-in-out;transform:rotateX(0);z-index:2}.cube-v{width:var(--card-w, 50px);height:var(--card-h, 80px);position:relative;perspective:300px}.cube-v div{width:100%;height:100%;transform-style:preserve-3d;transform-origin:center center var(--transy)}.cube-v p{width:100%;height:100%;line-height:var(--card-h, 80px);text-align:center;font-size:var(--card-size, 40px);background-color:var(--bgColor, #333);border:solid 1px var(--borderColor, #999);color:#fff;text-shadow:var(--textShadow);margin-bottom:0;box-shadow:0 1px 2px #333;border-radius:2px}.cube-v p:nth-child(1){position:absolute;transform-origin:0 100%;transform:translateY(-100%) rotateX(90deg)}.cube-v.run div{transform:rotateX(-90deg);transition:var(--delay)}.cube-h{width:var(--card-w, 50px);height:var(--card-h, 80px);position:relative;perspective:300px}.cube-h div{width:100%;height:100%;transform-style:preserve-3d;transform-origin:center center var(--transx)}.cube-h p{width:100%;height:100%;line-height:var(--card-h, 80px);text-align:center;font-size:var(--card-size, 40px);background-color:var(--bgColor, #333);border:solid 1px var(--borderColor, #999);color:#fff;text-shadow:var(--textShadow);margin-bottom:0;box-shadow:0 1px 2px #333;border-radius:2px}.cube-h p:nth-child(1){position:absolute;transform-origin:100% 0;transform:translate(-100%) rotateY(-90deg)}.cube-h.run div{transform:rotateY(90deg);transition:var(--delay)}.drift{height:var(--card-h, 80px);width:var(--card-w, 50px);font-size:var(--card-size, 40px);background-color:var(--bgColor, #333);line-height:var(--card-h, 80px);text-align:center;border:solid 1px var(--borderColor, #999);color:#fff;text-shadow:var(--textShadow);box-shadow:0 1px 2px #333;border-radius:2px;position:relative}.drift:before{content:attr(data-digit);position:absolute;top:0;left:0;line-height:var(--card-h, 80px);width:100%;text-align:center;overflow:hidden;height:100%;background-color:var(--bgColor, #333);transform-origin:center}.drift.run:before{transform:translate(var(--driftX),var(--driftY)) rotate(var(--driftRZ)) rotateX(var(--driftRX));opacity:0;transition:var(--delay);border:solid 2px var(--borderColor, #999)}.cut{height:var(--card-h, 80px);width:var(--card-w, 50px);font-size:var(--card-size, 40px);background-color:var(--bgColor, #333);line-height:var(--card-h, 80px);text-align:center;border:solid 1px var(--borderColor, #999);color:#fff;text-shadow:var(--textShadow);box-shadow:0 1px 2px #333;border-radius:2px;position:relative;overflow:hidden}.cut>p{color:#fff!important;opacity:0}.cut>div{position:absolute;inset:0;line-height:var(--card-h, 80px);text-align:center;overflow:hidden}.cut>div:nth-child(1){clip-path:var(--lPolygon)}.cut>div:nth-child(2){clip-path:var(--rPolygon)}.cut>div>div{position:absolute;width:2px;background-color:transparent;z-index:10}.cut.run>div:nth-child(1){transition:var(--delay);transform:var(--cutLTranslate)}.cut.run>div:nth-child(2){transition:var(--delay);transform:var(--cutRTranslate)}.cut.run>p{transition:.6s;transition-delay:.15s;opacity:1}.cut.run .l-line,.cut.run .r-line{background-color:#fff}
1
+ @font-face{font-family:DIN-num-font;src:url(data:font/woff2;base64,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)}.font-num{font-family:DIN-num-font}.time-runner{width:max-content;display:flex;justify-content:space-between;align-items:center;margin:0 auto;-webkit-user-select:none;user-select:none;position:relative;font-variant-numeric:tabular-nums}.time-runner span{font-size:var(--card-size, 40px);margin:0 3px;padding-bottom:3px;display:inline-block}.time-runner>p{margin:0 3px}.time-runner>div{font-size:var(--card-size, 40px)}.time-runner>div>p{color:var(--numColor, #333);text-shadow:var(--textShadow)}.clock-card{position:relative;height:var(--card-h, 80px);width:var(--card-w, 50px);box-shadow:0 1px 5px #333;border-radius:6px}.clock-card:before{content:"";position:absolute;top:50%;left:0;background-color:#999;width:100%;height:1.5px;z-index:3;overflow:hidden}.clock-card .clock-f,.clock-card .clock-b{width:100%;height:100%;position:absolute;top:0;left:0}.clock-card .clock-f p,.clock-card .clock-b p{position:absolute;left:0;height:50%;width:100%;margin-bottom:0;text-align:center;font-size:var(--card-size, 40px);background-color:var(--bgColor, #333);color:var(--numColor, #fff);text-shadow:var(--textShadow);overflow:hidden;border-left:solid 1px var(--borderColor, #999);border-right:solid 1px var(--borderColor, #999)}.clock-card .clock-f p:nth-child(1),.clock-card .clock-b p:nth-child(1){top:0;border-top:solid 1px var(--borderColor, #999)}.clock-card .clock-f p:nth-child(2),.clock-card .clock-b p:nth-child(2){bottom:0;border-bottom:solid 1px var(--borderColor, #999)}.clock-card .clock-f p:nth-child(1){line-height:var(--card-h, 80px);transform-origin:bottom;backface-visibility:hidden;border-radius:6px 6px 0 0}.clock-card .clock-f p:nth-child(2){line-height:3px;border-radius:0 0 6px 6px}.clock-card .clock-f.run p:nth-child(1){transition:var(--delay) ease-in-out;transform:perspective(50px) rotateX(-180deg)}.clock-card .clock-b p:nth-child(1){line-height:var(--card-h, 80px);border-radius:6px 6px 0 0}.clock-card .clock-b p:nth-child(2){line-height:3px;transform-origin:top;transform:perspective(50px) rotateX(179.99deg);backface-visibility:hidden;border-radius:0 0 6px 6px}.clock-card .clock-b.run p:nth-child(2){transition:var(--delay) ease-in-out;transform:rotateX(0);z-index:2}.cube-v{width:var(--card-w, 50px);height:var(--card-h, 80px);position:relative;perspective:300px}.cube-v div{width:100%;height:100%;transform-style:preserve-3d;transform-origin:center center var(--transy)}.cube-v p{width:100%;height:100%;line-height:var(--card-h, 80px);text-align:center;font-size:var(--card-size, 40px);background-color:var(--bgColor, #333);border:solid 1px var(--borderColor, #999);color:var(--numColor, #fff);text-shadow:var(--textShadow);margin-bottom:0;box-shadow:0 1px 2px #333;border-radius:2px}.cube-v p:nth-child(1){position:absolute;transform-origin:0 100%;transform:translateY(-100%) rotateX(90deg)}.cube-v.run div{transform:rotateX(-90deg);transition:var(--delay)}.cube-h{width:var(--card-w, 50px);height:var(--card-h, 80px);position:relative;perspective:300px}.cube-h div{width:100%;height:100%;transform-style:preserve-3d;transform-origin:center center var(--transx)}.cube-h p{width:100%;height:100%;line-height:var(--card-h, 80px);text-align:center;font-size:var(--card-size, 40px);background-color:var(--bgColor, #333);border:solid 1px var(--borderColor, #999);color:var(--numColor, #fff);text-shadow:var(--textShadow);margin-bottom:0;box-shadow:0 1px 2px #333;border-radius:2px}.cube-h p:nth-child(1){position:absolute;transform-origin:100% 0;transform:translate(-100%) rotateY(-90deg)}.cube-h.run div{transform:rotateY(90deg);transition:var(--delay)}.drift{height:var(--card-h, 80px);width:var(--card-w, 50px);font-size:var(--card-size, 40px);background-color:var(--bgColor, #333);line-height:var(--card-h, 80px);text-align:center;border:solid 1px var(--borderColor, #999);color:var(--numColor, #fff);text-shadow:var(--textShadow);box-shadow:0 1px 2px #333;border-radius:2px;position:relative}.drift:before{content:attr(data-digit);position:absolute;top:0;left:0;line-height:var(--card-h, 80px);width:100%;text-align:center;overflow:hidden;height:100%;background-color:var(--bgColor, #333);transform-origin:center}.drift.run:before{transform:translate(var(--driftX),var(--driftY)) rotate(var(--driftRZ)) rotateX(var(--driftRX));opacity:0;transition:var(--delay);border:solid 2px var(--borderColor, #999)}.cut{height:var(--card-h, 80px);width:var(--card-w, 50px);font-size:var(--card-size, 40px);background-color:var(--bgColor, #333);line-height:var(--card-h, 80px);text-align:center;border:solid 1px var(--borderColor, #999);color:var(--numColor, #fff);text-shadow:var(--textShadow);box-shadow:0 1px 2px #333;border-radius:2px;position:relative;overflow:hidden}.cut>p{color:var(--numColor, #fff)!important;opacity:0}.cut>div{position:absolute;inset:0;line-height:var(--card-h, 80px);text-align:center;overflow:hidden}.cut>div:nth-child(1){clip-path:var(--lPolygon)}.cut>div:nth-child(2){clip-path:var(--rPolygon)}.cut>div>div{position:absolute;width:2px;background-color:transparent;z-index:10}.cut.run>div:nth-child(1){transition:var(--delay);transform:var(--cutLTranslate)}.cut.run>div:nth-child(2){transition:var(--delay);transform:var(--cutRTranslate)}.cut.run>p{transition:.6s;transition-delay:.15s;opacity:1}.cut.run .l-line,.cut.run .r-line{background-color:var(--numColor, #fff)}@property --deg{syntax: "<angle>"; inherits: false; initial-value: 0deg;}.erase{height:var(--card-h, 80px);width:var(--card-w, 50px);font-size:var(--card-size, 40px);background-color:var(--bgColor, #333);line-height:var(--card-h, 80px);text-align:center;border:solid 1px var(--borderColor, #999);color:var(--numColor, #fff);text-shadow:var(--textShadow);box-shadow:0 1px 2px #333;border-radius:2px;position:relative;overflow:hidden}.erase>p{color:var(--numColor, #fff)!important;opacity:0;transform:scale(0)}.erase:before{content:attr(data-digit);position:absolute;inset:0;line-height:var(--card-h, 80px);text-align:center;z-index:1}.erase>div{position:absolute;inset:0;opacity:1;z-index:2;background:conic-gradient(from var(--start-deg, 0),var(--transColor) 0deg,var(--transColor) var(--deg),transparent var(--deg),transparent 360deg)}.erase.run:before{transition:.2s;transition-delay:.5s;opacity:0}.erase.run>div{opacity:0;transition-property:--deg,opacity;transition-duration:.6s,.1s;transition-delay:0s,.6s}.erase.run>p{transition:.4s;transition-delay:.5s;opacity:1;transform:scale(1)}
package/dist/time-runner.es.js CHANGED
@@ -1,74 +1,74 @@
1
- import { jsx as l, Fragment as rt, jsxs as L } from "react/jsx-runtime";
2
- import { memo as mt, useState as ht, useRef as st, useMemo as ot, useEffect as tt } from "react";
3
- import './index.css';function $t(d) {
4
- return d && d.__esModule && Object.prototype.hasOwnProperty.call(d, "default") ? d.default : d;
1
+ import { jsx as d, Fragment as st, jsxs as j } from "react/jsx-runtime";
2
+ import { memo as mt, useState as ht, useRef as it, useMemo as rt, useEffect as nt } from "react";
3
+ import './index.css';function $t(f) {
4
+ return f && f.__esModule && Object.prototype.hasOwnProperty.call(f, "default") ? f.default : f;
5
5
  }
6
- var K = { exports: {} }, pt = K.exports, ct;
6
+ var et = { exports: {} }, pt = et.exports, ct;
7
7
  function Mt() {
8
- return ct || (ct = 1, (function(d, c) {
9
- (function(u, o) {
10
- d.exports = o();
8
+ return ct || (ct = 1, (function(f, u) {
9
+ (function(c, o) {
10
+ f.exports = o();
11
11
  })(pt, (function() {
12
- var u = 1e3, o = 6e4, v = 36e5, $ = "millisecond", D = "second", S = "minute", x = "hour", w = "day", g = "week", f = "month", p = "quarter", m = "year", M = "date", b = "Invalid Date", V = /^(\d{4})[-/]?(\d{1,2})?[-/]?(\d{0,2})[Tt\s]*(\d{1,2})?:?(\d{1,2})?:?(\d{1,2})?[.:]?(\d+)?$/, U = /\[([^\]]+)]|Y{1,4}|M{1,4}|D{1,2}|d{1,4}|H{1,2}|h{1,2}|a|A|m{1,2}|s{1,2}|Z{1,2}|SSS/g, et = { name: "en", weekdays: "Sunday_Monday_Tuesday_Wednesday_Thursday_Friday_Saturday".split("_"), months: "January_February_March_April_May_June_July_August_September_October_November_December".split("_"), ordinal: function(s) {
12
+ var c = 1e3, o = 6e4, y = 36e5, h = "millisecond", v = "second", Y = "minute", b = "hour", D = "day", m = "week", g = "month", _ = "quarter", l = "year", p = "date", S = "Invalid Date", N = /^(\d{4})[-/]?(\d{1,2})?[-/]?(\d{0,2})[Tt\s]*(\d{1,2})?:?(\d{1,2})?:?(\d{1,2})?[.:]?(\d+)?$/, Z = /\[([^\]]+)]|Y{1,4}|M{1,4}|D{1,2}|d{1,4}|H{1,2}|h{1,2}|a|A|m{1,2}|s{1,2}|Z{1,2}|SSS/g, J = { name: "en", weekdays: "Sunday_Monday_Tuesday_Wednesday_Thursday_Friday_Saturday".split("_"), months: "January_February_March_April_May_June_July_August_September_October_November_December".split("_"), ordinal: function(s) {
13
13
  var n = ["th", "st", "nd", "rd"], t = s % 100;
14
14
  return "[" + s + (n[(t - 20) % 10] || n[t] || n[0]) + "]";
15
- } }, H = function(s, n, t) {
15
+ } }, A = function(s, n, t) {
16
16
  var r = String(s);
17
17
  return !r || r.length >= n ? s : "" + Array(n + 1 - r.length).join(t) + s;
18
- }, Z = { s: H, z: function(s) {
18
+ }, H = { s: A, z: function(s) {
19
19
  var n = -s.utcOffset(), t = Math.abs(n), r = Math.floor(t / 60), e = t % 60;
20
- return (n <= 0 ? "+" : "-") + H(r, 2, "0") + ":" + H(e, 2, "0");
20
+ return (n <= 0 ? "+" : "-") + A(r, 2, "0") + ":" + A(e, 2, "0");
21
21
  }, m: function s(n, t) {
22
22
  if (n.date() < t.date()) return -s(t, n);
23
- var r = 12 * (t.year() - n.year()) + (t.month() - n.month()), e = n.clone().add(r, f), i = t - e < 0, a = n.clone().add(r + (i ? -1 : 1), f);
23
+ var r = 12 * (t.year() - n.year()) + (t.month() - n.month()), e = n.clone().add(r, g), i = t - e < 0, a = n.clone().add(r + (i ? -1 : 1), g);
24
24
  return +(-(r + (t - e) / (i ? e - a : a - e)) || 0);
25
25
  }, a: function(s) {
26
26
  return s < 0 ? Math.ceil(s) || 0 : Math.floor(s);
27
27
  }, p: function(s) {
28
- return { M: f, y: m, w: g, d: w, D: M, h: x, m: S, s: D, ms: $, Q: p }[s] || String(s || "").toLowerCase().replace(/s$/, "");
28
+ return { M: g, y: l, w: m, d: D, D: p, h: b, m: Y, s: v, ms: h, Q: _ }[s] || String(s || "").toLowerCase().replace(/s$/, "");
29
29
  }, u: function(s) {
30
30
  return s === void 0;
31
- } }, N = "en", j = {};
32
- j[N] = et;
33
- var E = "$isDayjsObject", nt = function(s) {
34
- return s instanceof B || !(!s || !s[E]);
35
- }, J = function s(n, t, r) {
31
+ } }, R = "en", L = {};
32
+ L[R] = J;
33
+ var B = "$isDayjsObject", q = function(s) {
34
+ return s instanceof G || !(!s || !s[B]);
35
+ }, Q = function s(n, t, r) {
36
36
  var e;
37
- if (!n) return N;
37
+ if (!n) return R;
38
38
  if (typeof n == "string") {
39
39
  var i = n.toLowerCase();
40
- j[i] && (e = i), t && (j[i] = t, e = i);
40
+ L[i] && (e = i), t && (L[i] = t, e = i);
41
41
  var a = n.split("-");
42
42
  if (!e && a.length > 1) return s(a[0]);
43
43
  } else {
44
- var y = n.name;
45
- j[y] = n, e = y;
44
+ var M = n.name;
45
+ L[M] = n, e = M;
46
46
  }
47
- return !r && e && (N = e), e || !r && N;
48
- }, T = function(s, n) {
49
- if (nt(s)) return s.clone();
47
+ return !r && e && (R = e), e || !r && R;
48
+ }, x = function(s, n) {
49
+ if (q(s)) return s.clone();
50
50
  var t = typeof n == "object" ? n : {};
51
- return t.date = s, t.args = arguments, new B(t);
52
- }, h = Z;
53
- h.l = J, h.i = nt, h.w = function(s, n) {
54
- return T(s, { locale: n.$L, utc: n.$u, x: n.$x, $offset: n.$offset });
51
+ return t.date = s, t.args = arguments, new G(t);
52
+ }, $ = H;
53
+ $.l = Q, $.i = q, $.w = function(s, n) {
54
+ return x(s, { locale: n.$L, utc: n.$u, x: n.$x, $offset: n.$offset });
55
55
  };
56
- var B = (function() {
56
+ var G = (function() {
57
57
  function s(t) {
58
- this.$L = J(t.locale, null, !0), this.parse(t), this.$x = this.$x || t.x || {}, this[E] = !0;
58
+ this.$L = Q(t.locale, null, !0), this.parse(t), this.$x = this.$x || t.x || {}, this[B] = !0;
59
59
  }
60
60
  var n = s.prototype;
61
61
  return n.parse = function(t) {
62
62
  this.$d = (function(r) {
63
63
  var e = r.date, i = r.utc;
64
64
  if (e === null) return /* @__PURE__ */ new Date(NaN);
65
- if (h.u(e)) return /* @__PURE__ */ new Date();
65
+ if ($.u(e)) return /* @__PURE__ */ new Date();
66
66
  if (e instanceof Date) return new Date(e);
67
67
  if (typeof e == "string" && !/Z$/i.test(e)) {
68
- var a = e.match(V);
68
+ var a = e.match(N);
69
69
  if (a) {
70
- var y = a[2] - 1 || 0, Y = (a[7] || "0").substring(0, 3);
71
- return i ? new Date(Date.UTC(a[1], y, a[3] || 1, a[4] || 0, a[5] || 0, a[6] || 0, Y)) : new Date(a[1], y, a[3] || 1, a[4] || 0, a[5] || 0, a[6] || 0, Y);
70
+ var M = a[2] - 1 || 0, w = (a[7] || "0").substring(0, 3);
71
+ return i ? new Date(Date.UTC(a[1], M, a[3] || 1, a[4] || 0, a[5] || 0, a[6] || 0, w)) : new Date(a[1], M, a[3] || 1, a[4] || 0, a[5] || 0, a[6] || 0, w);
72
72
  }
73
73
  }
74
74
  return new Date(e);
@@ -77,188 +77,188 @@ function Mt() {
77
77
  var t = this.$d;
78
78
  this.$y = t.getFullYear(), this.$M = t.getMonth(), this.$D = t.getDate(), this.$W = t.getDay(), this.$H = t.getHours(), this.$m = t.getMinutes(), this.$s = t.getSeconds(), this.$ms = t.getMilliseconds();
79
79
  }, n.$utils = function() {
80
- return h;
80
+ return $;
81
81
  }, n.isValid = function() {
82
- return this.$d.toString() !== b;
82
+ return this.$d.toString() !== S;
83
83
  }, n.isSame = function(t, r) {
84
- var e = T(t);
84
+ var e = x(t);
85
85
  return this.startOf(r) <= e && e <= this.endOf(r);
86
86
  }, n.isAfter = function(t, r) {
87
- return T(t) < this.startOf(r);
87
+ return x(t) < this.startOf(r);
88
88
  }, n.isBefore = function(t, r) {
89
- return this.endOf(r) < T(t);
89
+ return this.endOf(r) < x(t);
90
90
  }, n.$g = function(t, r, e) {
91
- return h.u(t) ? this[r] : this.set(e, t);
91
+ return $.u(t) ? this[r] : this.set(e, t);
92
92
  }, n.unix = function() {
93
93
  return Math.floor(this.valueOf() / 1e3);
94
94
  }, n.valueOf = function() {
95
95
  return this.$d.getTime();
96
96
  }, n.startOf = function(t, r) {
97
- var e = this, i = !!h.u(r) || r, a = h.p(t), y = function(W, k) {
98
- var I = h.w(e.$u ? Date.UTC(e.$y, k, W) : new Date(e.$y, k, W), e);
99
- return i ? I : I.endOf(w);
100
- }, Y = function(W, k) {
101
- return h.w(e.toDate()[W].apply(e.toDate("s"), (i ? [0, 0, 0, 0] : [23, 59, 59, 999]).slice(k)), e);
102
- }, _ = this.$W, O = this.$M, C = this.$D, F = "set" + (this.$u ? "UTC" : "");
97
+ var e = this, i = !!$.u(r) || r, a = $.p(t), M = function(P, O) {
98
+ var I = $.w(e.$u ? Date.UTC(e.$y, O, P) : new Date(e.$y, O, P), e);
99
+ return i ? I : I.endOf(D);
100
+ }, w = function(P, O) {
101
+ return $.w(e.toDate()[P].apply(e.toDate("s"), (i ? [0, 0, 0, 0] : [23, 59, 59, 999]).slice(O)), e);
102
+ }, T = this.$W, C = this.$M, k = this.$D, X = "set" + (this.$u ? "UTC" : "");
103
103
  switch (a) {
104
- case m:
105
- return i ? y(1, 0) : y(31, 11);
106
- case f:
107
- return i ? y(1, O) : y(0, O + 1);
104
+ case l:
105
+ return i ? M(1, 0) : M(31, 11);
108
106
  case g:
109
- var R = this.$locale().weekStart || 0, X = (_ < R ? _ + 7 : _) - R;
110
- return y(i ? C - X : C + (6 - X), O);
111
- case w:
112
- case M:
113
- return Y(F + "Hours", 0);
114
- case x:
115
- return Y(F + "Minutes", 1);
116
- case S:
117
- return Y(F + "Seconds", 2);
107
+ return i ? M(1, C) : M(0, C + 1);
108
+ case m:
109
+ var W = this.$locale().weekStart || 0, z = (T < W ? T + 7 : T) - W;
110
+ return M(i ? k - z : k + (6 - z), C);
118
111
  case D:
119
- return Y(F + "Milliseconds", 3);
112
+ case p:
113
+ return w(X + "Hours", 0);
114
+ case b:
115
+ return w(X + "Minutes", 1);
116
+ case Y:
117
+ return w(X + "Seconds", 2);
118
+ case v:
119
+ return w(X + "Milliseconds", 3);
120
120
  default:
121
121
  return this.clone();
122
122
  }
123
123
  }, n.endOf = function(t) {
124
124
  return this.startOf(t, !1);
125
125
  }, n.$set = function(t, r) {
126
- var e, i = h.p(t), a = "set" + (this.$u ? "UTC" : ""), y = (e = {}, e[w] = a + "Date", e[M] = a + "Date", e[f] = a + "Month", e[m] = a + "FullYear", e[x] = a + "Hours", e[S] = a + "Minutes", e[D] = a + "Seconds", e[$] = a + "Milliseconds", e)[i], Y = i === w ? this.$D + (r - this.$W) : r;
127
- if (i === f || i === m) {
128
- var _ = this.clone().set(M, 1);
129
- _.$d[y](Y), _.init(), this.$d = _.set(M, Math.min(this.$D, _.daysInMonth())).$d;
130
- } else y && this.$d[y](Y);
126
+ var e, i = $.p(t), a = "set" + (this.$u ? "UTC" : ""), M = (e = {}, e[D] = a + "Date", e[p] = a + "Date", e[g] = a + "Month", e[l] = a + "FullYear", e[b] = a + "Hours", e[Y] = a + "Minutes", e[v] = a + "Seconds", e[h] = a + "Milliseconds", e)[i], w = i === D ? this.$D + (r - this.$W) : r;
127
+ if (i === g || i === l) {
128
+ var T = this.clone().set(p, 1);
129
+ T.$d[M](w), T.init(), this.$d = T.set(p, Math.min(this.$D, T.daysInMonth())).$d;
130
+ } else M && this.$d[M](w);
131
131
  return this.init(), this;
132
132
  }, n.set = function(t, r) {
133
133
  return this.clone().$set(t, r);
134
134
  }, n.get = function(t) {
135
- return this[h.p(t)]();
135
+ return this[$.p(t)]();
136
136
  }, n.add = function(t, r) {
137
137
  var e, i = this;
138
138
  t = Number(t);
139
- var a = h.p(r), y = function(O) {
140
- var C = T(i);
141
- return h.w(C.date(C.date() + Math.round(O * t)), i);
139
+ var a = $.p(r), M = function(C) {
140
+ var k = x(i);
141
+ return $.w(k.date(k.date() + Math.round(C * t)), i);
142
142
  };
143
- if (a === f) return this.set(f, this.$M + t);
144
- if (a === m) return this.set(m, this.$y + t);
145
- if (a === w) return y(1);
146
- if (a === g) return y(7);
147
- var Y = (e = {}, e[S] = o, e[x] = v, e[D] = u, e)[a] || 1, _ = this.$d.getTime() + t * Y;
148
- return h.w(_, this);
143
+ if (a === g) return this.set(g, this.$M + t);
144
+ if (a === l) return this.set(l, this.$y + t);
145
+ if (a === D) return M(1);
146
+ if (a === m) return M(7);
147
+ var w = (e = {}, e[Y] = o, e[b] = y, e[v] = c, e)[a] || 1, T = this.$d.getTime() + t * w;
148
+ return $.w(T, this);
149
149
  }, n.subtract = function(t, r) {
150
150
  return this.add(-1 * t, r);
151
151
  }, n.format = function(t) {
152
152
  var r = this, e = this.$locale();
153
- if (!this.isValid()) return e.invalidDate || b;
154
- var i = t || "YYYY-MM-DDTHH:mm:ssZ", a = h.z(this), y = this.$H, Y = this.$m, _ = this.$M, O = e.weekdays, C = e.months, F = e.meridiem, R = function(k, I, A, Q) {
155
- return k && (k[I] || k(r, i)) || A[I].slice(0, Q);
156
- }, X = function(k) {
157
- return h.s(y % 12 || 12, k, "0");
158
- }, W = F || function(k, I, A) {
159
- var Q = k < 12 ? "AM" : "PM";
160
- return A ? Q.toLowerCase() : Q;
153
+ if (!this.isValid()) return e.invalidDate || S;
154
+ var i = t || "YYYY-MM-DDTHH:mm:ssZ", a = $.z(this), M = this.$H, w = this.$m, T = this.$M, C = e.weekdays, k = e.months, X = e.meridiem, W = function(O, I, U, K) {
155
+ return O && (O[I] || O(r, i)) || U[I].slice(0, K);
156
+ }, z = function(O) {
157
+ return $.s(M % 12 || 12, O, "0");
158
+ }, P = X || function(O, I, U) {
159
+ var K = O < 12 ? "AM" : "PM";
160
+ return U ? K.toLowerCase() : K;
161
161
  };
162
- return i.replace(U, (function(k, I) {
163
- return I || (function(A) {
164
- switch (A) {
162
+ return i.replace(Z, (function(O, I) {
163
+ return I || (function(U) {
164
+ switch (U) {
165
165
  case "YY":
166
166
  return String(r.$y).slice(-2);
167
167
  case "YYYY":
168
- return h.s(r.$y, 4, "0");
168
+ return $.s(r.$y, 4, "0");
169
169
  case "M":
170
- return _ + 1;
170
+ return T + 1;
171
171
  case "MM":
172
- return h.s(_ + 1, 2, "0");
172
+ return $.s(T + 1, 2, "0");
173
173
  case "MMM":
174
- return R(e.monthsShort, _, C, 3);
174
+ return W(e.monthsShort, T, k, 3);
175
175
  case "MMMM":
176
- return R(C, _);
176
+ return W(k, T);
177
177
  case "D":
178
178
  return r.$D;
179
179
  case "DD":
180
- return h.s(r.$D, 2, "0");
180
+ return $.s(r.$D, 2, "0");
181
181
  case "d":
182
182
  return String(r.$W);
183
183
  case "dd":
184
- return R(e.weekdaysMin, r.$W, O, 2);
184
+ return W(e.weekdaysMin, r.$W, C, 2);
185
185
  case "ddd":
186
- return R(e.weekdaysShort, r.$W, O, 3);
186
+ return W(e.weekdaysShort, r.$W, C, 3);
187
187
  case "dddd":
188
- return O[r.$W];
188
+ return C[r.$W];
189
189
  case "H":
190
- return String(y);
190
+ return String(M);
191
191
  case "HH":
192
- return h.s(y, 2, "0");
192
+ return $.s(M, 2, "0");
193
193
  case "h":
194
- return X(1);
194
+ return z(1);
195
195
  case "hh":
196
- return X(2);
196
+ return z(2);
197
197
  case "a":
198
- return W(y, Y, !0);
198
+ return P(M, w, !0);
199
199
  case "A":
200
- return W(y, Y, !1);
200
+ return P(M, w, !1);
201
201
  case "m":
202
- return String(Y);
202
+ return String(w);
203
203
  case "mm":
204
- return h.s(Y, 2, "0");
204
+ return $.s(w, 2, "0");
205
205
  case "s":
206
206
  return String(r.$s);
207
207
  case "ss":
208
- return h.s(r.$s, 2, "0");
208
+ return $.s(r.$s, 2, "0");
209
209
  case "SSS":
210
- return h.s(r.$ms, 3, "0");
210
+ return $.s(r.$ms, 3, "0");
211
211
  case "Z":
212
212
  return a;
213
213
  }
214
214
  return null;
215
- })(k) || a.replace(":", "");
215
+ })(O) || a.replace(":", "");
216
216
  }));
217
217
  }, n.utcOffset = function() {
218
218
  return 15 * -Math.round(this.$d.getTimezoneOffset() / 15);
219
219
  }, n.diff = function(t, r, e) {
220
- var i, a = this, y = h.p(r), Y = T(t), _ = (Y.utcOffset() - this.utcOffset()) * o, O = this - Y, C = function() {
221
- return h.m(a, Y);
220
+ var i, a = this, M = $.p(r), w = x(t), T = (w.utcOffset() - this.utcOffset()) * o, C = this - w, k = function() {
221
+ return $.m(a, w);
222
222
  };
223
- switch (y) {
224
- case m:
225
- i = C() / 12;
223
+ switch (M) {
224
+ case l:
225
+ i = k() / 12;
226
226
  break;
227
- case f:
228
- i = C();
227
+ case g:
228
+ i = k();
229
229
  break;
230
- case p:
231
- i = C() / 3;
230
+ case _:
231
+ i = k() / 3;
232
232
  break;
233
- case g:
234
- i = (O - _) / 6048e5;
233
+ case m:
234
+ i = (C - T) / 6048e5;
235
235
  break;
236
- case w:
237
- i = (O - _) / 864e5;
236
+ case D:
237
+ i = (C - T) / 864e5;
238
238
  break;
239
- case x:
240
- i = O / v;
239
+ case b:
240
+ i = C / y;
241
241
  break;
242
- case S:
243
- i = O / o;
242
+ case Y:
243
+ i = C / o;
244
244
  break;
245
- case D:
246
- i = O / u;
245
+ case v:
246
+ i = C / c;
247
247
  break;
248
248
  default:
249
- i = O;
249
+ i = C;
250
250
  }
251
- return e ? i : h.a(i);
251
+ return e ? i : $.a(i);
252
252
  }, n.daysInMonth = function() {
253
- return this.endOf(f).$D;
253
+ return this.endOf(g).$D;
254
254
  }, n.$locale = function() {
255
- return j[this.$L];
255
+ return L[this.$L];
256
256
  }, n.locale = function(t, r) {
257
257
  if (!t) return this.$L;
258
- var e = this.clone(), i = J(t, r, !0);
258
+ var e = this.clone(), i = Q(t, r, !0);
259
259
  return i && (e.$L = i), e;
260
260
  }, n.clone = function() {
261
- return h.w(this.$d, this);
261
+ return $.w(this.$d, this);
262
262
  }, n.toDate = function() {
263
263
  return new Date(this.valueOf());
264
264
  }, n.toJSON = function() {
@@ -268,92 +268,99 @@ function Mt() {
268
268
  }, n.toString = function() {
269
269
  return this.$d.toUTCString();
270
270
  }, s;
271
- })(), at = B.prototype;
272
- return T.prototype = at, [["$ms", $], ["$s", D], ["$m", S], ["$H", x], ["$W", w], ["$M", f], ["$y", m], ["$D", M]].forEach((function(s) {
273
- at[s[1]] = function(n) {
271
+ })(), ot = G.prototype;
272
+ return x.prototype = ot, [["$ms", h], ["$s", v], ["$m", Y], ["$H", b], ["$W", D], ["$M", g], ["$y", l], ["$D", p]].forEach((function(s) {
273
+ ot[s[1]] = function(n) {
274
274
  return this.$g(n, s[0], s[1]);
275
275
  };
276
- })), T.extend = function(s, n) {
277
- return s.$i || (s(n, B, T), s.$i = !0), T;
278
- }, T.locale = J, T.isDayjs = nt, T.unix = function(s) {
279
- return T(1e3 * s);
280
- }, T.en = j[N], T.Ls = j, T.p = {}, T;
276
+ })), x.extend = function(s, n) {
277
+ return s.$i || (s(n, G, x), s.$i = !0), x;
278
+ }, x.locale = Q, x.isDayjs = q, x.unix = function(s) {
279
+ return x(1e3 * s);
280
+ }, x.en = L[R], x.Ls = L, x.p = {}, x;
281
281
  }));
282
- })(K)), K.exports;
282
+ })(et)), et.exports;
283
283
  }
284
- var yt = Mt();
285
- const z = /* @__PURE__ */ $t(yt), q = 60, gt = [
284
+ var gt = Mt();
285
+ const E = /* @__PURE__ */ $t(gt), V = 60, yt = [
286
286
  "YYYY-MM-DD",
287
287
  "YYYY/MM/DD",
288
288
  "YYYY-MM-DD HH:mm",
289
289
  "YYYY/MM/DD HH:mm",
290
290
  "YYYY-MM-DD HH:mm:ss",
291
291
  "YYYY/MM/DD HH:mm:ss"
292
- ], ut = (d) => {
293
- if (!it(d))
292
+ ], ut = (f) => {
293
+ if (!at(f))
294
294
  return "00:00:00";
295
- const c = z(d).diff(z());
296
- if (c <= 0)
295
+ const u = E(f).diff(E());
296
+ if (u <= 0)
297
297
  return "00:00:00";
298
- const u = Math.floor(c / 1e3), o = Math.floor(u / 86400), v = Math.floor(u % 86400 / 3600), $ = Math.floor(u % 3600 / 60), D = u % 60;
299
- return `${o ? `${o}:` : ""}${`${v}`.padStart(2, "0")}:${`${$}`.padStart(2, "0")}:${`${D}`.padStart(2, "0")}`;
300
- }, lt = (d) => {
301
- const c = (u) => `${u}`.padStart(2, "0");
302
- return `${c(Math.floor(d / q / q))}:${c(Math.floor(d / q) % q)}:${c(d % q)}`;
303
- }, it = (d) => gt.some((c) => z(d, c, !0).isValid()), G = (d, c, u, o, v) => {
304
- const $ = o - c, D = v - u, S = Math.sqrt($ * $ + D * D).toFixed(2), x = Math.atan2(D, $) * 180 / Math.PI, w = (c + o) / 2, g = (u + v) / 2;
305
- d.style.left = `${w}px`, d.style.top = `${g}px`, d.style.height = `${S}px`, d.style.transform = `translate(-50%, -50%) rotate(${x + 90}deg)`;
306
- }, vt = (d) => {
307
- const c = d.clientWidth, u = d.clientHeight, o = Math.floor(Math.random() * 2);
308
- let v = "", $ = "", D = 0, S = 0;
309
- const x = d.querySelector(".l-line"), w = d.querySelector(".r-line");
298
+ const c = Math.floor(u / 1e3), o = Math.floor(c / 86400), y = Math.floor(c % 86400 / 3600), h = Math.floor(c % 3600 / 60), v = c % 60;
299
+ return `${o ? `${o}:` : ""}${`${y}`.padStart(2, "0")}:${`${h}`.padStart(2, "0")}:${`${v}`.padStart(2, "0")}`;
300
+ }, lt = (f) => {
301
+ const u = (c) => `${c}`.padStart(2, "0");
302
+ return `${u(Math.floor(f / V / V))}:${u(Math.floor(f / V) % V)}:${u(f % V)}`;
303
+ }, at = (f) => yt.some((u) => E(f, u, !0).isValid()), tt = (f, u, c, o, y) => {
304
+ const h = o - u, v = y - c, Y = Math.sqrt(h * h + v * v).toFixed(2), b = Math.atan2(v, h) * 180 / Math.PI, D = (u + o) / 2, m = (c + y) / 2;
305
+ f.style.left = `${D}px`, f.style.top = `${m}px`, f.style.height = `${Y}px`, f.style.transform = `translate(-50%, -50%) rotate(${b + 90}deg)`;
306
+ }, vt = (f) => {
307
+ const u = f.clientWidth, c = f.clientHeight, o = Math.floor(Math.random() * 2);
308
+ let y = "", h = "", v = 0, Y = 0;
309
+ const b = f.querySelector(".l-line"), D = f.querySelector(".r-line");
310
310
  if (o === 0) {
311
- const g = 5 + Math.random() * 90, f = 100 - g;
312
- D = Math.max(g, f), v = `
311
+ const m = 5 + Math.random() * 90, g = 100 - m;
312
+ v = Math.max(m, g), y = `
313
313
  polygon(
314
314
  0% 0%,
315
- ${g}% 0%,
316
- ${f}% 100%,
315
+ ${m}% 0%,
316
+ ${g}% 100%,
317
317
  0% 100%
318
- )`, $ = `
318
+ )`, h = `
319
319
  polygon(
320
- ${g}% 0%,
320
+ ${m}% 0%,
321
321
  100% 0%,
322
322
  100% 100%,
323
- ${f}% 100%
323
+ ${g}% 100%
324
324
  )`;
325
- const p = c * g / 100, m = 0, M = c * f / 100, b = u;
326
- G(x, p, m, M, b), G(w, p, m, M, b);
325
+ const _ = u * m / 100, l = 0, p = u * g / 100, S = c;
326
+ tt(b, _, l, p, S), tt(D, _, l, p, S);
327
327
  } else {
328
- const g = 5 + Math.random() * 90, f = 100 - g;
329
- S = Math.max(g, f), v = `
328
+ const m = 5 + Math.random() * 90, g = 100 - m;
329
+ Y = Math.max(m, g), y = `
330
330
  polygon(
331
331
  0% 0%,
332
332
  100% 0%,
333
- 100% ${f}%,
334
- 0% ${g}%
335
- )`, $ = `
333
+ 100% ${g}%,
334
+ 0% ${m}%
335
+ )`, h = `
336
336
  polygon(
337
- 0% ${g}%,
338
- 100% ${f}%,
337
+ 0% ${m}%,
338
+ 100% ${g}%,
339
339
  100% 100%,
340
340
  0% 100%
341
341
  )`;
342
- const p = 0, m = u * g / 100, M = c, b = u * f / 100;
343
- G(x, p, m, M, b), G(w, p, m, M, b);
342
+ const _ = 0, l = c * m / 100, p = u, S = c * g / 100;
343
+ tt(b, _, l, p, S), tt(D, _, l, p, S);
344
344
  }
345
345
  return {
346
- lPath: v,
347
- rPath: $,
348
- lTranslate: o === 0 ? `translateX(-${D}%)` : `translateY(-${S}%)`,
349
- rTranslate: o === 0 ? `translateX(${D}%)` : `translateY(${S}%)`
346
+ lPath: y,
347
+ rPath: h,
348
+ lTranslate: o === 0 ? `translateX(-${v}%)` : `translateY(-${Y}%)`,
349
+ rTranslate: o === 0 ? `translateX(${v}%)` : `translateY(${Y}%)`
350
350
  };
351
- }, dt = "HH:mm:ss", ft = 900, wt = (d) => {
352
- const { mode: c, showType: u = "default", size: o = 40, className: v, bgColor: $, borderColor: D, textShadowColor: S, finishCountFn: x } = d, [w, g] = ht(
353
- u === "count" ? lt(0) : u === "default" ? z().format(dt) : ut(u)
354
- ), f = st({
351
+ }, Dt = (f, u = 0.3) => {
352
+ const c = document.createElement("div");
353
+ c.style.color = f, document.body.appendChild(c);
354
+ const o = getComputedStyle(c).color;
355
+ document.body.removeChild(c);
356
+ const [y, h, v] = o.match(/\d+/g).slice(0, 3).map(Number), b = 0.299 * y + 0.587 * h + 0.114 * v > 128, D = (m) => Math.round(b ? m * (1 - u) : m + (255 - m) * u);
357
+ return "#" + [D(y), D(h), D(v)].map((m) => m.toString(16).padStart(2, "0")).join("").toUpperCase();
358
+ }, St = () => Math.floor(Math.random() * 361), dt = "HH:mm:ss", ft = 900, xt = (f) => {
359
+ const { mode: u, showType: c = "default", size: o = 40, className: y, bgColor: h, numColor: v, borderColor: Y, textShadowColor: b, finishCountFn: D } = f, [m, g] = ht(
360
+ c === "count" ? lt(0) : c === "default" ? E().format(dt) : ut(c)
361
+ ), _ = it({
355
362
  t: null
356
- }), p = {
363
+ }), l = {
357
364
  "--card-size": `${o}px`,
358
365
  "--card-w": `${o * 1.25}px`,
359
366
  "--card-h": `${o * 2}px`,
@@ -361,112 +368,122 @@ const z = /* @__PURE__ */ $t(yt), q = 60, gt = [
361
368
  "--transx": `${-o * 1.25 / 2}px`,
362
369
  "--transy": `${-o}px`,
363
370
  "--delay": `${ft / 1e3}s`,
364
- "--bgColor": $,
365
- "--borderColor": D,
366
- "--textShadow": S ? `1px 2px 3px ${S}` : "none"
371
+ "--bgColor": h,
372
+ "--numColor": v,
373
+ "--borderColor": Y,
374
+ "--textShadow": b ? `1px 2px 3px ${b}` : "none",
375
+ "--transColor": Dt(h || "#333")
367
376
  };
368
- tt(() => {
369
- let M = Date.now();
370
- f.current.t && (clearInterval(f.current.t), f.current.t = null, M = Date.now()), f.current.t = setInterval(() => {
371
- let b = () => "";
372
- u === "count" ? b = () => lt(Math.floor((Date.now() - M) / 1e3)) : u === "default" ? b = () => z().format(dt) : b = () => ut(u), g(b());
377
+ nt(() => {
378
+ let S = Date.now();
379
+ _.current.t && (clearInterval(_.current.t), _.current.t = null, S = Date.now()), _.current.t = setInterval(() => {
380
+ let N = () => "";
381
+ c === "count" ? N = () => lt(Math.floor((Date.now() - S) / 1e3)) : c === "default" ? N = () => E().format(dt) : N = () => ut(c), g(N());
373
382
  }, 1e3);
374
- }, [u]), tt(() => {
375
- it(u) && w === "00:00:00" && x && setTimeout(() => {
376
- x();
383
+ }, [c]), nt(() => {
384
+ at(c) && m === "00:00:00" && D && setTimeout(() => {
385
+ D();
377
386
  }, 1e3);
378
- }, [w, u, x]);
379
- const m = () => {
380
- if (!w)
387
+ }, [m, c, D]);
388
+ const p = () => {
389
+ if (!m)
381
390
  return null;
382
- const M = w.split(":"), b = M[M.length - 3].split(""), V = M[M.length - 2].split(""), U = M[M.length - 1].split(""), et = M.length === 4 ? M[0].split("") : [], H = it(u), Z = et.map((j, E) => /* @__PURE__ */ l(P, { mode: c, time: +j, limit: H ? -9 : 9, size: o }, E)), N = /* @__PURE__ */ l("span", { children: ":" });
383
- return /* @__PURE__ */ L(rt, { children: [
384
- Z.length ? /* @__PURE__ */ L(rt, { children: [
385
- Z,
386
- H ? /* @__PURE__ */ l("p", { children: "天" }) : N
391
+ const S = m.split(":"), N = S[S.length - 3].split(""), Z = S[S.length - 2].split(""), J = S[S.length - 1].split(""), A = S.length === 4 ? S[0].split("") : [], H = at(c), R = A.map((B, q) => /* @__PURE__ */ d(F, { mode: u, time: +B, limit: H ? -9 : 9, size: o }, q)), L = /* @__PURE__ */ d("span", { children: ":" });
392
+ return /* @__PURE__ */ j(st, { children: [
393
+ R.length ? /* @__PURE__ */ j(st, { children: [
394
+ R,
395
+ H ? /* @__PURE__ */ d("p", { children: "天" }) : L
387
396
  ] }) : null,
388
- /* @__PURE__ */ l(P, { mode: c, time: +b[0], limit: H ? -2 : 2, size: o }),
389
- /* @__PURE__ */ l(P, { mode: c, time: +b[1], limit: H ? -9 : 9, size: o }),
390
- H ? /* @__PURE__ */ l("p", { children: "小时" }) : N,
391
- /* @__PURE__ */ l(P, { mode: c, time: +V[0], limit: H ? -5 : 5, size: o }),
392
- /* @__PURE__ */ l(P, { mode: c, time: +V[1], limit: H ? -9 : 9, size: o }),
393
- H ? /* @__PURE__ */ l("p", { children: "分" }) : N,
394
- /* @__PURE__ */ l(P, { mode: c, time: +U[0], limit: H ? -5 : 5, size: o }),
395
- /* @__PURE__ */ l(P, { mode: c, time: +U[1], limit: H ? -9 : 9, size: o }),
396
- H && /* @__PURE__ */ l("p", { children: "秒" })
397
+ /* @__PURE__ */ d(F, { mode: u, time: +N[0], limit: H ? -2 : 2, size: o }),
398
+ /* @__PURE__ */ d(F, { mode: u, time: +N[1], limit: H ? -9 : 9, size: o }),
399
+ H ? /* @__PURE__ */ d("p", { children: "小时" }) : L,
400
+ /* @__PURE__ */ d(F, { mode: u, time: +Z[0], limit: H ? -5 : 5, size: o }),
401
+ /* @__PURE__ */ d(F, { mode: u, time: +Z[1], limit: H ? -9 : 9, size: o }),
402
+ H ? /* @__PURE__ */ d("p", { children: "分" }) : L,
403
+ /* @__PURE__ */ d(F, { mode: u, time: +J[0], limit: H ? -5 : 5, size: o }),
404
+ /* @__PURE__ */ d(F, { mode: u, time: +J[1], limit: H ? -9 : 9, size: o }),
405
+ H && /* @__PURE__ */ d("p", { children: "秒" })
397
406
  ] });
398
407
  };
399
- return /* @__PURE__ */ l("div", { className: `time-runner ${v || ""}`, style: p, children: m() });
400
- }, Dt = (d) => {
401
- const { time: c, limit: u, mode: o, size: v } = d, [$, D] = ht(!1), S = st({
402
- t: c
403
- }), x = st(null), w = ot(() => c !== S.current.t && o === "drift" ? {
404
- "--driftX": `${Math.floor(Math.random() * (-v - v + 1)) + v}px`,
405
- "--driftY": `${Math.floor(Math.random() * (-v * 2 - v * 2 + 1)) + v * 2}px`,
408
+ return /* @__PURE__ */ d("div", { className: `time-runner ${y || ""}`, style: l, children: p() });
409
+ }, Yt = (f) => {
410
+ const { time: u, limit: c, mode: o, size: y } = f, [h, v] = ht(!1), Y = it({
411
+ t: u
412
+ }), b = it(null), D = rt(() => u !== Y.current.t && o === "drift" ? {
413
+ "--driftX": `${Math.floor(Math.random() * (-y - y + 1)) + y}px`,
414
+ "--driftY": `${Math.floor(Math.random() * (-y * 2 - y * 2 + 1)) + y * 2}px`,
406
415
  "--driftRZ": `${Math.floor(Math.random() * 151) + 50}deg`,
407
416
  "--driftRX": `${Math.floor(Math.random() * 151) + 50}deg`
408
- } : null, [c, v, o]), g = ot(() => {
409
- if ($ && o === "cut") {
410
- const { lPath: p, rPath: m, lTranslate: M, rTranslate: b } = vt(x.current);
417
+ } : null, [u, y, o]), m = rt(() => {
418
+ if (h && o === "cut") {
419
+ const { lPath: l, rPath: p, lTranslate: S, rTranslate: N } = vt(b.current);
411
420
  return {
412
- "--lPolygon": p,
413
- "--rPolygon": m,
414
- "--cutLTranslate": M,
415
- "--cutRTranslate": b
421
+ "--lPolygon": l,
422
+ "--rPolygon": p,
423
+ "--cutLTranslate": S,
424
+ "--cutRTranslate": N
416
425
  };
417
426
  }
418
427
  return null;
419
- }, [$, o]);
420
- return tt(() => {
421
- c !== S.current.t && D(!0);
422
- }, [c]), tt(() => {
423
- $ && setTimeout(() => {
424
- S.current.t = c, D(!1);
428
+ }, [h, o]), g = rt(() => h && o === "erase" ? {
429
+ "--start-deg": `${St()}deg`,
430
+ "--deg": "360deg"
431
+ } : null, [h, o]);
432
+ return nt(() => {
433
+ u !== Y.current.t && v(!0);
434
+ }, [u]), nt(() => {
435
+ h && setTimeout(() => {
436
+ Y.current.t = u, v(!1);
425
437
  }, ft);
426
- }, [$, c]), /* @__PURE__ */ l(rt, { children: (() => {
427
- const { t: p } = S.current;
428
- let m = p;
429
- switch (u > 0 ? m = p >= u ? 0 : p + 1 : m = p <= 0 ? Math.abs(u) : p - 1, o) {
438
+ }, [h, u]), /* @__PURE__ */ d(st, { children: (() => {
439
+ const { t: l } = Y.current;
440
+ let p = l;
441
+ switch (c > 0 ? p = l >= c ? 0 : l + 1 : p = l <= 0 ? Math.abs(c) : l - 1, o) {
430
442
  case "card":
431
- return /* @__PURE__ */ L("div", { className: "clock-card font-num", children: [
432
- /* @__PURE__ */ L("div", { className: `clock-b ${$ ? "run" : ""}`, children: [
433
- /* @__PURE__ */ l("p", { children: m }),
434
- /* @__PURE__ */ l("p", { children: m })
443
+ return /* @__PURE__ */ j("div", { className: "clock-card font-num", children: [
444
+ /* @__PURE__ */ j("div", { className: `clock-b ${h ? "run" : ""}`, children: [
445
+ /* @__PURE__ */ d("p", { children: p }),
446
+ /* @__PURE__ */ d("p", { children: p })
435
447
  ] }),
436
- /* @__PURE__ */ L("div", { className: `clock-f ${$ ? "run" : ""}`, children: [
437
- /* @__PURE__ */ l("p", { children: p }),
438
- /* @__PURE__ */ l("p", { children: p })
448
+ /* @__PURE__ */ j("div", { className: `clock-f ${h ? "run" : ""}`, children: [
449
+ /* @__PURE__ */ d("p", { children: l }),
450
+ /* @__PURE__ */ d("p", { children: l })
439
451
  ] })
440
452
  ] });
441
453
  case "cube-v":
442
- return /* @__PURE__ */ l("div", { className: `cube-v font-num ${$ ? "run" : ""}`, children: /* @__PURE__ */ L("div", { children: [
443
- /* @__PURE__ */ l("p", { children: m }),
444
- /* @__PURE__ */ l("p", { children: p })
454
+ return /* @__PURE__ */ d("div", { className: `cube-v font-num ${h ? "run" : ""}`, children: /* @__PURE__ */ j("div", { children: [
455
+ /* @__PURE__ */ d("p", { children: p }),
456
+ /* @__PURE__ */ d("p", { children: l })
445
457
  ] }) });
446
458
  case "cube-h":
447
- return /* @__PURE__ */ l("div", { className: `cube-h font-num ${$ ? "run" : ""}`, children: /* @__PURE__ */ L("div", { children: [
448
- /* @__PURE__ */ l("p", { children: m }),
449
- /* @__PURE__ */ l("p", { children: p })
459
+ return /* @__PURE__ */ d("div", { className: `cube-h font-num ${h ? "run" : ""}`, children: /* @__PURE__ */ j("div", { children: [
460
+ /* @__PURE__ */ d("p", { children: p }),
461
+ /* @__PURE__ */ d("p", { children: l })
450
462
  ] }) });
451
463
  case "drift":
452
- return /* @__PURE__ */ l("div", { className: `drift font-num ${$ ? "run" : ""}`, "data-digit": p, style: w, children: m });
464
+ return /* @__PURE__ */ d("div", { className: `drift font-num ${h ? "run" : ""}`, "data-digit": l, style: D, children: p });
453
465
  case "cut":
454
- return /* @__PURE__ */ L("div", { ref: x, className: `cut font-num ${$ ? "run" : ""}`, style: g, children: [
455
- /* @__PURE__ */ L("div", { children: [
456
- /* @__PURE__ */ l("p", { children: p }),
457
- /* @__PURE__ */ l("div", { className: "l-line" })
466
+ return /* @__PURE__ */ j("div", { ref: b, className: `cut font-num ${h ? "run" : ""}`, style: m, children: [
467
+ /* @__PURE__ */ j("div", { children: [
468
+ /* @__PURE__ */ d("p", { children: l }),
469
+ /* @__PURE__ */ d("div", { className: "l-line" })
458
470
  ] }),
459
- /* @__PURE__ */ L("div", { children: [
460
- /* @__PURE__ */ l("p", { children: p }),
461
- /* @__PURE__ */ l("div", { className: "r-line" })
471
+ /* @__PURE__ */ j("div", { children: [
472
+ /* @__PURE__ */ d("p", { children: l }),
473
+ /* @__PURE__ */ d("div", { className: "r-line" })
462
474
  ] }),
463
- /* @__PURE__ */ l("p", { children: m })
475
+ /* @__PURE__ */ d("p", { children: p })
476
+ ] });
477
+ case "erase":
478
+ return /* @__PURE__ */ j("div", { className: `erase font-num ${h ? "run" : ""}`, "data-digit": l, children: [
479
+ /* @__PURE__ */ d("p", { children: p }),
480
+ /* @__PURE__ */ d("div", { style: g })
464
481
  ] });
465
482
  default:
466
- return /* @__PURE__ */ l("div", { className: "font-num", children: /* @__PURE__ */ l("p", { children: p }) });
483
+ return /* @__PURE__ */ d("div", { className: "font-num", children: /* @__PURE__ */ d("p", { children: l }) });
467
484
  }
468
485
  })() });
469
- }, P = mt(Dt);
486
+ }, F = mt(Yt);
470
487
  export {
471
- wt as TimeRunner
488
+ xt as TimeRunner
472
489
  };
package/dist/time-runner.umd.js CHANGED
@@ -1,26 +1,26 @@
1
- (function(X,o){typeof exports=="object"&&typeof module<"u"?o(exports,require("react/jsx-runtime"),require("react")):typeof define=="function"&&define.amd?define(["exports","react/jsx-runtime","react"],o):(X=typeof globalThis<"u"?globalThis:X||self,o(X["time-runner"]={},X.jsxRuntime,X.React))})(this,(function(X,o,j){"use strict";var ot=document.createElement("style");ot.textContent=`@font-face{font-family:DIN-num-font;src:url(data:font/woff2;base64,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)}.font-num{font-family:DIN-num-font}.time-runner{width:max-content;display:flex;justify-content:space-between;align-items:center;margin:0 auto;-webkit-user-select:none;user-select:none;position:relative;font-variant-numeric:tabular-nums}.time-runner span{font-size:var(--card-size, 40px);margin:0 3px;padding-bottom:3px;display:inline-block}.time-runner>p{margin:0 3px}.time-runner>div{font-size:var(--card-size, 40px)}.time-runner>div>p{color:#333;text-shadow:var(--textShadow)}.clock-card{position:relative;height:var(--card-h, 80px);width:var(--card-w, 50px);box-shadow:0 1px 5px #333;border-radius:6px}.clock-card:before{content:"";position:absolute;top:50%;left:0;background-color:#999;width:100%;height:1.5px;z-index:3;overflow:hidden}.clock-card .clock-f,.clock-card .clock-b{width:100%;height:100%;position:absolute;top:0;left:0}.clock-card .clock-f p,.clock-card .clock-b p{position:absolute;left:0;height:50%;width:100%;margin-bottom:0;text-align:center;font-size:var(--card-size, 40px);background-color:var(--bgColor, #333);color:#fff;text-shadow:var(--textShadow);overflow:hidden;border-left:solid 1px var(--borderColor, #999);border-right:solid 1px var(--borderColor, #999)}.clock-card .clock-f p:nth-child(1),.clock-card .clock-b p:nth-child(1){top:0;border-top:solid 1px var(--borderColor, #999)}.clock-card .clock-f p:nth-child(2),.clock-card .clock-b p:nth-child(2){bottom:0;border-bottom:solid 1px var(--borderColor, #999)}.clock-card .clock-f p:nth-child(1){line-height:var(--card-h, 80px);transform-origin:bottom;backface-visibility:hidden;border-radius:6px 6px 0 0}.clock-card .clock-f p:nth-child(2){line-height:3px;border-radius:0 0 6px 6px}.clock-card .clock-f.run p:nth-child(1){transition:var(--delay) ease-in-out;transform:perspective(50px) rotateX(-180deg)}.clock-card .clock-b p:nth-child(1){line-height:var(--card-h, 80px);border-radius:6px 6px 0 0}.clock-card .clock-b p:nth-child(2){line-height:3px;transform-origin:top;transform:perspective(50px) rotateX(179.99deg);backface-visibility:hidden;border-radius:0 0 6px 6px}.clock-card .clock-b.run p:nth-child(2){transition:var(--delay) ease-in-out;transform:rotateX(0);z-index:2}.cube-v{width:var(--card-w, 50px);height:var(--card-h, 80px);position:relative;perspective:300px}.cube-v div{width:100%;height:100%;transform-style:preserve-3d;transform-origin:center center var(--transy)}.cube-v p{width:100%;height:100%;line-height:var(--card-h, 80px);text-align:center;font-size:var(--card-size, 40px);background-color:var(--bgColor, #333);border:solid 1px var(--borderColor, #999);color:#fff;text-shadow:var(--textShadow);margin-bottom:0;box-shadow:0 1px 2px #333;border-radius:2px}.cube-v p:nth-child(1){position:absolute;transform-origin:0 100%;transform:translateY(-100%) rotateX(90deg)}.cube-v.run div{transform:rotateX(-90deg);transition:var(--delay)}.cube-h{width:var(--card-w, 50px);height:var(--card-h, 80px);position:relative;perspective:300px}.cube-h div{width:100%;height:100%;transform-style:preserve-3d;transform-origin:center center var(--transx)}.cube-h p{width:100%;height:100%;line-height:var(--card-h, 80px);text-align:center;font-size:var(--card-size, 40px);background-color:var(--bgColor, #333);border:solid 1px var(--borderColor, #999);color:#fff;text-shadow:var(--textShadow);margin-bottom:0;box-shadow:0 1px 2px #333;border-radius:2px}.cube-h p:nth-child(1){position:absolute;transform-origin:100% 0;transform:translate(-100%) rotateY(-90deg)}.cube-h.run div{transform:rotateY(90deg);transition:var(--delay)}.drift{height:var(--card-h, 80px);width:var(--card-w, 50px);font-size:var(--card-size, 40px);background-color:var(--bgColor, #333);line-height:var(--card-h, 80px);text-align:center;border:solid 1px var(--borderColor, #999);color:#fff;text-shadow:var(--textShadow);box-shadow:0 1px 2px #333;border-radius:2px;position:relative}.drift:before{content:attr(data-digit);position:absolute;top:0;left:0;line-height:var(--card-h, 80px);width:100%;text-align:center;overflow:hidden;height:100%;background-color:var(--bgColor, #333);transform-origin:center}.drift.run:before{transform:translate(var(--driftX),var(--driftY)) rotate(var(--driftRZ)) rotateX(var(--driftRX));opacity:0;transition:var(--delay);border:solid 2px var(--borderColor, #999)}.cut{height:var(--card-h, 80px);width:var(--card-w, 50px);font-size:var(--card-size, 40px);background-color:var(--bgColor, #333);line-height:var(--card-h, 80px);text-align:center;border:solid 1px var(--borderColor, #999);color:#fff;text-shadow:var(--textShadow);box-shadow:0 1px 2px #333;border-radius:2px;position:relative;overflow:hidden}.cut>p{color:#fff!important;opacity:0}.cut>div{position:absolute;inset:0;line-height:var(--card-h, 80px);text-align:center;overflow:hidden}.cut>div:nth-child(1){clip-path:var(--lPolygon)}.cut>div:nth-child(2){clip-path:var(--rPolygon)}.cut>div>div{position:absolute;width:2px;background-color:transparent;z-index:10}.cut.run>div:nth-child(1){transition:var(--delay);transform:var(--cutLTranslate)}.cut.run>div:nth-child(2){transition:var(--delay);transform:var(--cutRTranslate)}.cut.run>p{transition:.6s;transition-delay:.15s;opacity:1}.cut.run .l-line,.cut.run .r-line{background-color:#fff}
2
- /*$vite$:1*/`,document.head.appendChild(ot);function ut(u){return u&&u.__esModule&&Object.prototype.hasOwnProperty.call(u,"default")?u.default:u}var Q={exports:{}},ht=Q.exports,it;function ft(){return it||(it=1,(function(u,l){(function(d,c){u.exports=c()})(ht,(function(){var d=1e3,c=6e4,y=36e5,v="millisecond",$="second",M="minute",k="hour",A="day",b="week",h="month",m="quarter",p="year",g="date",D="Invalid Date",B=/^(\d{4})[-/]?(\d{1,2})?[-/]?(\d{0,2})[Tt\s]*(\d{1,2})?:?(\d{1,2})?:?(\d{1,2})?[.:]?(\d+)?$/,P=/\[([^\]]+)]|Y{1,4}|M{1,4}|D{1,2}|d{1,4}|H{1,2}|h{1,2}|a|A|m{1,2}|s{1,2}|Z{1,2}|SSS/g,et={name:"en",weekdays:"Sunday_Monday_Tuesday_Wednesday_Thursday_Friday_Saturday".split("_"),months:"January_February_March_April_May_June_July_August_September_October_November_December".split("_"),ordinal:function(i){var e=["th","st","nd","rd"],t=i%100;return"["+i+(e[(t-20)%10]||e[t]||e[0])+"]"}},T=function(i,e,t){var n=String(i);return!n||n.length>=e?i:""+Array(e+1-n.length).join(t)+i},q={s:T,z:function(i){var e=-i.utcOffset(),t=Math.abs(e),n=Math.floor(t/60),r=t%60;return(e<=0?"+":"-")+T(n,2,"0")+":"+T(r,2,"0")},m:function i(e,t){if(e.date()<t.date())return-i(t,e);var n=12*(t.year()-e.year())+(t.month()-e.month()),r=e.clone().add(n,h),a=t-r<0,s=e.clone().add(n+(a?-1:1),h);return+(-(n+(t-r)/(a?r-s:s-r))||0)},a:function(i){return i<0?Math.ceil(i)||0:Math.floor(i)},p:function(i){return{M:h,y:p,w:b,d:A,D:g,h:k,m:M,s:$,ms:v,Q:m}[i]||String(i||"").toLowerCase().replace(/s$/,"")},u:function(i){return i===void 0}},N="en",W={};W[N]=et;var _="$isDayjsObject",nt=function(i){return i instanceof R||!(!i||!i[_])},F=function i(e,t,n){var r;if(!e)return N;if(typeof e=="string"){var a=e.toLowerCase();W[a]&&(r=a),t&&(W[a]=t,r=a);var s=e.split("-");if(!r&&s.length>1)return i(s[0])}else{var x=e.name;W[x]=e,r=x}return!n&&r&&(N=r),r||!n&&N},S=function(i,e){if(nt(i))return i.clone();var t=typeof e=="object"?e:{};return t.date=i,t.args=arguments,new R(t)},f=q;f.l=F,f.i=nt,f.w=function(i,e){return S(i,{locale:e.$L,utc:e.$u,x:e.$x,$offset:e.$offset})};var R=(function(){function i(t){this.$L=F(t.locale,null,!0),this.parse(t),this.$x=this.$x||t.x||{},this[_]=!0}var e=i.prototype;return e.parse=function(t){this.$d=(function(n){var r=n.date,a=n.utc;if(r===null)return new Date(NaN);if(f.u(r))return new Date;if(r instanceof Date)return new Date(r);if(typeof r=="string"&&!/Z$/i.test(r)){var s=r.match(B);if(s){var x=s[2]-1||0,w=(s[7]||"0").substring(0,3);return a?new Date(Date.UTC(s[1],x,s[3]||1,s[4]||0,s[5]||0,s[6]||0,w)):new Date(s[1],x,s[3]||1,s[4]||0,s[5]||0,s[6]||0,w)}}return new Date(r)})(t),this.init()},e.init=function(){var t=this.$d;this.$y=t.getFullYear(),this.$M=t.getMonth(),this.$D=t.getDate(),this.$W=t.getDay(),this.$H=t.getHours(),this.$m=t.getMinutes(),this.$s=t.getSeconds(),this.$ms=t.getMilliseconds()},e.$utils=function(){return f},e.isValid=function(){return this.$d.toString()!==D},e.isSame=function(t,n){var r=S(t);return this.startOf(n)<=r&&r<=this.endOf(n)},e.isAfter=function(t,n){return S(t)<this.startOf(n)},e.isBefore=function(t,n){return this.endOf(n)<S(t)},e.$g=function(t,n,r){return f.u(t)?this[n]:this.set(r,t)},e.unix=function(){return Math.floor(this.valueOf()/1e3)},e.valueOf=function(){return this.$d.getTime()},e.startOf=function(t,n){var r=this,a=!!f.u(n)||n,s=f.p(t),x=function(K,O){var V=f.w(r.$u?Date.UTC(r.$y,O,K):new Date(r.$y,O,K),r);return a?V:V.endOf(A)},w=function(K,O){return f.w(r.toDate()[K].apply(r.toDate("s"),(a?[0,0,0,0]:[23,59,59,999]).slice(O)),r)},Y=this.$W,C=this.$M,H=this.$D,I="set"+(this.$u?"UTC":"");switch(s){case p:return a?x(1,0):x(31,11);case h:return a?x(1,C):x(0,C+1);case b:var L=this.$locale().weekStart||0,J=(Y<L?Y+7:Y)-L;return x(a?H-J:H+(6-J),C);case A:case g:return w(I+"Hours",0);case k:return w(I+"Minutes",1);case M:return w(I+"Seconds",2);case $:return w(I+"Milliseconds",3);default:return this.clone()}},e.endOf=function(t){return this.startOf(t,!1)},e.$set=function(t,n){var r,a=f.p(t),s="set"+(this.$u?"UTC":""),x=(r={},r[A]=s+"Date",r[g]=s+"Date",r[h]=s+"Month",r[p]=s+"FullYear",r[k]=s+"Hours",r[M]=s+"Minutes",r[$]=s+"Seconds",r[v]=s+"Milliseconds",r)[a],w=a===A?this.$D+(n-this.$W):n;if(a===h||a===p){var Y=this.clone().set(g,1);Y.$d[x](w),Y.init(),this.$d=Y.set(g,Math.min(this.$D,Y.daysInMonth())).$d}else x&&this.$d[x](w);return this.init(),this},e.set=function(t,n){return this.clone().$set(t,n)},e.get=function(t){return this[f.p(t)]()},e.add=function(t,n){var r,a=this;t=Number(t);var s=f.p(n),x=function(C){var H=S(a);return f.w(H.date(H.date()+Math.round(C*t)),a)};if(s===h)return this.set(h,this.$M+t);if(s===p)return this.set(p,this.$y+t);if(s===A)return x(1);if(s===b)return x(7);var w=(r={},r[M]=c,r[k]=y,r[$]=d,r)[s]||1,Y=this.$d.getTime()+t*w;return f.w(Y,this)},e.subtract=function(t,n){return this.add(-1*t,n)},e.format=function(t){var n=this,r=this.$locale();if(!this.isValid())return r.invalidDate||D;var a=t||"YYYY-MM-DDTHH:mm:ssZ",s=f.z(this),x=this.$H,w=this.$m,Y=this.$M,C=r.weekdays,H=r.months,I=r.meridiem,L=function(O,V,Z,tt){return O&&(O[V]||O(n,a))||Z[V].slice(0,tt)},J=function(O){return f.s(x%12||12,O,"0")},K=I||function(O,V,Z){var tt=O<12?"AM":"PM";return Z?tt.toLowerCase():tt};return a.replace(P,(function(O,V){return V||(function(Z){switch(Z){case"YY":return String(n.$y).slice(-2);case"YYYY":return f.s(n.$y,4,"0");case"M":return Y+1;case"MM":return f.s(Y+1,2,"0");case"MMM":return L(r.monthsShort,Y,H,3);case"MMMM":return L(H,Y);case"D":return n.$D;case"DD":return f.s(n.$D,2,"0");case"d":return String(n.$W);case"dd":return L(r.weekdaysMin,n.$W,C,2);case"ddd":return L(r.weekdaysShort,n.$W,C,3);case"dddd":return C[n.$W];case"H":return String(x);case"HH":return f.s(x,2,"0");case"h":return J(1);case"hh":return J(2);case"a":return K(x,w,!0);case"A":return K(x,w,!1);case"m":return String(w);case"mm":return f.s(w,2,"0");case"s":return String(n.$s);case"ss":return f.s(n.$s,2,"0");case"SSS":return f.s(n.$ms,3,"0");case"Z":return s}return null})(O)||s.replace(":","")}))},e.utcOffset=function(){return 15*-Math.round(this.$d.getTimezoneOffset()/15)},e.diff=function(t,n,r){var a,s=this,x=f.p(n),w=S(t),Y=(w.utcOffset()-this.utcOffset())*c,C=this-w,H=function(){return f.m(s,w)};switch(x){case p:a=H()/12;break;case h:a=H();break;case m:a=H()/3;break;case b:a=(C-Y)/6048e5;break;case A:a=(C-Y)/864e5;break;case k:a=C/y;break;case M:a=C/c;break;case $:a=C/d;break;default:a=C}return r?a:f.a(a)},e.daysInMonth=function(){return this.endOf(h).$D},e.$locale=function(){return W[this.$L]},e.locale=function(t,n){if(!t)return this.$L;var r=this.clone(),a=F(t,n,!0);return a&&(r.$L=a),r},e.clone=function(){return f.w(this.$d,this)},e.toDate=function(){return new Date(this.valueOf())},e.toJSON=function(){return this.isValid()?this.toISOString():null},e.toISOString=function(){return this.$d.toISOString()},e.toString=function(){return this.$d.toUTCString()},i})(),dt=R.prototype;return S.prototype=dt,[["$ms",v],["$s",$],["$m",M],["$H",k],["$W",A],["$M",h],["$y",p],["$D",g]].forEach((function(i){dt[i[1]]=function(e){return this.$g(e,i[0],i[1])}})),S.extend=function(i,e){return i.$i||(i(e,R,S),i.$i=!0),S},S.locale=F,S.isDayjs=nt,S.unix=function(i){return S(1e3*i)},S.en=W[N],S.Ls=W,S.p={},S}))})(Q)),Q.exports}var pt=ft();const E=ut(pt),U=60,vt=["YYYY-MM-DD","YYYY/MM/DD","YYYY-MM-DD HH:mm","YYYY/MM/DD HH:mm","YYYY-MM-DD HH:mm:ss","YYYY/MM/DD HH:mm:ss"],at=u=>{if(!rt(u))return"00:00:00";const l=E(u).diff(E());if(l<=0)return"00:00:00";const d=Math.floor(l/1e3),c=Math.floor(d/86400),y=Math.floor(d%86400/3600),v=Math.floor(d%3600/60),$=d%60;return`${c?`${c}:`:""}${`${y}`.padStart(2,"0")}:${`${v}`.padStart(2,"0")}:${`${$}`.padStart(2,"0")}`},st=u=>{const l=d=>`${d}`.padStart(2,"0");return`${l(Math.floor(u/U/U))}:${l(Math.floor(u/U)%U)}:${l(u%U)}`},rt=u=>vt.some(l=>E(u,l,!0).isValid()),G=(u,l,d,c,y)=>{const v=c-l,$=y-d,M=Math.sqrt(v*v+$*$).toFixed(2),k=Math.atan2($,v)*180/Math.PI,A=(l+c)/2,b=(d+y)/2;u.style.left=`${A}px`,u.style.top=`${b}px`,u.style.height=`${M}px`,u.style.transform=`translate(-50%, -50%) rotate(${k+90}deg)`},mt=u=>{const l=u.clientWidth,d=u.clientHeight,c=Math.floor(Math.random()*2);let y="",v="",$=0,M=0;const k=u.querySelector(".l-line"),A=u.querySelector(".r-line");if(c===0){const b=5+Math.random()*90,h=100-b;$=Math.max(b,h),y=`
1
+ (function(z,o){typeof exports=="object"&&typeof module<"u"?o(exports,require("react/jsx-runtime"),require("react")):typeof define=="function"&&define.amd?define(["exports","react/jsx-runtime","react"],o):(z=typeof globalThis<"u"?globalThis:z||self,o(z["time-runner"]={},z.jsxRuntime,z.React))})(this,(function(z,o,j){"use strict";var ot=document.createElement("style");ot.textContent=`@font-face{font-family:DIN-num-font;src:url(data:font/woff2;base64,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)}.font-num{font-family:DIN-num-font}.time-runner{width:max-content;display:flex;justify-content:space-between;align-items:center;margin:0 auto;-webkit-user-select:none;user-select:none;position:relative;font-variant-numeric:tabular-nums}.time-runner span{font-size:var(--card-size, 40px);margin:0 3px;padding-bottom:3px;display:inline-block}.time-runner>p{margin:0 3px}.time-runner>div{font-size:var(--card-size, 40px)}.time-runner>div>p{color:var(--numColor, #333);text-shadow:var(--textShadow)}.clock-card{position:relative;height:var(--card-h, 80px);width:var(--card-w, 50px);box-shadow:0 1px 5px #333;border-radius:6px}.clock-card:before{content:"";position:absolute;top:50%;left:0;background-color:#999;width:100%;height:1.5px;z-index:3;overflow:hidden}.clock-card .clock-f,.clock-card .clock-b{width:100%;height:100%;position:absolute;top:0;left:0}.clock-card .clock-f p,.clock-card .clock-b p{position:absolute;left:0;height:50%;width:100%;margin-bottom:0;text-align:center;font-size:var(--card-size, 40px);background-color:var(--bgColor, #333);color:var(--numColor, #fff);text-shadow:var(--textShadow);overflow:hidden;border-left:solid 1px var(--borderColor, #999);border-right:solid 1px var(--borderColor, #999)}.clock-card .clock-f p:nth-child(1),.clock-card .clock-b p:nth-child(1){top:0;border-top:solid 1px var(--borderColor, #999)}.clock-card .clock-f p:nth-child(2),.clock-card .clock-b p:nth-child(2){bottom:0;border-bottom:solid 1px var(--borderColor, #999)}.clock-card .clock-f p:nth-child(1){line-height:var(--card-h, 80px);transform-origin:bottom;backface-visibility:hidden;border-radius:6px 6px 0 0}.clock-card .clock-f p:nth-child(2){line-height:3px;border-radius:0 0 6px 6px}.clock-card .clock-f.run p:nth-child(1){transition:var(--delay) ease-in-out;transform:perspective(50px) rotateX(-180deg)}.clock-card .clock-b p:nth-child(1){line-height:var(--card-h, 80px);border-radius:6px 6px 0 0}.clock-card .clock-b p:nth-child(2){line-height:3px;transform-origin:top;transform:perspective(50px) rotateX(179.99deg);backface-visibility:hidden;border-radius:0 0 6px 6px}.clock-card .clock-b.run p:nth-child(2){transition:var(--delay) ease-in-out;transform:rotateX(0);z-index:2}.cube-v{width:var(--card-w, 50px);height:var(--card-h, 80px);position:relative;perspective:300px}.cube-v div{width:100%;height:100%;transform-style:preserve-3d;transform-origin:center center var(--transy)}.cube-v p{width:100%;height:100%;line-height:var(--card-h, 80px);text-align:center;font-size:var(--card-size, 40px);background-color:var(--bgColor, #333);border:solid 1px var(--borderColor, #999);color:var(--numColor, #fff);text-shadow:var(--textShadow);margin-bottom:0;box-shadow:0 1px 2px #333;border-radius:2px}.cube-v p:nth-child(1){position:absolute;transform-origin:0 100%;transform:translateY(-100%) rotateX(90deg)}.cube-v.run div{transform:rotateX(-90deg);transition:var(--delay)}.cube-h{width:var(--card-w, 50px);height:var(--card-h, 80px);position:relative;perspective:300px}.cube-h div{width:100%;height:100%;transform-style:preserve-3d;transform-origin:center center var(--transx)}.cube-h p{width:100%;height:100%;line-height:var(--card-h, 80px);text-align:center;font-size:var(--card-size, 40px);background-color:var(--bgColor, #333);border:solid 1px var(--borderColor, #999);color:var(--numColor, #fff);text-shadow:var(--textShadow);margin-bottom:0;box-shadow:0 1px 2px #333;border-radius:2px}.cube-h p:nth-child(1){position:absolute;transform-origin:100% 0;transform:translate(-100%) rotateY(-90deg)}.cube-h.run div{transform:rotateY(90deg);transition:var(--delay)}.drift{height:var(--card-h, 80px);width:var(--card-w, 50px);font-size:var(--card-size, 40px);background-color:var(--bgColor, #333);line-height:var(--card-h, 80px);text-align:center;border:solid 1px var(--borderColor, #999);color:var(--numColor, #fff);text-shadow:var(--textShadow);box-shadow:0 1px 2px #333;border-radius:2px;position:relative}.drift:before{content:attr(data-digit);position:absolute;top:0;left:0;line-height:var(--card-h, 80px);width:100%;text-align:center;overflow:hidden;height:100%;background-color:var(--bgColor, #333);transform-origin:center}.drift.run:before{transform:translate(var(--driftX),var(--driftY)) rotate(var(--driftRZ)) rotateX(var(--driftRX));opacity:0;transition:var(--delay);border:solid 2px var(--borderColor, #999)}.cut{height:var(--card-h, 80px);width:var(--card-w, 50px);font-size:var(--card-size, 40px);background-color:var(--bgColor, #333);line-height:var(--card-h, 80px);text-align:center;border:solid 1px var(--borderColor, #999);color:var(--numColor, #fff);text-shadow:var(--textShadow);box-shadow:0 1px 2px #333;border-radius:2px;position:relative;overflow:hidden}.cut>p{color:var(--numColor, #fff)!important;opacity:0}.cut>div{position:absolute;inset:0;line-height:var(--card-h, 80px);text-align:center;overflow:hidden}.cut>div:nth-child(1){clip-path:var(--lPolygon)}.cut>div:nth-child(2){clip-path:var(--rPolygon)}.cut>div>div{position:absolute;width:2px;background-color:transparent;z-index:10}.cut.run>div:nth-child(1){transition:var(--delay);transform:var(--cutLTranslate)}.cut.run>div:nth-child(2){transition:var(--delay);transform:var(--cutRTranslate)}.cut.run>p{transition:.6s;transition-delay:.15s;opacity:1}.cut.run .l-line,.cut.run .r-line{background-color:var(--numColor, #fff)}@property --deg{syntax: "<angle>"; inherits: false; initial-value: 0deg;}.erase{height:var(--card-h, 80px);width:var(--card-w, 50px);font-size:var(--card-size, 40px);background-color:var(--bgColor, #333);line-height:var(--card-h, 80px);text-align:center;border:solid 1px var(--borderColor, #999);color:var(--numColor, #fff);text-shadow:var(--textShadow);box-shadow:0 1px 2px #333;border-radius:2px;position:relative;overflow:hidden}.erase>p{color:var(--numColor, #fff)!important;opacity:0;transform:scale(0)}.erase:before{content:attr(data-digit);position:absolute;inset:0;line-height:var(--card-h, 80px);text-align:center;z-index:1}.erase>div{position:absolute;inset:0;opacity:1;z-index:2;background:conic-gradient(from var(--start-deg, 0),var(--transColor) 0deg,var(--transColor) var(--deg),transparent var(--deg),transparent 360deg)}.erase.run:before{transition:.2s;transition-delay:.5s;opacity:0}.erase.run>div{opacity:0;transition-property:--deg,opacity;transition-duration:.6s,.1s;transition-delay:0s,.6s}.erase.run>p{transition:.4s;transition-delay:.5s;opacity:1;transform:scale(1)}
2
+ /*$vite$:1*/`,document.head.appendChild(ot);function ut(f){return f&&f.__esModule&&Object.prototype.hasOwnProperty.call(f,"default")?f.default:f}var P={exports:{}},ht=P.exports,at;function ft(){return at||(at=1,(function(f,d){(function(l,c){f.exports=c()})(ht,(function(){var l=1e3,c=6e4,b=36e5,h="millisecond",y="second",w="minute",k="hour",M="day",p="week",x="month",Y="quarter",u="year",g="date",$="Invalid Date",N=/^(\d{4})[-/]?(\d{1,2})?[-/]?(\d{0,2})[Tt\s]*(\d{1,2})?:?(\d{1,2})?:?(\d{1,2})?[.:]?(\d+)?$/,_=/\[([^\]]+)]|Y{1,4}|M{1,4}|D{1,2}|d{1,4}|H{1,2}|h{1,2}|a|A|m{1,2}|s{1,2}|Z{1,2}|SSS/g,F={name:"en",weekdays:"Sunday_Monday_Tuesday_Wednesday_Thursday_Friday_Saturday".split("_"),months:"January_February_March_April_May_June_July_August_September_October_November_December".split("_"),ordinal:function(a){var e=["th","st","nd","rd"],t=a%100;return"["+a+(e[(t-20)%10]||e[t]||e[0])+"]"}},Z=function(a,e,t){var n=String(a);return!n||n.length>=e?a:""+Array(e+1-n.length).join(t)+a},O={s:Z,z:function(a){var e=-a.utcOffset(),t=Math.abs(e),n=Math.floor(t/60),r=t%60;return(e<=0?"+":"-")+Z(n,2,"0")+":"+Z(r,2,"0")},m:function a(e,t){if(e.date()<t.date())return-a(t,e);var n=12*(t.year()-e.year())+(t.month()-e.month()),r=e.clone().add(n,x),i=t-r<0,s=e.clone().add(n+(i?-1:1),x);return+(-(n+(t-r)/(i?r-s:s-r))||0)},a:function(a){return a<0?Math.ceil(a)||0:Math.floor(a)},p:function(a){return{M:x,y:u,w:p,d:M,D:g,h:k,m:w,s:y,ms:h,Q:Y}[a]||String(a||"").toLowerCase().replace(/s$/,"")},u:function(a){return a===void 0}},X="en",W={};W[X]=F;var R="$isDayjsObject",Q=function(a){return a instanceof rt||!(!a||!a[R])},tt=function a(e,t,n){var r;if(!e)return X;if(typeof e=="string"){var i=e.toLowerCase();W[i]&&(r=i),t&&(W[i]=t,r=i);var s=e.split("-");if(!r&&s.length>1)return a(s[0])}else{var m=e.name;W[m]=e,r=m}return!n&&r&&(X=r),r||!n&&X},C=function(a,e){if(Q(a))return a.clone();var t=typeof e=="object"?e:{};return t.date=a,t.args=arguments,new rt(t)},v=O;v.l=tt,v.i=Q,v.w=function(a,e){return C(a,{locale:e.$L,utc:e.$u,x:e.$x,$offset:e.$offset})};var rt=(function(){function a(t){this.$L=tt(t.locale,null,!0),this.parse(t),this.$x=this.$x||t.x||{},this[R]=!0}var e=a.prototype;return e.parse=function(t){this.$d=(function(n){var r=n.date,i=n.utc;if(r===null)return new Date(NaN);if(v.u(r))return new Date;if(r instanceof Date)return new Date(r);if(typeof r=="string"&&!/Z$/i.test(r)){var s=r.match(N);if(s){var m=s[2]-1||0,A=(s[7]||"0").substring(0,3);return i?new Date(Date.UTC(s[1],m,s[3]||1,s[4]||0,s[5]||0,s[6]||0,A)):new Date(s[1],m,s[3]||1,s[4]||0,s[5]||0,s[6]||0,A)}}return new Date(r)})(t),this.init()},e.init=function(){var t=this.$d;this.$y=t.getFullYear(),this.$M=t.getMonth(),this.$D=t.getDate(),this.$W=t.getDay(),this.$H=t.getHours(),this.$m=t.getMinutes(),this.$s=t.getSeconds(),this.$ms=t.getMilliseconds()},e.$utils=function(){return v},e.isValid=function(){return this.$d.toString()!==$},e.isSame=function(t,n){var r=C(t);return this.startOf(n)<=r&&r<=this.endOf(n)},e.isAfter=function(t,n){return C(t)<this.startOf(n)},e.isBefore=function(t,n){return this.endOf(n)<C(t)},e.$g=function(t,n,r){return v.u(t)?this[n]:this.set(r,t)},e.unix=function(){return Math.floor(this.valueOf()/1e3)},e.valueOf=function(){return this.$d.getTime()},e.startOf=function(t,n){var r=this,i=!!v.u(n)||n,s=v.p(t),m=function(E,T){var V=v.w(r.$u?Date.UTC(r.$y,T,E):new Date(r.$y,T,E),r);return i?V:V.endOf(M)},A=function(E,T){return v.w(r.toDate()[E].apply(r.toDate("s"),(i?[0,0,0,0]:[23,59,59,999]).slice(T)),r)},D=this.$W,S=this.$M,H=this.$D,I="set"+(this.$u?"UTC":"");switch(s){case u:return i?m(1,0):m(31,11);case x:return i?m(1,S):m(0,S+1);case p:var K=this.$locale().weekStart||0,G=(D<K?D+7:D)-K;return m(i?H-G:H+(6-G),S);case M:case g:return A(I+"Hours",0);case k:return A(I+"Minutes",1);case w:return A(I+"Seconds",2);case y:return A(I+"Milliseconds",3);default:return this.clone()}},e.endOf=function(t){return this.startOf(t,!1)},e.$set=function(t,n){var r,i=v.p(t),s="set"+(this.$u?"UTC":""),m=(r={},r[M]=s+"Date",r[g]=s+"Date",r[x]=s+"Month",r[u]=s+"FullYear",r[k]=s+"Hours",r[w]=s+"Minutes",r[y]=s+"Seconds",r[h]=s+"Milliseconds",r)[i],A=i===M?this.$D+(n-this.$W):n;if(i===x||i===u){var D=this.clone().set(g,1);D.$d[m](A),D.init(),this.$d=D.set(g,Math.min(this.$D,D.daysInMonth())).$d}else m&&this.$d[m](A);return this.init(),this},e.set=function(t,n){return this.clone().$set(t,n)},e.get=function(t){return this[v.p(t)]()},e.add=function(t,n){var r,i=this;t=Number(t);var s=v.p(n),m=function(S){var H=C(i);return v.w(H.date(H.date()+Math.round(S*t)),i)};if(s===x)return this.set(x,this.$M+t);if(s===u)return this.set(u,this.$y+t);if(s===M)return m(1);if(s===p)return m(7);var A=(r={},r[w]=c,r[k]=b,r[y]=l,r)[s]||1,D=this.$d.getTime()+t*A;return v.w(D,this)},e.subtract=function(t,n){return this.add(-1*t,n)},e.format=function(t){var n=this,r=this.$locale();if(!this.isValid())return r.invalidDate||$;var i=t||"YYYY-MM-DDTHH:mm:ssZ",s=v.z(this),m=this.$H,A=this.$m,D=this.$M,S=r.weekdays,H=r.months,I=r.meridiem,K=function(T,V,B,et){return T&&(T[V]||T(n,i))||B[V].slice(0,et)},G=function(T){return v.s(m%12||12,T,"0")},E=I||function(T,V,B){var et=T<12?"AM":"PM";return B?et.toLowerCase():et};return i.replace(_,(function(T,V){return V||(function(B){switch(B){case"YY":return String(n.$y).slice(-2);case"YYYY":return v.s(n.$y,4,"0");case"M":return D+1;case"MM":return v.s(D+1,2,"0");case"MMM":return K(r.monthsShort,D,H,3);case"MMMM":return K(H,D);case"D":return n.$D;case"DD":return v.s(n.$D,2,"0");case"d":return String(n.$W);case"dd":return K(r.weekdaysMin,n.$W,S,2);case"ddd":return K(r.weekdaysShort,n.$W,S,3);case"dddd":return S[n.$W];case"H":return String(m);case"HH":return v.s(m,2,"0");case"h":return G(1);case"hh":return G(2);case"a":return E(m,A,!0);case"A":return E(m,A,!1);case"m":return String(A);case"mm":return v.s(A,2,"0");case"s":return String(n.$s);case"ss":return v.s(n.$s,2,"0");case"SSS":return v.s(n.$ms,3,"0");case"Z":return s}return null})(T)||s.replace(":","")}))},e.utcOffset=function(){return 15*-Math.round(this.$d.getTimezoneOffset()/15)},e.diff=function(t,n,r){var i,s=this,m=v.p(n),A=C(t),D=(A.utcOffset()-this.utcOffset())*c,S=this-A,H=function(){return v.m(s,A)};switch(m){case u:i=H()/12;break;case x:i=H();break;case Y:i=H()/3;break;case p:i=(S-D)/6048e5;break;case M:i=(S-D)/864e5;break;case k:i=S/b;break;case w:i=S/c;break;case y:i=S/l;break;default:i=S}return r?i:v.a(i)},e.daysInMonth=function(){return this.endOf(x).$D},e.$locale=function(){return W[this.$L]},e.locale=function(t,n){if(!t)return this.$L;var r=this.clone(),i=tt(t,n,!0);return i&&(r.$L=i),r},e.clone=function(){return v.w(this.$d,this)},e.toDate=function(){return new Date(this.valueOf())},e.toJSON=function(){return this.isValid()?this.toISOString():null},e.toISOString=function(){return this.$d.toISOString()},e.toString=function(){return this.$d.toUTCString()},a})(),dt=rt.prototype;return C.prototype=dt,[["$ms",h],["$s",y],["$m",w],["$H",k],["$W",M],["$M",x],["$y",u],["$D",g]].forEach((function(a){dt[a[1]]=function(e){return this.$g(e,a[0],a[1])}})),C.extend=function(a,e){return a.$i||(a(e,rt,C),a.$i=!0),C},C.locale=tt,C.isDayjs=Q,C.unix=function(a){return C(1e3*a)},C.en=W[X],C.Ls=W,C.p={},C}))})(P)),P.exports}var pt=ft();const U=ut(pt),J=60,vt=["YYYY-MM-DD","YYYY/MM/DD","YYYY-MM-DD HH:mm","YYYY/MM/DD HH:mm","YYYY-MM-DD HH:mm:ss","YYYY/MM/DD HH:mm:ss"],it=f=>{if(!nt(f))return"00:00:00";const d=U(f).diff(U());if(d<=0)return"00:00:00";const l=Math.floor(d/1e3),c=Math.floor(l/86400),b=Math.floor(l%86400/3600),h=Math.floor(l%3600/60),y=l%60;return`${c?`${c}:`:""}${`${b}`.padStart(2,"0")}:${`${h}`.padStart(2,"0")}:${`${y}`.padStart(2,"0")}`},st=f=>{const d=l=>`${l}`.padStart(2,"0");return`${d(Math.floor(f/J/J))}:${d(Math.floor(f/J)%J)}:${d(f%J)}`},nt=f=>vt.some(d=>U(f,d,!0).isValid()),q=(f,d,l,c,b)=>{const h=c-d,y=b-l,w=Math.sqrt(h*h+y*y).toFixed(2),k=Math.atan2(y,h)*180/Math.PI,M=(d+c)/2,p=(l+b)/2;f.style.left=`${M}px`,f.style.top=`${p}px`,f.style.height=`${w}px`,f.style.transform=`translate(-50%, -50%) rotate(${k+90}deg)`},gt=f=>{const d=f.clientWidth,l=f.clientHeight,c=Math.floor(Math.random()*2);let b="",h="",y=0,w=0;const k=f.querySelector(".l-line"),M=f.querySelector(".r-line");if(c===0){const p=5+Math.random()*90,x=100-p;y=Math.max(p,x),b=`
3
3
  polygon(
4
4
  0% 0%,
5
- ${b}% 0%,
6
- ${h}% 100%,
5
+ ${p}% 0%,
6
+ ${x}% 100%,
7
7
  0% 100%
8
- )`,v=`
8
+ )`,h=`
9
9
  polygon(
10
- ${b}% 0%,
10
+ ${p}% 0%,
11
11
  100% 0%,
12
12
  100% 100%,
13
- ${h}% 100%
14
- )`;const m=l*b/100,p=0,g=l*h/100,D=d;G(k,m,p,g,D),G(A,m,p,g,D)}else{const b=5+Math.random()*90,h=100-b;M=Math.max(b,h),y=`
13
+ ${x}% 100%
14
+ )`;const Y=d*p/100,u=0,g=d*x/100,$=l;q(k,Y,u,g,$),q(M,Y,u,g,$)}else{const p=5+Math.random()*90,x=100-p;w=Math.max(p,x),b=`
15
15
  polygon(
16
16
  0% 0%,
17
17
  100% 0%,
18
- 100% ${h}%,
19
- 0% ${b}%
20
- )`,v=`
18
+ 100% ${x}%,
19
+ 0% ${p}%
20
+ )`,h=`
21
21
  polygon(
22
- 0% ${b}%,
23
- 100% ${h}%,
22
+ 0% ${p}%,
23
+ 100% ${x}%,
24
24
  100% 100%,
25
25
  0% 100%
26
- )`;const m=0,p=d*b/100,g=l,D=d*h/100;G(k,m,p,g,D),G(A,m,p,g,D)}return{lPath:y,rPath:v,lTranslate:c===0?`translateX(-${$}%)`:`translateY(-${M}%)`,rTranslate:c===0?`translateX(${$}%)`:`translateY(${M}%)`}},ct="HH:mm:ss",lt=900,gt=u=>{const{mode:l,showType:d="default",size:c=40,className:y,bgColor:v,borderColor:$,textShadowColor:M,finishCountFn:k}=u,[A,b]=j.useState(d==="count"?st(0):d==="default"?E().format(ct):at(d)),h=j.useRef({t:null}),m={"--card-size":`${c}px`,"--card-w":`${c*1.25}px`,"--card-h":`${c*2}px`,"--transx":`${-c*1.25/2}px`,"--transy":`${-c}px`,"--delay":`${lt/1e3}s`,"--bgColor":v,"--borderColor":$,"--textShadow":M?`1px 2px 3px ${M}`:"none"};j.useEffect(()=>{let g=Date.now();h.current.t&&(clearInterval(h.current.t),h.current.t=null,g=Date.now()),h.current.t=setInterval(()=>{let D=()=>"";d==="count"?D=()=>st(Math.floor((Date.now()-g)/1e3)):d==="default"?D=()=>E().format(ct):D=()=>at(d),b(D())},1e3)},[d]),j.useEffect(()=>{rt(d)&&A==="00:00:00"&&k&&setTimeout(()=>{k()},1e3)},[A,d,k]);const p=()=>{if(!A)return null;const g=A.split(":"),D=g[g.length-3].split(""),B=g[g.length-2].split(""),P=g[g.length-1].split(""),et=g.length===4?g[0].split(""):[],T=rt(d),q=et.map((W,_)=>o.jsx(z,{mode:l,time:+W,limit:T?-9:9,size:c},_)),N=o.jsx("span",{children:":"});return o.jsxs(o.Fragment,{children:[q.length?o.jsxs(o.Fragment,{children:[q,T?o.jsx("p",{children:"天"}):N]}):null,o.jsx(z,{mode:l,time:+D[0],limit:T?-2:2,size:c}),o.jsx(z,{mode:l,time:+D[1],limit:T?-9:9,size:c}),T?o.jsx("p",{children:"小时"}):N,o.jsx(z,{mode:l,time:+B[0],limit:T?-5:5,size:c}),o.jsx(z,{mode:l,time:+B[1],limit:T?-9:9,size:c}),T?o.jsx("p",{children:"分"}):N,o.jsx(z,{mode:l,time:+P[0],limit:T?-5:5,size:c}),o.jsx(z,{mode:l,time:+P[1],limit:T?-9:9,size:c}),T&&o.jsx("p",{children:"秒"})]})};return o.jsx("div",{className:`time-runner ${y||""}`,style:m,children:p()})},xt=u=>{const{time:l,limit:d,mode:c,size:y}=u,[v,$]=j.useState(!1),M=j.useRef({t:l}),k=j.useRef(null),A=j.useMemo(()=>l!==M.current.t&&c==="drift"?{"--driftX":`${Math.floor(Math.random()*(-y-y+1))+y}px`,"--driftY":`${Math.floor(Math.random()*(-y*2-y*2+1))+y*2}px`,"--driftRZ":`${Math.floor(Math.random()*151)+50}deg`,"--driftRX":`${Math.floor(Math.random()*151)+50}deg`}:null,[l,y,c]),b=j.useMemo(()=>{if(v&&c==="cut"){const{lPath:m,rPath:p,lTranslate:g,rTranslate:D}=mt(k.current);return{"--lPolygon":m,"--rPolygon":p,"--cutLTranslate":g,"--cutRTranslate":D}}return null},[v,c]);j.useEffect(()=>{l!==M.current.t&&$(!0)},[l]),j.useEffect(()=>{v&&setTimeout(()=>{M.current.t=l,$(!1)},lt)},[v,l]);const h=()=>{const{t:m}=M.current;let p=m;switch(d>0?p=m>=d?0:m+1:p=m<=0?Math.abs(d):m-1,c){case"card":return o.jsxs("div",{className:"clock-card font-num",children:[o.jsxs("div",{className:`clock-b ${v?"run":""}`,children:[o.jsx("p",{children:p}),o.jsx("p",{children:p})]}),o.jsxs("div",{className:`clock-f ${v?"run":""}`,children:[o.jsx("p",{children:m}),o.jsx("p",{children:m})]})]});case"cube-v":return o.jsx("div",{className:`cube-v font-num ${v?"run":""}`,children:o.jsxs("div",{children:[o.jsx("p",{children:p}),o.jsx("p",{children:m})]})});case"cube-h":return o.jsx("div",{className:`cube-h font-num ${v?"run":""}`,children:o.jsxs("div",{children:[o.jsx("p",{children:p}),o.jsx("p",{children:m})]})});case"drift":return o.jsx("div",{className:`drift font-num ${v?"run":""}`,"data-digit":m,style:A,children:p});case"cut":return o.jsxs("div",{ref:k,className:`cut font-num ${v?"run":""}`,style:b,children:[o.jsxs("div",{children:[o.jsx("p",{children:m}),o.jsx("div",{className:"l-line"})]}),o.jsxs("div",{children:[o.jsx("p",{children:m}),o.jsx("div",{className:"r-line"})]}),o.jsx("p",{children:p})]});default:return o.jsx("div",{className:"font-num",children:o.jsx("p",{children:m})})}};return o.jsx(o.Fragment,{children:h()})},z=j.memo(xt);X.TimeRunner=gt,Object.defineProperty(X,Symbol.toStringTag,{value:"Module"})}));
26
+ )`;const Y=0,u=l*p/100,g=d,$=l*x/100;q(k,Y,u,g,$),q(M,Y,u,g,$)}return{lPath:b,rPath:h,lTranslate:c===0?`translateX(-${y}%)`:`translateY(-${w}%)`,rTranslate:c===0?`translateX(${y}%)`:`translateY(${w}%)`}},mt=(f,d=.3)=>{const l=document.createElement("div");l.style.color=f,document.body.appendChild(l);const c=getComputedStyle(l).color;document.body.removeChild(l);const[b,h,y]=c.match(/\d+/g).slice(0,3).map(Number),k=.299*b+.587*h+.114*y>128,M=p=>Math.round(k?p*(1-d):p+(255-p)*d);return"#"+[M(b),M(h),M(y)].map(p=>p.toString(16).padStart(2,"0")).join("").toUpperCase()},xt=()=>Math.floor(Math.random()*361),ct="HH:mm:ss",lt=900,bt=f=>{const{mode:d,showType:l="default",size:c=40,className:b,bgColor:h,numColor:y,borderColor:w,textShadowColor:k,finishCountFn:M}=f,[p,x]=j.useState(l==="count"?st(0):l==="default"?U().format(ct):it(l)),Y=j.useRef({t:null}),u={"--card-size":`${c}px`,"--card-w":`${c*1.25}px`,"--card-h":`${c*2}px`,"--transx":`${-c*1.25/2}px`,"--transy":`${-c}px`,"--delay":`${lt/1e3}s`,"--bgColor":h,"--numColor":y,"--borderColor":w,"--textShadow":k?`1px 2px 3px ${k}`:"none","--transColor":mt(h||"#333")};j.useEffect(()=>{let $=Date.now();Y.current.t&&(clearInterval(Y.current.t),Y.current.t=null,$=Date.now()),Y.current.t=setInterval(()=>{let N=()=>"";l==="count"?N=()=>st(Math.floor((Date.now()-$)/1e3)):l==="default"?N=()=>U().format(ct):N=()=>it(l),x(N())},1e3)},[l]),j.useEffect(()=>{nt(l)&&p==="00:00:00"&&M&&setTimeout(()=>{M()},1e3)},[p,l,M]);const g=()=>{if(!p)return null;const $=p.split(":"),N=$[$.length-3].split(""),_=$[$.length-2].split(""),F=$[$.length-1].split(""),Z=$.length===4?$[0].split(""):[],O=nt(l),X=Z.map((R,Q)=>o.jsx(L,{mode:d,time:+R,limit:O?-9:9,size:c},Q)),W=o.jsx("span",{children:":"});return o.jsxs(o.Fragment,{children:[X.length?o.jsxs(o.Fragment,{children:[X,O?o.jsx("p",{children:"天"}):W]}):null,o.jsx(L,{mode:d,time:+N[0],limit:O?-2:2,size:c}),o.jsx(L,{mode:d,time:+N[1],limit:O?-9:9,size:c}),O?o.jsx("p",{children:"小时"}):W,o.jsx(L,{mode:d,time:+_[0],limit:O?-5:5,size:c}),o.jsx(L,{mode:d,time:+_[1],limit:O?-9:9,size:c}),O?o.jsx("p",{children:"分"}):W,o.jsx(L,{mode:d,time:+F[0],limit:O?-5:5,size:c}),o.jsx(L,{mode:d,time:+F[1],limit:O?-9:9,size:c}),O&&o.jsx("p",{children:"秒"})]})};return o.jsx("div",{className:`time-runner ${b||""}`,style:u,children:g()})},yt=f=>{const{time:d,limit:l,mode:c,size:b}=f,[h,y]=j.useState(!1),w=j.useRef({t:d}),k=j.useRef(null),M=j.useMemo(()=>d!==w.current.t&&c==="drift"?{"--driftX":`${Math.floor(Math.random()*(-b-b+1))+b}px`,"--driftY":`${Math.floor(Math.random()*(-b*2-b*2+1))+b*2}px`,"--driftRZ":`${Math.floor(Math.random()*151)+50}deg`,"--driftRX":`${Math.floor(Math.random()*151)+50}deg`}:null,[d,b,c]),p=j.useMemo(()=>{if(h&&c==="cut"){const{lPath:u,rPath:g,lTranslate:$,rTranslate:N}=gt(k.current);return{"--lPolygon":u,"--rPolygon":g,"--cutLTranslate":$,"--cutRTranslate":N}}return null},[h,c]),x=j.useMemo(()=>h&&c==="erase"?{"--start-deg":`${xt()}deg`,"--deg":"360deg"}:null,[h,c]);j.useEffect(()=>{d!==w.current.t&&y(!0)},[d]),j.useEffect(()=>{h&&setTimeout(()=>{w.current.t=d,y(!1)},lt)},[h,d]);const Y=()=>{const{t:u}=w.current;let g=u;switch(l>0?g=u>=l?0:u+1:g=u<=0?Math.abs(l):u-1,c){case"card":return o.jsxs("div",{className:"clock-card font-num",children:[o.jsxs("div",{className:`clock-b ${h?"run":""}`,children:[o.jsx("p",{children:g}),o.jsx("p",{children:g})]}),o.jsxs("div",{className:`clock-f ${h?"run":""}`,children:[o.jsx("p",{children:u}),o.jsx("p",{children:u})]})]});case"cube-v":return o.jsx("div",{className:`cube-v font-num ${h?"run":""}`,children:o.jsxs("div",{children:[o.jsx("p",{children:g}),o.jsx("p",{children:u})]})});case"cube-h":return o.jsx("div",{className:`cube-h font-num ${h?"run":""}`,children:o.jsxs("div",{children:[o.jsx("p",{children:g}),o.jsx("p",{children:u})]})});case"drift":return o.jsx("div",{className:`drift font-num ${h?"run":""}`,"data-digit":u,style:M,children:g});case"cut":return o.jsxs("div",{ref:k,className:`cut font-num ${h?"run":""}`,style:p,children:[o.jsxs("div",{children:[o.jsx("p",{children:u}),o.jsx("div",{className:"l-line"})]}),o.jsxs("div",{children:[o.jsx("p",{children:u}),o.jsx("div",{className:"r-line"})]}),o.jsx("p",{children:g})]});case"erase":return o.jsxs("div",{className:`erase font-num ${h?"run":""}`,"data-digit":u,children:[o.jsx("p",{children:g}),o.jsx("div",{style:x})]});default:return o.jsx("div",{className:"font-num",children:o.jsx("p",{children:u})})}};return o.jsx(o.Fragment,{children:Y()})},L=j.memo(yt);z.TimeRunner=bt,Object.defineProperty(z,Symbol.toStringTag,{value:"Module"})}));
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "time-runner",
3
- "version": "1.1.5",
3
+ "version": "1.1.6",
4
4
  "description": "Displaying timer, current time, and countdown with light animation effects(React component)",
5
5
  "keywords": ["react", "countdown", "timer", "hook", "card", "less", "animation", "vite"],
6
6
  "main": "./dist/time-runner.umd.js",