How to handle a complex UI structure in a flexible way?

Hello :slight_smile:

For my game I need a structure that is very similar to a family tree. The tree has 7 levels, with each
three sublevels.
This is what it looks like (only levels 7 to 5):
7
61 62 63
51 52 53 54 55 56 57 58 59
… … …

Each of these levels has two displays:

  1. A button with InputField (2 elements) for creating a new card if there is no entry in the player’s database.
  2. A button with two text fields (3 elements) if there is already a card with this specific id in the players database.

I manually created the first few levels up to and including level 4 to clarify the concept.
This is a part of the code, representing the level 61 tree until level 4:

if (wwwThree.result == UnityWebRequest.Result.Success) {
    Debug.Log(wwwThree.downloadHandler.text);
    string[] everyDivisionLevelArray = wwwThree.downloadHandler.text.Split("+"); // Splits the levels into an string array.

    // Builds/Rebuilds the division structure...
    if (!wwwThree.downloadHandler.text.Contains("61")) {
        CreateLevel61Button.gameObject.SetActive(true);
    }
    else
    {
        StartCoroutine(FillLevel61());
        level61MainButton.gameObject.SetActive(true);
      
            //Sublevel 61
            if (!wwwThree.downloadHandler.text.Contains("51"))
            {
                CreateLevel51Button.gameObject.SetActive(true);
              
            }
            else
            {
                StartCoroutine(FillLevel51());
                CreateLevel51Button.gameObject.SetActive(false);
                level51MainButton.gameObject.SetActive(true);
                    //Sublevel 51
                    if (!wwwThree.downloadHandler.text.Contains("401"))
                    {
                        CreateLevel401Button.gameObject.SetActive(true);
                    }
                    else
                    {
                        StartCoroutine(FillLevel401());
                        CreateLevel401Button.gameObject.SetActive(false);
                        level401MainButton.gameObject.SetActive(true);

                            if (!wwwThree.downloadHandler.text.Contains("402"))
                            {
                                CreateLevel402Button.gameObject.SetActive(true);
                            }
                            else
                            {
                                StartCoroutine(FillLevel402());
                                CreateLevel402Button.gameObject.SetActive(false);
                                level402MainButton.gameObject.SetActive(true);

                                    if (!wwwThree.downloadHandler.text.Contains("403"))
                                    {
                                        CreateLevel403Button.gameObject.SetActive(true);
                                    }
                                    else
                                    {
                                        StartCoroutine(FillLevel403());
                                        CreateLevel403Button.gameObject.SetActive(false);
                                        level403MainButton.gameObject.SetActive(true);
                                    }
                            }
                    }
                if (!wwwThree.downloadHandler.text.Contains("52"))
                {
                    CreateLevel52Button.gameObject.SetActive(true);
                }
                else
                {
                    StartCoroutine(FillLevel52());
                    CreateLevel52Button.gameObject.SetActive(false);
                    level52MainButton.gameObject.SetActive(true);

                        //Sublevel 52
                        if (!wwwThree.downloadHandler.text.Contains("404"))
                        {
                            CreateLevel404Button.gameObject.SetActive(true);
                        }
                        else
                        {
                            StartCoroutine(FillLevel404());
                            CreateLevel404Button.gameObject.SetActive(false);
                            level404MainButton.gameObject.SetActive(true);

                            if (!wwwThree.downloadHandler.text.Contains("405"))
                            {
                                CreateLevel405Button.gameObject.SetActive(true);
                            }
                            else
                            {
                                StartCoroutine(FillLevel405());
                                CreateLevel405Button.gameObject.SetActive(false);
                                level405MainButton.gameObject.SetActive(true);

                                if (!wwwThree.downloadHandler.text.Contains("406"))
                                {
                                    CreateLevel406Button.gameObject.SetActive(true);
                                }
                                else
                                {
                                    StartCoroutine(FillLevel406());
                                    CreateLevel406Button.gameObject.SetActive(false);
                                    level406MainButton.gameObject.SetActive(true);
                                }
                            }
                        }

                    if (!wwwThree.downloadHandler.text.Contains("53"))
                    {
                        CreateLevel53Button.gameObject.SetActive(true);
                    }
                    else
                    {
                        StartCoroutine(FillLevel53());
                        CreateLevel53Button.gameObject.SetActive(false);
                        level53MainButton.gameObject.SetActive(true);

                            //Sublevel 53
                            if (!wwwThree.downloadHandler.text.Contains("407"))
                            {
                                CreateLevel407Button.gameObject.SetActive(true);
                            }
                            else
                            {
                                StartCoroutine(FillLevel407());
                                CreateLevel407Button.gameObject.SetActive(false);
                                level407MainButton.gameObject.SetActive(true);

                                if (!wwwThree.downloadHandler.text.Contains("408"))
                                {
                                    CreateLevel408Button.gameObject.SetActive(true);
                                }
                                else
                                {
                                    StartCoroutine(FillLevel408());
                                    CreateLevel408Button.gameObject.SetActive(false);
                                    level408MainButton.gameObject.SetActive(true);

                                    if (!wwwThree.downloadHandler.text.Contains("409"))
                                    {
                                        CreateLevel409Button.gameObject.SetActive(true);
                                    }
                                    else
                                    {
                                        StartCoroutine(FillLevel409());
                                        CreateLevel409Button.gameObject.SetActive(false);
                                        level409MainButton.gameObject.SetActive(true);
                                    }
                                }
                            }

                    }
                }
            }

As you can see, I have included the code section according to the structure to keep things organized. That works, but it’s far too complicated for all the other levels (e.g. Level 1 has 2187 sublevels).

So I’m looking for a way to create temporary buttons that have the corresponding ID. So if I press the button for level 403, the levels 307 - 309 UI should be created.
This means checking whether an entry for the special ID (e.g.: 309) already exists (in the string array) and, depending on this, creating either the create button or the display button.
So if I press level 403 a second time, the UI for the levels 307 - 309 would have to be destroyed again.

Now it’s extremely time-consuming to do this for all levels.
So I need a method that does this automatically.

Does anyone have an idea as to the best way to do this without
having to program each individual ID manually?
Ideally it is always increments of three, as this is the max number of possible sublevels.

Kind regards
Toby

Solution:

Instead of specifying each individual card and its position (ID), I’ll
I give each card a ParentID. In the end, whenever a card is clicked, I will simply display all cards below it that have the corresponding ParentID.

To create the maps (as well as for the display) I will create a generic window, which will always be called up immediately.
The local ID is no longer necessary because all positions are already based on the parent ID
stand firm.

Instead of defining all buttons, images, etc. for the cards from the start, generic ones are simply created when necessary.

KISS is the way. :wink: