doodle-mini/miniprogram/mathPages/countMatch/countMatch.ts

import { PAPER_SIZE } from '../../constants/colors';
import { checkAndSaveImage } from '../../utils/saveImage';
import { shouldShowShareGuide } from '../../utils/shareGuide';
import CountMatchDraw from '../service/countMatchDraw';
import NumberColorDraw from '../service/numberColorDraw';
import {
    MATH_FUNCTION_TYPES,
    MathFunctionType,
} from '../../constants/mathFunctions';

Page({
    canvas: null as Canvas | null,
    ctx: null as RenderingContext | null,
    boxHeight: 0,
    boxWidth: 0,
    drawService: null as CountMatchDraw | NumberColorDraw | null,
    matchData: null as {
        leftNumbers: number[];
        rightNumbers: number[];
    } | null,
    colorData: null as {
        numbers: number[];
    } | null,

    data: {
        pageTitle: '数一数，连一连',
        functionId: '',
        hasContent: false,
        showShareDialog: false,
        showTypeSelector: false,
        currentType: 'twelve-animals', // 'twelve-animals' 或 'fruits' 或 'circle' 或 'caterpillar'
        currentTypeName: '十二生肖',
        typeActions: [
            { name: '十二生肖', value: 'twelve-animals' },
            { name: '水果', value: 'fruits' },
        ],
    },

    onLoad(options: { id?: string }) {
        const functionId = options.id || 'counting-matching';
        this.setData({ functionId });

        const functionItem = MATH_FUNCTION_TYPES.find(
            (item: MathFunctionType) => item.id === functionId,
        );

        const pageTitle = functionItem?.title || '数一数，连一连';
        this.setData({ pageTitle });
        wx.setNavigationBarTitle({ title: pageTitle });

        // 根据 functionId 设置不同的类型选择器
        if (functionId === 'number-coloring') {
            this.setData({
                currentType: 'caterpillar',
                currentTypeName: '毛毛虫',
                typeActions: [
                    { name: '毛毛虫', value: 'caterpillar' },
                    { name: '圆圈', value: 'circle' },
                ],
            });
        }
    },

    onReady() {
        this.initCanvas();
    },

    /**
     * 初始化Canvas
     */
    initCanvas() {
        const query = wx.createSelectorQuery();
        query
            .select('#canvasWrapper')
            .boundingClientRect((rect) => {
                if (rect) {
                    const { width, height } = PAPER_SIZE['A4'];
                    const boxWidth = rect.width;
                    const boxHeight = boxWidth / (width / height);

                    this.boxHeight = boxHeight;
                    this.boxWidth = boxWidth;

                    this.setData({ boxWidth, boxHeight });

                    const canvas = wx
                        .createSelectorQuery()
                        .select('#canvasContent');
                    canvas.fields({ node: true, size: true }).exec((res) => {
                        if (res[0]) {
                            const canvasNode = res[0].node;
                            const ctx = canvasNode.getContext('2d');
                            const dpr = wx.getSystemInfoSync().pixelRatio;

                            canvasNode.width = boxWidth * dpr;
                            canvasNode.height = boxHeight * dpr;
                            ctx.scale(dpr, dpr);

                            this.canvas = canvasNode;
                            this.ctx = ctx;

                            // 根据 functionId 创建不同的绘制服务
                            if (this.data.functionId === 'number-coloring') {
                                this.drawService = new NumberColorDraw(
                                    canvasNode,
                                    ctx,
                                    {
                                        title: this.data.pageTitle,
                                        subTitle: '按数字给相应的圆圈涂上颜色',
                                    },
                                );
                            } else {
                                this.drawService = new CountMatchDraw(
                                    canvasNode,
                                    ctx,
                                    {
                                        title: this.data.pageTitle,
                                        subTitle:
                                            '通过连线配对数字和对应的数量图形',
                                    },
                                );
                            }

                            // 初始随机生成
                            this.onRandom();
                        }
                    });
                }
            })
            .exec();
    },

    /**
     * 绘制Canvas内容
     */
    async drawCanvas() {
        if (!this.ctx || !this.drawService) {
            return;
        }

        try {
            if (this.data.functionId === 'number-coloring') {
                if (!this.colorData) {
                    return;
                }
                await (this.drawService as NumberColorDraw).draw(
                    this.colorData,
                    this.data.currentType,
                );
            } else {
                if (!this.matchData) {
                    return;
                }
                await (this.drawService as CountMatchDraw).draw(
                    this.matchData,
                    this.data.currentType,
                );
            }
            this.setData({ hasContent: true });
        } catch (error) {
            console.error('绘制失败:', error);
            this.setData({ hasContent: false });
        }
    },

    /**
     * 随机生成
     */
    onRandom() {
        if (this.data.functionId === 'number-coloring') {
            // 按数字涂颜色模式：生成6个随机数字（1-10）
            const availableNumbers = Array.from(
                { length: 10 },
                (_, i) => i + 1,
            );
            const numbers: number[] = [];

            for (let i = 0; i < 6; i++) {
                const randomIndex = Math.floor(
                    Math.random() * availableNumbers.length,
                );
                const number = availableNumbers.splice(randomIndex, 1)[0];
                numbers.push(number);
            }

            this.colorData = { numbers };
        } else {
            // 数一数连一连模式：生成5个不同的数字（1-10）
            const availableNumbers = Array.from(
                { length: 10 },
                (_, i) => i + 1,
            );
            const leftNumbers: number[] = [];

            for (let i = 0; i < 5; i++) {
                const randomIndex = Math.floor(
                    Math.random() * availableNumbers.length,
                );
                const number = availableNumbers.splice(randomIndex, 1)[0];
                leftNumbers.push(number);
            }

            // 复制数字数组并打乱顺序，作为右侧显示的数字
            const rightNumbers = [...leftNumbers];
            for (let i = rightNumbers.length - 1; i > 0; i--) {
                const j = Math.floor(Math.random() * (i + 1));
                [rightNumbers[i], rightNumbers[j]] = [
                    rightNumbers[j],
                    rightNumbers[i],
                ];
            }

            this.matchData = { leftNumbers, rightNumbers };
        }

        this.drawCanvas();
    },

    /**
     * 导出打印
     */
    exportToPrint() {
        if (!this.canvas || !this.data.hasContent) {
            return;
        }

        if (shouldShowShareGuide()) {
            this.setData({ showShareDialog: true });
            return;
        }

        checkAndSaveImage(this.canvas);
    },

    /**
     * 分享小程序
     */
    onShareAppMessage() {
        return {
            title: '涂鸦丫-数学学习涂鸦卡',
            path: `/mathPages/countMatch/countMatch?id=${this.data.functionId}`,
            imageUrl:
                'https://cdn.joeyone.cn/doodle/share-img/index-share-v2.png',
        };
    },

    onShareTimeline() {
        return {
            title: '涂鸦丫-数学学习涂鸦卡',
            query: `id=${this.data.functionId}`,
            imageUrl:
                'https://cdn.joeyone.cn/doodle/share-img/index-share-v2.png',
        };
    },

    /** 关闭分享引导弹窗 */
    onCloseShareDialog() {
        this.setData({ showShareDialog: false });
    },

    /** 分享成功回调 */
    onShareSuccess() {
        this.setData({ showShareDialog: false });
        if (this.canvas) {
            checkAndSaveImage(this.canvas);
        }
    },

    /** 显示类型选择器 */
    onShowTypeSelector() {
        this.setData({ showTypeSelector: true });
    },

    /** 关闭类型选择器 */
    onCloseTypeSelector() {
        console.log('onCloseTypeSelector');
        this.setData({ showTypeSelector: false });
    },

    /** 选择类型 */
    onSelectType(event: any) {
        const { name, value } = event.detail;
        this.setData({
            currentType: value,
            currentTypeName: name,
            showTypeSelector: false,
        });
        // 重新生成数据
        this.onRandom();
    },
});