Zim LIST with string and button on same line?

Questions
1

Hi guys,
For a multiplayer lobby I would have to show a list of all the rooms that a player can join and that is something a LIST can nicely do. But.... I would like for each list item to be a string + a button (JOIN) to the right of that text string.

So 1 item of the list should have both a text string and a button.

Currently I don't find how to do that.

The names of my lobbies are in array lobbies and I need to create a list out of that + listen to the clicks on those buttons.

Any suggestions? Possible?

This code is not doing it

        function ready(frame, stage) {
            const data = [];

            ["Lobby", "Room demo", "Room games", "Room test"].forEach(room => {

                const row = new Container(600, 50);

                new Label({
                    text: room,
                    size: 20,
                    color: dark
                }).pos(20, 15, row);

                const btn = new Button({
                    label: "Join",
                    width: 80,
                    height: 30
                }).pos(500, 10, row);

                btn.on("click", () => {
                    console.log("Join:", room);
                });

                data.push(row);
            });


            const list = new List({
                list: data,
                width: 600,
                height: 300,
                spacing: 2,
                backgroundColor: "#eeeeee",
                corner: 5
            }).center();

            stage.update();

        }

Kind regards,
Bart

2

The right idea... put each in a Container - like you row but with your code, the parameters of pos() are x, y, horizontal, vertical, container. So pos(20,15, LEFT, TOP, row) is what you want. Although, you may want to pos(20,LEFT,0,CENTER,row) Try that and see where it gets you...

3

I changed to this code and now they do apear in the list. Thanks. Is it possible that the colors that list gets are not used? Only the green #00ff00 for backdropColor is showing, but no others.

   <script type="module">

        import "https://zimjs.org/cdn/019/zim";

        // See Docs under Frame for FIT, FILL, FULL, and TAG
        const frame = new Frame(FIT, 1024, 768, light, dark, ready);
        function ready(frame, stage) {
            const data = [];

            ["Lobby", "Room demo", "Room games", "Room test", "test again", "and yet another test", "rooms enough?"].forEach(room => {

                const row = new Container(600, 50);

                new Label({
                    text: room,
                    size: 20,
                    color: white
                }).pos(5, 5, LEFT, CENTER, row);

                const btn = new Button({
                    label: "Join",
                    width: 80,
                    height: 30
                }).pos(10, 2, RIGHT, BOTTOM, row);

                btn.on("click", () => {
                    console.log("Join:", room);
                });

                data.push(row);
            });


            const list = new List({
                list: data,
                width: 600,
                height: 300,
                spacing: 2,
                backgroundColor: "#cc0000",
                rollBackgroundColor: "#ffff00",
                backdropColor: "#00ff00",
                rollColor: "#0000ff",
                corner: 5
            }).center();

            stage.update();

        } // end ready

    </script>

So maybe I have to give the row containers a background myself?

4

Yes - once you go custom items, then backgroundColor is not applied. Alternatively, you can use the default label and insert a button into each label. We will do an example in a sec... just launching a codepen pen.

5
6

nice idea to choose characters

7

Okay that seems to work nicely thanks. Now I need to find a way to repopulate the list whenever the list of rooms changes, but I guess thats just deleting all items and rebuilding the list content, because there won't be that many rooms. It has been a while since I coded with ZIM and I'm a little bit rusty :wink:

1 Like