UI Framework

1var metadata = GetActorMetadata();
2metadata.Set(MetadataTypes.Width,         0.0f);   // Invisible
3metadata.Set(MetadataTypes.Height,        0.0f);
4metadata.Set(MetadataTypes.Scale,         0.0f);
5metadata.Set(MetadataTypes.ContainerType, (byte)windowType);
6metadata.SetFlag(EntityFlag.Invisible,    true);
7metadata.Set(MetadataTypes.ContainerSize, size);   // 140 slots
8
9var addEntityPacket = new AddEntityPacket() {
10    EntityUniqueId  = ...,
11    EntityRuntimeId = ...,
12    Position        = ...,
13    Metadata        = metadata,
14    ....
15};
16player.SendPacket(addEntityPacket);

1// Étape A  Le client croit que le joueur monte l'entité fantôme
2var entityLinkPacket = new SetEntityLinkPacket() {
3    Link = new EntityLinkData(
4        GetActorRuntimeIdentifier(),
5        player.GetRuntimeId(),
6        ...
7    )
8};
9player.SendPacket(entityLinkPacket);
10
11// Étape B  Ouvrir l'inventaire du joueur → ouvre l'inventaire de l'entité
12var openInventory = new ContainerOpenPacket() {
13    EntityUniqueId = GetActorRuntimeIdentifier(),
14    ...
15};
16player.SendPacket(openInventory);

1public abstract class AbstractUiComponent : IUiComponent {
2    public string Id { get; set; }                         // Identifiant unique → update ciblé
3    public int Index { get; set; }                         // Position dans le conteneur
4    public bool Locked { get; set; } = true;               // Bloque l'interaction par défaut
5    public SeveralContext SeveralContext { get; set; }     // La donnée envoyée au client
6    public List<IUiComponent> AdditionalComponent { get; } // Sous-composants (voir plus bas)
7
8    public virtual int GetSize() => 1;   // 1 composant = 1 slot par défaut
9    public virtual void OnGuiInit() { } // Appelé au placement
10    public virtual void Update() { }    // Appelé au refresh
11}

1public sealed class ButtonUiComponent : AbstractUiComponent, IButtonUiComponent {
2    public ButtonUiComponent(string? name = null) {
3        if (!string.IsNullOrEmpty(name))
4            SeveralContext.StringValue = name; // Le nom = la donnée envoyée au client
5    }
6
7    public Func<OnClickEvent, bool>?       OnClick      { get; set; } // Sync
8    public Func<OnClickEvent, Task<bool>>? OnClickAsync { get; set; } // Async (BDD, API…)
9}

1private static bool TryGetElementRecursive<T>(
2    IEnumerable<IUiComponent> components, string id,
3    [NotNullWhen(true)] out T? result) where T : class, IUiComponent {
4
5    foreach (var component in components) {
6        if (component.Id == id && component is T match) {
7            result = match;
8            return true;
9        }
10        // Descendre dans les enfants
11        if (TryGetElementRecursive(component.AdditionalComponent, id, out result))
12            return true;
13    }
14    result = null;
15    return false;
16}

1AdditionalComponent.Add(new ButtonUiComponent("PreviousPagination") {
2    OnClick = _ => { PreviousPage(); return false; }
3});
4AdditionalComponent.Add(new ButtonUiComponent(CurrentIndex + "/" + PageCount));
5AdditionalComponent.Add(new ButtonUiComponent("NextPagination") {
6    OnClick = _ => { NextPage(); return false; }
7});

1new CategoryUiComponent(this, new Dictionary<string, PageNavigator> {
2    { "Armes",   new PageNavigator(listeBoutons_Armes)   },
3    { "Armures", new PageNavigator(listeBoutons_Armures) },
4    { "Outils",  new PageNavigator(listeBoutons_Outils)  }
5});

1// Mettre à jour un seul composant (1 seul packet réseau)
2ui.UpdateComponent(label);
3
4// Reconstruire entièrement (changement de page)
5ui.Rebuild();

1// UI d'enclume custom  en production sur Paladium
2public sealed class CustomAnvilUi : AbstractUi {
3
4    // ── Composants ─────────────────────────────────────────────────────────
5    private readonly SlotUiComponent  _firstInput;   // Item à améliorer
6    private readonly SlotUiComponent  _secondInput;  // Matériau / item de fusion
7    private readonly SlotUiComponent  _output;       // Résultat
8    private readonly LabelUiComponent _costLabel;    // Affiche le coût (LVL + $)
9
10    public CustomAnvilUi() {
11        _firstInput  = new SlotUiComponent(this);
12        _secondInput = new SlotUiComponent(this);
13        _output      = new SlotUiComponent(this);
14        _costLabel   = new LabelUiComponent("false") { Id = "cost" };
15
16        // ── Réactivité ─────────────────────────────────────────────────────
17        // Dès qu'un slot change → recalculer le résultat
18        _firstInput.OnPlace  += _ => { Compute(); return true; };
19        _firstInput.OnTake   += _ => { Compute(); return true; };
20        _secondInput.OnPlace += _ => { Compute(); return true; };
21        _secondInput.OnTake  += _ => { Compute(); return true; };
22
23        // Prendre l'output = valider et payer le coût
24        _output.OnTake += e => TryTakeOutput(e.Player);
25
26        // Redonner les items au joueur à la fermeture
27        Container.AddCloseListener(player => {
28            player.GiveItem(_firstInput.GetItemStack());
29            player.GiveItem(_secondInput.GetItemStack());
30        });
31    }
32
33    public override string Id => "custom_anvil";
34
35    // ── Logique ────────────────────────────────────────────────────────────
36    private void Compute() {
37        // Calcule enchantements + réparation, place l'item résultant dans l'output
38        _output.SetItemStack(/* item calculé */);
39
40        // Mise à jour ciblée : 1 seul packet, seulement le label change
41        _costLabel.SeveralContext.StringValue = $" {_levelCost} LVL  {Format(_moneyCost)} ";
42        UpdateComponent(_costLabel);
43    }
44
45    private bool TryTakeOutput(Player player) {
46        if (player.GetMoney() < _moneyCost) return false;
47        player.RemoveMoney(_moneyCost);
48        return true;
49    }
50
51    // ── Déclaration ────────────────────────────────────────────────────────
52    // Le framework mappe automatiquement chaque composant dans le conteneur
53    public override List<IUiComponent> GetElements() => [
54        _firstInput, _secondInput, _output, _costLabel
55    ];
56}

1"container_image": {
2    "type": "image",
3    "bindings": [
4        {
5            "binding_name": "#hover_text",
6            "binding_type": "collection",
7            "binding_collection_name": "container_items"
8        },
9        {
10            "binding_type": "view",
11            "source_property_name": "((#hover_text - ('%.6s' * #hover_text)) - '§r')",
12            "target_property_name": "#texture"
13        }
14    ]
15}

1"progress_fill@$bar_green": {
2    "clip_direction": "left",
3    "$clip_max": 100.0,
4    "bindings": [
5        {
6            "binding_name": "#hover_text",
7            "binding_type": "collection",
8            "binding_collection_name": "container_items"
9        },
10        {
11            // Strip préfixe + convertit string → nombre via * 1
12            "source_property_name": "(#hover_text - ('%.6s' * #hover_text) * 1)",
13            "target_property_name": "#string"
14        },
15        {
16            // #string = 75 → clip_ratio = (100-75)/100 = 0.25
17            "source_property_name": "(($clip_max - #string) / $clip_max)",
18            "target_property_name": "#clip_ratio"
19        }
20    ]
21}

1{
2    // Visible si #hover_text != "false" et n'est pas vide
3    "true@$true": {
4        "bindings": [{
5            "binding_type": "view",
6            "source_property_name": "((#hover_text - 'false') = #hover_text and not (#hover_text = ''))",
7            "target_property_name": "#visible"
8        }]
9    }
10},
11{
12    // Visible si #hover_text contient "false"
13    "false@$false": {
14        "bindings": [{
15            "binding_type": "view",
16            "source_property_name": "(not ((#hover_text - 'false') = #hover_text))",
17            "target_property_name": "#visible"
18        }]
19    }
20}

1"dynamic_two_value": {
2    "property_bag": { "#search": 0, "#separator": ";" },
3    "bindings": [
4        // 1. Strip préfixe
5        { "source_property_name": "(#hover_text - ('%.6s' * #hover_text) * 1)",
6          "target_property_name": "#string" },
7
8        // 2. #search s'incrémente jusqu'à la position du séparateur
9        { "binding_condition": "always",
10          "source_property_name": "(#search + 1 * ( not (('%.'+#search+'s') * #string = #string) and (('%.'+#search+'s') * #string = ('%.'+#search+'s') * #string - #separator) ))",
11          "target_property_name": "#search" },
12
13        // 3. Valeur avant le séparateur
14        { "source_property_name": "((('%.'+#search+'s') * #string) - #separator)",
15          "target_property_name": "#value1" },
16
17        // 4. Valeur après le séparateur
18        { "source_property_name": "(#string - ( ('%.'+#search+'s') * #string))",
19          "target_property_name": "#value2" }
20    ]
21}

1// Mappe un index de slot à un template de rendu
2"dynamic_slot": {
3    "type": "stack_panel",
4    "orientation": "horizontal",
5    "$index|default": 0,
6    "$size|default": [0, 0],
7    "$content|default": "",
8    "collection_name": "container_items",
9    "controls": [
10        {
11            "grid_item@$content": {
12                "collection_index": "$index"
13            }
14        }
15    ]
16}

1pala_asset.*   = textures / icônes / fonds / éléments UI  (catalogue complet)
2pala_button.*  = boutons pré-stylés  (default / hover / pressed)
3pala_panel.*   = panels prêts à l'emploi  (header, background, close/back/hub, layout)
4pala_color.*   = palette RGBA centralisée  (50+ variables)
5common.*       = primitives de base partagées

1"green_button@default_button": {
2    "$default_button_texture": "textures/ui/.../paladium_button_green",
3    "$hover_button_texture":   "textures/ui/.../paladium_button_green_hover",
4    "$pressed_button_texture": "textures/ui/.../paladium_button_green_hover"
5}
6// back_button, home_button, close_button, red_button, select_button, arrow_left_button…

1"mon_menu@pala_panel.panel_large": {
2    "$title": "Ma Boutique",
3    "$content": "ma_boutique.contenu"
4}
5// panel_large, panel_extra_large, panel_medium, panel_popup, panel_chest_0/1…

1"$EF3926": [0.9373, 0.2235, 0.1490, 1],  // Rouge vif (Paladium)
2"$FFD101": [1,      0.8196, 0.0039, 1],  // Or
3"$3967FF": [0.2235, 0.4039, 1,      1],  // Bleu électrique
4// … et 47 autres

1public class ShopUi : AbstractUi {
2    public override string Id => "shop_main";
3    public override IUi? BackButton => new HubUi();
4
5    public override List<IUiComponent> GetElements() => [
6        new LabelUiComponent("§6Boutique") { Id = "title" },
7        new ButtonUiComponent("§aÉpée") {
8            Id = "buy_sword",
9            OnClickAsync = async e => {
10                await ProcessPurchase(e.Player!, 500, Items.DiamondSword);
11                return true;
12            }
13        },
14        new ProgressBarUiComponent(75) { Id = "stock" },
15    ];
16}

1"shop_screen@pala_panel.panel_large": {
2    "$title": "Boutique",
3    "$content": "shop.shop_content"
4}
5
6"shop_content": {
7    "type": "panel",
8    "controls": [
9        { "title@pala_gui.text":         { "$index": 12, "$size": [200, 14] } },
10        { "buy@pala_gui.button":         { "$index": 13, "$button_ref": "pala_button.green_button" } },
11        { "stock@pala_gui.progress_bar": { "$index": 14, "$bar_green": "pala_asset.bar_green" } }
12    ]
13}