feat: semi

Author: sheepzh

package.json

@@ -56,7 +56,7 @@
         "postcss-rtlcss": "^6.0.0",
         "puppeteer": "^25.9.0",
         "ts-checker-rspack-plugin": "^1.6.1",
-        "tsx": "^4.23.12",
+        "tsx": "^4.23.13",
         "typescript": "7.0.2",
         "unplugin-element-plus": "^0.11.2"
     },

src/content-script/limit/countdown/component.ts

@@ -1,17 +1,21 @@
 import { t } from '@cs/locale'
 import { formatPeriodCommon, MILL_PER_MINUTE, MILL_PER_SECOND } from '@util/time'
 import { mountStyle } from '../style'
-import { CountdownData, Dimension, HALF_SIZE, ICON_SIZE, Position, RemainingItem } from './common'
+import type { CountdownData, Dimension, RemainingItem } from './types'
 
 const CONTAINER_CLS = 'countdown-container'
 const TOOLTIP_CLS = 'tooltip'
+const ICON_SIZE = 40
+const HALF_SIZE = ICON_SIZE / 2
 const STROKE_WIDTH = 3
 const RADIUS = (ICON_SIZE - STROKE_WIDTH) / 2
 const CIRCUMFERENCE = 2 * Math.PI * RADIUS
 
 type Stage = 'enough' | 'warning' | 'short'
 
-type Edge = 'left' | 'right' | 'top' | 'bottom'
+type Edge = 'left' | 'right'
+
+type Position = { x: number, y: number }
 
 const DIMENSION_LABELS: Record<Dimension, string> = {
     daily: t(msg => msg.calendar.range.today),
@@ -25,6 +29,29 @@ const STAGE_COLORS: Record<Stage, string> = {
     short: '#F56C6C',
 }
 
+
+
+abstract class VNode<State, K extends keyof HTMLElementTagNameMap> {
+    el: HTMLElementTagNameMap[K]
+
+    constructor(protected state: State | null = null) {
+        this.el = this.init()
+    }
+
+    protected abstract init(): HTMLElementTagNameMap[K]
+
+    render(state: State) {
+        if (this.sameAsCurrent(state)) return
+        this.doRender(this.state = state)
+    }
+
+    protected sameAsCurrent(newState: State) {
+        return newState === this.state
+    }
+
+    protected abstract doRender(state: State): void
+}
+
 function getStage(remaining: number, total: number): Stage {
     const progress = remaining / total
     if (progress < 0.2 || remaining < 30 * MILL_PER_SECOND) return 'short'
@@ -70,19 +97,24 @@ function createSvgRing() {
     return { svg, circle }
 }
 
-function createTextEl() {
-    const el = document.createElement('span')
-    mountStyle(el, {
-        position: 'absolute',
-        top: '50%',
-        left: '50%',
-        transform: 'translate(-50%, -50%)',
-        fontSize: '12px',
-        fontWeight: 'bold',
-        color: '#303133',
-        userSelect: 'none',
-    })
-    return el
+class CenterText extends VNode<string, 'span'> {
+    protected init(): HTMLSpanElement {
+        const el = document.createElement('span')
+        mountStyle(el, {
+            position: 'absolute',
+            top: '50%',
+            left: '50%',
+            transform: 'translate(-50%, -50%)',
+            fontSize: '11px',
+            color: '#303133',
+            userSelect: 'none',
+        })
+        return el
+    }
+
+    protected doRender(state: string): void {
+        this.el.innerText = state
+    }
 }
 
 function createTooltip() {
@@ -165,8 +197,6 @@ function createIcon(): IconInstance {
         .pulse { animation: pulse 1.5s ease-in-out infinite; }
         .edge-left { transform: translateX(${HALF_SIZE}px); }
         .edge-right { transform: translateX(-${HALF_SIZE}px); }
-        .edge-top { transform: translateY(${HALF_SIZE}px); }
-        .edge-bottom { transform: translateY(-${HALF_SIZE}px); }
         .${TOOLTIP_CLS} {
             position: absolute;
             opacity: 0;
@@ -189,20 +219,6 @@ function createIcon(): IconInstance {
             bottom: auto;
             transform: translateY(-50%);
         }
-        .edge-top .${TOOLTIP_CLS} {
-            top: calc(100% + 8px);
-            bottom: auto;
-            left: 50%;
-            right: auto;
-            transform: translateX(-50%);
-        }
-        .edge-bottom .${TOOLTIP_CLS} {
-            top: auto;
-            bottom: calc(100% + 8px);
-            left: 50%;
-            right: auto;
-            transform: translateX(-50%);
-        }
     `
     shadow.append(style)
 
@@ -212,21 +228,31 @@ function createIcon(): IconInstance {
     const { svg, circle } = createSvgRing()
     container.append(svg)
 
-    const textEl = createTextEl()
-    container.append(textEl)
+    const text = new CenterText()
+    container.append(text.el)
 
     const tooltip = createTooltip()
     container.append(tooltip)
 
+    let lastStage: Stage | null = null
+    let lastEdge: Edge | null = null
+
     const render = (position: Position, { remaining, total, all }: CountdownData) => {
+        text.render(getCenterText(remaining))
         const stage = getStage(remaining, total)
-        textEl.innerText = getCenterText(remaining)
-        circle.setAttribute('stroke', STAGE_COLORS[stage])
-        circle.setAttribute('stroke-dashoffset', String(CIRCUMFERENCE * (1 - remaining / total)))
+        const edge = getEdge(position)
+        if (stage !== lastStage) {
+            lastStage = stage
+            circle.setAttribute('stroke', STAGE_COLORS[stage])
+            container.classList.toggle('pulse', stage === 'short')
+        }
 
-        container.classList.toggle('pulse', stage === 'short')
-        container.classList.remove('edge-left', 'edge-right', 'edge-top', 'edge-bottom')
-        container.classList.add(`edge-${getEdge(position)}`)
+        circle.setAttribute('stroke-dashoffset', String(CIRCUMFERENCE * (1 - remaining / total)))
+        if (lastEdge !== edge) {
+            lastEdge = edge
+            container.classList.remove('edge-left', 'edge-right')
+            container.classList.add(`edge-${edge}`)
+        }
 
         updateTooltip(tooltip, all)
     }
@@ -245,16 +271,9 @@ function clampPosition({ x, y }: Position): Position {
 }
 
 function getEdge(position: Position): Edge {
-    const { w, h } = getViewportSize()
-    let { x, y } = clampPosition(position)
-
-    const distances: Record<Edge, number> = {
-        left: x, right: w - x,
-        top: y, bottom: h - y,
-    }
-    const minDistance = Object.entries(distances)
-        .sort((a, b) => a[1] - b[1])[0]
-    return (minDistance?.[0] ?? 'right') as Edge
+    const { w } = getViewportSize()
+    let { x } = clampPosition(position)
+    return x < w - x ? 'left' : 'right'
 }
 
 function defaultPosition(): Position {
@@ -265,18 +284,11 @@ function defaultPosition(): Position {
 function snapPosition(position: Position): Position {
     const { w, h } = getViewportSize()
     const { x, y } = clampPosition(position)
-    const distances: Record<Edge, number> = {
-        left: x, right: w - x,
-        top: y, bottom: h - y,
-    }
-    const edge: Edge = (Object.entries(distances)
-        .sort((a, b) => a[1] - b[1])[0]?.[0] ?? 'right') as Edge
+    const edge = x < w - x ? 'left' : 'right'
     const clamp = (value: number, max: number) => Math.max(HALF_SIZE, Math.min(max - HALF_SIZE, value))
     const strategies: Record<Edge, () => Position> = {
         left: () => ({ x: 0, y: clamp(y, h) }),
         right: () => ({ x: w, y: clamp(y, h) }),
-        top: () => ({ x: clamp(x, w), y: 0 }),
-        bottom: () => ({ x: clamp(x, y), y: h }),
     }
     return strategies[edge]()
 }

src/content-script/limit/countdown/index.ts

@@ -4,48 +4,51 @@ import LocationWatcher from '@cs/location-watcher'
 import DelayCoordinator from '../manager/delay-coordinator'
 import LimitState from '../manager/state'
 import { VisitProcessor } from '../processor'
-import { TIMER_INTERVAL } from './common'
 import { CountdownComponent } from './component'
-import { CountdownModel } from './model'
+import { CountdownState } from './state'
+
+const TIMER_INTERVAL = 1000
 
 export default class Countdown {
-    #model = new CountdownModel()
+    #enabled: boolean = false
+    #visible: boolean = false
+    #state = new CountdownState()
     #component = new CountdownComponent()
     #interval?: ReturnType<typeof setInterval>
     #onVisibleChange = () => document.visibilityState === 'visible' && this.#sync()
 
     get isEffective() {
-        return this.#model.enabled && !this.#model.limited && !this.location.isWhite
+        return this.#enabled && !this.#visible && !this.location.isWhite
     }
 
     constructor(private readonly location: LocationWatcher, initialOption: tt4b.option.LimitOption) {
-        location.onCurrChange(() => {
-            this.#model.resetTime()
-            this.#sync()
-        })
-        this.#model.enabled = initialOption.limitCountdown
-        this.#model.delayDuration = initialOption.limitDelayDuration
+        this.#applyOption(initialOption)
     }
 
     async init(state: LimitState, visit: VisitProcessor, delayCoord: DelayCoordinator) {
+        this.location.onCurrChange(() => {
+            this.#state.resetTime()
+            this.#sync()
+        })
+
         state.onChange(reason => {
-            this.#model.limited = !!reason
+            this.#visible = !!reason
             this.#sync()
         })
 
         visit.onChange(mills => {
-            this.#model.visitTime = mills
+            this.#state.visitTime = mills
             this.#render()
         })
 
         delayCoord.register(() => {
-            this.#model.onDelay()
+            this.#state.incDelayCount()
             this.#render()
         }, 'VISIT')
 
         document.addEventListener('visibilitychange', this.#onVisibleChange)
 
-        this.isEffective && this.#sync()
+        this.#sync()
     }
 
     destroy() {
@@ -56,13 +59,17 @@ export default class Countdown {
 
     async fetchOption() {
         const option = await getOption()
-        this.#model.delayDuration = option.limitDelayDuration
-        this.#model.enabled = option.limitCountdown
+        this.#applyOption(option)
         this.#sync()
     }
 
+    #applyOption(option: tt4b.option.LimitOption) {
+        this.#state.delayDuration = option.limitDelayDuration
+        this.#enabled = option.limitCountdown
+    }
+
     async #sync() {
-        this.#model.rules = this.isEffective
+        this.#state.rules = this.isEffective
             ? await trySendMsg2Runtime('limit.list', { effective: true, url: this.location.url }) ?? []
             : []
 
@@ -73,7 +80,7 @@ export default class Countdown {
         if (this.#interval) return
         this.#interval = setInterval(() => {
             if (document.hidden || !this.isEffective) return
-            this.#model.onActiveTick()
+            this.#state.addActiveTime(TIMER_INTERVAL)
             this.#render()
         }, TIMER_INTERVAL)
     }
@@ -85,8 +92,8 @@ export default class Countdown {
     }
 
     async #render() {
-        const data = this.#model.data
+        const data = this.#state.data
         this.#component.render(data)
         data ? this.#startTimer() : this.#stopTimer()
     }
-}
+}

…/content-script/limit/countdown/model.ts …/content-script/limit/countdown/state.tssrc/content-script/limit/countdown/model.ts renamed to src/content-script/limit/countdown/state.ts src/content-script/limit/countdown/model.ts renamed to src/content-script/limit/countdown/state.ts

@@ -1,29 +1,32 @@
-import { MILL_PER_MINUTE } from '@util/time'
-import { CountdownData, Dimension, RemainingItem, TIMER_INTERVAL } from './common'
+import { MILL_PER_MINUTE, MILL_PER_SECOND } from '@util/time'
+import type { CountdownData, Dimension, RemainingItem } from './types'
 
 const ALL_DIMENSIONS: Dimension[] = ['daily', 'weekly', 'visit']
 
-export class CountdownModel {
-    enabled: boolean = false
-    limited: boolean = false
+export class CountdownState {
     delayDuration: number = 0
+    #delayCount: number = 0
     #rules: tt4b.limit.Item[] = []
     #visitMills: number = 0
     #activeMills: number = 0
-    #delayCount: number = 0
 
+    /**
+     * Calculate the milliseconds of each dimension
+     */
     #dimStrategy: Record<Dimension, (item: tt4b.limit.Item) => [total: number, used: number] | undefined> = {
-        daily: ({ time: total, waste, delayCount }) => {
-            if (!total) return undefined
+        daily: ({ time, waste, delayCount }) => {
+            if (!time) return undefined
+            const total = time * MILL_PER_SECOND
             const used = waste + this.#activeMills - delayCount * this.delayDuration * MILL_PER_MINUTE
             return [total, used]
         },
-        weekly: ({ weekly: total, weeklyWaste: waste, weeklyDelayCount: delayCount }) => {
-            if (!total) return undefined
+        weekly: ({ weekly, weeklyWaste: waste, weeklyDelayCount: delayCount }) => {
+            if (!weekly) return undefined
+            const total = weekly * MILL_PER_SECOND
             const used = waste + this.#activeMills - delayCount * this.delayDuration * MILL_PER_MINUTE
             return [total, used]
         },
-        visit: ({ visitTime: total }) => total ? [total, this.#visitMills] : undefined,
+        visit: ({ visitTime }) => visitTime ? [visitTime * MILL_PER_SECOND, this.#visitMills] : undefined,
     }
 
     set rules(rules: tt4b.limit.Item[]) {
@@ -36,12 +39,12 @@ export class CountdownModel {
         this.#visitMills = val
     }
 
-    onDelay() {
+    incDelayCount() {
         this.#delayCount++
     }
 
-    onActiveTick() {
-        this.#activeMills += TIMER_INTERVAL
+    addActiveTime(mills: number) {
+        this.#activeMills += mills
     }
 
     resetTime() {

…content-script/limit/countdown/common.ts …/content-script/limit/countdown/types.tssrc/content-script/limit/countdown/common.ts renamed to src/content-script/limit/countdown/types.ts src/content-script/limit/countdown/common.ts renamed to src/content-script/limit/countdown/types.ts

@@ -1,9 +1,3 @@
-export const ICON_SIZE = 40
-export const HALF_SIZE = ICON_SIZE / 2
-export const TIMER_INTERVAL = 1000
-
-export type Position = { x: number, y: number }
-
 export type Dimension = 'daily' | 'weekly' | 'visit'
 
 export type RemainingItem = {