lawless/client/assets/scripts/ui/screens/WorldMapScreen.ts

import { _decorator, Component, Node, Label, Sprite, Color, UITransform, Size, Layout } from 'cc';
import { UITheme } from '../common/UITheme';
import { UIBase } from '../common/UIBase';

const { ccclass, property } = _decorator;

/**
 * 世界地图界面（游历）
 * 基于江湖截图：大地图 + 区域标签 + 地点图标
 */
@ccclass('WorldMapScreen')
export class WorldMapScreen extends UIBase {

    @property(Node) mapHeader: Node = null!;
    @property(Node) filterBar: Node = null!;
    @property(Node) mapArea: Node = null!;

    start() {
        this.initMapHeader();
        this.initFilterBar();
        this.initMapArea();
    }

    /**
     * 地图头部
     * 提示文字 + 风云录按钮
     */
    private initMapHeader() {
        if (!this.mapHeader) return;

        const transform = this.mapHeader.getComponent(UITransform) || this.mapHeader.addComponent(UITransform);
        transform.setContentSize(new Size(720, 80));

        const tipLabel = new Node('Tip');
        const label = tipLabel.addComponent(Label);
        label.string = '点击地名即可进入此地历练';
        label.fontSize = UITheme.FONT_SIZE.SM;
        label.color = this.hexToColor(UITheme.COLORS.TEXT_NORMAL);
        tipLabel.setParent(this.mapHeader);

        const windCloudBtn = this.createButton(this.mapHeader, '风云录', {
            width: 120, height: 40,
            bgColor: UITheme.COLORS.BG_CARD,
            textColor: UITheme.COLORS.TEXT_GOLD,
        });
    }

    /**
     * 筛选标签栏
     * 全部 | 九幽禁地 | 千绝古地 | 江湖纷争
     */
    private initFilterBar() {
        if (!this.filterBar) return;

        const transform = this.filterBar.getComponent(UITransform) || this.filterBar.addComponent(UITransform);
        transform.setContentSize(new Size(720, 60));

        const layout = this.filterBar.addComponent(Layout);
        layout.type = Layout.Type.HORIZONTAL;

        const filters = ['全部', '九幽禁地', '千绝古地', '江湖纷争'];

        filters.forEach((filterName, index) => {
            const filterNode = new Node(`Filter_${filterName}`);
            const filterTransform = filterNode.addComponent(UITransform);
            filterTransform.setContentSize(new Size(170, 50));
            filterNode.setParent(this.filterBar);

            const label = filterNode.addComponent(Label);
            label.string = filterName;
            label.fontSize = UITheme.FONT_SIZE.SM;
            label.color = index === 0
                ? this.hexToColor(UITheme.COLORS.TEXT_GOLD)
                : this.hexToColor(UITheme.COLORS.TEXT_NORMAL);
        });
    }

    /**
     * 地图区域
     * 地点图标 + 名称标签
     */
    private initMapArea() {
        if (!this.mapArea) return;

        const transform = this.mapArea.getComponent(UITransform) || this.mapArea.addComponent(UITransform);
        transform.setContentSize(new Size(720, 800));

        // 地图地点数据
        const locations = [
            { name: '辽东', x: 500, y: 700, icon: '🏔️' },
            { name: '燕云', x: 350, y: 650, icon: '🏰' },
            { name: '洙泗书院', x: 250, y: 580, icon: '📚' },
            { name: '齐鲁', x: 350, y: 520, icon: '🏯' },
            { name: '中原', x: 100, y: 480, icon: '🏛️' },
            { name: '江南', x: 300, y: 400, icon: '🌸' },
            { name: '血雨楼', x: 400, y: 380, icon: '⚔️' },
            { name: '襄阳城', x: 150, y: 350, icon: '🏰' },
            { name: '梨园', x: 500, y: 320, icon: '🎭' },
            { name: '自在阁', x: 200, y: 280, icon: '🏯' },
            { name: '闽南', x: 350, y: 250, icon: '🏔️' },
            { name: '码头', x: 600, y: 500, icon: '⚓' },
            { name: '高丽', x: 650, y: 650, icon: '🏯' },
            { name: '前往东瀛', x: 650, y: 420, icon: '⛵' },
            { name: '前往大荒岛', x: 550, y: 200, icon: '🏝️' },
        ];

        locations.forEach(loc => {
            const locNode = new Node(`Location_${loc.name}`);
            const locTransform = locNode.addComponent(UITransform);
            locTransform.setContentSize(new Size(120, 80));
            locNode.setPosition(loc.x - 360, loc.y - 400); // 居中偏移
            locNode.setParent(this.mapArea);

            // 地点图标
            const iconNode = new Node('Icon');
            const iconLabel = iconNode.addComponent(Label);
            iconLabel.string = loc.icon;
            iconLabel.fontSize = UITheme.FONT_SIZE.XL;
            iconNode.setParent(locNode);

            // 地点名称
            const nameNode = new Node('Name');
            const nameLabel = nameNode.addComponent(Label);
            nameLabel.string = loc.name;
            nameLabel.fontSize = UITheme.FONT_SIZE.SM;
            nameLabel.color = this.hexToColor(UITheme.COLORS.TEXT_WHITE);
            nameNode.setParent(locNode);
        });
    }
}