Code Patterns

Copy-paste examples for common plugin tasks. Commands, events, ECS, GUI, and more.
All 225 Command 60 Damage 2 Ecs 27 Entity 5 Gui 75 Interaction 2 Inventory 4 Moderation 3 Permission 2 Player 9 Plugin 4 Storage 2 Teleport 3 Ui 22 Util 5
← Back to Patterns
gui
hytale-portaldevicesummon

Official Hytale UI: PortalDeviceSummon - Container layout with buttons with text elements
Example Code

$C = "../Common.ui";
$Portals = "Portals/Portals.ui";

@GoldFrameShort = 4;
@GoldFrameLong = 88;

@LeftPaneWidth = 345;
@LeftPaneHeight = 629;

@RightPaneWidth = 640;
@RightPaneHeight = 694;

@PillStyle = LabelStyle(FontSize: 10, HorizontalAlignment: Center, FontName: "Secondary", RenderUppercase: true, TextColor: #ffffff);
@TimeLimitStyle = LabelStyle(FontSize: 32, FontName: "Secondary");

@SeparatorOnRight = Group {
  LayoutMode: Top;
  Padding: (Left: 24, Right: 20, Top: 4, Bottom: 4);
  Anchor: (Width: @RightPaneWidth / 2);
  $C.@PanelSeparatorFancy {}
};

$C.@PageOverlay {
  LayoutMode: Middle;

  Group {
    LayoutMode: Center;

    $C.@DecoratedContainer {
      #Title {
        $C.@Title {
          @Text = %server.customUI.portalDevice.title;
        }
      }

      #Content {
        Padding: (Full: 9, Top: 8);

        Group #Panes {
          LayoutMode: Left;

          Group #LeftPane {
            Anchor: (Width: 431, Height: 716 + 30, Left: 15, Right: 15);

            Group #Artwork {
              Background: (TexturePath: "Portals/DefaultArtwork.png");
              Anchor: (Width: 345, Height: 629);
            }

            Group #Vignette {
              Background: (TexturePath: "Portals/PortalHighlight.png");
              Visible: false;
              Anchor: (Width: 345, Height: 629);
            }

            Group {
              Background: (TexturePath: "Portals/RunicBorder.png");
              Anchor: (Width: 431, Height: 716);
            }

            Group {
              Anchor: (Width: 59, Height: 59, Top: 32);
              Background: (TexturePath: "Portals/PortalCursebreakerLogo.png");
            }
          }

          Group #RightPane {
            Anchor: (Width: 431, Right: 15, Top: 15, Bottom: 15);
            Background: (TexturePath: "../Common/ContainerBackgroundSecondary.png", Border: 5);
            LayoutMode: Top;

            Group #TopStuff {
              @SectionTitleStyle = LabelStyle(FontSize: 16, TextColor: #778292, RenderBold: true, RenderUppercase: true);
              @SectionValueStyle = LabelStyle(FontSize: 15, TextColor: #dee2ef);
              @BulletPoint = Group {
                LayoutMode: Left;

                Group {
                  Background: (TexturePath: "Portals/IconBullet.png");
                  Anchor: (Width: 8, Height: 8, Top: 6, Right: 6, Left: 4);
                }

                Label {
                  TextSpans: @Text;
                  Style: @SectionValueStyle;
                }
              };

              FlexWeight: 1;
              LayoutMode: Top;

              Group #Title {
                LayoutMode: Top;

                Label #Title0 {
                  Anchor: (Top: 12, Bottom: 6);
                  Style: (FontSize: 24, TextColor: #dee2ef, FontName: "Secondary", RenderUppercase: true, HorizontalAlignment: Center);
                }

                Group {
                  Background: (TexturePath: "Portals/PortalTopDivider.png");
                  Anchor: (Width: 369, Height: 7);
                }
              }

              Group {
                LayoutMode: Left;
                Anchor: (Top: 8, Horizontal: 32);
                Background: (Color: #0a1119(0.8));
                Padding: (Horizontal: 8, Vertical: 5);

                Group {
                  Anchor: (Width: 48, Height: 48, Right: 12, Top: -2);
                  Background: (TexturePath: "../Common/WIPIcon.png");
                }

                Label {
                  Text: %server.customUI.portalDevice.wipText;
                  Style: (FontSize: 16, TextColor: #7c899f,  VerticalAlignment: Center, Wrap: true);
                  FlexWeight: 1;
                  Padding: (Vertical: 14);
                }
              }

              Group {
                LayoutMode: Top;
                Padding: (Vertical: 16, Horizontal: 32);

                Label {
                  Text: %server.customUI.portalDevice.timeLimitLabel;
                  Anchor: (Bottom: 8);
                  Style: @SectionTitleStyle;
                }

                Group #ExploTimeBullet {
                  LayoutMode: Left;

                  Group {
                    Background: (TexturePath: "Portals/IconBullet.png");
                    Anchor: (Width: 8, Height: 8, Top: 6, Right: 8, Left: 8);
                  }

                  Label #ExplorationTimeText {
                    Text: "??? mins";
                    Style: @SectionValueStyle;
                  }
                }

                Group #BreachTimeBullet {
                  LayoutMode: Left;
                  Visible: false;

                  Group {
                    Background: (TexturePath: "Portals/IconBullet.png");
                    Anchor: (Width: 8, Height: 8, Top: 6, Right: 8, Left: 8);
                  }

                  Label #BreachTimeText {
                    Text: "??? mins";
                    Style: @SectionValueStyle;
                  }
                }

                Group #Objectives {
                  LayoutMode: Top;
                  Anchor: (Top: 15);

                  Label {
                    Text: %server.customUI.portalDevice.objectivesTitle;
                    Anchor: (Bottom: 4);
                    Style: @SectionTitleStyle;
                  }

                  Group #ObjectivesList {
                    LayoutMode: Top;
                  }
                }

                Group #Tips {
                  LayoutMode: Top;
                  Anchor: (Top: 15);

                  Label {
                    Text: %server.customUI.portalDevice.tipsTitle;
                    Anchor: (Bottom: 4);
                    Style: @SectionTitleStyle;
                  }

                  Group #TipsList {
                    LayoutMode: Top;
                    Anchor: (Left: 8);
                  }
                }
              }

              Group #Pills {
                Anchor: (Top: 4, Left: 28);
                LayoutMode: Left;
              }

              Group {
                FlexWeight: 1;
              }

              Group #FlavorText {
                Anchor: (Top: 20, Bottom: 16);
                LayoutMode: Top;

                Group {
                  Anchor: (Bottom: 14, Height: 1);
                  Background: #212b37;
                }

                Label #FlavorLabel {
                  Text: "There be a lot of lines here.";
                  Style: (FontSize: 14, TextColor: #727b8b,  Wrap: true);
                  Padding: (Horizontal: 32);
                }
              }
            }

            Group #BottomStuff {
              LayoutMode: Bottom;

              Group #Summon {
                LayoutMode: MiddleCenter;
                Anchor: (Height: 126);
                Background: (TexturePath: "Portals/OpenButtonBackground.png");

                Group {
                  LayoutMode: Top;

                  Label {
                    Text: %server.customUI.portalDevice.consumesKey;
                    Style: (FontSize: 12, TextColor: #afafafff, RenderItalics: true, HorizontalAlignment: Center);
                  }

                  $C.@TextButton #SummonButton {
                    @Anchor = (Top: 8, MinWidth: 250, Bottom: 0);
                    Text: %server.customUI.portalDevice.summonPortal;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}

$C.@BackButton {}