feat(effort): 波纹动画纯函数 pickChar/computeRippleLine/mergeLayers + 18 测试

Co-Authored-By: glm-5.2 <zai-org@claude-code-best.win>

src/components/EffortPanel/__tests__/rippleAnimation.test.ts

@@ -0,0 +1,169 @@
+import { describe, expect, test } from 'bun:test'
+import {
+  type Overlay,
+  computeRippleLine,
+  mergeLayers,
+  pickChar,
+} from '../rippleAnimation.js'
+
+describe('pickChar', () => {
+  test('intensity=0 → 空格', () => {
+    expect(pickChar(0)).toBe(' ')
+  })
+
+  test('intensity < 0 钳到 0 → 空格', () => {
+    expect(pickChar(-0.5)).toBe(' ')
+  })
+
+  test('intensity > 1 钳到 1 → 最高强度字符', () => {
+    expect(pickChar(1.5)).toBe(pickChar(1))
+  })
+
+  test('intensity 单调递增 → 字符视觉密度递增（按字符串长度近似）', () => {
+    // 字符密度：' ' < '·' < '∙' < '░' < '▒' < '▓'
+    const samples = [0, 0.15, 0.35, 0.55, 0.75, 0.95]
+    const chars = samples.map(pickChar)
+    expect(chars[0]).toBe(' ')
+    // 至少 4 种不同字符（说明分级生效）
+    const unique = new Set(chars)
+    expect(unique.size).toBeGreaterThanOrEqual(4)
+  })
+
+  test('波峰位置（intensity ≥ 0.95）出现 WAVE_PEAK_CHARS 循环字符之一', () => {
+    const wavePeakChars = ['~', '◌', '○', '◑', '●']
+    // 不同 time 偏移应触达不同波峰字符（基于 time / 80 的相位）
+    const seen = new Set<string>()
+    for (let t = 0; t < 400; t += 40) {
+      seen.add(pickChar(1, t))
+    }
+    // 至少出现 2 种 WAVE_PEAK_CHARS（说明循环生效）
+    const hits = [...seen].filter(c => wavePeakChars.includes(c))
+    expect(hits.length).toBeGreaterThanOrEqual(2)
+  })
+})
+
+describe('computeRippleLine', () => {
+  test('返回字符串长度等于 width', () => {
+    const line = computeRippleLine({
+      y: 2,
+      width: 30,
+      time: 100,
+      sourceX: 25,
+      sourceY: 2,
+    })
+    expect(line.length).toBe(30)
+  })
+
+  test('width=0 → 空字符串', () => {
+    expect(
+      computeRippleLine({ y: 0, width: 0, time: 0, sourceX: 0, sourceY: 0 }),
+    ).toBe('')
+  })
+
+  test('震源点 (sourceX, sourceY) 处字符非空（dist=0，falloff=1）', () => {
+    const line = computeRippleLine({
+      y: 5,
+      width: 11,
+      time: 0,
+      sourceX: 5,
+      sourceY: 5,
+    })
+    // 震源在 (5,5)，y=5 行的第 5 列字符应非空格
+    expect(line[5]).not.toBe(' ')
+  })
+
+  test('远离震源的字符强度衰减（远端更可能是空格）', () => {
+    // 震源在左端，远端 30 列外，time=0 时强度低
+    const line = computeRippleLine({
+      y: 0,
+      width: 40,
+      time: 0,
+      sourceX: 0,
+      sourceY: 0,
+    })
+    // 第 0 列字符密度 >= 第 39 列（不一定严格，但近端更密）
+    const nearDensity = line.charCodeAt(0)
+    const farDensity = line.charCodeAt(39)
+    // 用 charCode 近似：震源附近字符 charCode 应大于等于远端
+    // 注：空格 charCode=32，其他字符 charCode 通常更大
+    expect(nearDensity).toBeGreaterThanOrEqual(farDensity)
+  })
+
+  test('time 推进时字符变化（动画效果）', () => {
+    const t0 = computeRippleLine({
+      y: 2,
+      width: 30,
+      time: 0,
+      sourceX: 25,
+      sourceY: 2,
+    })
+    const t1 = computeRippleLine({
+      y: 2,
+      width: 30,
+      time: 500,
+      sourceX: 25,
+      sourceY: 2,
+    })
+    expect(t0).not.toBe(t1)
+  })
+})
+
+describe('mergeLayers', () => {
+  test('无 overlay 时原样返回 ripple', () => {
+    const ripple = '·∙░▒▓░∙·'
+    expect(mergeLayers(ripple, [])).toBe(ripple)
+  })
+
+  test('overlay 文字字符覆盖对应位置', () => {
+    const ripple = '········'
+    const overlays: Overlay[] = [{ text: 'hi', x: 2 }]
+    expect(mergeLayers(ripple, overlays)).toBe('··hi····')
+  })
+
+  test('多个 overlay 不重叠时各自覆盖', () => {
+    const ripple = '·········'
+    const overlays: Overlay[] = [
+      { text: 'A', x: 0 },
+      { text: 'B', x: 4 },
+      { text: 'C', x: 8 },
+    ]
+    // ripple 长 9：A 在 0；B 在 4；C 在 8；其余保留 '·'
+    expect(mergeLayers(ripple, overlays)).toBe('A···B···C')
+  })
+
+  test('overlay 超出右边界被截断', () => {
+    const ripple = '·····'
+    const overlays: Overlay[] = [{ text: 'abcdef', x: 3 }]
+    // ripple 长 5，overlay 从 x=3 开始 → 'ab' 占 3,4，剩下 'cdef' 截断
+    expect(mergeLayers(ripple, overlays)).toBe('···ab')
+  })
+
+  test('overlay x 为负数 → 从开头截断（不向左溢出）', () => {
+    const ripple = '·····'
+    const overlays: Overlay[] = [{ text: 'abc', x: -1 }]
+    // x=-1 → 跳过 'a'，'bc' 占 0,1
+    expect(mergeLayers(ripple, overlays)).toBe('bc···')
+  })
+
+  test('overlay x=0 + 完整覆盖 → 全部覆盖', () => {
+    const ripple = '·····'
+    const overlays: Overlay[] = [{ text: 'HELLO', x: 0 }]
+    expect(mergeLayers(ripple, overlays)).toBe('HELLO')
+  })
+
+  test('文字字符永远胜出（即使 ripple 那里是高密度字符）', () => {
+    const ripple = '▓▓▓▓▓'
+    const overlays: Overlay[] = [{ text: 'X', x: 2 }]
+    expect(mergeLayers(ripple, overlays)).toBe('▓▓X▓▓')
+  })
+
+  test('多个 overlay 后者覆盖前者（同位置）', () => {
+    const ripple = '·····'
+    const overlays: Overlay[] = [
+      { text: 'AAA', x: 0 },
+      { text: 'B', x: 1 },
+    ]
+    // ripple 长 5：A 在 0；B 在 1（覆盖第一个 A）；2 为 A；3,4 为 '·'（未被 overlay 覆盖）
+    expect(mergeLayers(ripple, overlays)).toBe('ABA··')
+  })
+})