[SOLVED] Integrate choice menus inside screens?

[jepp21]

Hey everyone, I have a question about integrating choice menus within screens. I'm working on an in-game desktop, and one of the things the player can use in there is a chatroom. I have dialogue working when they should by essentially just jumping to a label and calling a menu.


I'd like to have the choice menu somehow appear inside the screen with the chatroom instead of being completely separate, sort of like this.


Is there a way I can accomplish this? The chatroom window is draggable, so I can't just put the menu position at a pre-determined position so it looks like it's in the chatroom. I was thinking of making space in the bottom where the menu would appear, and them somehow make the choices appear when I call the menu.

The code for the chatroom screen is pretty simple:

Code: Select all

screen messenger():
    modal False

    fixed: 
        pos(190, 100)
        xysize(1400, 768)

        drag: 
            drag_name "S Rooms Messenger"
            xalign 0.5 yalign 0.5 
            drag_handle(0, 0, 1.0, 1.0) 

            frame:
                style "s_rooms_home_window"
                xysize(500, 500)
                padding(25, 25)

                textbutton "close":
                    action [Hide('messenger'), Show("chatrooms")]
                    xalign 1.2 yalign -0.2

                # this is the actual chat message stuff - send message and display it 
                viewport:
                    mousewheel True draggable True
                    yinitial 1.0
                    yadjustment messenger_yadjustment
                    has vbox

                    timer 1.0 repeat chat_timer action If(chatroom_choice_active, false=[Function(msg_check), print("Repeating")])   

                    for msg in current_convo.convo_msg_history[-num_bubbles:]: 
                        hbox:
                            add msg.who.profile_pic
                            vbox:
                                text msg.who.name
                                frame:
                                    style "chatroom_bubble"
                                    text msg.what
                                    
                 # Add a fixed or something with a blank background where the menu can appear when choices occur?

[jeffster]

It looks like you don't need to modify the standard Ren'Py menu/choice screens, but you want to add a few text buttons to the chat window, to pass control for each choice to its own label:

Code: Select all

                viewport:
                    #...
                    for msg in current_convo.convo_msg_history[-num_bubbles:]: 
                        #...

                    # Add this:
                    if chat_choices:
                        vbox:
                            for c in chat_choices:
                                textbutton c[0] xalign 1.0 action Jump(c[1]) style c[2]

#...
default chat_choices = None

label choose_wishlist:
    python:
        chat_choices = [
            ["Bath bombs", "bombs_choice", "clickable"],
            ["Costumes", "costumes_choice", "clickable"],
            ]
    #...

When you want to show the menu in the chat window, you set `chat_choices` variable as a list of several items.
Each item would have fields:

[0] text of the choice button,
[1] label to jump with that choice.

And maybe
[2] style for the button - not necessary if you want only 1 button to be chosen. But if you want to check 1 button and continue with more buttons, then this field can be useful to set some "clicked" ("checked") style for the clicked button:

Code: Select all

label bombs_choice:
    $ chat_choices[0][2] = "clicked"
    #...

style clicked:
    background "check.png"    # example

It should work like this:
(1) at a certain point in the script you set `chat_choices`
(2) Immediately the menu appears in the chat window
(3) One of the choice textbuttons gets clicked - jump to its label happens
(4) There you do something with that choice and set `chat_choices` to None. Menu from chat window disappears.

That's just an example of how it could work.

[m_from_space]

Hey everyone, I have a question about integrating choice menus within screens.

So there is actually an easy way to integrate a choice menu in any screen. Let's take your messenger screen as an example:

Code: Select all

screen messenger(items=None):
    # ...
    drag:
       # ...
       if items:
           vbox:
               for i in items:
                   textbutton i.caption action i.action

label start:
    "Your choice..."
    menu (screen="messenger"):
        "Option 1":
            pass
        "Option 2":
            pass

The only big problem in your case is that you have a draggable screen. Because after you choose something, the screen will hide itself, since Renpy calls it being "transient". That wouldn't be a big deal, since you can just show it right after every choice.

Code: Select all

menu (screen="messenger"):
    "Option 1":
        show screen messenger
        "You picked option 1."

But when you just re-show your messenger screen, then it won't be at the last (dragged) position.

There is probably a way to fix this by somehow knowing the last position.

[jepp21]

Thanks, both of you! I happen to end up using @jeffster's solution because I saw it first and it worked without any known issues so far. I haven't tested it in length yet but from the bit I've done it seems to be working. I had to make a few changes for it to fully work with my chatroom code, but nothing too major.

Code: Select all

if chat_choices:
	vbox:
         	for index, c in enumerate(chat_choices, start=1):
                	textbutton c[0] xalign 1.0 action Jump(current_convo.name + "_choice_" + str(current_convo.choice_count) + "_" + str(index)) 

@m_from_space This solution looks really interesting as well and I didn't know choices could be reintegrated that easily. I'll definitely keep this in mind. This chatroom is still very primitive at the moment and it's likely that i'll refactor it eventually since this is just a first draft.

All I have is one followup question. Currently, the textbuttons appear on top of my viewport.


How can I make it so that it appears in a position below the viewport, like in my reference image in the first post? Also, is there a way I can make it so that the textbuttons and the viewport can't overlap, instead of appearing to be in different layers? Like if the text buttons take a certain part of the available space, the viewport is forced to only use the remaining space not occupied by the textbuttons

[jeffster]

vbox with textbuttons can have style or inline properties with

Code: Select all

yalign 1.0

or

Code: Select all

align (1.0, 1.0)

To reserve some constant space for them, set alignment and size for their container

Code: Select all

    frame:
        align (1.0, 1.0)
        xysize (600, 400)
        vbox:
            # with maybe: align (1.0, 1.0)

            for index, c in enumerate(chat_choices, start=1):
                textbutton ...

Likewise, to set only vertical space: ysize 400

[jepp21]

vbox with textbuttons can have style or inline properties with

Code: Select all

yalign 1.0

or

Code: Select all

align (1.0, 1.0)

To reserve some constant space for them, set alignment and size for their container

Code: Select all

    frame:
        align (1.0, 1.0)
        xysize (600, 400)
        vbox:
            # with maybe: align (1.0, 1.0)

            for index, c in enumerate(chat_choices, start=1):
                textbutton ...

Likewise, to set only vertical space: ysize 400

This works out. Thanks! Since I haven't found any bugs with the choices thus far, I'll add that this was solved to the question title