idioms/idiom/assets/module_game/ui/UI_Idioms/UI_Idioms.ts

import { _decorator, Component, DynamicAtlasManager, find, instantiate, Label, macro, Node, Prefab, ScrollView, Size, UITransform, Vec2, Vec3 } from 'cc';
import { UI_Idiom } from './UI_Idiom';
import { Layout_Idioms } from './Layout_Idioms';
import { GameUILayers } from '../../../core/ui/ui';
import ui_base from '../../../core/ui/ui_base';
import { ModuleDef } from '../../../Scripts/ModuleDef';
import { Container_Manager } from '../../game/Container_Manager';
import { Cube_Infor } from '../../game/Cube_Infor';

const { ccclass, property } = _decorator;

@ccclass('UI_Idioms')
export class UI_Idioms extends ui_base {
    idioms: UI_Idiom[] = [];
    constructor() {
        super(ModuleDef.GAME, 'ui/UI_Idioms/ScrollView', GameUILayers.HUD, Layout_Idioms);
    }

    protected async onCreated() {
        const layout = this.getLayout<Layout_Idioms>();
        layout.Container = find('Container').getComponent(Container_Manager);
        this.init();
    }

    public init() {
        const layout = this.getLayout<Layout_Idioms>();
        console.log("init");
        for (let i = 0; i < this.idioms.length; i++) {
            this.idioms[i].node.destroy();
        }

        this.idioms = [];

        for (let i = 0; i < layout.Container.idioms.length; i++) {
            let node = instantiate(layout.idiom_prefab);
            node.parent = layout.content;
            console.log("label" + layout.Container.idioms[i].idiom);
            node.getComponent(UI_Idiom).txt.string = layout.Container.idioms[i].idiom;
            node.getComponent(UI_Idiom).piece_1_word = layout.Container.idioms[i].piece_1_word;
            node.getComponent(UI_Idiom).piece_2_word = layout.Container.idioms[i].piece_2_word;
            this.idioms.push(node.getComponent(UI_Idiom));
        }
    }

    //高亮显示
    public light_Show(cube_infor: Cube_Infor) {
        const layout = this.getLayout<Layout_Idioms>();
        let txt_length = cube_infor.Text.length;
        let flag = false;
        for (let i = 0; i < this.idioms.length; i++) {
            if (this.idioms[i].piece_1_word === cube_infor.Text) {
                this.idioms[i].hud_sp.node.active = true;
                this.idioms[i].hud_sp.node.getComponent(UITransform).contentSize = new Size(30 * txt_length, 30);
                let target = 0;
                this.idioms[i].hud_sp.node.position = new Vec3(11 + target * 30, -11.5, 0);
                this.scrollToTarget(i);

            }
            else if (this.idioms[i].piece_2_word === cube_infor.Text) {
                this.idioms[i].hud_sp.node.active = true;
                this.idioms[i].hud_sp.node.getComponent(UITransform).contentSize = new Size(30 * txt_length, 30);
                let target = 4 - txt_length;
                this.idioms[i].hud_sp.node.position = new Vec3(11 + target * 30, -11.5, 0);
                this.scrollToTarget(i);
            }
        }
    }
    //取消高亮
    public light_Hide(cube1: Cube_Infor, cube2: Cube_Infor) {
        const layout = this.getLayout<Layout_Idioms>();
        this.idioms = this.idioms.filter(element => {
            let shouldRemove = false;
            let hasMatch = false;

            // 检查与 cube1 相关的成语
            if (cube1.Text === element.piece_1_word) {
                for (const cubeInfor of layout.Container.idiom_combine.keys()) {
                    if (cubeInfor.txt.string === cube1.Text) {
                        hasMatch = true;
                        break;
                    }
                }
                // 只有当前字没有参与成语时才移除提示
                if (!hasMatch) {
                    element.hud_sp.node.active = false; // 销毁UI中的成语提示
                }
            }

            // 检查与 cube2 相关的成语
            if (cube2.Text === element.piece_2_word) {
                for (const cubeInfor of layout.Container.idiom_combine.keys()) {
                    if (cubeInfor.txt.string === cube2.Text) {
                        hasMatch = true;
                        break;
                    }
                }
                // 只有当前字没有参与成语时才移除提示
                if (!hasMatch) {
                    element.hud_sp.node.active = false; // 销毁UI中的成语提示
                }
            }

            // 检查是否能组合成一个成语
            if (cube1.Text + cube2.Text === element.txt.string) {
                element.node.destroy(); // 销毁节点
                shouldRemove = true; // 如果已组合，移除该成语
            }

            // 保留未被组合的元素
            return !shouldRemove;
        });

        // 监测所有字是否仍然需要高亮显示
        this.idioms.forEach(element => {
            // 检查每个字是否仍然在任何成语组合中
            let shouldDisplay = false;
            // 遍历容器中的所有成语组合，看看当前字是否仍然参与任何组合
            for (const cubeInfor of layout.Container.idiom_combine.keys()) {
                if (cubeInfor.txt.string === element.piece_1_word || cubeInfor.txt.string === element.piece_2_word) {
                    shouldDisplay = true;
                    break;
                }
            }
            // 如果该字还参与成语，则保持其提示显示
            if (shouldDisplay) {
                element.hud_sp.node.active = true;
            }
        });
    }

    public scrollToTarget(index: number) {
        const layout = this.getLayout<Layout_Idioms>();
        let row = Math.trunc(index / 5);
        if (row == 0) {
            layout.scrollView.scrollTo(new Vec2(0, 1), 0.2, false);
        } else if (row == this.idioms.length / 5) {
            layout.scrollView.scrollTo(new Vec2(0, 0), 0.2, false);
        } else {
            let res = Math.trunc(((row) / (Math.trunc((this.idioms.length / 5)) - 2)) * 10) / 10;
            layout.scrollView.scrollTo(new Vec2(0, 1 - res), 0.2, false);
            console.log("weizhi:" + (1 - res));
        }

    }

    public all_light_Hide() {
        this.idioms.forEach(element => {
            element.hud_sp.node.active = false;
        });
    }
}