ui/InputHint.razor

A UI Razor component that displays an input glyph image for a specified input button. It chooses a texture from a custom textures folder based on the current input origin and controller/keyboard state, falling back to the engine's Input.GetGlyph method, and updates when the UI tree renders or when the input device changes.

File Access
@namespace Sandbox
@using Sandbox;
@using Sandbox.UI;
@using System;
@inherits Panel
@attribute [StyleSheet("InputHint.razor.scss")]

<root>
    <img @ref=Glyph style="aspect-ratio:@(AspectRatio);"/>
</root>

@code
{
    // @ref
    public Image Glyph { get; set; }
    public GlyphStyle GlyphStyle { get; set; } = GlyphStyle.Knockout.WithNeutralColorABXY().WithSolidABXY();
    public string Button { get; set; } = "run";
	public float AspectRatio { get; set; } = 1f;

	/// <summary>
    /// Checks the current button and updates the glyph.
    /// </summary>
    void UpdateTexture()
    {
        var origin = Input.GetButtonOrigin(Button);
        if (origin is not null)
        {
            var subfolder = Input.UsingController ? "controller" : "keyboard";
            var customPath = $"textures/ui/custom-glyphs/{subfolder}/{origin.ToLowerInvariant()}.png";
            var customTexture = Texture.Load(FileSystem.Mounted, customPath, false);
            if (customTexture is not null)
            {
                Glyph.Texture = customTexture;
                return;
            }
        }

        var texture = Input.GetGlyph(Button, InputGlyphSize.Medium, GlyphStyle);
        if (texture is null) return;
        Glyph.Texture = texture;
    }

    protected override void OnAfterTreeRender(bool firstTime)
    {
        UpdateTexture();
    }

    protected override int BuildHash()
    {
        // If we switch input device, rebuild the tree.
        return HashCode.Combine(Button, Input.UsingController);
    }
}