Git Product home page Git Product logo

discordguilib's Introduction

DiscordGUILib

📔Overview

This supports interactive UI with using the message component.

📑Documentation

In preparation.

⛰️Requirement

  • .NET 6
  • Discord.Net 3.9.0

⏬Installation

NuGet

DiscordGUILib

📱Usage

Premise

Preparing to receive command with the use of Discord.Net.

Initialize DiscordGUILib

You need to pass the client to GUIModuleInitializer.
Will be becomes possible use DiscordGUILib.

// using Discord.WebSocket;
// using DiscordGUILib;

private void InitializeGUIModule(BaseSocketClient client)
{
    GUIModuleInitializer.Initialize(client);
}

How to use components.

Give an examples of how to use components.
This example is used interaction framework.

Toggle button

image

using Discord.Interactions;
using DiscordGUILib.Components;

namespace Examples;

public class ToggleModule : InteractionModuleBase 
{
    [SlashCommand("toggle", "send the toggle button")]
    public async Task ToggleTest()
    {
        var checkedDef = new ButtonDefinition("Checked!!", ButtonStyle.Success, emote: Emoji.Parse(":ballot_box_with_check:"));
        var unCheckedDef = new ButtonDefinition("Unchecked", ButtonStyle.Danger, emote: Emoji.Parse(":blue_square:"));
        // Create the component id.
        var componentId = ComponentIdFactory<ToggleButton>.CreateFromGuid();
        // Or use, `var componentId = ComponentIdFactory<ToggleButton>.CreateNew("any string(max length is 50.)");`

        // Create the instance of toggle button.
        var toggleButton = new ToggleButton(componentId, checkedDef, unCheckedDef);

        // The event if button was checked by user.
        toggleButton.Checked += async (button, component) =>
        {
            await component.RespondAsync("Changed to checked.");
        };
        // The event if button was unchecked by user.
        toggleButton.Unchecked += async (button, component) =>
        {
            await ReplyAsync(component.Data.CustomId);
            await component.RespondAsync("Changed to unchecked.");
        };
        await RespondAsync("toggle button", components: toggleButton.GetComponentBuilder().Build());
    }
}

Chain button

image3

[SlashCommand("chain_button", "send the chain button")]
public async Task ChainTest()
{
    var state1 = new ChainButtonState(new ButtonDefinition("1", ButtonStyle.Danger, emote: Emoji.Parse(":one:")));
    state1.Pushed += async (button, component) =>
    {
        await component.RespondAsync("2");
    };

    var state2 = new ChainButtonState(new ButtonDefinition("2", ButtonStyle.Primary, emote: Emoji.Parse(":two:")));
    state2.Pushed += async (button, component) =>
    {
       await component.RespondAsync("3");
    };

    var state3 = new ChainButtonState(new ButtonDefinition("3", ButtonStyle.Success, emote: Emoji.Parse(":three:")));
    state3.Pushed += async (button, component) =>
    {
        await component.RespondAsync("1");
    };
    var states = new List<ChainButtonState>() { state1, state2, state3 };

    // Create the component id.
    var componentId = ComponentIdFactory<ToggleButton>.CreateFromGuid();
    // Or use, `var componentId = ComponentIdFactory<ToggleButton>.CreateNew("any string");`

    // Create the instance of chain button.
    var chainButton = new ChainButton(componentId, states);

    await RespondAsync("chain button", components: chainButton.GetComponentBuilder().Build());
}

Pagination Menu

image2

using Discord.Interactions;
using DiscordGUILib.Components;

namespace Examples;

public class PaginationMenuModule : InteractionModuleBase 
{
    [SlashCommand("menu", "send the pagination menu.")]
    public async Task MenuTest()
    {
        // Create pagination items.
        var items = new List<PaginationMenuItem>();
        for (int i = 1; i <= 100; i++)
        {
            items.Add(new PaginationMenuItem($"label{i}", i, "description"));
        }
        var componentId = ComponentIdFactory<PaginationMenu>.CreateFromGuid();
        var pagination = new PaginationMenu(componentId, items);
        // The event if item was selected by user.
        pagination.OnSelected += async (args) =>
        {
            await args.Component.RespondAsync($"You select {args.SelectedItem.Label}.");
        };
        // The event if cancel was selected by user. 
        pagination.OnCanceled += async (menu, component) =>
        {
            await component.RespondAsync("canceled");
        };

        await RespondAsync("pagination menu", components: pagination.GetComponentBuilder().Build());
    }
}

Pagination

public async Task PaginationTest()
{
    // Create the component id.
    var componentId = ComponentIdFactory<ToggleButton>.CreateFromGuid();
    // Or use, `var componentId = ComponentIdFactory<ToggleButton>.CreateNew("any string")
    var pagination = new Pagination(componentId, 10);
    pagination.PageChanged += async (pagination, component) =>
    {
        await component.DeferAsync();
    };
    await RespondAsync("pagination", components: pagination.GetComponentBuilder().Build());
}

Error Handling of command

Can't use the component was sent before restart bot. It's because the instance of the component was lost when close the bot.

public class ModuleTest : InteractionModuleBase
{
    static ModuleTest()
    {
        ToggleButton.OnError += OnError;
        PaginationMenu.OnError += OnError;
    }

    private static async Task OnError(SocketMessageComponent component)
    {
        await component.RespondAsync("Can't use the component was sent before restart bot.");
    }
}

Dispose component

If you disable the component, you must call ToDisable().

component.ToDisable();

Example: PaginationMenu will be disabled when an item is selected.

pagination.OnSelected += async (args) =>
{
    await args.Component.RespondAsync($"You select {args.SelectedItem.Label}.");
    // ComponentBase derived to PaginationMenu, ChainButton, etc.
    ComponentBase component = args.PaginationMenu;
    SocketMessageComponent messageComponent = args.Component;
    component.ToDisable();
    await messageComponent.Message.DeleteAsync();
};

👀Features

Kind of the component

  • Toggle button
  • Chain button
  • Pagination
  • Pagination menu

🍄Author

Twitter

©️License

DiscordGUILib is licensed under the MIT License.

discordguilib's People

Contributors

autumnsky1010 avatar

Stargazers

aieuo avatar  avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.