Implement SelectableList GUI component

[bagggage]

This PR is a continuation of #2016 and adds the SelectableList component, which is implemented based on the VerticalList. The component allows the user to select any item in the list by clicking on it. This can also be done manually via code by calling the .select(<itemIdx>) and .deselect() methods. Relevant visual effects and keyboard navigation (using the up and down arrow keys) have been implemented.

To handle the selection event in external code, there is a corresponding SelectableCallback = *const fn(idx: usize) void, which passes the index of the selected item in the list.

Hovered:

Selected:

You can test the component's functionality on the server-list-v2 branch by opening the "Join a Server" window in the main menu.

This is necessary to complete #2017 and will be useful for the future implementation of the drop-down menu #1920.

[Wunka]

I am trying to do #1920 but I don't see a good way I can change something in my Element through you SelectCallback . maybe adding a source parameter could do that or is there a way I just don't see?

[bagggage]

maybe adding a source parameter could do that

Possible. What do you mean by source?

[Wunka]

maybe something like a pointer to the parent GuiComponent. For the DropdownList it would be a pointer to the DropdownList so that I can set the selected Element.

[Wunka]

I called it source because in other callback functions the parameter is often called source

[bagggage]

I can simply add a user-defined argument to the callback, then you'll be able to set the value you need yourself. As it implemented in gui.Callback.

[Wunka]

That sounds good.

[bagggage]

Done. @Wunka, you can use it.

[Wunka]

See the pictures for reference: #2199 (comment)

While implementing a example for my DropdownList I noticed a bug. While fixing that bug. I noticed that the Selectablelist is somehow making a hover over the checkbox under the list?? For testing I changed the color of the hover if it is realy the selectable list and it is. I also made a print for what it is making the rect and I also only got the thing I wanted. So I don't know where this bug comes from..

For my testing I changed onOpen of save_creation.zig to this:

	...
	textInput = TextInput.init(.{0, 0}, 128, 22, name, .{.callback = &createWorld}, .{});
	list.add(textInput);
        const gamemodeDropDown = SelectableList.init(.{0,0},40,padding, .{.callback = &testF, .arg = 0});
        inline for(@typeInfo(main.game.Gamemode).@"enum".fields) |field| {
            gamemodeDropDown.add(Label.init(.{0,0},127, field.name, .center));
        }
        gamemodeDropDown.finish(.center);
	gamemodeInput = Button.initText(.{0, 0}, 128, @tagName(gamemode), .{.callback = &gamemodeCallback});
	list.add(gamemodeInput);

	list.add(CheckBox.init(.{0, 0}, 128, "Allow Cheats", true, &allowCheatsCallback));
        list.add(gamemodeDropDown);
	if(!build_options.isTaggedRelease) {
		list.add(CheckBox.init(.{0, 0}, 128, "Testing mode (for developers)", false, &testingModeCallback));
	}
	...

with a dummy method testF which just does nothing for the callback. I will maybe look at this myself sometime, but just wanted to note the problem here because this seems not to exist because of my dropdownlist

[Wunka]

See the pictures for reference: #2199 (comment)

While implementing a example for my DropdownList I noticed a bug. While fixing that bug. I noticed that the Selectablelist is somehow making a hover over the checkbox under the list?? For testing I changed the color of the hover if it is realy the selectable list and it is. I also made a print for what it is making the rect and I also only got the thing I wanted. So I don't know where this bug comes from..

For my testing I changed onOpen of save_creation.zig to this:

	...
	textInput = TextInput.init(.{0, 0}, 128, 22, name, .{.callback = &createWorld}, .{});
	list.add(textInput);
        const gamemodeDropDown = SelectableList.init(.{0,0},40,padding, .{.callback = &testF, .arg = 0});
        inline for(@typeInfo(main.game.Gamemode).@"enum".fields) |field| {
            gamemodeDropDown.add(Label.init(.{0,0},127, field.name, .center));
        }
        gamemodeDropDown.finish(.center);
	gamemodeInput = Button.initText(.{0, 0}, 128, @tagName(gamemode), .{.callback = &gamemodeCallback});
	list.add(gamemodeInput);

	list.add(CheckBox.init(.{0, 0}, 128, "Allow Cheats", true, &allowCheatsCallback));
        list.add(gamemodeDropDown);
	if(!build_options.isTaggedRelease) {
		list.add(CheckBox.init(.{0, 0}, 128, "Testing mode (for developers)", false, &testingModeCallback));
	}
	...

with a dummy method testF which just does nothing for the callback. I will maybe look at this myself sometime, but just wanted to note the problem here because this seems not to exist because of my dropdownlist

I don't know when but due to some commit this was fixed. I merged master into my dropdown example and now this weird hover doesn't exist anymore

[IntegratedQuantum]

Sorry for the late reply, but so far I wasn't sure if we really want this.
I finally managed to find the time to look at the other PRs:
I think for #2017 we should use the same style as the save selection menu with buttons and icons (see #2017 (comment)).
For dropdowns #2065 I think it would be best if the checkbox handles the children on its own (→e.g. searching would be very difficult with the selectable list).

So it seems that overall this isn't actually needed for anything. Sorry for not figuring this out earlier, I know you probably put a lot of time into writing and then also rewriting this after my comment on the first attempt.