From ca08fcb36d04092ada2198066a32f62d0c1399ce Mon Sep 17 00:00:00 2001
From: Philipp Stadler <a51820432@unet.univie.ac.at>
Date: Mon, 26 Feb 2024 17:02:53 +0100
Subject: [PATCH] feat: zeige Strichnummerierung
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Die Strichtabelle enthält nun auch den Strichtyp als Zahlencode, z.B. ① für einen waagrechten Strich

Closes #61
---
 src/components/hanzi-data/lut.ts | 45 +++++++++++++++++++++++++++++++-
 src/components/write/strokes.ts  | 38 ++++++++++++++++++---------
 test/templates/lut.test.ts       | 35 ++++++++++++++++++++-----
 3 files changed, 98 insertions(+), 20 deletions(-)

diff --git a/src/components/hanzi-data/lut.ts b/src/components/hanzi-data/lut.ts
index 84f648c..73465f0 100644
--- a/src/components/hanzi-data/lut.ts
+++ b/src/components/hanzi-data/lut.ts
@@ -8,6 +8,45 @@ interface RadicalMeanings {
 }
 
 const radicalMeanings: Lut<RadicalMeanings> = {}
+const strokeTypeNumbers: Lut<string> = {
+  一: '①',
+  '㇑': '②',
+  丨: '②',
+  '㇓': '③',
+  丿: '③',
+  '㇔': '④',
+  丶: '④',
+  '㇏': '④',
+  '㇀': '①',
+  乛: '⑤',
+  '𠃍': '⑤',
+  '㇆': '⑤',
+  '𠃌': '⑤',
+  '㇇': '⑤',
+  亅: '②',
+  '𠄌': '⑤',
+  乚: '⑤',
+  '㇉': '⑤',
+  '𡿨': '⑤',
+  '㇂': '⑤',
+  '㇊': '⑤',
+  '㇍': '⑤',
+  '㇅': '⑤',
+  '⺄': '⑤',
+  '㇈': '⑤',
+  '㇌': '⑤',
+  '㇋': '⑤',
+  '𠄎': '⑤',
+  '㇎': '⑤',
+  '𠃊': '⑤',
+  '㇄': '⑤',
+  ㄣ: '⑤',
+  '𠃑': '⑤',
+  ㄥ: '⑤',
+  '𠃋': '⑤',
+  '㇁': '⑤',
+  '㇃': '⑤'
+}
 const strokeTypeNames: Lut<string> = {
   一: '横',
   '㇑': '竖',
@@ -48,7 +87,9 @@ const strokeTypeNames: Lut<string> = {
   '㇃': '卧钩'
 }
 
-export type PropId = keyof RadicalMeanings | 'strokeTypeNames'
+export type PropId = keyof RadicalMeanings |
+'strokeTypeNames' |
+'strokeTypeNumbers'
 
 export function lookup (
   item: HanziData,
@@ -60,6 +101,8 @@ export function lookup (
     }
   } else if (propId === 'strokeTypeNames') {
     return item.strokeTypes.map(t => strokeTypeNames[t])
+  } else if (propId === 'strokeTypeNumbers') {
+    return item.strokeTypes.map(t => strokeTypeNumbers[t])
   }
   return undefined
 }
diff --git a/src/components/write/strokes.ts b/src/components/write/strokes.ts
index 40864f6..b24bc66 100644
--- a/src/components/write/strokes.ts
+++ b/src/components/write/strokes.ts
@@ -59,21 +59,33 @@ export async function createStrokes (
   })
   if (data !== undefined) {
     const strokeNames = lookup(data, 'strokeTypeNames')
+    const strokeNumbers = lookup(data, 'strokeTypeNumbers')
     const { strokes, strokeTypes } = data
-    for (let idx = 0; idx < strokes.length; ++idx) {
-      const svg = strokeRangeSvg(strokes, idx + 1)
-      const strokeLabel = document.createElement('div')
-      if (Array.isArray(strokeNames) && strokes.length === strokeNames.length) {
-        strokeLabel.innerHTML =
-            `${strokeNames[idx]}<br>${strokeTypes[idx]}<br>${idx + 1}`
-      } else {
-        strokeLabel.textContent = `${idx + 1}`
+    if (
+      Array.isArray(strokeNames) &&
+        Array.isArray(strokeNumbers) &&
+        strokeNames.length === strokeNumbers.length) {
+      for (let idx = 0; idx < strokes.length; ++idx) {
+        const svg = strokeRangeSvg(strokes, idx + 1)
+        const strokeLabel = document.createElement('div')
+        if (strokes.length === strokeNames.length) {
+          strokeLabel.innerHTML =
+              `${
+                strokeNames[idx]
+              }<br>${
+                strokeTypes[idx]
+              } ${
+                strokeNumbers[idx]
+              }<br>${idx + 1}.`
+        } else {
+          strokeLabel.textContent = `${idx + 1}`
+        }
+        const strokeInfo = document.createElement('div')
+        strokeInfo.classList.add('stroke')
+        strokeInfo.appendChild(svg)
+        strokeInfo.appendChild(strokeLabel)
+        container.appendChild(strokeInfo)
       }
-      const strokeInfo = document.createElement('div')
-      strokeInfo.classList.add('stroke')
-      strokeInfo.appendChild(svg)
-      strokeInfo.appendChild(strokeLabel)
-      container.appendChild(strokeInfo)
     }
   }
 
diff --git a/test/templates/lut.test.ts b/test/templates/lut.test.ts
index 8fc75c4..60db184 100644
--- a/test/templates/lut.test.ts
+++ b/test/templates/lut.test.ts
@@ -1,18 +1,41 @@
 import { getHanziData } from '../../src/components/hanzi-data'
 import { lookup } from '../../src/components/hanzi-data/lut'
 
-describe('radical names', () => {
+describe('table properties', () => {
   const testCases = [
-    [ '草', 'radicalMeaningDe', 'Gras'],
-    [ '母', 'radicalMeaningDe', 'Mutter' ]
+    { hanzi: '草', prop: 'radicalMeaningDe', expected: 'Gras' },
+    { hanzi: '母', prop: 'radicalMeaningDe', expected: 'Mutter' },
+    {
+      hanzi: '木',
+      prop: 'strokeTypeNumbers',
+      expected: [ '①', '②', '③', '④' ]
+    },
+    {
+      hanzi: '道',
+      prop: 'strokeTypeNumbers',
+      expected: [
+        '④',
+        '③',
+        '①',
+        '③',
+        '②',
+        '⑤',
+        '①',
+        '①',
+        '①',
+        '④',
+        '⑤',
+        '④'
+      ]
+    }
   ]
-  for (const [ hanzi, prop, expectedValue ] of testCases) {
+  for (const { hanzi, prop, expected } of testCases) {
     test(`${prop} of ${hanzi}`, async () => {
       const actual = lookup(
         await getHanziData({ char: hanzi }),
         prop
       )
-      expect(actual).toBe(expectedValue)
+      expect(actual).toEqual(expected)
     })
   }
-})
\ No newline at end of file
+})
-- 
GitLab