feat: 时钟连线和认识时钟合并

miniprogram/mathPages/clockReading/clockReading.ts

@@ -1,8 +1,10 @@
 import ClockReadingDraw from './draw/clockReadingDraw';
+import ClockConnectDraw from './draw/clockConnectDraw';
 import {
     buildClockReadingData,
     type ClockReadingTimeMode,
 } from './generators/clock-generator';
+import { buildClockConnectData } from './generators/clock-connect-generator';
 import { createPage, type CanvasDataState } from '../../base/pageMixin';
 import { defaultShareConfig } from '../../config/config';
 import {
@@ -10,6 +12,9 @@ import {
     getPublishMetaByMode,
     isValidMode,
     CLOCK_TIME_MODE_OPTIONS,
+    CLOCK_EXERCISE_TYPE_OPTIONS,
+    type ClockTimeMode,
+    type ClockExerciseType,
 } from './clockReading.config';
 import type { DebugPublishMeta } from '../../utils/debugPublish';
 import {
@@ -17,14 +22,17 @@ import {
     removeFavorite,
     batchCheckFavorited,
 } from '../../utils/favorites';
+import type { BaseDrawService } from '../../core/draw/baseDraw';
 
 const pageInfoLookup = getModeInfo;
-const WORKSHEET_ID = 'clock-reading';
+const DEFAULT_WORKSHEET_ID = 'clock-reading';
 
 type PageData = CanvasDataState & {
     worksheetId: string;
-    timeMode: ClockReadingTimeMode;
+    timeMode: ClockTimeMode;
     timeModeOptions: typeof CLOCK_TIME_MODE_OPTIONS;
+    exerciseType: ClockExerciseType;
+    exerciseTypeOptions: typeof CLOCK_EXERCISE_TYPE_OPTIONS;
     isPreviewFavorite: boolean;
     isDevEnv: boolean;
     debugPublishVisible: boolean;
@@ -38,17 +46,19 @@ createPage(
         ctx: null as RenderingContext | null,
         boxHeight: 0,
         boxWidth: 0,
-        drawService: null as ClockReadingDraw | null,
+        drawService: null as BaseDrawService | null,
         _favoritedMap: {} as Record<string, boolean>,
 
         data: {
             pageTitle: '认识钟表',
-            functionId: WORKSHEET_ID,
+            functionId: DEFAULT_WORKSHEET_ID,
             hasContent: false,
             showShareDialog: false,
-            worksheetId: WORKSHEET_ID,
-            timeMode: 'random' as ClockReadingTimeMode,
+            worksheetId: DEFAULT_WORKSHEET_ID,
+            timeMode: 'random' as ClockTimeMode,
             timeModeOptions: CLOCK_TIME_MODE_OPTIONS,
+            exerciseType: 'clock-reading' as ClockExerciseType,
+            exerciseTypeOptions: CLOCK_EXERCISE_TYPE_OPTIONS,
             isPreviewFavorite: false,
             isDevEnv: false,
             debugPublishVisible: false,
@@ -60,27 +70,48 @@ createPage(
             const worksheetId =
                 options.id && isValidMode(options.id)
                     ? options.id
-                    : WORKSHEET_ID;
+                    : DEFAULT_WORKSHEET_ID;
+
             this.syncDebugPublishEnv();
+
+            // 根据传入 id 判断练习类型
+            const exerciseType: ClockExerciseType =
+                worksheetId === 'clock-connect' ? 'clock-connect' : 'clock-reading';
+            this.setData({ exerciseType });
+
             this.applyWorksheet(worksheetId);
             this.loadFavoritedMap();
         },
 
         onSelectTimeMode(e: WechatMiniprogram.TouchEvent) {
             const mode = e.currentTarget.dataset.mode as
-                | ClockReadingTimeMode
+                | ClockTimeMode
                 | undefined;
             if (!mode || mode === this.data.timeMode) return;
             this.setData({ timeMode: mode }, () => this.drawCanvas());
         },
 
+        onSelectExerciseType(e: WechatMiniprogram.TouchEvent) {
+            const type = e.currentTarget.dataset.type as
+                | ClockExerciseType
+                | undefined;
+            if (!type || type === this.data.exerciseType) return;
+
+            const worksheetId = type;
+            this.setData({ exerciseType: type });
+            this.applyWorksheet(worksheetId);
+
+            // 切换练习类型需要重新创建 drawService
+            this.recreateDrawService();
+        },
+
         onCanvasReady(e: WechatMiniprogram.CustomEvent) {
             this.initCanvasFromComponent(e.detail, {
                 createDrawService: (
                     canvas: Canvas,
                     ctx: RenderingContext,
                     options?: Record<string, unknown>,
-                ) => new ClockReadingDraw(canvas, ctx, options),
+                ) => this.createDrawForType(canvas, ctx, options),
                 drawServiceOptions: {
                     title: this.data.pageTitle,
                 },
@@ -90,14 +121,45 @@ createPage(
             });
         },
 
+        createDrawForType(
+            canvas: Canvas,
+            ctx: RenderingContext,
+            options?: Record<string, unknown>,
+        ): BaseDrawService {
+            if (this.data.exerciseType === 'clock-connect') {
+                return new ClockConnectDraw(canvas, ctx, options);
+            }
+            return new ClockReadingDraw(canvas, ctx, options);
+        },
+
+        recreateDrawService() {
+            if (!this.canvas || !this.ctx) return;
+            const options = { title: this.data.pageTitle };
+            this.drawService = this.createDrawForType(
+                this.canvas,
+                this.ctx,
+                options,
+            );
+            this.drawCanvas();
+        },
+
         async drawCanvas() {
             if (!this.ctx || !this.drawService) return;
             try {
-                const data = buildClockReadingData(this.data.timeMode);
-                await (this.drawService as ClockReadingDraw).draw(data);
+                if (this.data.exerciseType === 'clock-connect') {
+                    const data = buildClockConnectData(
+                        this.data.timeMode as ClockTimeMode,
+                    );
+                    await (this.drawService as ClockConnectDraw).draw(data);
+                } else {
+                    const data = buildClockReadingData(
+                        this.data.timeMode as ClockReadingTimeMode,
+                    );
+                    await (this.drawService as ClockReadingDraw).draw(data);
+                }
                 this.setData({ hasContent: true });
             } catch (e) {
-                console.error('clockReading draw failed', e);
+                console.error('clock draw failed', e);
                 this.setData({ hasContent: false });
             }
         },
@@ -125,9 +187,9 @@ createPage(
         },
 
         async loadFavoritedMap() {
-            const ids = [WORKSHEET_ID];
+            const ids = ['clock-reading', 'clock-connect'];
             this._favoritedMap = await batchCheckFavorited(ids);
-            if (this._favoritedMap?.[WORKSHEET_ID]) {
+            if (this._favoritedMap?.[this.data.worksheetId]) {
                 this.setData({ isPreviewFavorite: true });
             }
         },