Dota2 UI

/* 线性渐变 */
background-color: gradient(linear, 0% 0%, 0% 100%, from(#fbfbfbff), to(#c0c0c0ff));
background-color: gradient(linear, 0% 0%, 0% 100%, from(#fbfbfbff), color-stop(0.3, #ebebebff), to(#c0c0c0ff));

/* 径向渐变 */
background-color: gradient(radial, 50% 50%, 0% 0%, 80% 80%, from(#00ff00ff), to(#0000ffff));

/* 多层叠加 */
background-color: #0d1c22ff, gradient(radial, 100% -0%, 100px -40px, 320% 270%, from(#3a464bff), color-stop(0.23, #0d1c22ff), to(#0d1c22ff));

// 获取本地玩家信息
const localPlayer = Game.GetLocalPlayerInfo();
const playerID = Game.GetLocalPlayerID();

// 获取英雄信息
const hero = Players.GetLocalPlayerPortraitUnit();
const heroName = Entities.GetUnitName(hero);
const hp = Entities.GetHealth(hero);
const maxHp = Entities.GetMaxHealth(hero);

// 获取能力信息
const abilityCount = Entities.GetAbilityCount(hero);

// 游戏状态
const gameState = Game.GameStateIs(DOTA_GameState.DOTA_GAMERULES_STATE_GAME_IN_PROGRESS);
const gameTime = Game.GetGameTime();

// 获取玩家金钱
const gold = Players.GetGold(playerID);

// 获取队伍信息
const team = Entities.GetTeamNumber(hero);

// 获取所有玩家
const playerIDs = Game.GetAllPlayerIDs();

declare interface CustomGameEventDeclarations {
    // 前端→后端
    c2s_buy_item: { item_name: string; count: number };
    // 后端→前端
    s2c_update_score: { team_id: number; score: number };
}

GameEvents.SendCustomGameEventToServer('c2s_buy_item', {
    item_name: 'item_healing_salve',
    count: 1,
});

import { useGameEvent } from 'react-panorama-x';

const MyComponent: FC = () => {
    const [score, setScore] = React.useState(0);

    useGameEvent('s2c_update_score', event => {
        setScore(event.score);
    }, []);

    return <Label text={`Score: ${score}`} />;
};

// 监听前端事件
ListenToGameEvent('c2s_buy_item', event => {
    const playerID = event.activator_entindex ? EntIndexToHScript(event.activator_entindex) : null;
    // 处理逻辑...
}, undefined);

// 发送事件到前端
CustomGameEventManager.Send_ServerToAllClients('s2c_update_score', {
    team_id: 2,
    score: 100,
});

<!-- kv3 encoding:text:version{e21c7f3c-8a33-41c5-9977-a76d3a32aa0d} format:generic:version{7412167c-06e9-4698-aff2-e63eb59037e7} -->
{
    custom_net_tables = 
    [
        "hero_list",
        "game_timer",
        "my_new_table"
    ]
}

declare interface CustomNetTableDeclarations {
    my_new_table: {
        my_new_table: {
            some_value: number;
            some_string: string;
        };
    };
}

import { useNetTableKey, useNetTableValues } from 'react-panorama-x';

// 监听特定 key
const data = useNetTableKey('my_new_table', 'my_new_table');

// 监听整个表
const allData = useNetTableValues('my_new_table');

CustomNetTables.SetTableValue('my_new_table', 'my_new_table', {
    some_value: 42,
    some_string: 'hello',
});

declare interface XNetTableDefinitions {
    large_data_table: {
        [key: string]: any;
    };
}

// XNetTable 的写入方式（通过自定义的网络表封装）
// 具体使用方式参考项目中 src/utils/xnet-table/ 的实现

const BasicPanel: FC = () => {
    return (
        <Panel className="container">
            <Label text="标题" className="title" />
            <Panel className="content">
                <Label text="内容区域" />
            </Panel>
        </Panel>
    );
};

const ButtonExample: FC = () => {
    const [count, setCount] = React.useState(0);

    return (
        <Panel className="container">
            <Label text={`点击次数: ${count}`} />
            <Button className="my-button" onactivate={() => setCount(c => c + 1)}>
                <Label text="点击我" />
            </Button>
        </Panel>
    );
};

// 方式 1：使用 localizedText 属性（推荐）
<Label localizedText="#my_ui_title" />

// 方式 2：使用 $.Localize() 函数
<Label text={$.Localize('#my_ui_title')} />

// 动态文本中使用本地化
<Label text={`${$.Localize('#score_label')}: ${score}`} />

// addon.csv 格式：Token,English,SChinese
my_ui_title,My Title,我的标题
score_label,Score,分数

const AbilityPanel: FC = () => {
    return (
        <Panel className="ability-container">
            <DOTAAbilityImage abilityname="lina_light_strike_array" className="ability-icon" />
            <DOTAItemImage itemname="item_blink" className="item-icon" />
            <DOTAHeroImage heroname="npc_dota_hero_lina" heroimagestyle="icon" className="hero-icon" />
        </Panel>
    );
};

const HealthBar: FC = () => {
    const [hp, setHp] = React.useState(100);
    const [maxHp, setMaxHp] = React.useState(100);

    // 使用 GameEvents 或 API 更新 hp/maxHp

    return (
        <Panel className="health-bar-container">
            <ProgressBar
                value={hp}
                min={0}
                max={maxHp}
                className="health-bar"
            />
        </Panel>
    );
};

const InputExample: FC = () => {
    const [text, setText] = React.useState('');

    const handleSubmit = () => {
        GameEvents.SendCustomGameEventToServer('c2s_chat_message', { message: text });
        setText('');
    };

    return (
        <Panel className="input-container" flow-children="right">
            <TextEntry
                text={text}
                ontextentrychange={panel => setText(panel.text)}
                ontextentrysubmit={handleSubmit}
                className="chat-input"
                placeholder="输入消息..."
            />
            <Button onactivate={handleSubmit} className="send-button">
                <Label text="发送" />
            </Button>
        </Panel>
    );
};

const DropDownExample: FC = () => {
    const [selected, setSelected] = React.useState('');

    return (
        <Panel className="dropdown-container">
            <DropDown onvaluechanged={panel => setSelected(panel.GetSelected().id)} className="my-dropdown">
                <Label id="option1" text="选项一" />
                <Label id="option2" text="选项二" />
                <Label id="option3" text="选项三" />
            </DropDown>
        </Panel>
    );
};

// 使用 LESS 变量管理主题色
@primary-color: #ffffff;
@accent-color: #4fc3f7ff;
@bg-color: #1a1a2eff;
@danger-color: #ff5252ff;

// 容器布局
.my-container {
    width: 100%;
    height: 100%;
    flow-children: down;     // 子元素纵向排列
    background-color: @bg-color;
    padding: 10px;
}

// 水平居中的标题
.my-title {
    horizontal-align: center;
    font-size: 28px;
    font-weight: bold;
    color: @primary-color;
    margin-bottom: 10px;
}

// 可交互按钮
.my-button {
    flow-children: right;
    background-color: #333355ff;
    border: 1px solid #555577ff;
    border-radius: 4px;
    padding: 8px 16px;
    transition: background-color 0.2s ease-in-out;

    &:hover {
        background-color: #444466ff;
        brightness: 1.2;
    }

    &:active {
        brightness: 0.8;
    }
}

// 响应式宽度
.my-panel {
    width: fill-parent-flow(1.0);   // 等比填充父容器
    height: fit-children;            // 高度自适应内容
}

// 悬浮面板
.floating-panel {
    width: 300px;
    background-color: #000000cc;     // 半透明背景
    border-radius: 8px;
    box-shadow: #00000080 4px 4px 12px 0px;
    padding: 16px;
}

# 编译前端 Panorama（非 watch 模式，仅编译一次检查错误）
npx webpack --config content/panorama/webpack.dev.js

# 同时验证前端 + 服务端
npx webpack --config content/panorama/webpack.dev.js && npx tstl --project game/scripts/tsconfig.json